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


/* Global properties ======================================================== */
* { margin:0; padding:0;}     /* turns off extra spacing around paragraphs*/



html{
	height:100%;				/* Force vertical scrollbars in VTz + Opera to prevent 'jumping' */
	margin-bottom:1px;
	overflow-y:scroll;			/* this line is for IE */
}

body {	
	background-color:#ffffff;
	font-family: 'Open Sans', Helvetica, sans-serif;
	font-color: black;
}

img { max-width: 100%; height: auto;}

a:link, a:visited, a:active {
	color: #164271;
	font-weight: bold;
	text-decoration: none;
}
a:hover {
	color: #c2252c;
	font-weight: bold;
	text-decoration: none;
}

.BannerTop {Background-color: #000; text-align: left;}
.BoundaryTop { 	width: 1000px; 	margin: auto;}
.BannerTable {	width: 100%; margin-bottom: 10px;}
.BannerTable td {text-align: left; vertical-align: top; padding-right: 10px;}
.BannerCell {width: 60%;}

.ColorBlue		{color: #164271;}
.ColorGray		{color: #C9CACB;}
.ColorYellow 	{color: #f5b32f;}
.ColorRed 		{color: #c2252c;} /* MM red */

.tagline, .tagline2 {	
	text-align: left;
	color: #000;		
	font-family: 'Open Sans', Helvetica, sans-serif;
	margin-top: 3px;
	margin-bottom:3px;
	margin-left: 0px;
}
h1{	
	text-align: center;
	vertical-align: top;
	color: #c2252c;	
	font-family: 'Open Sans', Helvetica, sans-serif;
	font-weight: bold;
	margin-top: 25px;
	margin-bottom:20px;
	margin-left: 0px;
}

h2{	
	color: #164271;		
	font-family: 'Open Sans', Helvetica, sans-serif;
	text-align: center;
	vertical-align: top;
	font-weight: bold;
}

h4 {clear: both; margin-bottom: 10px;}

.HeaderIconsMain {text-align: right; float: right}
.HeaderIcons2 {margin-left: auto; margin-right; auto;}
.HeaderIcon {float: right; }

img {border:0px; padding:0px;}
img.framed {border:1px; padding:0px; border-color:#000;}

img.center {					/* This is to center an image for all browsers */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.KeepTogether {display: inline-block;}

.Centered { margin: 0 auto; }

.Clear {clear: both;}
.ClearL {clear: left;}

.ContentsCentered {text-align: center;}
.ContentsLeft {text-align: left;}
.ContentsRight {text-align: right;}

.Copyright {
	color: #fff;
	padding-top: 20px;
	padding-bottom: 20px;
	vertical-align: middle;
	font-weight: normal;
}


/* CSS Hack for hiding the Facebook LIKE count */
div.fb-like span {
  display:block;
  width:48px !important;  
}
div.fb-like iframe {
  width:48px !important;
}
div.fb-like iframe.fb_iframe_widget_lift {
  width:48px !important;
}

#fadeshow2 .gallerylayer img { /* make all images inside fadeshow1 scale to 100% of slideshow width */
	width: 100%;
	height: auto;
	background-color: transparent;
}
/*
@media screen and (max-width: 999px){ #fadeshow2{	height: 237px !important;}}
@media screen and (max-width: 860px){ #fadeshow2{	height: 237px !important;}}
@media screen and (max-width: 600px){ #fadeshow2{	height: 237px !important;}}
@media screen and (max-width: 480px){ #fadeshow2{	height: 237px !important;}}
*/

.FrameGray {
	background-color: #164271;
	padding: 4px;
	-webkit-box-shadow: 0 0 4px rgba(132, 132, 132, .75);
	-moz-box-shadow: 0 0 4px rgba(132, 132, 132, .75);
	box-shadow: 0 0 4px rgba(132, 132, 132, .75);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}


.FloatR {float: right; padding-left: 10px;}
.FloatL {float: left; padding-right: 10px;}

.Footer {
	background-color: #000;
	clear: both;
}
/* THIS IS TO MAKE FOOTER STICKY*/
body {
  height: 100%;
  display: flex;
  flex-direction: column;
}
#Content {
  flex: 1 0 auto;
    width: 100%; /* for this layout */
}
.Footer {
  flex-shrink: 0;
}


.Link_Red:link, .Link_Red:visited, .Link_Red:active { color: #c2252c;	}
.Link_Red:hover {	color: #144071;	}

.Link_Copyright:link, .Link_Copyright:visited, .Link_Copyright:active {	color: #fff; font-weight: normal;}
.Link_Copyright:hover {	color:#f5b32f; font-weight: normal;}

.Link_Nav:link, .Link_Nav:visited, .Link_Nav:active {
	color: #144071;		
	font-family: Calibri, Arial, Helvetica, serif;
	font-weight: bold;
}
.Link_Nav:hover {
	color: #c2252c;		
	font-family: Calibri, Arial, Helvetica, serif;
	font-weight: bold;
}

.NavBar {
	background-color:#C9CACB;
	padding-top:5px;
	padding-bottom: 5px;
	border-bottom-color: #777;
	border-bottom-style: ridge;
	border-bottom-width: medium;
}
.NavTable {
	max-width:1020px;
	margin:auto;
	padding-top: 10px;
	padding-bottom: 10px;
}

.PadL {padding-left: 10px;}
.PadR {padding-right: 10px;}

.MarginR {margin-right: 10px;}
.MarginL {margin-left: 10px;}
.MarginR30 {margin-right: 30px;}
.MarginL30 {margin-left: 30px;}


a.PhoneMain {
	color: #fff;		
	font-family: Calibri, Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-align: right!important;
	margin-top: 20px!important;
}
a.PhoneMain:hover   {
	color: #c2252c;		
}

.PortfolioBox {
	/* float: left; */
	display: inline-block;
	width: 225px;
	text-align: center;
	vertical-align: top;
	margin-bottom: 20px;
	margin-right: 10px;
	margin-left: 10px;
	font-size: 14px; line-height: 16px;
}
.PortfolioBox h3 {font-size: 16px; line-height: 16px;}

.PortfolioBoxLast{	margin-right: 0px;}
.PortfolioBoxFirst{	margin-left: 4px;}


img.Portfolio1wide, img.Portfolio2wide, img.Portfolio3wide {
	float: left;
	margin-right: 20px;
	margin-bottom: 40px;
	}
img.Portfolio1wide 	{	max-width: 980px;}
img.Portfolio2wide {	max-width: 480px;}
img.Portfolio3wide {	max-width: 312px;}

.PortfolioTable {
	width: 100%;
	font-weight: bold;
	margin-bottom: 20px;
	margin-top: 20px;}
	
.Services {	text-align: center;}

.ServiceContainer {	text-align: center;}

.ServiceBox {
	float: left;
	width: 180px;
	text-align: center;
	vertical-align: top;
	margin-bottom: 20px;
	margin-right: 20px;
	font-size: 14px; line-height: 16px;
}
.ServiceBox h3 {font-size: 16px; line-height: 16px;}

.ServiceBoxLast{	margin-right: 0px;}
.ServiceBoxFirst{	margin-left: 4px;}

.SectionWhite {	background-color:#fff;}
.SectionWhitish {background-color:#eee;}
.SectionGrayDark {	background-color:#777;}
.SectionGray {	background-color:#C9CACB;}

.SlideshowContainer {
    width: 100%;
    text-align: center; 
    max-width: 1020px; 
    margin-left: auto;
    margin-right: auto;
}
.SlideshowHome, .SlideshowMobile {align-content:center; margin-top: 0px;}
/* .SlideshowPreviewImg {width: 988px; height: 237px; } */
/* that is not needed because img is set to max-width 100% anyway */

.SlideshowNav {
	width: 165px;
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
}
#slideshowtoggler {
	position: absolute; 
	margin-top: -60px; 
	z-index: 2000;
}

.TextBody {
	color: #000;
	font-family: Calibri, Arial, Helvetica, serif;
	text-align: left;
}


.VertBottom {vertical-align: bottom;}
.VertMid {vertical-align: middle;}
.VertTop {vertical-align: top;}

.W1000 {max-width: 1000px; margin: auto;}
.W1040 {max-width: 1040px; margin: auto;}
.W1020 {max-width: 1020px; margin: auto;}

.WheelBkgrdRed 			{background-image:url(images/wheel/red-project-planning.jpg); background-repeat:no-repeat; background-size:contain;}
.WheelBkgrdRed:hover 	{background-image:url(images/wheel/red-hover.jpg); background-repeat:no-repeat; background-size:contain;}
.WheelBkgrdOrange 		{background-image:url(images/wheel/orange-project-execution.jpg); background-repeat:no-repeat; background-size:contain;}
.WheelBkgrdOrange:hover {background-image:url(images/wheel/orange-hover.jpg); background-repeat:no-repeat; background-size:contain;}
.WheelBkgrdBlue 		{background-image:url(images/wheel/blue-startup-approach.jpg); background-repeat:no-repeat; background-size:contain;}
.WheelBkgrdBlue:hover 	{background-image:url(images/wheel/blue-hover.jpg); background-repeat:no-repeat; background-size:contain;}
.WheelBkgrdGreen 		{background-image:url(images/wheel/green-completion-checklist.jpg); background-repeat:no-repeat; background-size:contain;}
.WheelBkgrdGreen:hover 	{background-image:url(images/wheel/green-hover.jpg); background-repeat:no-repeat; background-size:contain;}

ul {margin-left: 30px; padding-top: 0px;}

ul.nav-main {
position:relative;
z-index:597;
width: 100%;
}
ul.nav-main, ul.nav-main li {
list-style:none;
margin:0;
padding:0;
display:inline;
list-style-type:none;
}
ul.nav-main li:hover > ul {
visibility:visible;
}
ul.nav-main li:hover {
position:relative;
z-index:599;
cursor:pointer
}
/* DISTANCE BETWEEN MENU ITEMS */
ul.nav-main li { display:inline; Padding-right:21px; padding-left:21px;}
ul.nav-main li.first {padding-left:10px; padding-right:21px;}
ul.nav-main li.last {padding-right:10px; padding-left:21px; }


ul.nav-sub li a.Link_Nav:hover {
color:#000;
}





/* DEFAULT FONT SIZES */ 
.tagline { font-size: 25px; font-style: italic;}
body {	font-size: 18px;}
.Link_Copyright {font-size: 14px; line-height: 30px; font-weight: normal;}
.Link_Nav {	font-size: 23px; margin-top: 3px; }
.TextBody {	font-size: 18px; line-height: 24px;}
.WebsiteTitle{	font-size: 90px;}
.PhoneMain {font-size: 28px;}
h1{ font-size: 22px;}
h2 {font-size: 20px; line-height: 24px;}
.Copyright{font-size: 14px;}

/* Large devices */ 
@media (min-width: 1020px) { 
	.MobileHide, .MobileSmallHide {display: inline-block;}
	.MobileShow, .MobileSmallShow {display: none;} 
	.Phone2, .HeaderIcons2 {display: none;}
	.Facebook2 {height: 18px; padding-left: 12px;}
	.table1000 {   display: block; width: 1000px; margin: auto;   }
	.WheelBkgrdRed, .WheelBkgrdOrange, .WheelBkgrdBlue, .WheelBkgrdGreen {	display: block; width: 500px; height: 350px; }

}
/* Tablets to Desktops */ 
@media all and (max-width: 1019px) {
	.BannerTop {width: 100%; padding-left: 10px; padding-right: 10px;}
	.Phone2, .HeaderIcons2  {display: none;}
	.Facebook2 {height: 18px; padding-left: 12px;}
	.BoundaryTop {width: 100%; }
	.Banner Table {width: 90%; background-color: blue; }
	.W1020 {width: none; max-width: none; padding-left: 10px; padding-right: 10px;}
	.W1020 .SlideshowHome {padding: none;}
	.SlideshowContainer {text-align: center; width: 100%;}
	.W1000 {width: none; max-width: none; }
	.table1000 {   display: block; width: none; margin: auto;   }
	.NavBar {padding-left: 0px; padding-right: 0px;}
	ul.nav-main {padding-left: 10px; padding-right: 10px;}
	ul.nav-main li.first {padding-right:12px; padding-left:0px;}
	ul.nav-main li.last {padding-right:0px; padding-left:12px;}
	ul.nav-main li {padding-right:12px; padding-left:12px;}
	.Footer {padding-left: 10px; padding-right: 10px;}
	.tagline { font-size: 16px;}
	.MobileShow {display: inline-block;}
	.MobileHide, MobileSmallHide, MobileSmallShow {display: none;}
	.FrameGray {margin-left: 10px; margin-right: 10px;}
	.PhoneMain {font-size: 26px; padding-right: 10px; text-align: right;}
	.WheelTable {margin: auto;}
	.WheelBkgrdRed, .WheelBkgrdOrange, .WheelBkgrdBlue, .WheelBkgrdGreen {	display: block; width: 350px; height: 245px; }
} 

/* Phones */ 
@media all and (max-width: 767px) {
	.MobileHide, .MobileSmallHide, .MobileSmallShow { display: none;}
	.MobileShow { display: inline-block;}
    .HeaderIcons{ margin-left: auto; margin-right: auto;}
	.BannerCell {width: 50%;}
	.PhoneMain {font-size: 26px;}
	.Facebook2 {height: 18px; padding-left: 12px; padding-top: 4px;}
	.Link_Nav {	font-size: 18px; margin-top: 0px; }
	.TextBody {font-size: 16px; line-height: 20px;}
	h1{ font-size: 20px;}
	h2 {font-size: 16px; line-height: 20px;}
	.ImgMobile {padding-left: 30px; padding-right: 20px; float: left;}
	.WheelBkgrdRed, .WheelBkgrdOrange, .WheelBkgrdBlue, .WheelBkgrdGreen {	display: block; width: 200px; height: 140px; }


/* very small devices ONLY HAVE A FEW DIFFERENCES to override the above */ 
@media all and (max-width: 480px) { 
	.FrameGray {margin-left: 10px; margin-right: 10px;}
	.BannerCell {width: 100%;}
	.PhoneMain, .HeaderIconsMain {display: none;}
	.Phone2 {display: block; font-size: 26px; text-align: center;}
    .HeaderIcons2 {display: block; margin-left: auto!important; margin-right: auto!important; margin-top: 10px; text-align: center;}
    .HeaderIcon {float: unset}
	.MobileSmallShow {display: block;}
	.MobileSmallHide {display: none;}
	.tagline {font-size: 12px; padding-right: 10%; text-align: center; }
	.Link_Nav {	font-size: 16px; }
	.Facebook2 {height: 16px; vertical-align: middle;}
	.TextBody {	font-size: 14px; line-height: 18px;}
	ul.nav-main li {padding-right:8px; padding-left:8px;}
	ul.nav-main li.first {padding-right:8px; padding-left:0px;}
	ul.nav-main li.last {padding-right:0px; padding-left:8px;}
	.WheelBkgrdRed, .WheelBkgrdOrange, .WheelBkgrdBlue, .WheelBkgrdGreen {	display: block; width: 130px; height: 91px; }
	.ServiceBox {	float: none; width: auto; margin-right: 0; margin-left: auto; margin-right: auto;} 
}

/* very small devices ONLY HAVE A FEW DIFFERENCES to override the above */ 
@media all and (max-width: 320px) {
	ul.nav-main li {padding-right:5px; padding-left:5px;}
	ul.nav-main li.first {padding-right:5px; padding-left:0px;}
	ul.nav-main li.last {padding-right:0px; padding-left:5px;}
	.TextBody {	font-size: 12px; line-height: 16px;}
}