body {
text-align: left;
background-color: #fff;
position:relative;
}

*{font-size:20px; font-family: "Poppins",Helvetica, sans-serif;  }

#wrapper { 
width:100%; 
} 

 
 
/*outer */
#header{
z-index:500;  
position:fixed;
top:0;
left:0;
width:100%;
height:84px;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
background-color:#000; 
} 
 
 


#headerClear{ height:84px;}/*for non banner pages*/ 
#top{ 
display:block;
overflow:hidden; 
} 



#strapLine{
/* position: absolute;
font-size:12.8px; font-weight:bold;
font-family:  "Montserrat" , Helvetica, sans-serif;
position:absolute; left:60px; width:calc(100% - 120px); text-align:center;
bottom:3px; color: #e1e1e1 */
	display: none
} 


 

#logo{  
z-index:10; display:block; position:absolute; 
left:10px;  
top:25px; 
width: 146px; height:34px; 
background-image: url(../images/logo.png);
background-size: contain;
background-repeat: no-repeat;
background-position:   0% 50%;
}

#logo span{
display:none
} 

@media only screen and (orientation:landscape)   {  
/*#logo{ left: calc(50% - 100px) ;}*/
}

#telephoneNo, #mobileTopSection li#telephoneNo {
	position:absolute; left:170px;   margin:0;
top: 30px;
height:24px; width:22px; 
background-image:url(../images/tel.png);
background-position:left 50%;
background-repeat:no-repeat;
background-size:contain; text-indent:-1000px; font-size:1px;
} 

#mobileTopSection li#getAQuote, li#getAQuote{ 
	position:absolute; left:208px; top: 23px;  width:auto; margin:0; }
	
#getAQuote a , #mobileTopSection li#getAQuote a{ display:block; height:34px; line-height:34px; color:#222;font-size:11.0px;  font-weight:bold;   padding:0px 10px; background-color:#FFF; border-radius:18px 18px}

 

#mobileTopSection{
position:absolute;
right:0;
top:0;
text-align:right;
width:100%;
line-height:82px;
height:82px;
z-index:1;
}
#mobileTopSection li {  
margin:  0px  0px 0 0 ; 
display:inline-block;
text-decoration:none;
text-align:right; 
height:80px;
cursor: pointer;
overflow:hidden;
} 


#mobileMenuOpener{ float:right;} 

/* main nav opener bars fixed width as span widens l/s */
#mobileTopSection li#mobileMenuOpener{width:42px; border-left:1px solid #87A4C6	;    position:relative;height:70px; margin:6px 12px 0 0px ;}
#mobileMenuOpener em{ 
display:block;  
height:2px; 
border:2px solid;
border-color:#fff;
width:32px;
border-radius:0px;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
position:absolute;
right:0px;
}

#mobileMenuOpener em#bar1 { top:23px} 
#mobileMenuOpener em#bar2 {top:  33px}
#mobileMenuOpener em#bar3 { top:43px}

#mobileMenuOpener.menuOpen em#bar1 {  
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top:35px; 
right:2px; 
width:100%;width:30px;
}
#mobileMenuOpener.menuOpen em#bar2{ opacity:0 ;}
#mobileMenuOpener.menuOpen em#bar3 {  
-webkit-transform:  rotate(-45deg); 
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top:35px;
right:2px;
width:100%;width:30px;
}
/* eo nav opener */ 




/* search account & cart icons inside span*/

#mobileTopSection li  a{ display:inline-block;  height:100%; width:100%;}
#mobileSearchOpener{
background-image: url(../images/nav/mobile/searchIconWhite.png);
background-size:20px auto;
background-position:50% 50%;  
position:relative; 
width:50px;
} 
 

#mobileAccount {
background-image: url(../images/nav/mobile/accountIcon.png);
background-size:18px auto;
background-position:50%  50%;
position:relative; 
width:25px;
}

#mobileBasket {
background-image: url(../images/nav/mobile/cartWhite.png);
background-size:22px auto;
background-position:50%  50%;
position:relative; 
width:25px;
}

/* icon labels & num in cart <strong> tag */  

@media only screen and (orientation:portrait)   {

 }			

@media only screen and (orientation:landscape)   {  
/*#mobileSearchOpener, #mobileBasket { background-position:right 50%;}
#mobileTopSection li { width:auto; margin:0 10px 0 10px;  }
#mobileTopSection li strong { text-shadow:1px 1px #222; text-transform:uppercase; display:block; color:#fff; text-align:left;  font-size:0.60em; padding-right:24px;     }*/
}
#mobileTopSection li strong { display:none}

 
#navMain  *{  }

#navMain  {
height:calc(100% - 80px);
overflow:auto;
position: fixed;
padding:10px  0px 100px  0px;
border-right:0px solid #fff;
border-top:0px solid #fff;
border-bottom:0px solid #fff;
background-color:#000; 
top:80px;
width: 100%;
z-index:10;
display: block;
top:-100%;
}

#navMain.navMainOpen { 
top:84px;
/*-webkit-transition:all 0.1s ease-in-out;
-moz-transition:all 0.1s ease-in-out;
-o-transition:all 0.1s ease-in-out;
transition:all 0.1s ease-in-out;*/
}

#navMain.navMainClose { 
/*-webkit-transition:all 0.1s ease-in-out;
-moz-transition:all 0.1s ease-in-out;
-o-transition:all 0.1s ease-in-out;
transition:all 0.1s ease-in-out;*/
}

#navMain.navMainHide{ /*top:-100%;*/ } 




#navMain ul  { padding: 0px; margin:0;}  

#navMain li {
	display:block;
	clear:both;
	margin:0px  auto;
	padding:0;
	position:relative; text-align:left; 	
font-size:16px; 
}
#navMain ul#navigationContainer{ display:none} 

#navMain ul li a{
display:block;
text-decoration:none;
text-transform: capitalize; 
padding: 6px  24px;
color:#fff;  
display:block; text-align:left;
font-weight: normal;
background:none;  font-size:20px;
}  

 
#navMain ul li a.mainCategory{ position:relative;  background:none; white-space: nowrap;  }

 

#navMain ul li a.mainCategory span, #navMain a#signInOpener span{
background:none;
background-image:url(../images/nav/mainCatPolygon.png);
background-repeat:no-repeat;
background-position:50%;
background-size:contain; margin-left:10px;	
width:15px; display:inline-block; height:9px; 
-webkit-transition: all 100ms;
-moz-transition: all 100ms;
-o-transition: all 100ms;
transition: all 100ms; 
}  

#navMain ul li a.mainCategoryOpen span, #navMain a#signInOpener.signInOpenerActive span {
	-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(-180deg);
}	
 
  
li#subServices  li  a.serviceOpener {  
font-weight:bold; padding:12px 20px; margin:0px auto 0 auto; display:block;  
background-image:url(../images/nav/mainCatPolygon.png);background-repeat:no-repeat;
background-position:90% 50% ;
}/*each cat*/

ul.serviceContainer li a, #navMain ul.serviceContainer li a{ font-size:16px; color:#FFF; font-weight:normal; padding: 8px 0px 6px  20px; display:block;}

li#subServices li  a span,
li#subSectors li  a span, 
#sectorsSub li a span {
display:block; 
width:36px; height:28px; 
float:left;
background-size:auto 22px;
background-position: 50% top;
margin:0 5px 0 0px; 
} /*icons from cat*/
#navMain ul.serviceContainer, ul.serviceContainer { display:none; 
  margin:0 15px 40px 15px; padding:  0px 20px  0px 30px; border-bottom:2px solid #999;} /*ul for items within each service sector cat and separate sectors for mobile only*/
#navMain ul.serviceContainer  li:last-child,  ul.serviceContainer li:last-child{  margin-bottom:30px; clear:both}

#navMain ul.serviceContainer, ul#sectorsList  , #navMain ul.serviceContainer, ul#sectorsList  { padding:10px 20px; margin:0 0  0px 0;  }

#navMain ul#sectorsSub { padding:10px 0; margin:0; display:none;  }

ul#sectorsList li a {margin:10px 0; padding:10px 0; }
#navMain ul#sectorsSub li a{ padding:14px 0 12px 20px}
  
#navMain ul#navigationContainer li.subContainer ul li p.navTitle, li.subContainer li p.navTitle {
color:#87A4C6;
font-weight:bold;
padding:0 0 0px 0;font-size:16px;
margin:30px auto 10px auto;
display:block;
width:100%;
height:18px;
}	




#navMain li#signIn { position:relative}		


#navMain  ul#portalNav{display:none; margin-left:30px; /*position:absolute; left:20px; top:30px; background:#111; padding: 10px  16px; width:220px; */  }		

ul#portalNav li , #navMain ul#navMainOuter  ul#portalNav li{
height:auto;
line-height:1em;
color:#FFF;
margin:0;
padding:0;
background:none;
display:block;
float:none;
text-align:left; 
}
ul#portalNav a ,  #navMain ul#navMainOuter    ul#portalNav a{
height:22px;
line-height:1em;
color:#FFF;
margin: 10px 10px;
padding:5px 0 5px 25px;
background:none;
display:block;
text-align:left;
font-size: 20px;
font-weight:normal;
background-position:0 50%;
background-size:12px auto;
background-image:url(../images/icons/RightArrowWhite.png);
background-repeat: no-repeat;
}
		
	
#contentWrapper{
	margin-top:84px;
padding:0px 0px  0px 0px;
z-index:1; 
}
.home #contentWrapper{  }

.home #contentWrapper{  z-index:1; }/* banners are outside */

.contentLeft  {height:100%; width:100%;}
.contentRight , .siteContent { width:100%;}
.contentFull {	width:100%;	}
 
 .contentFull p  img,  .contentRight p	 img  { max-width:100%; 	width:auto	}
 
.pagetitles , a.pagetitles:link, a.pagetitles:visited  {
font-size: 1.6em;  
}
.subtitles , a.subtitles:link, a.subtitles:visited  {
font-size: 1.2em;
}


.image-left, 
.image-right , 
.image-left-no-border  , 
.image-right-no-border {
padding:10px;
margin:25px auto;
float:none;
clear:both;
width:auto;
max-width:98%; height:auto;
display:block;
border:0px solid #f6f6f6
}

 	 
 
.grid li a:hover em.enlarge{  display:none;}	 /* enlarge icon on gallery  */
 



#searchWrap{ /*match listing options color/border*/
display:none ; 
height:76px; width:100%;   margin:0px auto 0 auto; z-index:10;
background-color:#fff; 

position:fixed; top:80px; left:0px;
padding:15px 15px 0 15px;
border-bottom:1px solid #888
}

#searchForm { display:block; width:auto;text-align:right; position:relative ;   }

 
#searchForm input[type=text]{
margin:0px;
padding: 0px;
float:left;
text-indent:15px;
width:100%;
max-width:500px;
height:45px;
line-height:45px;
border:1px solid #777;
border-radius:30px;
display:block;
font-size:1em;
color:#333;
background-image: url(../images/nav/mobile/searchIcon.png);
background-repeat: no-repeat;
background-size:16px auto;
background-position: 95%  50%;

} 

#searchForm input[type=submit]{
border: none;
background:none; text-indent:-20000px; cursor: pointer;
 position:absolute; right:0px;
height:40px; width:40px;
}  

#searchForm span#clearSearch{
	display:none
}
  

  


.buttons25{ 	width:25px; 	font-size:0.7em;  } 
.buttons50{ 	width:50px; 	font-size:0.7em;  } 
.buttons75{ 	width: 75px; font-size:0.7em; } 
.buttons100{ 	width: 100px;  font-size: 0.7em;} 
.buttons125{ width: 125px; font-size: 0.9em;} 
.buttons150{ width: 150px; font-size: 0.9em;} 
.buttons175{ width: 175px; font-size: 0.9em; } 
.buttons200{ width: 200px; font-size: 0.9em;  } 
.buttons250{ width: 250px; font-size: 0.9em;} 
.buttonsFULL{ width: 100%; font-size: 0.9em;} 


  
 






/* cookie alert over ride*/

#cookieAlertWrap{ 
padding:12px 8px;  
}

#cookieAlertWrap p{ 
font-size:0.8em; 
color:#e1e1e1;  
display:block; line-height:normal
}

#cookieAlertWrap p strong{ 
display:block;  
} 

#cookieAlertWrap #pageLink{ display:block; margin:0; padding:5px 0 0 0}

#cookieAlertWrap #pageLink:hover{ color:#069 }

#cookieAlertWrap #closer{
position:absolute; right:10px; top:10px;
}