body { text-align:left; position:relative; background-color:var(--pageColour); } 
* {font-family:var(--mainFont), Arial, Helvetica, sans-serif; font-size:var(--mainFontSize) ; } 
#wrapper { width:100%; min-width:1120px; margin:0px auto; } 
#header{ width:100%; min-width:1120px; z-index:5000;position:fixed; left:0; right:0; top:0px;padding-top:0px; } 
#top{ height:0px; position:relative; z-index:10; margin:0 auto; } 
#headerFillColour{ z-index:-1;background-color:var(--headerFillColour);position:absolute;top:0px;left:0px;width:100%; } 
.transparentHeader.hasBanners #headerFillColour, .hasBanners.transparentHeader #navMain{ background:none} 
/*.fixedWidth #top { width:1120px;max-width:100%; } 
.fullWidth #top { width:100%;max-width: 1440px; } */
#top {  width: 1120px; } 
#navMain{ z-index:5;display:block;position:absolute; left:0%;width:100%; padding-top: 8px; } 
#navMain ul, #navMain ul li{ list-style:none; position:relative } 


.hasBanners.bannersBelowHeader #bannerWrap{ top:100px; opacity:0.6} 
.hasBanners.bannersBelowHeader #contentWrapper{ margin-top:100px;} 
.noBanners #contentWrapper{ padding-top:100px; } 
.hasBanners.transparentHeader #contentWrapper { } 
#socialTop{right:0px;top:36px;text-align:right;}

#headerFillColour{ height:100px;border-top: 0px solid #c9e2d7; } 

#logo{ position:absolute; display:block; z-index:200; -webkit-transition:height 200ms; transition:height 200ms; top:8px;   width: 230px; height: 84px;   left:  -10px;border:0px solid red} 
#logo span{ background-size:contain; background-position:0% 50%;   }  
 
#logo span { height: 100%;   }
@media only screen and (max-width:1280px) {  
#logo{     }
#logo span {  }
} 
#hamburger{ display:none;} 
 
#navMain #nav_Home,	#nav_Home{display: none}	
 
#navMain a{font-weight:var(--navMainWeight) ;} 
#navMain a{color:var(--navFontColour) } 
.noBanners #navMain a{ color:var(--navFontColourNoBanners) } 
#socialTop{ position:absolute;width:auto; z-index:1;height:20px;} 
.fullWidth #socialTop{ right:20px;} 

#telephoneNumber{
	position: absolute;
	width: auto;
	height: 40px;
	line-height: 40px;
	padding-left: 10px; 	top: 30px;
	border-left: 1px solid  #fff;
} 

@media only screen and (max-width:1220px) {  	#telephoneNumber {border-left:none}}


#telephoneNumber.hidden, #telephoneNumber.hidden * {left:-1000000px;} 
#telephoneNumber.left {left:0px;text-align:left} 
#telephoneNumber.center {left:0px;right:0px; text-align:center} 
#telephoneNumber.right {right:0px;text-align:right} 
.fullWidth #telephoneNumber.right {right:20px;text-align:right} 
#telephoneNumber span, #telephoneNumber a{ font-family:var(--telFont); font-weight:var(--telFontWeight); font-size:14px; letter-spacing:normal; text-align:var(--telTextAlign); display:inline-block;height:20px;line-height:20px; } 
.noBanners #telephoneNumber span , .noBanners #telephoneNumber a {color:var(--telColourNoBanners) ;} 
.hasBanners #telephoneNumber span , .hasBanners #telephoneNumber a {color:var(--telColourBanners) ;} 
#telephoneNumber span{ background-image:var(--telephoneIconImg);background-size:auto 70%;display:block;float:left; width:26px; background-position:50% 65%;background-repeat:no-repeat; } 
.hasBanners #telephoneNumber span{-webkit-filter:brightness(var(--telephoneIconColorBanners) ); filter:brightness(var(--telephoneIconColorBanners) );} 
.noBanners #telephoneNumber span{-webkit-filter:brightness(var(--telephoneIconColorNoBanners) ); filter:brightness(var(--telephoneIconColorNoBanners) );} 
#socialTop{ z-index:6} 
#socialTop li{ display:block;float:left; text-align:center;margin-left:10px; } 

#socialTop li:last-child{ margin-right:0} 
#socialTop li a span { display:block; width:20px; height:20px; margin:0 auto; background-position:50% 50%; background-repeat:no-repeat; background-size:16px auto; text-indent: -100000px } 
#socialTop li a span{ -webkit-transition:all 100ms ease-in-out 0s; transition:all 100ms ease-in-out 0s; } 
#socialTop li a:hover span {background-size:20px; } 
#socialTop li a strong {display:none;} 
#socialTop li a:hover strong { display:none;} 
#navMain *{ z-index:10;  } 
#navMain {top:10px; padding-right: 60px;} 
#navMain ul { height:44px; position:relative; list-style:none; margin:10px auto  0px auto ;display:flex; width:920px;} 
 #navMain ul {justify-content:flex-end; } 
 
#navMain ul li a { text-align:center; display:block; padding:0px 7px; text-transform:var(--navTextTransform); text-decoration:none; height:44px;line-height:44px; color:var(--navFontColour);font-family:var(--navFont) ;font-size:var(--navFontSize);letter-spacing:var(--navLetterSpacing); position: relative} 
 
 #navMain ul li {padding: 0 0 0 0px;}
 
#navMain ul li.mainCategory a span{
	margin: 0 0 0 5px;
	width: 10px;
	height: 44px;
	display: block;
	float: right;
	position: relative;
	background-image: url(../images/maincatArrowpng.png);
	background-position: 50% 57%;
	background-size: contain;
	transition: 300ms;
} 
#navMain ul li.mainCategoryOpen a span {transform:rotate(-180deg); 	background-position: 50% 45%;} 

#navMain li:not(.mainCategory) :before { content:''; position:absolute; left:50%; bottom:0; width:0; height:3px; background-color:currentcolor; -webkit-transition:.2s; transition:.2s } 
.navBelowHeader #navMain li:not(.mainCategory) ::before {bottom:5px;} 
#navMain li:hover :before { width:100%;left:0px;} 
#navMain ul.subNav :before { content:none;} 
.headerFixed #navMain li:hover :before{ width: 0px} 
#navMain ul li a:hover , #navMain ul li.mainCategoryOpen a, #navMain ul li.mainCategoryOpen:hover a { text-decoration:none; } 
#navMain ul li.mainCategory:hover a, #navMain ul li.mainCategoryOpen a, #navMain ul li.mainCategoryOpen:hover a{  color:#fff;background-image:none; } 
li ul.subNav, #navMain ul li ul.subNav{ justify-content:none; width:320px; position:absolute; left:0px;top:44px;margin:0; height:auto; background-color:#222; padding:20px 10px 20px 10px ; opacity:0; visibility:hidden; transition:opacity 200ms ease-in-out 0s; } 
li.mainCategoryOpen ul.subNav, #navMain ul li.mainCategoryOpen ul.subNav{ display:block;opacity:1;visibility:visible; } 
#navMain ul li ul.subNav li , ul.subNav li { display:block;clear:both;width:100%;margin:4px auto;line-height:normal;height:auto;} 
ul.subNav li:last-child{ background-image:none;border-bottom:none} 
ul.subNav li a ,#navMain ul li ul.subNav a{ background:none; text-align:left; display:block; padding:6px 0px 6px 12px; text-transform:none; text-decoration:none; border:0; font-size:0.8em; line-height:1.4em; height:auto; color:#fff; margin:0px auto; -webkit-transition:none; white-space:normal; -moz-transition:none; -o-transition:none; transition:none; text-shadow:none; font-weight:300; } 
#navMain ul li ul li:last-child a { border-bottom:0; } 
#navMain ul li ul.subNav a:hover { color:#fff;text-decoration:underline; } 
#navMainViewFull, p#navMainViewFull{ display:none} 
#navMain li#nav_Contact a{ border: 1px solid #fff;border-radius:40px; height: 32px; line-height: 30px; margin: 7px 50px  0 30px; padding: 0 24px; font-weight: bold}
#navMain li#nav_Contact a:hover{ background-color: #000; border-color: #000;    }
#navMain li#nav_Contact a::before { background: none}  

/*border / top keeps inside maincat opener*/
#navMain ul li ul#navServices,#navServices{ position: fixed;width: 100%; left: 0px; padding: 40px 0  0px 0 ; background: #25442A;  top: 60px; border-top:40px solid #192d1c; }
#navMain ul li ul#navServices li, ul.subNav#navServices li{  padding:  5px  0;  position: relative;z-index: 2;	width: 1080px;	margin: 0 auto;position: relative}
 

#navMain ul li ul#navServices li:last-child a , ul.subNav#navServices li:last-child a { margin-bottom:  50px;}

#navMain ul li ul#navServices li.serviceLinkOnly{  padding: 0; height: 25px; line-height: 25px;}
#navMain ul li ul#navServices li.serviceLinkOnly  a{ margin: 0; padding: 0; height: 25px; line-height: 25px;  font-size: 15px;}

ul.subNav#navServices li#servicesTitle{   margin: 0 auto; background: #25442A;  }
ul.subNav#navServices li#servicesTitle h5{width: 1080px; margin: 0 auto;color: #fff; font-size: 13.6px;  height: 50px; line-height: 50px; }
#navMain ul li ul.subNav#navServices  a, #navServices li a  { 
	padding: 0 ; margin: 0; width: 320px;
	height: 50px;
	line-height: 50px;border: 0px dashed orange;
	font-weight:500;
	font-size: 17.5px;   position: relative
}
#navServices li a strong{ float: left;border: 0px dashed orange; width: 100px;}
#navServices li a:hover{ text-decoration: underline;}
 
#navServices li a .navIcon{ display: block; float: left; height: 50px; width: 50px;margin-right: 16px; background-size:60px; background-position: 50% 50%;}	
#navServices  li#nav_Assess  .navIcon { background-image:url("../images/icon-assess.png");background-size:50px auto ;  }
#navServices  li#nav_Design  .navIcon{ background-image:url("../images/icon-design.png"); background-size:50px auto;  }
#navServices  li#nav_Create  .navIcon{ background-image:url("../images/icon-create.png");background-size:40px auto;  }
#navServices  li#nav_Maintain  .navIcon { background-image:url("../images/icon-maintain.png"); background-size: 50px auto ;  }
#navServices  li#nav_Monitor  .navIcon { background-image:url("../images/icon-monitor.png"); background-size: 45px auto ;  }


#navServices li a .navArrow{ 
	display: block;
	float: left;
	height: 50px;
	width: 120px; 
	background-size: 25px auto;
	background-position: 70% 50%;
	background-image: url(../images/navRightArrowWhite.png); 
	transition: all 0.5s; opacity: 0;
	margin-left: -15px;  
}	

#navServices li a:hover  .navArrow{	  opacity: 1; margin-left: 0px;}

#navMain ul li ul#navServices li#navTextWrap , ul.subNav#navServices li#navTextWrap{ margin: 0 auto;padding: 0; position: relative;  height: 1px;  z-index: 9999 ; width: 1080px; border: 0px solid red}
#navTextWrap div.navText{
	position: absolute;
	top: 50px;
	left : 380px;
	padding-left: 90px;
	padding-top:  0px;
	height: 300px;
	width: 640px;
	border-left: 1px solid #fff;
	opacity: 0;
	transition: all 0.6s;
	visibility: hidden;
	z-index: 99999;
}
#navTextWrap div.navText.navTextActive{opacity: 1; display: block; visibility: visible}

#navTextWrap h6{color: #fff; margin: 0; padding: 5px 0; font-size: 20px; font-weight: bold;}
#navTextWrap   *  {color: #fff; margin: 4px 0; padding: 0; font-size: 17px; line-height: normal} 
#navTextWrap  * br{ display: block; height: 1px; margin: 4px; padding:  0px ; }

p.navTextReadMore,  .navTextReadMore{ display: block;margin: 15px 0 0 0;}



#navMain ul li ul.subNav#navServices   .navTextReadMore, #navServices li    .navTextReadMore  {
	display: block;
	border: 1px solid #fff;
	padding: 0px;
	width: 140px;
	height: 34px;
	line-height: 32px;
	text-align: center;
	margin:20px 0 0 0;border-radius: 44px;
	font-weight: bold;
	font-size: 12px;background-color: transparent;
}
#navMain ul li ul.subNav#navServices .navTextReadMore:hover  , #navServices li .navTextReadMore:hover  { color: #111; background-color: #fff;}

#contentWrapper { } 
#contentWrapper{ width:100%;margin:0px auto 0px auto;min-height:200px; }