@charset "UTF-8";
/* Globals */
/* ================================================== */

@font-face {
  font-family: Lato; /* set name */
  src: url(../fonts/Lato/Lato-Regular.ttf); /* url of the font */
}

@font-face {
  font-family: Lato-Bold; /* set name */
  src: url(../fonts/Lato/Lato-Bold.ttf); /* url of the font */
}


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0; 
  }


body {
  /* background-image:  url("../images/MPC_Desktop-2_2019.jpg");
  background-repeat: no-repeat;
  background-position: center; Center the image */
  background: #fff;/*  */
  color: #333;
  font-family: Lato, arial, helvetica, geneva, swiss, sunsans-regular, sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.2em;
  }


.alert {
	background-color:yellow;
	color:red;
}

.note {
	color:maroon;
}

.container {
  max-width: 1100px; /* this restricts the page width on large screens */
  background: #fff;
  padding: 0;
  box-shadow: 0px 0px 25px #999; 
  }

a, a:visited{
  text-decoration: none; 
  font-weight: bold;
  color:#1a41a0;  /* define for global inline links */
  }

a:active, a:hover {
  text-decoration: underline; 
  color: blue;  /* define for global inline links */
}


p {
  font-size: 1.2em;
  line-height: 1.5;
  font-weight: normal; 
  margin-bottom: 0;
}

ul { 
	list-style-position: outside;
	margin-left: 16px;
	padding-left:20px;
	font-size: 15px;
	}

ol  {
	list-style-type: square;
	list-style-position: outside;
	margin-left: 40px;
	font-size: 15px;
}


ol#home-sales {
	display: inline;
}

dl  {
	margin-left: 40px;
	font-size: 15px;
}

dt  {
	margin-top: 12px;
	font-size: 18px;
	font-weight: bold;
	font-family: Lato-Bold; 
}

dd  {
	margin-top: 5px;
	margin-left: 12px;
	font-weight: bold;
	font-family: Lato-Bold; 
    line-height: 1.3;
}


 
li {
	margin-top: 8px;
    line-height: 2.0;
}

ul li {
	list-style-image: url(../images/check-mark.png);
}

blockquote ul li {
	list-style-image: url(../images/check-mark.jpg);
}

table {
	margin-top: 16px;
}

td  {
	font-family: Lato, arial, helvetica, geneva, swiss, sunsans-regular, sans-serif;
    font-size: 18px;
	padding: 4px;
	width: 150px;
}

strong {
  font-weight: 700; }

#content hr {
	margin: 16px;
	background-color: black;
	height: 3px;
}

.clear { /* used by skeleton 2  */
  clear: both; }

.bio-photo {
	display: block;
	width:70%;
	height:70%;
}

.sidebar-photo {
	display: block;
	width:100%;
	max-width:240px;
	margin: 0 auto 10px auto;
}





/* Header */
/* ================================================== */

header { /* used for element ID */
	background-color: black;
	height:110px;
	padding: 5px 20px 10px 20px;
	z-index:200;
	/*box-shadow: 0px 25px 15px 0px #999; /* needs editing to cast shadow over slider */
	position: fixed;
	max-width: 1100px;
}

#site-header { /* used for style header content */
	text-align:left;
	/* outline:2px solid orange; used to test layout - comment out in production */
}

#header-left { /* used for style header content */
	text-align:left;
	margin-bottom: 10px;
	padding-top: 2px;
	width: 80px;
	margin-left: 0;
	float: left;
	display: inline-block;
   /* outline:1px solid red; used to test layout - comment out in production */
}

#header-center { /* used for style header content */
	text-align:left;
	padding-top: 2px;
	width: 32%;
	margin-left: 0;
	float: left;
	display: inline-block;
   /* outline:1px solid green; used to test layout - comment out in production */
}

#header-right { /* used for style header content */
	text-align:right;
	margin-bottom: 0px;
	padding-top: 0px;
	width: auto;
	margin-left: 0;
	float: right;
	display: inline-block;
   /* outline:1px solid orange;  used to test layout - comment out in production */
}

header .logo { /* used for style header content */
	width: 100%;
}

header .site-title { /* used for style header content */
	margin-left: 20px;
	width: 100%;
}

header .phone { /* used for style header content */
	margin-top:7px;
	margin-right:5px;
}

header .phone p { /* used for style header content */
	float:right;
}

header .phone a { /* used for style header content */
	color:white;
	font-size: 24px;
	font-weight: bold;
	float:right;
}

header .phone a:hover { /* used for style header content */
	color:#5374af;
}

header a.phone-text { /* used for style header content */
	display:block;
}

header a.phone-icon { /* used for style header content */
	display:none;
	font-size:24px;
	color:#9e3594;
}

header a.phone-icon:hover { /* used for style header content */
	color:#5374af;
}



/* Body */
/* ================================================== */

#content { /* used for element ID  */
  	background: white;
	margin-top: 110px;
	/* outline:2px solid red; used to test layout - comment out in production */
}


#flex {
	width: 100%;
	display: -webkit-flex; /* Safari */		
	display: flex; /* Standard syntax */
}

#sidebar{
    -webkit-flex: 1; /* Safari */
    -ms-flex: 1; /* IE 10 */
    flex: 1; /* Standard syntax */
}

#main {
    -webkit-flex: 1; /* Safari */
    -ms-flex: 1; /* IE 10 */
    flex: 1; /* Standard syntax */
	flex-grow: 2
}

#main li {
	font-family: Lato-Bold, arial, helvetica, geneva, swiss, sunsans-regular, sans-serif;
}

blockquote {
	text-indent: 15px;
}

#slider { /* used for element ID */
	width:100%;
	/* outline:2px solid purple; used to test layout - comment out in production */
}

#slider .caption {
	background-color:rgba(0,0,0,0.4); /* black with opacity */
	color:white;
}

#slider .subcaption {
	font-style: italic;
	font-weight:normal;
	font-size:1.1em;
}

#thumbs {
	position:relative;
	top:-95px;
	margin-bottom:-90px;
	/* outline:1px solid red; used to test layout - comment out in production */
}

#grid { /* used for article ID */
	padding:0 0 0 20px;
}

#main { /* used for article ID */
	padding:0px 30px 10px 20px;
	/* outline:1px solid navy;  used to test layout - comment out in production */
}

.secondary { /* used for article class */
	padding:10px 30px 20px 20px;
	/*outline:1px solid teal;  used to test layout - comment out in production */
}

#sidebar { /* used for aside ID */
	padding:14px 20px 20px 20px;
	margin:-3px 0px 0px 0px;
  	background:#fff;
	color:black;
	border-left:2px solid #000;
	/*outline:1px solid green;  used to test layout - comment out in production */
}

.team-bio {
	display:inline-block;width:45%;
}

.team-bio img {
	margin-right:10px;
}

aside  {
  	background:#fff;
}

.list {
	text-align: center;
}

p.indent {
	text-indent: 2em;
}

.mission {
	padding:0 25%;

}
.homesubtitle, .homesubtitle a {
	font-size:1.3em;
	color:black
}

.homesubtitle a:hover {
	font-size:1.3em;
	color:#9e3594;
	text-decoration:none;
}


img.left { /* used to size grid boxes */
	/*float: left;*/
	margin-right: 5px;
	width: 320px;
}

img.right { /* used to size grid boxes */
	/*float: right;*/
	margin-left: 5px;
	width: 320px;
}


#content h1 { /* used to style text content  */
	font-weight: normal;
	letter-spacing: 1px;
	line-height: 1.3em;
    font-size: 1.6em;
	color:black;
    margin-top: .5em; 
	}

#content h2 { /* used to style text content  */
	font-weight:600;
	letter-spacing: 1px;
    margin-top: .25em; 
	}


#main h1, #main h2, #main h3{ /* used to style text content  */
	font-weight:700;
	letter-spacing: 1px;
}

#main h1{ /* used to style text content  */
	font-weight: normal;
	font-size: 2.5em;
	font-family: Lato-Bold, arial, helvetica, geneva, swiss, sunsans-regular, sans-serif;
	text-transform: uppercase;
	color: green;
}

#main h2{ /* used to style text content  */
	margin-top: .5em;
	font-size:1.5em;
	line-height: normal;
	font-family: Lato-Bold, arial, helvetica, geneva, swiss, sunsans-regular, sans-serif;	
	text-transform: none;
	font-weight: bold;
	color:#1a41a0;
}

#main h3{ /* used to style text content  */
	margin-top: .5em;
	color:#1a41a0;
	font-family: Lato-Bold, arial, helvetica, geneva, swiss, sunsans-regular, sans-serif;	
	font-size:1.2em;
	font-style: italic;
    line-height: 1.3;
}

#main h4{ /* used to style text content  */
	font-size:1.1em;
	font-weight:bold;
	text-indent: 1.6em;
	margin-top:1em;
	letter-spacing: 1px;
}

#main p {
	margin-top: 10px;
}


.secondary#health {
	border-radius: 10px;
    background: green;
	padding:5px;
	margin: auto 5px;
	color: white;
	max-width:500px;
	min-height:150px;
}

.secondary#comfort {
	border-radius: 10px;
    background: rgb(26,65,160);
	padding:5px;
	margin: auto 5px;
	color: white;
	max-width:500px;
	min-height:150px;
}


.secondary#smart {
	border-radius: 10px;
    background: rgb(26,65,160);
	padding:5px;
	margin: auto 5px;
	color: white;
	max-width:500px;
	min-height:150px;
}


.secondary#certified {
	border-radius: 10px;
    background: green;
	padding:5px;
	margin: auto 5px;
	color: white;
	max-width:500px;
	min-height:150px;
}

.secondary.why {    /* attempt to make why boxes default size larger to home page; failed attempt! */
	min-height:350px;
}

.secondary h1, .secondary h2, .secondary h3{ /* used to style text content  */
	font-weight:normal;
	letter-spacing: 1px;
}

.secondary h1{ /* used to style text content  */
	font-size:1.5em;
	text-transform: uppercase;
}

.secondary h2 { /* used to style text content  */
	margin-top: .5em;
	font-size: 1.5em;
	line-height: normal;
	font-family: Lato-Bold, arial, helvetica, geneva, swiss, sunsans-regular, sans-serif;	
	text-transform: none;
	font-weight: bold;
	color:#1a41a0;
}

.secondary h3{ /* used to style text content  */
	font-size:1.2em;
	text-transform: uppercase;
	font-weight:normal;
	font-style:italic;
	color:#1a41a0;
}

#box-set {
	padding-left: 2%;
}

.mission p {
	font-style: italic;
}


#sidebar h1, #sidebar h2, #sidebar h3{ /* used to style text content  */
	font-weight:normal;
	color:#666;
	letter-spacing: 1px;
}

#sidebar h2{ /* used to style text content  */
	font-size:1.2em;
	text-transform: uppercase;
	line-height: 1.6;
	font-family: Lato-Bold, arial, helvetica, geneva, swiss, sunsans-regular, sans-serif;		font-weight: bold;
	color:#1a41a0;
}

#sidebar h3{ /* used to style text content  */
	font-size:1.2em;
}


#sidebar h4{ /* used to style text content  */
	font-size:1.0em;
	font-weight:bold;
	text-indent: 1.6em;
	margin-top:1em;
	letter-spacing: 1px;
}

#sidebar p{ /* used to style text content  */
	font-size:1.0em;
	font-weight:normal;
}
#sidebar p.quote{ /* used to style text content  */
	font-style: italic;
}

#banner { /* used for alert banner such as COVID-19 notice*/
	background-color: rgb(242, 175, 32);
	padding:5px 10px 0px 10px;
	/* outline:2px solid red; used to test layout - comment out in production */
}

#banner h2 { /* used for element ID */
	color: white;
	font-size: 28px;
	text-align:center;
	/* outline:2px solid red; used to test layout - comment out in production */
}


/*#sidebar img { this keeps the sidebar from overlapping the body content when resizing the viewport 
	max-width:100%;
}*/




.form { /* used for article ID */
	padding:0px 30px 20px 20px;
	margin-top:0px;
  	background:#fff;
  	font-family: Arsenal,Helvetica, Arial, sans-serif;
	font-weight:normal;
    font-size: 1.0em;
	color:#999;
	/* outline:1px solid teal; used to test layout - comment out in production */
}

input[type=text] {
    padding:5px; 
    border:2px solid #ccc; 
    -webkit-border-radius: 5px;
    border-radius: 5px;
	width:95%;
}

input[type=text]:focus {
    border-color:none;
}

textarea {
    padding:5px; 
    border:2px solid #ccc; 
    -webkit-border-radius: 5px;
    border-radius: 5px;
	width:95%;
	margin-left:0px;
}

input[type=submit] {
    padding:5px 15px; 
    background:#ccc; 
    border:0 none;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 10px;
	color:black;
	box-shadow: 0px -2px 2px 0px black inset; /* needs editing to cast shadow over slider */
}

input[type=submit]:hover {
    background:#bfecf0; 
	color:black;
}

input.button {
	outline: none;/* defined so buttons do NOT have an outline when selected */
}

.red { ;/* used for required form items */
	color:red;
}

.black { ;/* used for required form items */
	color:black;
}

.formcell {
	width:45%;
	display:inline-block;
}

/* Footer */
/* ================================================== */

footer { /* used for element ID */
	padding-top: 10px;
    min-height:50px;
    background: #f3f4f8;
	/* outline:1px solid olive; used to test layout - comment out in production */
}

#site-footer { /* used to style footer content  */
  font-size: 14px;
  overflow: hidden;
  clear: both;
  text-align: center;
  }



footer a, footer a:visited { /* used to style footer content  */
  color: #5374af; 
  font-weight:bold;
  text-decoration:none;
  font-style: normal;
}

footer a:hover, footer a:active { /* used to style footer content  */
  color: #5374af;
}

footer .phone {
	margin: 30px auto 0 auto;/* this centers the icon block in the first third column*/
	font-size: 24px;
	font-weight: bold;
	color: #8482a4;
	/* outline:1px solid brown; used to test layout - comment out in production */
}

footer .phone a, footer #phone a:visited {
	color: #8482a4;
}

footer .phone a:hover, footer #phone a:active {
	color: #9e3594;
}

footer .copyright { /* used to style footer content  */
  color:#000;
  font-size: 1.5em;
  margin-top:40px;
  margin-bottom:10px;
}

footer #social-icons {
	margin: 30px auto 0 auto;/* this centers the icon block in the first third column*/
	/*outline:1px solid maroon;  used to test layout - comment out in production */
}

.social-icon { /* used to style footer content  */
	padding-right:12px;
	display: inline-block; /* this causes the icons to display side-by-side*/
}

.badge-icon { /* used to style footer content  */
	padding:5px;
	margin-top:20px;
	display: inline-block; /* this causes the icons to display side-by-side*/
	width: 25%;
	vertical-align: middle;
	/*  	outline:1px solid maroon; used to test layout - comment out in production */
}

.badge-icon img{ /* used to style footer content  */
	width: 50%;
}

footer .address { /* used to style footer content  */
	color:#5374af;
	font-size: 16px;
    font-style: bold;
	font: Lato-Bold;
	font-weight:400;
	margin-top:30px;
	/* outline:1px solid maroon;  used to test layout - comment out in production */
}


/* #Media Queries */
/* ================================================== */


	/* Mobile Portrait Size for old phones */
@media only screen and (max-width: 320px) {

header { /* used for element ID */
	padding: 0px;
}


#header-left { /* used for style header content */
	width: 50px;	
	padding-left: 0px;
	margin-top:-25px;
   /* outline:1px solid orange; used to test layout - comment out in production */

}

#header-center { /* used for style header content */
	width: 75%;	
	padding-left: 5px;
	margin-top:-23px;
   /* outline:1px solid orange; used to test layout - comment out in production */
	
}

#header-right { /* used for style header content */
	background-color:#f0f6fc;
	display:block;
	float:none;
	margin-top:0px;
	width: 100%;
   /* outline:2px solid orange; used to test layout - comment out in production */
}

header .logo { /* used for style header content */
	width: 100%;
}

header .site-title { /* used for style header content */
	width: 100%;
}


header .phone { /* used for style header content */
	margin-top:7px;
}

header a.phone-text { /* used for style header content */
	display: none;
}

header a.phone-icon { /* used for style header content */
	display:none;
	margin-right:0;
	margin-right:-4%;
}



.mission {
	border-top:1px solid #1a41a0;
	border-bottom:1px solid #1a41a0;
	margin-bottom:30px;
	padding:5%;
}

.mission p {
	font-size: 0.9em;
}



#sidebar { /* used for aside ID */
	border-top:2px solid #000;
	border-left:none;
}

#social-icons {
  margin-top:5px;
}

footer .phone {
  margin-top:5px;/* added so that the text displays better vertically in the block */
  margin-bottom:10px;/* added so that the text displays better vertically in the block */
  text-align:center;/* added so that the text displays centered in the block */
}

.team-bio {
	display:inline-block;width:100%;
}

	.formcell {
	width:100%;
}

#flex {
	display: block; /* Standard syntax */
}



}


	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 321px) and (max-width: 549px) {


#header-left { /* used for style header content */
	width: 50px;	
	margin-top:-15px;
}

#header-center { /* used for style header content */
	width: 65%;	
	padding-top:7px;
	margin: 0px auto;
	display: block;
	margin-top:-10px;
}

#header-right { /* used for style header content */
	margin-left: 0px;
	float: none;
	display: block;
	}
	
header .phone { /* used for style header content */
	margin-top:7px;
}

header a.phone-text { /* used for style header content */
	display: none;
}

header a.phone-icon { /* used for style header content */
	display:block;
	margin-right:-5%;
}


.popup-gallery img {
	width:110px;
	height:110px;
}


		
#sidebar { /* used for aside ID */
	border-top:2px solid #000;
	border-left:none;
}


		
#social-icons {
  margin-top:5px;/* added so that the text displays better vertically in the block */
}

footer .phone {
  margin-top:5px;/* added so that the text displays better vertically in the block */
  margin-bottom:10px;/* added so that the text displays better vertically in the block */
  text-align:center;/* added so that the text displays centered in the block */
}

.team-bio {
	display:inline-block;width:100%;
}

.formcell {
	width:100%;
}


#flex {
	display: block; /* Standard syntax */
}



}

	/* Larger than phablet (also point when grid becomes active) */
@media only screen and (min-width: 550px) and (max-width: 810px) {

#header-left { /* used for style header content */
	width: 50px;	

}

#header-center { /* used for style header content */
	width: 50%;	
	padding-top:7px;
	margin: 0px auto;
	display: block;
}

#header-right { /* used for style header content */
	margin-left: 20px;
	float: none;
	display: block;
	}
	
header .phone { /* used for style header content */
	margin-top:7px;
}

header a.phone-text { /* used for style header content */
	display: none;
}

header a.phone-icon { /* used for style header content */
	display:block;
	margin-right:3%;
}



.team-bio {
	display:inline-block;width:100%;
}

.formcell {
	width:100%;
}




}




	
@media only screen and (min-width: 811px) and (max-width: 876px) {

#header-left { /* used for style header content */
	width: 50px;	
	padding-left: 0px;
}

#header-center { /* used for style header content */
	width: 33%;	
}

.team-bio {
	display:inline-block;width:100%;
}

.formcell {
	width:100%;
}



}




	/* Larger than tablet to standard 960  (devices and browsers) */
@media only screen and (min-width: 877px) and (max-width: 1000px) {
	
#header-left { 
	width: 50px;	
	padding-left: 0px;
}
#header-center {
	width: 38%;

	}
	

}



	/* Larger than desktop to standard 1024 (devices and browsers) */
@media only screen and (max-width: 1023px) {



}





/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/