/* Shared
–––––––––––––––––––––––––––––––––––––––––––––––––– */
  
  .showhide{ width: 100%; display: none;}
  
  .showhide2{ display: none;}
  
  .go-right{ 
  text-align: right;
  padding-right: 5px;
  }
  
   .go-center{ 
  text-align: center;}
  
  	.footerpc {
	position: relative;
	display: none;
	background-color: #006bc5;
	height: auto;
	min-height:200px;
	width:100%;
}
    .footermobile{
	position: relative;
	display: block;
	background-color: #006bc5;
	height: auto;
	min-height:200px;
	width:100%;
}
   .footer2pc {
	position: fixed;
  	left: 0;
  	bottom: 0;
	display: none;
	background-color: #006bc5;
	min-height: 80px;
	width:100%;
	padding-bottom: 20px;
}
  
  
.marquee{
padding-top:5px;
line-height:16px;
}
.strike { text-decoration: line-through; color: red;}
.parent{
	position: relative;
	height: auto;
	width: auto;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.updateButton {
	background-color:transparent;
	display:inline-block;
	cursor:pointer;
	color:#006bc5;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-size:12px;
	padding: 0;
	border: none;
	background: none;
	text-decoration:none;
}
.updateButton :hover {
	background-color:transparent;
}
.updateButton :active {
	position:relative;
	top:1px;
}
.showblueheader{ width: 100%; display: none;}
.formtext{ font-size: 14px; font-weight: 300; line-height: 18px; text-align: left;}
.formtextbold{ font-size: 18px; font-weight: 600; line-height: 22px; text-align: left; color:#39F}
.tabletextsmall{ font-size: 14px; font-weight: 400; line-height: 14px; text-align: left; color:#666}
.smalltext{ font-size: 12px; font-weight: 300; line-height: 14px; text-align: left;}
.phonelogo{
	position: relative;
	width: 100%;
	text-align: center;
	min-width:100%;
	background:#006bc5;
	margin: 0 auto;
	padding-top: 20px;
	padding-bottom: 20px;
	clear: both;
	}
.phoneicons{
	text-align: center;
	}
.phoneiconground{
	position: relative;
	width: 100%;
	min-width:100%;
	background:#FFF;
	margin: 0 auto;
	margin-bottom: -15px;
	}
.phoneicongroundcol{
	position: relative;
	width: 33%;
	text-align: center;
	background:#FFF;
	display: block;
	}
.button {
  border-radius: 100px;
}
.transparent{
  background:rgba(255,255,255,0.5);
}
.white a {color:#ffffff; text-decoration: none;  font-weight: 600;}
/* Large Product drill Down
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.left {
	position: relative;
	float: left;
	clear: both;	
}
.pumpaccessories {
  position: relative;
  width: 46.5%;
  height: 170px;
  margin-right: 10px;
  margin-bottom: 10px;
  box-sizing: border-box; 
  background-color: #FFF;
  text-align: center;
  display: block;
  float: left;
  }
  .pumpaccessories:hover {
	outline: 3px solid #4cb6ea;
	-webkit-box-shadow: 0 0 10px 5px #C9C9C9;
	box-shadow: 0 0 10px 5px #C9C9C9;}
	
	.pumpaccessories img{
  width: 90%;
  text-align: center;
  }
  
  .signincontainer {
	position: relative;
	width: 60%;
	height: auto; 
	margin: 0 auto;
	text-align: center;
	background-color: #FFFFFF; 
	box-sizing: border-box; 
	border-radius: 5px;
    border: 1px solid #666;
    padding: 20px;
	z-index: 9;
  }
  .signtable {
    margin: 0 auto;
	width: 90%;
}

.searchcontainer {
	position: relative;
	width: 100%;
	height: 30px; 
	float: left;
	background-color: #FFFFFF; 
	z-index: 9;
	clear: both;
  }
.logocontainer {
	position: relative;
	width: 100%;
	height: 30px; 
	float: left;
	background-color: #FFFFFF; 
	z-index: 9;
	clear: both;
  }
  .modalcontainer {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin-right: 20px;
  box-sizing: border-box; 
  margin-left: 20;
  }
  .modalcolumn {
	position: relative;
	width: 48%;
	height: 100%; 
	text-align:left;
	float: left;
	background-color: #FFFFFF; 
  }
    .modalspacer {
	position: relative;
	width: 4%;
	height: 100%; 
	float: left;
	background-color: #FFFFFF; 
  }
    .modalvertspacer {
	position: relative;
	width: 100%;
	height: 15px; 
	float: left;
	background-color: #FFFFFF; 
  }
    .modalimage {
	position: relative;
	width: 30%;
	height: auto; 
	text-align:left;
	float: left;
	background-color: #FFFFFF; 
	clear:both;
  }
    .modalimage img{
	max-width: 100px;
	height: auto; 
	text-align:left;
  }
    .modalcontent {
	position: relative;
	width: 70%;
	text-align:left;
	height: auto; 
	float: left;
	background-color: #FFFFFF; 

  }
  .socialpanel-small {
	position: relative;
	width: 100%;
	height: 70px; 
	text-align: center;
	margin-top: 1px;
	padding-top: 10px;
	float: left;
	background-color: #0082Cf; 
	clear: both;
	display: block;
  }
    .cardpanel-small {
	position: relative;
	width: 100%;
	height: 110px; 
	text-align: center;
	margin-top: 0px;
	padding-top: 10px;
	float: left;
	background-color: #FFF; 
	clear: both;
	display: block;
  }
    .cardpanel-large {
	position: relative;
	width: 100%;
	height: 50px; 
	text-align: center;
	margin-top: 2px;
	padding-top: 10px;
	float: left;
	background-color: #FFF; 
	clear: both;
	display: none;
  }
.submenu {
	position: relative;
	width: 100%;
	height: 34px; 
	float: left;
	background-color: #CCCCCC; 
	padding-top: 7px;
	margin-bottom: 50px;
	z-index: 9;
	-webkit-box-shadow: 0 12px 12px 0px #999;
    box-shadow: 0 12px 12px 0px #999;
	clear: both;
  }
  .submenu2 {
	position: relative;
	width: 100%;
	font-size: 12px; 
	font-weight: 300; 
	line-height: 18px; 
	text-align:center;
	height: 80px; 
	max-height: 80px;
	float: left;
	background-color: #ffffff; 
	padding-top: 5px;
	margin-bottom: 30px;
	z-index: 9;
	-webkit-box-shadow: 0 12px 12px 0px #999;
    box-shadow: 0 12px 12px 0px #999;
	clear: both;
  }

#videovim {
	width: 70%;
	height: auto; 
	float: left;
  }

  #drillbrands {
	position: relative;
	width: 210px;
	max-width: 210px;
	height: 210px;
	margin-right: 4px;
	margin-bottom: 4px;
	box-sizing: border-box; 
	background-color: #FFFFFF; 
	float: left;
  }
  #drillbrands:hover {
	outline: 3px solid #4cb6ea;
	-webkit-box-shadow: 0 0 10px 5px #C9C9C9;
	box-shadow: 0 0 10px 5px #C9C9C9;}
  #drillbrandschild1 {
	position: relative;
	width: 210px;
	max-width: 210px;
	height: 120px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	float: left;
  }
  #drillbrandschild1 img {
	vertical-align: middle;
	display: inline-block;
	width: 210px;
    max-width: 210px; /* You can use different numbers for max-width and max-height! */
	height: 100px;
    max-height: 120px;
    width: auto;
    height: auto;
	position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}
  #drillbrandschild2 {
	position: relative;
	width: 210px;
	max-width: 210px;
	height: 70px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	float: left;
	text-align: center;
  }
  
#drillbrandshome {
	position: relative;
	width: 49%;
	height: 210px;
	margin-bottom: 4px;
	box-sizing: border-box; 
	background-color: #FFFFFF; 
	float: left;
  }
  #drillbrandshome:hover {
	outline: 3px solid #4cb6ea;
	-webkit-box-shadow: 0 0 10px 5px #C9C9C9;
	box-shadow: 0 0 10px 5px #C9C9C9;}
  #drillbrandshomechild1 {
	position: relative;
	width: 100%;
	height: 120px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	float: left;
  }
  #drillbrandshomechild1 img {
	vertical-align: middle;
	display: inline-block;
	width: 95%;
    max-width: 210px; /* You can use different numbers for max-width and max-height! */
	height: 100px;
    max-height: 120px;
    width: auto;
    height: auto;
	position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}
  #drillbrandshomechild2 {
	position: relative;
	width: 95%;
	max-width: 210px;
	height: 70px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	float: left;
	text-align: center;
  }
  
/* End of large product drill down
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Related Items repeat
–––––––––––––––––––––––––––––––––––––––––––––––––– */

  #related{
	position: relative;
	width: 350px;
	max-width: 350px;
	margin-right: 10px;
	height: 130px;
	box-sizing: border-box;
	background-color: #FFFFFF;
	margin-bottom: 10px;
	padding-top: 6px;
	float: left;
  }
  #related:hover {
	outline: 3px solid #4cb6ea;
	-webkit-box-shadow: 0 0 10px 5px #C9C9C9;
	box-shadow: 0 0 10px 5px #C9C9C9;}
	
  #relatedchild1 {
	position: relative;
	width: 90px;
	margin-right: 5px;
	margin-top: 10px;
	max-height: 100px;
	height: 100px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	float: left;
  }
	
	#relatedchild1  img {
	vertical-align: middle;
	display: inline-block;
    max-width: 90%; /* You can use different numbers for max-width and max-height! */
    max-height: 90%;
    width: auto;
    height: auto;
	position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}
	
  #relatedchild2 {
	position: relative;
	width: 190px;
	max-width: 190px;
	height: 120px;
	max-height: 100px;
	margin-top: 15px;
	margin-right: 5px;
	display: table-cell;
	text-align: left;
	box-sizing: border-box;
	background-color: #FFFFFF;
	float: left;
  }
    #relatedchild3 {
	position: relative;
	width: 50px;
	max-width: 50px;
	height: 100px;
	height: 100px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	float: left;
	text-align: center;
  }
  	#relatedchild3  img {
	vertical-align: middle;
	display: inline-block;
    max-width: 70%; /* You can use different numbers for max-width and max-height! */
    max-height: 70%;
    width: auto;
    height: auto;
	position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}
   

/* End of Related Items
–––––––––––––––––––––––––––––––––––––––––––––––––– */



/* Large Pump Usage drill Down
–––––––––––––––––––––––––––––––––––––––––––––––––– */
  #drillpump {
	position: relative;
	width: 96%;
	margin-right: 0px;
	height: 220px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	margin-bottom: 10px; 
	float: left;
  }
  #drillpump:hover {
	outline: 3px solid #4cb6ea;
	-webkit-box-shadow: 0 0 10px 5px #C9C9C9;
	box-shadow: 0 0 10px 5px #C9C9C9;}
  #drillpumpchild1 {
	position: relative;
	width: 100%;
	max-height: 223px;
	height: 223px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	float: left;
  }
   #drillpumpchild1 img {
	vertical-align: middle;
	display: inline-block;
    max-width: 100%; /* You can use different numbers for max-width and max-height! */
    max-height: 100%;
    width: 100%;
    height: 100%;
	position: absolute;
	}
  #drillbranshomechild2 {
	position: relative;
	width: 100%;
	height: 40px;
	margin-top: 10px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	float: left;
	text-align: center;
  }
   
  
/* End of large Pump Usage drill down
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Large Product drill Down
–––––––––––––––––––––––––––––––––––––––––––––––––– */
  #drilllarge {
	position: relative;
	width: 98.333%;
	max-width: 98.333%;
	margin-right: 0px;
	height: 500px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	margin-bottom: 10px; 
	border-style: solid;
    border-width: 1px;
	border-color: #DDD;
	float: left;
  }
  #drilllarge:hover {
	outline: 3px solid #4cb6ea;
	-webkit-box-shadow: 0 0 10px 5px #C9C9C9;
	box-shadow: 0 0 10px 5px #C9C9C9;}
  #drillchild1 {
	position: relative;
	width: 95%;
	max-width: 95%;
	margin-right: 10px;
	margin-left: 10px;
	height: 260px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	float: left;
  }
  #drillchild1 img {
	vertical-align: middle;
	display: inline-block;
    max-width: 98%; /* You can use different numbers for max-width and max-height! */
    max-height: 90%;
    width: auto;
    height: auto;
	position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}
  #drillchild2 {
	position: relative;
	width: 95%;
	max-width: 95%;
	margin-right: 10px;
	margin-left: 10px;
	height: 230px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	float: left;
	text-align: center;
  }
  
/* End of large product drill down
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Medium Product drill Down
–––––––––––––––––––––––––––––––––––––––––––––––––– */
  #drillmedium {
	position: relative;
	width: 96%;
	margin-right: 10px;
	height: 440px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	margin-bottom: 10px; 
	float: left;
  }
  #drillmedium:hover {
	outline: 3px solid #4cb6ea;
	-webkit-box-shadow: 0 0 10px 5px #C9C9C9;
	box-shadow: 0 0 10px 5px #C9C9C9;}
  #drillmediumchild1 {
	position: relative;
	width: 100%;
	margin-right: 10px;
	margin-left: 10px;
	height: 260px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	float: left;
  }
  #drillmediumchild1 img {
	vertical-align: middle;
	display: inline-block;
    max-width: 90%; /* You can use different numbers for max-width and max-height! */
    max-height: 90%;
    width: auto;
    height: auto;
	position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}
  #drillmediumchild2 {
	position: relative;
	width: 100%;
	margin-right: 10px;
	margin-left: 10px;
	height: 180px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	float: left;
	text-align: center;
  }
  
/* End of large medium drill down
–––––––––––––––––––––––––––––––––––––––––––––––––– */

#parent { height: 240px; width: 9%; float: left; display: inline-block; margin-right: 8px; background-color: #FFFFFF; margin-bottom: 8px; position: relative; }
#wrapper { height: 240px; width: 136px; min-height: 220px; display: inline-block; outline: 2px solid #F1F1F1; position: relative}

#smallwrapper { height: 240px; width: 16%; min-height: 220px; display: inline-block; background-color: #FFFFFF; outline: 2px solid #DDD; position: relative}
#smallwrapper:hover { outline: 2px solid #4cb6ea;-webkit-box-shadow: 0 0 20px 10px #C9C9C9;
box-shadow: 0 0 20px 10px #C9C9C9;}
#content { float: left; height: 140px; line-height: 130px; width: 100%; margin:0 auto; display: inline-block; text-align:center; position: relative;}
#content img {
	vertical-align: middle;
	display: inline-block;
    max-width: 90%; /* You can use different numbers for max-width and max-height! */
    max-height: 90%;
    width: auto;
    height: auto;
	position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}
#content2 { float: left; height: 100px; width: 100%; margin:0 auto; display: inline-block; text-align:center; position: relative;}

#parentlarge { height: auto; width: 300px; float: left; display: inline-block; margin-right: 8px; margin-bottom: 8px; background-color: #FFFFFF; position: relative;}

#productmedium { vertical-align: middle; height: auto; min-height: 100px; width: 96%; float: left; display: inline-block; padding-top: 10px; padding-left: 10px; padding-right: 10px; background-color: #FFFFFF; position: relative;}
#imagemedium{ vertical-align: middle; height: auto; min-height: 100px; width: 96%; float: left; display: inline-block; padding-top: 20px; padding-left: 10px; padding-right: 10px; background-color: #FFFFFF; position: relative;}
#imagemedium2{ vertical-align: middle; height: 170px; min-height: 170px; width: 98%; float: left; display: inline-block; padding-top: 5px; padding-left: 0px; padding-right: 0px; background-color: #FFFFFF; position: relative;}

#productlarge { vertical-align: middle; height: auto; min-height: 50px; width: 96%; float: left; display: inline-block; padding-top: 10px; padding-right: 10px; background-color: #FFFFFF; position: relative;}
#imagelarge { vertical-align: middle; height: auto; min-height: 100px; width: 96%; float: left; display: inline-block; padding-top: 10px; padding-left: 0px; padding-right: 10px; background-color: #FFFFFF; position: relative;}

#productlargetangye { display: table-cell; height: 400px; min-height: 400px; width: 96%; float: left; padding-top: 10px; padding-left: 10px; padding-right: 10px; background-color: #FFFFFF; position: relative; }
#imagelargetangye { vertical-align: middle; height: 400px; min-height: 400px; width: 96%; float: left; display: inline-block; padding-top: 10px; padding-left: 10px; padding-right: 10px; background-color: #FFFFFF; position: relative;}

#imagelarge img {
	vertical-align: middle;
	display: inline-block;
    max-width: 100%; /* You can use different numbers for max-width and max-height! */
    max-height: 100%;
	min-height: 80px;
    width: auto;
    height: auto;
	position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}
	
#imagemedium img {
	vertical-align: middle;
	display: inline-block;
    max-width: 100%; /* You can use different numbers for max-width and max-height! */
    max-height: 100%;
    width: auto;
    height: auto;
	position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}	
	
	#imagemedium2 img {
	vertical-align: middle;
	display: inline-block;
    max-width: 100%; /* You can use different numbers for max-width and max-height! */
    max-height: 100%;
    width: auto;
    height: auto;
	position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}


#wrapperlarge { height: 440px; min-height: 440px; width: 300px; display: inline-block; background-color: #FFFFFF; outline: 2px solid #F1F1F1; position: relative}
#wrapperlarge:hover { outline: 2px solid #4cb6ea;}

#highlightlarge { height: 460px; min-height: 460px; width: 300px; display: inline-block; background-color: #FFFFFF; outline: 2px solid #F1F1F1; position: relative}
#highlightlarge:hover { height: 460px; min-height: 460px; outline: 2px solid #4cb6ea; -webkit-box-shadow: 0 0 20px 10px #C9C9C9;
box-shadow: 0 0 20px 10px #C9C9C9;}

#contentlarge { float: left; height: 270px; line-height: 270px; width: 300px; margin:0 auto; display: inline-block; text-align:center; position: relative; overflow: hidden;}
#contentlarge img {
	vertical-align: middle;
	display: inline-block;
    max-width: 90%; /* You can use different numbers for max-width and max-height! */
    max-height: 90%;
    width: auto;
    height: auto;
	position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}
#content2large { float: left; height: 250px; min-height: 250px; width: 300px; display: inline-block; vertical-align: middle; text-align:center; position: relative;}

#push
{
	min-height: 100px;
}
#cleardivs{clear: both;}

ul.products li {
    width: 136px;
	margin-right: 3px;
    display: inline-block;
}

#productcontainer {
    width: 136px;
	margin-right: 3px;
    display: inline-block;
}

#div1 {
    width: 136px;
    height: 156px;
    padding: 10px;
	text-align: center;
    float:left;
    clear: left;
}
#div2 {
    width: 136px;
    height: 80px;
    padding: 10px;
	text-align: center;
    float:left;
}
  .product-image {
    width: 90%;
	height: 150px;
	min-height: 150px;
	text-align: center;
    display: table-cell;
	vertical-align: middle;
	
}
  .product-text {
    width: 90%;
	height: 80px;
	min-height: 80px;
	text-align: center;
    display: table-cell;
	vertical-align: middle;
	float:left;
}
  .searchbox {
    display: table-cell;
	vertical-align: middle;
	float:left;
}
ul.accreditation li {
    width: 140px;
    display: inline-block;
}
ul.productselector li {
    width: 265px;
	margin-right: 5px;
    display: inline-block;
}
ul.accreditationlarge li {
    width: 150px;
    display: inline-block;
}

/* PDF button placer
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#pdf1 {
	position: relative;
	width: 80px;
	height: 60px;
	z-index: 100;
	left: 5px;
	top: 0px;
}

/* Headers and Footers
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#header {
		float:left;
		padding:15px 0;
		min-width:100%;
		min-height:100px;
		background:#4cb6ea;
}
#footer {
		float:left;
		padding:15px 0;
		min-width:100%;
		min-height:100px;
		background:#006bc5;
		display: none;
	}
		#footerblue {
		float:left;
		padding:15px 0;
		min-width:100%;
		min-height:60px;
		background:#FFFFFF;
		display: none;
	}
		#footerwhite {
		float:left;
		padding:15px 0;
		min-width:100%;
		min-height:60px;
		background:#FFFFFF;
		display: none;
	}
#smallfooter {
		display: block;
	}

/* Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.tomorrowtext {
  color:#61c090;
}
.section {
  padding: 2rem 0 2rem;
  text-align: center;
}
.cartbutton {
  text-align: center;
}
.section-heading,
.section-description {
  margin-top: 1.0rem;
  margin-bottom: 1.0rem;
  text-align: center
}
.section-descriptionwhite {
  margin-top: 1.0rem;
  margin-bottom: 1.0rem;
  text-align: center;
  color: white;
  text-decoration: none;
}

.parfitbanner { display: none; }
.textdescriptions { display: none; }
.blueproductheaders {
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  vertical-align: middle;
  margin-bottom: 10px;
  background-color: #006bc5;
  color: #fff;
}

.inner {
    width: 95%;
    margin: 0 auto;
	text-align: center;
}
.smalltext {
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 18px;	
	color: #222
}
/* Hero
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#prod_disc_code{
 width:280px;   
}
.fullheader{display:block; background-color: #FFF; margin-bottom: 50px;}
.fullheadershort{display:block; background-color: #FFF; min-height: 130px; padding-top: 10px;
	clear: both;}
.fullheadershortmain{display:block; background-color: #FFF; min-height: 60px; padding-top: 10px;-webkit-box-shadow: 0 12px 12px 0px #999;
    box-shadow: 0 12px 12px 0px #999;
	clear: both;}
.phoneheader{display:block;}
.phones {
  position: relative;
}
.phone {
  position: relative;
  max-width: 80%;
  margin: 3rem auto -12rem;
}
.phone + .phone {
  display: none;
}

/* Values
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.values {
  background-size: cover;
  color: #fff;
  padding-bottom: 1rem;
}
.value-multiplier {
  margin-top: 0rem;
  margin-bottom: 0rem;
  color: #ffffff;
}
.value-heading {
  margin-bottom: .3rem;
}
.value-description {
  opacity: .8;
  font-weight: 300;
}

/* Help
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.get-help {
  border-bottom: 1px solid #ddd;
}

/* Categories
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.categories {
  background-image: url('//www.tidyco.co.uk/include/css/images/values-bg2.jpg');
  background-size: cover;
  color: #fff;
}
.categories .section-description { 
  margin-bottom: 4rem;
}

/* Bigger than 200 */
@media (min-width: 200px) {
	
	/* Online cat css*/
.desktop{ display: none;}	
.tablet{ display: none;}
.supertablet{ display: none;}
.mobile{ display: block;}
.showhide{ width: 100%; display: none;}
.footer2pc {
	position: relative;
	display: none;
	background-color: #006bc5;
	min-height: 60px;
	width:100%;
	padding-bottom: 20px;
}

  .signincontainer {
	position: relative;
	width: 90%;
	height: auto; 
	margin: 0 auto;
	text-align: center;
	background-color: #FFFFFF; 
	box-sizing: border-box; 
	border-radius: 5px;
    border: 1px solid #666;
    padding: 20px;
	z-index: 9;
  }
  
    .signtable {
    margin: 0 auto;
	width: 90%;
}	
	.eqi4-container {
  width: 96%;
  border: 0px solid black;
  text-align: center;
  margin-bottom: 15px;
  margin-left: 2%;
}
.eqi4-container img{
  max-width: 100%;
  height: auto;
}

.eqi4-container div large{
  width:96.0%;
  text-align: center;
  height: auto;
  margin-bottom: 20px;
}
.eqi4-container div small{
   width:76.0%;
  text-align: center;
  padding-top:20px;
  margin-bottom: 20px;
  height: auto;
}

.eqi4-container div left{
  width:33.0%;
  height: auto;
  text-align: left;
  margin-bottom: 20px;
}

.eqi4-container div center{
  width:33.0%;
  height: auto;
  text-align: center;
  margin-bottom: 20px;
}
.eqi4-container div right{
  width:33.0%;
  height: auto;
  text-align: right;
  margin-bottom: 20px;
}
	
	.footerpc {
	position: relative;
	display: none;
	background-color: #006bc5;
	height: auto;
	min-height:200px;
	width:100%;
}
    .footermobile{
	position: relative;
	display: block;
	background-color: #006bc5;
	height: auto;
	min-height:700px;
	width:100%;
}
	
#catprodimage{ vertical-align: middle; height: 361px; min-height: 361px; width: 100%; float: left; display: inline-block; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-right: 1px solid #CCC; border-left: 1px solid #CCC; border-bottom: 1px solid #CCC; background-color: #FFFFFF; position: relative;}

#catprodimage img {
	vertical-align: middle;
	display: inline-block;
    max-width: 80%; /* You can use different numbers for max-width and max-height! */
    max-height: 80%;
    width: auto;
    height: auto;
	position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}
	
#catprodcontainer { vertical-align: middle; height: auto; min-height: 100px; width: 100%; float: left; display: inline-block; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-bottom: 1px solid #CCC; background-color: #FFFFFF; border-right: 1px solid #CCC; position: relative;}

#catprodinfo { vertical-align: middle; height: auto; min-height: 100px; width: 100%; float: left; display: inline-block; padding-bottom: 15px; padding-top: 0px; padding-left: 0px; padding-right: 0px; background-color: #fff; position: relative;}

#catprodavail { vertical-align: middle; height: auto; min-height: 100px; width: 100%; float: left; display: inline-block; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; padding-right: 0px; background-color: #fff; position: relative;}

#catprodlist { vertical-align: middle; height: 30px; min-height: 30px; width: 100%; float: left; display: inline-block; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; padding-right: 0px; background-color: #FFF; border-top: 1px solid #CCC; position: relative; text-align: center;}

#catprodbuy { vertical-align: middle; height: 50px; min-height: 50px; width: 100%; float: left; display: inline-block; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; padding-right: 0px; background-color: #FFF; border-top: 1px solid #CCC; position: relative;}

#catprodqty { vertical-align: middle; height: 40px; min-height: 40px; width: 100%; float: left; display: inline-block; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; padding-right: 0px; background-color: #FFF; border-top: 1px solid #CCC; position: relative;}

#catprodbase { vertical-align: middle; height: 48px; min-height: 48px; width: 100%; float: left; display: inline-block; padding-bottom: 0px; padding-top: 10px; padding-left: 0px; padding-right: 0px; background-color: #FFF; border-top: 1px solid #CCC; position: relative;}

/* End Online cat css*/
	
  .phoneonly {
  position: relative;
  width: 100%;
  font-size: 16px;
  line-height:30px;
  text-align: center;
  margin: 0 auto;
  padding: 0 0px;
  box-sizing: border-box; 
  background-color : transparent;
  clear: both;
  display: block;
  }
  .phoneonlytel {
  position: relative;
  width: 100%;
  font-size: 22px;
  line-height:30px;
  margin: 0 auto;
  text-align: center;
  box-sizing: border-box; 
  padding-top: 10px;
  padding-bottom: 10px;
  clear: both;
  display: block;
  }
	
	.showhide{ width: 100%; display: none;}
	
	.icon{
	width: 20%;
	display: inline-block;
	position:relative;
	vertical-align: middle; 
	min-height: 40px;
	float: left;
}
 #iconindustrial{ vertical-align: middle; height: auto; min-height: 150px; width: 100%; float: left; display: inline-block; padding-top: 0px; padding-left: 0px; padding-right: 0px; background-color: #FFFFFF; position: relative; overflow: hidden;
}
#productindustrialnarrow { vertical-align: middle; height: auto; min-height: 50px; width: 100%; float: left; display: inline-block; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-bottom: 1px solid #CCC; background-color: #FFFFFF; position: relative;}

.iconholder{
	position:relative;
	width: 50%;
	display: inline-block;
	height: 35px;
	vertical-align: middle; 
	float: left;
}
.iconnote{
	width: 20%;
	display: inline-block;
	position:relative;
	vertical-align: middle; 
	text-align: left;
	min-height: 40px;
	float: right;
}
	
	#portalquotewide {
	position: relative;
	width: 100%;
	margin-right: 4px;
	margin-bottom: 4px;
	box-sizing: border-box; 
	background-color: #FFFFFF; 
	float: left;
  }
  #portalquote {
	position: relative;
	width: 100%;
	margin-right: 4px;
	margin-bottom: 4px;
	box-sizing: border-box; 
	background-color: #FFFFFF; 
	float: left;
  }
	
	.servicepanels { height: 60px; min-height: 60px; width: 98%; display: inline-block; background-color: #F1F1F1; outline: 1px solid #333; position:relative; margin-right: 10px; float:left;}
.servicepanelsimage { height: 60px; min-height: 60px; width: 20%; display: inline-block; position:relative; padding-left: 10px; padding-top: 10px;margin-right: 5px; float:left}
.servicepanelstext { height: 60px; min-height: 60px; width: 70%; text-align: center; padding-top: 20px; display: inline-block; position:relative; float:left; }
	
	#drillbrandshome {
	position: relative;
	width: 46%;
	height: 230px;
	margin-left: 10px;
	margin-bottom: 10px;
	box-sizing: border-box; 
	background-color: #FFF; 
	outline: 3px solid #F1F1F1; 
	float: left;
  }
  #drillbrandshome:hover {
	outline: 3px solid #4cb6ea;
	-webkit-box-shadow: 0 0 10px 5px #C9C9C9;
	box-shadow: 0 0 10px 5px #C9C9C9;}
  #drillbrandshomechild1 {
	position: relative;
	width: 99%;
	height: 110px;
	box-sizing: border-box; 
	background-color: #FFF;
	float: left;
  }
  #drillbrandshomechild1 img {
	vertical-align: middle;
	display: inline-block;
	width: 90%;
    max-width: 90%; /* You can use different numbers for max-width and max-height! */
	max-height: 90%; /* You can use different numbers for max-width and max-height! */
    height: auto;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}
  #drillbrandshomechild2 {
	position: relative;
	width: 99%;
	height: 70px;
	box-sizing: border-box; 
	background-color: #FFF;
	float: left;
	text-align: center;
  }
	
	.showblueheader{ width: 100%; display: none;}

	
	#phonecart {
	position: relative;
	width: 94%;
	max-width: 98%;
	margin-right: 10px;
	margin-left: 20px;
	height: auto;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	margin-bottom: 10px; 
	border-style: solid;
    border-width: 1px;
	border-color: #DDD;
	float: center;
  }
	
	#drilllarge {
	position: relative;
	width: 99.333%;
	max-width: 99.333%;
	margin-left: 0px;
	height: 390px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	margin-bottom: 10px; 
	border-style: solid;
    border-width: 1px;
	border-color: #DDD;
	float: left;
  }
    #drillchild1 {
	position: relative;
	width: 95%;
	max-width: 95%;
	margin-right: 10px;
	margin-left: 10px;
	height: 120px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	float: left;
  }
    #drillchild1 img {
	vertical-align: middle;
	display: inline-block;
    max-width: 98%; /* You can use different numbers for max-width and max-height! */
    max-height: 90%;
    width: auto;
    height: auto;
	position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}
  #drillchild2 {
	position: relative;
	width: 95%;
	max-width: 95%;
	margin-right: 10px;
	margin-left: 10px;
	height: 80px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	float: left;
	text-align: center;
  }
    #drillpump {
	position: relative;
	width: 96%;
	margin-right: 0px;
	height: 230px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	margin-bottom: 10px; 
	float: left;
  }
  #drillpump:hover {
	outline: 3px solid #4cb6ea;
	-webkit-box-shadow: 0 0 10px 5px #C9C9C9;
	box-shadow: 0 0 10px 5px #C9C9C9;}
	
	#drillpumpchild2 {
	position: relative;
	width: 95%;
	max-width: 95%;
	margin-right: 10px;
	margin-left: 10px;
	height: 40px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	float: left;
	text-align: center;
  }
  #drillpumpchild1 {
	position: relative;
	width: 100%;
	max-height: 200px;
	height: 190px;
	box-sizing: border-box; 
	background-color: red;
	float: left;
  }
   #drillpumpchild1 img {
	vertical-align: middle;
	display: inline-block;
    max-width: 100%; /* You can use different numbers for max-width and max-height! */
    max-height: 100%;
    width: 100%;
    height: 100%;
	position: absolute;
	}
#smallwrapper { height: 240px; width: 48%; min-height: 220px; display: inline-block; background-color: #FFFFFF; outline: 2px solid #DDD; position: relative}
#smallwrapper:hover { outline: 2px solid #4cb6ea;-webkit-box-shadow: 0 0 20px 10px #C9C9C9; box-shadow: 0 0 20px 10px #C9C9C9;}
#content { float: left; height: 140px; line-height: 130px; width: 100%; margin:0 auto; display: inline-block; text-align:center; position: relative;}
#content img {
	vertical-align: middle;
	display: inline-block;
    max-width: 90%; /* You can use different numbers for max-width and max-height! */
    max-height: 90%;
    width: auto;
    height: auto;
	position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}
#content2 { float: left; height: 100px; width: 100%; margin:0 auto; display: inline-block; text-align:center; position: relative;}

#smallwrappermedium { height: 280px; width: 48%; min-height: 280px; display: inline-block; background-color: #FFFFFF; outline: 2px solid #DDD; position: relative}
#smallwrappermedium:hover { outline: 2px solid #4cb6ea;-webkit-box-shadow: 0 0 20px 10px #C9C9C9; box-shadow: 0 0 20px 10px #C9C9C9;}
#contentmedium2 { float: left; height: 130px; width: 100%; margin:0 auto; display: inline-block; text-align:center; position: relative;}
#contentmedium { float: left; height: 140px; line-height: 130px; width: 100%; margin:0 auto; display: inline-block; text-align:center; position: relative;}
#contentmedium img {
	vertical-align: middle;
	display: inline-block;
    max-width: 90%; /* You can use different numbers for max-width and max-height! */
    max-height: 90%;
    width: auto;
    height: auto;
	position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}
	
#imagecatalogue{ vertical-align: middle; height: 380px; min-height: 380px; width: 100%; float: left; display: inline-block; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-right: 1px solid #CCC; border-left: 1px solid #CCC; border-bottom: 1px solid #CCC; background-color: #FFFFFF; position: relative;}

#imagecatalogue img {
	vertical-align: middle;
	display: inline-block;
	margin-top: 15px;
    max-width: 80%; /* You can use different numbers for max-width and max-height! */
    max-height: 80%;
    width: auto;
    height: auto;
	position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}
	
#productcatalogue { vertical-align: middle; height: auto; width: 100%; float: left; display: inline-block; padding-bottom: 20px; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-bottom: 1px solid #CCC; background-color: #FFFFFF; border-right: 1px solid #CCC; position: relative;}

#iconcatalogue{ vertical-align: middle; height: 380px; min-height:380px; width: 15%; float: left; display: inline-block; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-right: 1px solid #CCC; border-bottom: 1px solid #CCC; background-color: #FFFFFF; position: relative; overflow: hidden;
}
.icon{
	width: 40%;
	display: inline-block;
	vertical-align: middle; 
	float: left;
}

.iconholder{
	position:relative;
	width: 100%;
	display: inline-block;
	height: 35px;
	vertical-align: middle; 
	float: left;
}
.iconnote{
	width: 60%;
	display: inline-block;
	vertical-align: middle; 
	float: right;
}
	
	
#imageindustrial{ vertical-align: middle; text-align: center; height: auto; min-height: 50px; width: 100%; float: left; display: inline-block; padding-top: 0px; padding-left: 0px; padding-right: 0px; background-color: #FFFFFF; position: relative;}
  
#productmedium { vertical-align: middle; height: auto; min-height: 100px; width: 96%; float: left; display: inline-block; padding-top: 10px; padding-left: 10px; padding-right: 10px; background-color: #FFFFFF; position: relative;}
#imagemedium{ display: table; vertical-align: middle; height: auto; min-height: 100px; width: 96%; float: left; display: inline-block; padding-top: 20px; padding-left: 10px; padding-right: 10px; background-color: #FFFFFF; position: relative;}

#productlarge { display: table; vertical-align: middle; height: auto; min-height: 50px; width: 96%; float: left; display: inline-block; padding-top: 10px; padding-left: 10px; padding-right: 10px; background-color: #FFFFFF; position: relative; overflow: hidden;}
#imagelarge { vertical-align: middle; height: auto; min-height: 100px; width: 96%; float: left; display: inline-block; padding-top: 10px; padding-left: 10px; padding-right: 10px; background-color: #FFFFFF; position: relative;}

#productlargetangye { display: table-cell; height: 400px; min-height: 400px; width: 96%; float: left; padding-top: 10px; padding-left: 10px; padding-right: 10px; background-color: #FFFFFF; position: relative; }
#imagelargetangye { vertical-align: middle; height: 400px; min-height: 400px; width: 96%; float: left; display: inline-block; padding-top: 10px; padding-left: 10px; padding-right: 10px; background-color: #FFFFFF; position: relative;}
	
.hidethis { display: none;}
	
#parentlarge { height: auto; width: 300px; float: left; display: inline-block; margin-right: 8px; margin-bottom: 8px; background-color: #FFFFFF; position: relative;}
#wrapperlarge { height: 440px; min-height: 440px; width: 300px; display: inline-block; background-color: #FFFFFF; outline: 2px solid #F1F1F1; position: relative}
#wrapperlarge:hover { outline: 2px solid #4cb6ea;}

#highlightlarge { height: 460px; min-height: 460px; width: 300px; display: inline-block; background-color: #FFFFFF; outline: 2px solid #F1F1F1; position: relative}
#highlightlarge:hover { height: 460px; min-height: 460px; outline: 2px solid #4cb6ea;}


#contentlarge { float: left; height: 270px; line-height: 260px; width: 300px; margin:0 auto; display: inline-block; text-align:center; position: relative;}
#contentlarge img {vertical-align: middle;}
#content2large { float: left; height: 190px; min-height: 190px; width: 300px; display: inline-block; vertical-align: middle; text-align:center; position: relative;}


  .fullheader{display:block; background-color: #FFF;}
  .phoneheader{display:block;}
  .textdescriptions { display: none; }
  .section {
    padding: 1rem 0 1rem;
  }
  ul.products li {
    width: 136px;
	margin-right: 3px;
    display: inline-block;
}
  .product2 { display:block;}
  .hero {
    padding-bottom: 12rem;
    text-align: left;
    height: 165px;
  }
  .phone {
    position: absolute;
    top: -7rem;
    right: 3rem;
    max-height: 362px;
    z-index: 3;
  }
  .phone + .phone {
    top: -6rem;
    display: block;
    max-width: 73.8%;
    right: 0;
    z-index: 2;
    max-height: 338px;
  }
  .hero-heading {
    font-size: 2.4rem;
  }
  #footer {
		float:left;
		padding:15px 0;
		min-width:100%;
		min-height:400px;
		background:#006bc5;
		display: none;
	}
		#footerblue {
		float:left;
		padding:15px 0;
		min-width:100%;
		min-height:60px;
		background:#FFFFFF;
		display: none;
	}
		#footerwhite {
		float:left;
		padding:15px 0;
		min-width:100%;
		min-height:60px;
		background:#FFFFFF;
		display: none;
	}
	#smallfooter {
		display: block;
	}
	.socialpanel-small {
	position: relative;
	width: 100%;
	height: 70px; 
	text-align: center;
	margin-top: -2px;
	border-top: 1px solid; 
	border-color: #FFF; 
	padding-top: 10px;
	float: left;
	background-color: #0082Cf; 
	clear: both;
	display: block;
  }
    .cardpanel-small {
	position: relative;
	width: 100%;
	height: 110px; 
	text-align: center;
	margin-top: 0px;
	padding-top: 10px;
	float: left;
	background-color: #FFF; 
	clear: both;
	display: block;
  }
    .cardpanel-large {
	position: relative;
	width: 100%;
	height: 50px; 
	text-align: center;
	margin-top: 0px;
	padding-top: 10px;
	float: left;
	background-color: #FFF; 
	clear: both;
	display: none;
  }
	.appleLinksWhite a {color:#ffffff; text-decoration: none;  font-weight: 600;}
	.appleLinksBlue a {color:#4cb6ea; text-decoration: none;  font-weight: 600;}
	
}

/* Bigger than 400 */
@media (min-width: 400px) {
	
.desktop{ display: none;}	
.tablet{ display: block;}
.supertablet{ display: none;}
.mobile{ display: none;}
 .showhide{ width: 100%; display: none;}

  .signincontainer {
	position: relative;
	width: 90%;
	height: auto; 
	margin: 0 auto;
	text-align: center;
	background-color: #FFFFFF; 
	box-sizing: border-box; 
	border-radius: 5px;
    border: 1px solid #666;
    padding: 20px;
	z-index: 9;
  }
  
    .signtable {
    margin: 0 auto;
	width: 90%;
}
	
		.eqi4-container {
  width: 96%;
  border: 0px solid black;
  text-align: center;
  margin-bottom: 15px;
  margin-left: 2%;
}
.eqi4-container img{
  max-width: 100%;
  height: auto;
}

.eqi4-container div large{
  width:96.0%;
  text-align: center;
  height: auto;
  margin-bottom: 20px;
}
.eqi4-container div small{
   width:76.0%;
  text-align: center;
  padding-top:20px;
  margin-bottom: 20px;
  height: auto;
}

.eqi4-container div left{
  width:33.0%;
  height: auto;
  text-align: left;
  margin-bottom: 20px;
}

.eqi4-container div center{
  width:33.0%;
  height: auto;
  text-align: center;
  margin-bottom: 20px;
}
.eqi4-container div right{
  width:33.0%;
  height: auto;
  text-align: right;
  margin-bottom: 20px;
}
	
	.footerpc {
	position: relative;
	display: none;
	background-color: #006bc5;
	height: auto;
	min-height:200px;
	width:100%;
}
    .footermobile{
	position: relative;
	display: block;
	background-color: #006bc5;
	height: auto;
	min-height:200px;
	width:100%;
}
	.footer1pc {
	position: relative;
	display: block;
	background-color: #006bc5;
	min-height: 180px;
	width:100%;
	padding-top: 20px;
	padding-bottom: 20px;
}
   .footer2pc {
	position: relative;
	display: none;
	background-color: #006bc5;
	min-height: 60px;
	width:100%;
	padding-bottom: 20px;
}
	
  .phoneonly {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0 0px;
  box-sizing: border-box; 
  background-color : transparent;
  clear: both;
  display: block;
  }
  .phoneonlytel {
  position: relative;
  width: 100%;
  font-size: 22px;
  line-height:30px;
  margin: 0 auto;
  text-align: center;
  box-sizing: border-box; 
  clear: both;
  display: block;
  }
	
  .showhide{ width: 100%; display: none;}
	
  .pumpaccessories {
  position: relative;
  width: 24%;
  height: 170px;
  margin-right: 10px;
  margin-bottom: 10px;
  box-sizing: border-box; 
  background-color: #FFF;
  text-align: center;
  display: block;
  float: left;
  }
  .pumpaccessories:hover {
	outline: 3px solid #4cb6ea;
	-webkit-box-shadow: 0 0 10px 5px #C9C9C9;
	box-shadow: 0 0 10px 5px #C9C9C9;}
	
	.pumpaccessories img{
  width: 90%;
  text-align: center;
  }
	
	#portalquotewide {
	position: relative;
	width: 100%;
	margin-right: 4px;
	margin-bottom: 4px;
	box-sizing: border-box; 
	background-color: #FFFFFF; 
	float: left;
  }
  #portalquote {
	position: relative;
	width: 100%;
	margin-right: 4px;
	margin-bottom: 4px;
	box-sizing: border-box; 
	background-color: #FFFFFF; 
	float: left;
  }	
	.submenu2 {
	position: relative;
	width: 100%;
	font-size: 12px; 
	font-weight: 300; 
	line-height: 18px; 
	text-align:center;
	height: 100px; 
	max-height: 100px;
	float: left;
	background-color: #ffffff; 
	padding-top: 5px;
	margin-bottom: 30px;
	z-index: 9;
	-webkit-box-shadow: 0 12px 12px 0px #999;
    box-shadow: 0 12px 12px 0px #999;
	clear: both;
  }
	
#drillbrandshome {
	position: relative;
	width: 24%;
	height: 230px;
	margin-left: 10px;
	margin-bottom: 15px;
	box-sizing: border-box; 
	background-color: #FFF; 
	outline: 3px solid #F1F1F1; 
	float: left;
  }
  #drillbrandshome:hover {
	outline: 3px solid #4cb6ea;
	-webkit-box-shadow: 0 0 10px 5px #C9C9C9;
	box-shadow: 0 0 10px 5px #C9C9C9;}
  #drillbrandshomechild1 {
	position: relative;
	width: 99%;
	height: 110px;
	box-sizing: border-box; 
	background-color: #FFF;
	float: left;
  }
  #drillbrandshomechild1 img {
	vertical-align: middle;
	display: inline-block;
	width: 90%;
    max-width: 90%; /* You can use different numbers for max-width and max-height! */
	max-height: 90%; /* You can use different numbers for max-width and max-height! */
    height: auto;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}
  #drillbrandshomechild2 {
	position: relative;
	width: 99%;
	height: 70px;
	box-sizing: border-box; 
	background-color: #FFF;
	float: left;
	text-align: center;
  }
	#phonecart {
	position: relative;
	width: 94%;
	max-width: 98%;
	margin-right: 10px;
	margin-left: 20px;
	height: auto;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	margin-bottom: 10px; 
	border-style: solid;
    border-width: 1px;
	border-color: #DDD;
	float: center;
  }
	.showblueheader{ width: 100%; display: none;}

	#drilllarge {
	position: relative;
	width: 48.333%;
	max-width: 48.333%;
	margin-right: 10px;
	height: 440px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	margin-bottom: 10px; 
	border-style: solid;
    border-width: 1px;
	border-color: #DDD;
	float: left;
  }
    #drillchild1 {
	position: relative;
	width: 95%;
	max-width: 95%;
	margin-right: 10px;
	margin-left: 10px;
	height: 200px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	float: left;
  }
    #drillchild1 img {
	vertical-align: middle;
	display: inline-block;
    max-width: 98%; /* You can use different numbers for max-width and max-height! */
    max-height: 90%;
    width: auto;
    height: auto;
	position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}
  #drillchild2 {
	position: relative;
	width: 95%;
	max-width: 95%;
	margin-right: 10px;
	margin-left: 10px;
	height: 160px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	float: left;
	text-align: center;
  }
  
  #drillpump {
	position: relative;
	width: 96%;
	margin-right: 0px;
	height: 220px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	margin-bottom: 10px; 
	float: left;
  }
  #drillpump:hover {
	outline: 3px solid #4cb6ea;
	-webkit-box-shadow: 0 0 10px 5px #C9C9C9;
	box-shadow: 0 0 10px 5px #C9C9C9;}
  #drillpumpchild1 {
	position: relative;
	width: 100%;
	max-height: 223px;
	height: 223px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	float: left;
  }
   #drillpumpchild1 img {
	vertical-align: middle;
	display: inline-block;
    max-width: 100%; /* You can use different numbers for max-width and max-height! */
    max-height: 100%;
    width: 100%;
    height: 100%;
	position: absolute;
	}

#smallwrapper { height: 240px; width: 24%; min-height: 220px; display: inline-block; background-color: #FFFFFF; outline: 2px solid #DDD; position: relative}
#smallwrapper:hover { outline: 2px solid #4cb6ea;-webkit-box-shadow: 0 0 20px 10px #C9C9C9;
box-shadow: 0 0 20px 10px #C9C9C9;}
#content { float: left; height: 140px; line-height: 130px; width: 100%; margin:0 auto; display: inline-block; text-align:center; position: relative;}
#content img {
	vertical-align: middle;
	display: inline-block;
    max-width: 90%; /* You can use different numbers for max-width and max-height! */
    max-height: 90%;
    width: auto;
    height: auto;
	position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}
#content2 { float: left; height: 100px; width: 100%; margin:0 auto; display: inline-block; text-align:center; position: relative;}

#smallwrappermedium { height: 280px; width: 24%; min-height: 280px; display: inline-block; background-color: #FFFFFF; outline: 2px solid #DDD; position: relative}
#smallwrappermedium:hover { outline: 2px solid #4cb6ea;-webkit-box-shadow: 0 0 20px 10px #C9C9C9; box-shadow: 0 0 20px 10px #C9C9C9;}
#contentmedium2 { float: left; height: 130px; width: 100%; margin:0 auto; display: inline-block; text-align:center; position: relative;}
#contentmedium { float: left; height: 140px; line-height: 130px; width: 100%; margin:0 auto; display: inline-block; text-align:center; position: relative;}
#contentmedium img {
	vertical-align: middle;
	display: inline-block;
    max-width: 90%; /* You can use different numbers for max-width and max-height! */
    max-height: 90%;
    width: auto;
    height: auto;
	position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}
	
#productmedium { vertical-align: middle; height: auto; min-height: 50px; width: 96%; float: left; display: inline-block; padding-top: 10px; padding-left: 10px; padding-right: 10px; background-color: #FFFFFF; position: relative;}
#imagemedium{ vertical-align: middle; height: auto; min-height: 100px; width: 96%; float: left; display: inline-block; padding-top: 20px; padding-left: 10px; padding-right: 10px; background-color: #FFFFFF; position: relative;}

#productlarge { vertical-align: middle; height: auto; min-height: 50px; width: 96%; float: left; display: inline-block; padding-top: 10px; padding-left: 10px; padding-right: 10px; background-color: #FFFFFF; position: relative;}
#imagelarge { vertical-align: middle; height: auto; min-height: 100px; width: 96%; float: left; display: inline-block; padding-top: 10px; padding-left: 10px; padding-right: 10px; background-color: #FFFFFF; position: relative;}

#productlargetangye { display: table-cell; height: 400px; min-height: 400px; width: 46%; float: left; padding-top: 10px; padding-left: 10px; padding-right: 10px; background-color: #FFFFFF; position: relative; }
#imagelargetangye { vertical-align: middle; height: 400px; min-height: 400px; width: 46%; float: left; display: inline-block; padding-top: 10px; padding-left: 10px; padding-right: 10px; background-color: #FFFFFF; position: relative;}
	
.hidethis { display: none;}
	
#parentlarge { height: 480px; min-height: 480px; width: 300px; float: left; display: inline-block; margin-right: 8px; margin-bottom: 8px; background-color: #FFFFFF; position: relative;}
#wrapperlarge { height: 480px; min-height: 480px; width: 300px; display: inline-block; background-color: #FFFFFF; outline: 2px solid #F1F1F1; position: relative}
#wrapperlarge:hover { outline: 2px solid #4cb6ea;}

#highlightlarge { height: 480px; min-height: 480px; width: 300px; display: inline-block; background-color: #FFFFFF; outline: 2px solid #F1F1F1; position: relative}
#highlightlarge:hover { height: 480px; min-height: 480px; outline: 2px solid #4cb6ea;}


#contentlarge { float: left; height: 270px; line-height: 260px; width: 300px; margin:0 auto; display: inline-block; text-align:center; position: relative;}
#contentlarge img {vertical-align: middle;}
#content2large { float: left; height: 170px; min-height: 170px; width: 300px; display: inline-block; vertical-align: middle; text-align:center; position: relative;}

  .fullheader{display:block; background-color: #FFF;}
  .phoneheader{display:none;}
  .textdescriptions { display: block; }
  .section {
    padding: 1rem 0 1rem;
  }
  ul.products li {
    width: 148px;
	margin-right: 3px;
    display: inline-block;
}
  .product2 { display:block;}
  .hero {
    padding-bottom: 12rem;
    text-align: left;
    height: 165px;
  }
  .phone {
    position: absolute;
    top: -7rem;
    right: 3rem;
    max-height: 362px;
    z-index: 3;
  }
  .phone + .phone {
    top: -6rem;
    display: block;
    max-width: 73.8%;
    right: 0;
    z-index: 2;
    max-height: 338px;
  }
  .hero-heading {
    font-size: 2.4rem;
  }
  #footer {
		float:left;
		padding:15px 0;
		min-width:100%;
		min-height:400px;
		background:#006bc5;
		display: none;
	}
		#footerblue {
		float:left;
		padding:15px 0;
		min-width:100%;
		min-height:60px;
		background:#FFFFFF;
		display: none;
	}
		#footerwhite {
		float:left;
		padding:15px 0;
		min-width:100%;
		min-height:60px;
		background:#FFFFFF;
		display: none;
	}
	#smallfooter {
		display: block;
	}
	.socialpanel-small {
	position: relative;
	width: 100%;
	height: 70px; 
	text-align: center;
	margin-top: 1px;
	padding-top: 10px;
	float: left;
	background-color: #0082Cf; 
	clear: both;
	display: block;
  }
  	.cardpanel-small {
	position: relative;
	width: 100%;
	height: 110px; 
	text-align: center;
	margin-top: 0px;
	padding-top: 10px;
	float: left;
	background-color: #FFF; 
	clear: both;
	display: block;
  }
    .cardpanel-large {
	position: relative;
	width: 100%;
	height: 50px; 
	text-align: center;
	margin-top: 0px;
	padding-top: 10px;
	float: left;
	background-color: #FFF; 
	clear: both;
	display: none;
  }
	.appleLinksWhite a {color:#ffffff; text-decoration: none;  font-weight: 600;}
	.appleLinksBlue a {color:#4cb6ea; text-decoration: none;  font-weight: 600;}
	.parfitbanner { display: block; }
}


/* Bigger than 800 */
@media (min-width: 800px) {
	
.desktop{ display: block;}	
.tablet{ display: none;}
.supertablet{ display: block;}
.mobile{ display: none;}

  .signincontainer {
	position: relative;
	width: 70%;
	height: auto; 
	margin: 0 auto;
	text-align: center;
	background-color: #FFFFFF; 
	box-sizing: border-box; 
	border-radius: 5px;
    border: 1px solid #666;
    padding: 20px;
	z-index: 9;
  }
  
    .signtable {
    margin: 0 auto;
	width: 70%;
}
	
		.eqi4-container {
  width: 96%;
  border: 0px solid black;
  text-align: center;
  margin-bottom: 15px;
  margin-left: 2%;
}
.eqi4-container img{
  max-width: 100%;
  height: auto;
}

.eqi4-container div large{
  width:96.0%;
  text-align: center;
  height: auto;
  margin-bottom: 20px;
}
.eqi4-container div small{
   width:76.0%;
  text-align: center;
  padding-top:20px;
  margin-bottom: 20px;
  height: auto;
}

.eqi4-container div left{
  width:33.0%;
  height: auto;
  text-align: left;
  margin-bottom: 20px;
}

.eqi4-container div center{
  width:33.0%;
  height: auto;
  text-align: center;
  margin-bottom: 20px;
}
.eqi4-container div right{
  width:33.0%;
  height: auto;
  text-align: right;
  margin-bottom: 20px;
}
	
	.footermain {
	position: relative;
	display:block;
	background-color: #dddddd;
	min-height: 180px;
	width:100%;
	padding-top: 20px;
	padding-bottom: 20px;
}
   .footer2pc {
	position: relative;
	display: none;
	background-color: #f1f1f1;
	min-height: 60px;
	width:100%;
	padding-bottom: 20px;
}
    .footermobile{
	position: relative;
	display: block;
	background-color: #f1f1f1;
	height: auto;
	min-height:100px;
	width:100%;
	padding-top: 20px;
}
	
  .phoneonly {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0 0px;
  box-sizing: border-box; 
  background-color : transparent;
  clear: both;
  display: block;
  }
  .phoneonlytel {
  position: relative;
  width: 100%;
  font-size: 22px;
  line-height:30px;
  margin: 0 auto;
  text-align: center;
  box-sizing: border-box; 
  clear: both;
  display: block;
  }
	
  .showhide{ width: 100%; display: none;}
	
  .pumpaccessories {
  position: relative;
  width: 23.5%;
  height: 170px;
  margin-right: 10px;
  margin-bottom: 10px;
  box-sizing: border-box; 
  background-color: #FFF;
  display: block;
  text-align: center;
  float: left;
  }
  .pumpaccessories:hover {
	outline: 3px solid #4cb6ea;
	-webkit-box-shadow: 0 0 10px 5px #C9C9C9;
	box-shadow: 0 0 10px 5px #C9C9C9;}
	
	.pumpaccessories img{
  width: 90%;
  text-align: center;
  }
	
    #drillpump {
	position: relative;
	width: 47.5%;
	margin-right: 10px;
	height: 220px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	margin-bottom: 10px; 
	float: left;
  }
  #drillpump:hover {
	outline: 3px solid #4cb6ea;
	-webkit-box-shadow: 0 0 10px 5px #C9C9C9;
	box-shadow: 0 0 10px 5px #C9C9C9;}
  #drillpumpchild1 {
	position: relative;
	width: 100%;
	max-height: 223px;
	height: 223px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	float: left;
  }
   #drillpumpchild1 img {
	vertical-align: middle;
	display: inline-block;
    max-width: 100%; /* You can use different numbers for max-width and max-height! */
    max-height: 100%;
    width: 100%;
    height: 100%;
	position: absolute;
	}
	#productindustrialnarrow { vertical-align: middle; height: auto; min-height: 50px; width: 100%; float: left; display: inline-block; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-bottom: 1px solid #CCC; border-right: 1px solid #CCC; background-color: #FFFFFF; position: relative;}

	
	#portalquotewide {
	position: relative;
	width: 40%;
	margin-right: 4px;
	margin-bottom: 4px;
	box-sizing: border-box; 
	background-color: #FFFFFF; 
	float: left;
  }
  #portalquote {
	position: relative;
	width: 25%;
	margin-right: 4px;
	margin-bottom: 4px;
	box-sizing: border-box; 
	background-color: #FFFFFF; 
	float: left;
  }
	
#drillbrandshome {
	position: relative;
	width: 23%;
	height: 230px;
	margin-left: 10px;
	margin-bottom: 15px;
	box-sizing: border-box; 
	background-color: #FFF; 
	outline: 3px solid #F1F1F1; 
	float: left;
  }
  #drillbrandshome:hover {
	outline: 3px solid #4cb6ea;
	-webkit-box-shadow: 0 0 10px 5px #C9C9C9;
	box-shadow: 0 0 10px 5px #C9C9C9;}
  #drillbrandshomechild1 {
	position: relative;
	width: 99%;
	height: 110px;
	box-sizing: border-box; 
	background-color: #FFF;
	float: left;
  }
  #drillbrandshomechild1 img {
	vertical-align: middle;
	display: inline-block;
	width: 90%;
    max-width: 90%; /* You can use different numbers for max-width and max-height! */
	max-height: 90%; /* You can use different numbers for max-width and max-height! */
    height: auto;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}
  #drillbrandshomechild2 {
	position: relative;
	width: 99%;
	height: 70px;
	box-sizing: border-box; 
	background-color: #FFF;
	float: left;
	text-align: center;
  }
	.showblueheader{ width: 100%; display: none;}

	#drilllarge {
	position: relative;
	width: 48.333%;
	max-width: 48.333%;
	margin-right: 10px;
	height: 440px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	margin-bottom: 10px; 
	border-style: solid;
    border-width: 1px;
	border-color: #DDD;
	float: left;
  }
  #drilllarge:hover {
	outline: 3px solid #4cb6ea;
	-webkit-box-shadow: 0 0 10px 5px #C9C9C9;
	box-shadow: 0 0 10px 5px #C9C9C9;}
  #drillchild1 {
	position: relative;
	width: 95%;
	max-width: 95%;
	margin-right: 10px;
	margin-left: 10px;
	height: 230px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	float: left;
  }
  #drillchild1 img {
	vertical-align: middle;
	display: inline-block;
    max-width: 98%; /* You can use different numbers for max-width and max-height! */
    max-height: 90%;
    width: auto;
    height: auto;
	position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}
  #drillchild2 {
	position: relative;
	width: 95%;
	max-width: 95%;
	margin-right: 10px;
	margin-left: 10px;
	height: 170px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	float: left;
	text-align: center;
  }
#smallwrapper { height: 240px; width: 19%; min-height: 220px; display: inline-block; background-color: #FFFFFF; outline: 2px solid #DDD; position: relative}
#smallwrapper:hover { outline: 2px solid #4cb6ea;-webkit-box-shadow: 0 0 20px 10px #C9C9C9;
box-shadow: 0 0 20px 10px #C9C9C9;}
#content { float: left; height: 140px; line-height: 130px; width: 100%; margin:0 auto; display: inline-block; text-align:center; position: relative;}
#content img {
	vertical-align: middle;
	display: inline-block;
    max-width: 90%; /* You can use different numbers for max-width and max-height! */
    max-height: 90%;
    width: auto;
    height: auto;
	position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}
#content2 { float: left; height: 100px; width: 100%; margin:0 auto; display: inline-block; text-align:center; position: relative;}

#smallwrappermedium { height: 280px; width: 19%; min-height: 280px; display: inline-block; background-color: #FFFFFF; outline: 2px solid #DDD; position: relative}
#smallwrappermedium:hover { outline: 2px solid #4cb6ea;-webkit-box-shadow: 0 0 20px 10px #C9C9C9; box-shadow: 0 0 20px 10px #C9C9C9;}
#contentmedium2 { float: left; height: 130px; width: 100%; margin:0 auto; display: inline-block; text-align:center; position: relative;}
#contentmedium { float: left; height: 140px; line-height: 130px; width: 100%; margin:0 auto; display: inline-block; text-align:center; position: relative;}
#contentmedium img {
	vertical-align: middle;
	display: inline-block;
    max-width: 90%; /* You can use different numbers for max-width and max-height! */
    max-height: 90%;
    width: auto;
    height: auto;
	position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}

#productmedium { vertical-align: middle; height: 200px; min-height: 200px; width: 22%; float: left; display: inline-block; padding-top: 10px; padding-left: 10px; padding-right: 10px; background-color: #FFFFFF; position: relative;}
#imagemedium{ vertical-align: middle; height: 200px; min-height: 200px; width: 22%; float: left; display: inline-block; padding-top: 10px; padding-left: 10px; padding-right: 10px; background-color: #FFFFFF; position: relative;}

#productlarge { vertical-align: middle; height: auto; min-height: 420px;width: 22%; float: left; display: inline-block; padding-top: 10px; padding-left: 10px; padding-right: 10px; background-color: #FFFFFF; position: relative;}
#imagelarge { vertical-align: middle; height: auto; min-height: 420px; width: 22%; float: left; display: inline-block; padding-top: 10px; padding-left: 10px; padding-right: 10px; background-color: #FFFFFF; position: relative;}
#imagelarge img {
	vertical-align: middle;
	display: inline-block;
    max-width: 100%; /* You can use different numbers for max-width and max-height! */
    max-height: 100%;
	min-height:60px;
    width: auto;
    height: 75%;
	position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}

#productlargetangye { display: table-cell; height: 400px; min-height: 400px; width: 22%; float: left; padding-top: 10px; padding-left: 10px; padding-right: 10px; background-color: #FFFFFF; position: relative; }
#imagelargetangye { vertical-align: middle; height: 400px; min-height: 400px; width: 22%; float: left; display: inline-block; padding-top: 10px; padding-left: 10px; padding-right: 10px; background-color: #FFFFFF; position: relative;}
	
.hidethis { display: none;}
	
#parentlarge { height: 480px; min-height: 480px; width: 300px; float: left; display: inline-block; margin-right: 8px; margin-bottom: 8px; background-color: #FFFFFF; position: relative;}
#wrapperlarge { height: 480px; min-height: 480px; width: 300px; display: inline-block; background-color: #FFFFFF; outline: 2px solid #F1F1F1; position: relative}
#wrapperlarge:hover { outline: 2px solid #4cb6ea;}

#highlightlarge { height: 480px; min-height: 480px; width: 300px; display: inline-block; background-color: #FFFFFF; outline: 2px solid #F1F1F1; position: relative}
#highlightlarge:hover { height: 480px; min-height: 480px; outline: 2px solid #4cb6ea;}


#contentlarge { float: left; height: 270px; line-height: 260px; width: 300px; margin:0 auto; display: inline-block; text-align:center; position: relative;}
#contentlarge img {vertical-align: middle;}
#content2large { float: left; height: 170px; min-height: 170px; width: 300px; display: inline-block; vertical-align: middle; text-align:center; position: relative;}  

	.fullheader{display:block; background-color: #FFF;}
	.phoneheader{display:none;}
	.textdescriptions { display: block; }
	ul.accreditation li {
    width: 220px;
    display: inline-block;
}
ul.products li {
    width: 148px;
	margin-right: 3px;
    display: inline-block;
}
ul.accreditationlarge li {
    width: 270px;
    display: inline-block;
}
  .hero {
    height: 190px;
  }
  .hero-heading {
    font-size: 2.6rem;
  }
  .section {
    padding: 1rem 0 1rem;
  }
  .product2 { display:none;}
  .hero {
    padding: 16rem 0 14rem;
  }
  .section-description {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
  .phone {
    top: -14rem;
    right: 5rem;
    max-height: 510px;
  }
  .phone + .phone {
    top: -12rem;
    max-height: 472px;
  }
  .categories {
    padding: 15rem 0 8rem;
  }
#footer {
		float:left;
		padding:15px 0;
		min-width:100%;
		min-height:400px;
		background:#006bc5;
		display: block;
	}
#footerportal {
		float:left;
		padding:15px 0;
		min-width:100%;
		min-height:190px;
		max-height:240px;
		background:#006bc5;
		display: block;
	}
	    #footerblue {
		float:left;
		padding:15px 0;
		min-width:100%;
		min-height:140px;
		background:#006bc5;
		display: block;
	}
		#footerwhite {
		float:left;
		padding:15px 0;
		min-width:100%;
		min-height:60px;
		background:#FFFFFF;
		display: block;
	}
	#smallfooter {
		display: block;
	}
	.socialpanel-small {
	position: relative;
	width: 100%;
	height: 70px; 
	text-align: center;
	margin-top: 1px;
	padding-top: 10px;
	float: left;
	background-color: #0082Cf; 
	clear: both;
	display: none;
  }
    .cardpanel-small {
	position: relative;
	width: 100%;
	height: 110px; 
	text-align: center;
	margin-top: 0px;
	padding-top: 10px;
	float: left;
	background-color: #FFF; 
	clear: both;
	display: none;
  }
    .cardpanel-large {
	position: relative;
	width: 100%;
	height: 50px; 
	text-align: center;
	margin-top: 0px;
	padding-top: 10px;
	float: left;
	background-color: #FFF; 
	clear: both;
	display: block;
  }
	.appleLinksWhite a {color:#ffffff; text-decoration: none;  font-weight: 600;}
	.appleLinksBlue a {color:#4cb6ea; text-decoration: none;  font-weight: 600;}
}

/* Bigger than 1000*/
@media (min-width: 1000px) {
	
	/* Online cat css*/
	
.desktop{ display: block;}	
.tablet{ display: none;}
.supertablet{ display: none;}
.mobile{ display: none;}

  .signincontainer {
	position: relative;
	width: 60%;
	height: auto; 
	margin: 0 auto;
	text-align: center;
	background-color: #FFFFFF; 
	box-sizing: border-box; 
	border-radius: 5px;
    border: 1px solid #666;
    padding: 20px;
	z-index: 9;
  }
  
    .signtable {
    margin: 0 auto;
	width: 50%;
}
	
	.footerpc {
	position: relative;
	display: block;
	background-color: #006bc5;
	min-height: 180px;
	width:100%;
	margin-top: -140px;
	padding-top: 20px;
	padding-bottom: 20px;
}
   .footer2pc {
	position: relative;
	display: block;
	background-color: #006bc5;
	min-height: 60px;
	width:100%;
	padding-bottom: 20px;
}
    .footermobile{
	position: relative;
	display: none;
	background-color: #006bc5;
	height: auto;
	min-height:100px;
	width:100%;
	padding-top: 20px;
}
	
#catprodimage{ vertical-align: middle; height: 361px; min-height: 361px; width: 32%; float: left; display: inline-block; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-right: 1px solid #CCC; border-left: 1px solid #CCC; border-bottom: 1px solid #CCC; background-color: #FFFFFF; position: relative;}

#catprodimage img {
	vertical-align: middle;
	display: inline-block;
    max-width: 70%; /* You can use different numbers for max-width and max-height! */
    max-height: 70%;
    width:auto;
    height: auto;
	position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}
	
#catprodcontainer { vertical-align: middle; height: 360px; min-height: 360px; width: 32%; float: left; display: inline-block; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-bottom: 1px solid #CCC; background-color: #FFFFFF; border-right: 1px solid #CCC; position: relative;}

#catprodinfo { vertical-align: middle; height: 260px; min-height: 260px; width: 100%; float: left; display: inline-block; padding-top: 0px; padding-left: 0px; padding-right: 0px; background-color: #fff; position: relative;}

#catprodavail { vertical-align: middle; height: 178px; min-height: 178px; width: 100%; float: left; display: inline-block; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; padding-right: 0px; background-color: #fff; position: relative;}

#catprodlist { vertical-align: middle; height: 30px; min-height: 30px; width: 100%; float: left; display: inline-block; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; padding-right: 0px; background-color: #FFF; border-top: 1px solid #CCC; position: relative; text-align: center;}

#catprodbuy { vertical-align: middle; height: 50px; min-height: 50px; width: 100%; float: left; display: inline-block; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; padding-right: 0px; background-color: #FFF; border-top: 1px solid #CCC; position: relative;}

#catprodqty { vertical-align: middle; height: 40px; min-height: 40px; width: 100%; float: left; display: inline-block; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; padding-right: 0px; background-color: #FFF; border-top: 1px solid #CCC; position: relative;}

#catprodbase { vertical-align: middle; height: 48px; min-height: 48px; width: 100%; float: left; display: inline-block; padding-bottom: 0px; padding-top: 10px; padding-left: 0px; padding-right: 0px; background-color: #FFF; border-top: 1px solid #CCC; position: relative;}

/* End Online cat css*/
	
  .phoneonly {
  display: block;
  background-color : transparent;
  }
  .phoneonlytel {
  display:block;
  }
  
  .showhide{ width: 100%; display: none;}
	
	  #drillmedium {
	position: relative;
	width: 48%;
	margin-right: 10px;
	height: 440px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	margin-bottom: 10px; 
	float: left;
  }
  #drillmedium:hover {
	outline: 3px solid #4cb6ea;
	-webkit-box-shadow: 0 0 10px 5px #C9C9C9;
	box-shadow: 0 0 10px 5px #C9C9C9;}
  #drillmediumchild1 {
	position: relative;
	width: 100%;
	margin-right: 10px;
	margin-left: 10px;
	height: 260px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	float: left;
  }
  #drillmediumchild1 img {
	vertical-align: middle;
	display: inline-block;
    max-width: 90%; /* You can use different numbers for max-width and max-height! */
    max-height: 90%;
    width: auto;
    height: auto;
	position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}
  #drillmediumchild2 {
	position: relative;
	width: 100%;
	margin-right: 10px;
	margin-left: 10px;
	height: 180px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	float: left;
	text-align: center;
  }
	
  .pumpaccessories {
  position: relative;
  width: 11%;
  height: 170px;
  margin-right: 10px;
  margin-bottom: 10px;
  box-sizing: border-box; 
  background-color: #FFF;
  display: block;
  text-align: center;
  float: left;
  }
   .pumpaccessories:hover {
	outline: 3px solid #4cb6ea;
	-webkit-box-shadow: 0 0 10px 5px #C9C9C9;
	box-shadow: 0 0 10px 5px #C9C9C9;}
	
   .pumpaccessories img{
  width: 90%;
  text-align: center;
  }
	
	#drillpump {
	position: relative;
	width: 32%;
	margin-right: 10px;
	height: 263px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	margin-bottom: 10px; 
	float: left;
  }
  #drillpump:hover {
	outline: 3px solid #4cb6ea;
	-webkit-box-shadow: 0 0 10px 5px #C9C9C9;
	box-shadow: 0 0 10px 5px #C9C9C9;}
  #drillpumpchild1 {
	position: relative;
	width: 100%;
	max-height: 223px;
	height: 223px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	float: left;
  }
   #drillpumpchild1 img {
	vertical-align: middle;
	display: inline-block;
    max-width: 100%; /* You can use different numbers for max-width and max-height! */
    max-height: 100%;
    width:100%;
    height: 100%;
	position: absolute;
	}
	
	#portalquotewide {
	position: relative;
	width: 40%;
	margin-right: 4px;
	margin-bottom: 4px;
	box-sizing: border-box; 
	background-color: #FFFFFF; 
	float: left;
  }
  #portalquote {
	position: relative;
	width: 25%;
	margin-right: 4px;
	margin-bottom: 4px;
	box-sizing: border-box; 
	background-color: #FFFFFF; 
	float: left;
  }
	
	.inner {
    width: 95%;
    margin: 0 auto;
	text-align: left;
}
	
	.submenu2 {
	position: relative;
	width: 100%;
	font-size: 12px; 
	font-weight: 300; 
	line-height: 18px; 
	text-align:center;
	height: 80px; 
	max-height: 80px;
	float: left;
	background-color:#FFFFFF; 
	padding-top: 5px;
	margin-bottom: 0px;
	z-index: 9;
	-webkit-box-shadow: 0 12px 12px 0px #999;
    box-shadow: 0 12px 12px 0px #999;
	clear: both;
  }
	
#drillbrandshome {
	position: relative;
	width: 23%;
	height: 230px;
	margin-left: 15px;
	margin-bottom: 10px;
	box-sizing: border-box; 
	background-color: #FFF; 
	outline: 3px solid #F1F1F1; 
	float: left;
  }
  #drillbrandshome:hover {
	outline: 3px solid #4cb6ea;
	-webkit-box-shadow: 0 0 10px 5px #C9C9C9;
	box-shadow: 0 0 10px 5px #C9C9C9;}
  #drillbrandshomechild1 {
	position: relative;
	width: 99%;
	height: 110px;
	box-sizing: border-box; 
	background-color: #FFF;
	float: left;
  }
  #drillbrandshomechild1 img {
	vertical-align: middle;
	display: inline-block;
	width: 90%;
    max-width: 90%; /* You can use different numbers for max-width and max-height! */
	max-height: 90%; /* You can use different numbers for max-width and max-height! */
    height: auto;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}
  #drillbrandshomechild2 {
	position: relative;
	width: 99%;
	height: 70px;
	box-sizing: border-box; 
	background-color: #FFF;
	float: left;
	text-align: center;
  }
  
	.showblueheader{ width: 100%; display: block;}
	
	#drilllarge {
	position: relative;
	width: 32.333%;
	max-width: 32.333%;
	margin-right: 10px;
	height: 500px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	margin-bottom: 10px; 
	border-style: solid;
    border-width: 1px;
	border-color: #DDD;
	float: left;
  }
  #drilllarge:hover {
	outline: 3px solid #4cb6ea;
	-webkit-box-shadow: 0 0 10px 5px #C9C9C9;
	box-shadow: 0 0 10px 5px #C9C9C9;}
  #drillchild1 {
	position: relative;
	width: 95%;
	max-width: 95%;
	margin-right: 10px;
	margin-left: 10px;
	height: 260px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	float: left;
  }
  #drillchild1 img {
	vertical-align: middle;
	display: inline-block;
    max-width: 98%; /* You can use different numbers for max-width and max-height! */
    max-height: 90%;
    width: auto;
    height: auto;
	position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}
  #drillchild2 {
	position: relative;
	width: 95%;
	max-width: 95%;
	margin-right: 10px;
	margin-left: 10px;
	height: 230px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	float: left;
	text-align: center;
  }
#smallwrapper { height: 240px; width: 16%; min-height: 220px; display: inline-block; background-color: #FFFFFF; outline: 2px solid #DDD; position: relative}
#smallwrapper:hover { outline: 2px solid #4cb6ea;-webkit-box-shadow: 0 0 20px 10px #C9C9C9;
box-shadow: 0 0 20px 10px #C9C9C9;}
#content { float: left; height: 140px; line-height: 130px; width: 100%; margin:0 auto; display: inline-block; text-align:center; position: relative;}
#content img {
	vertical-align: middle;
	display: inline-block;
    max-width: 90%; /* You can use different numbers for max-width and max-height! */
    max-height: 90%;
    width: auto;
    height: auto;
	position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}
#content2 { float: left; height: 100px; width: 100%; margin:0 auto; display: inline-block; text-align:center; position: relative;}

#smallwrappermedium { height: 280px; width: 16%; min-height: 280px; display: inline-block; background-color: #FFFFFF; outline: 2px solid #DDD; position: relative}
#smallwrappermedium:hover { outline: 2px solid #4cb6ea;-webkit-box-shadow: 0 0 20px 10px #C9C9C9; box-shadow: 0 0 20px 10px #C9C9C9;}
#contentmedium2 { float: left; height: 130px; width: 100%; margin:0 auto; display: inline-block; text-align:center; position: relative;}
#contentmedium { float: left; height: 140px; line-height: 130px; width: 100%; margin:0 auto; display: inline-block; text-align:center; position: relative;}
#contentmedium img {
	vertical-align: middle;
	display: inline-block;
    max-width: 90%; /* You can use different numbers for max-width and max-height! */
    max-height: 90%;
    width: auto;
    height: auto;
	position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}

#productmedium { vertical-align: middle; height: 200px; min-height: 200px; width: 23%; float: left; display: inline-block; padding-top: 10px; padding-left: 10px; padding-right: 10px; background-color: #FFFFFF; position: relative;}
#imagemedium{ vertical-align: middle; height: 200px; min-height: 200px; width: 23%; float: left; display: inline-block; padding-top: 10px; padding-left: 10px; padding-right: 10px; background-color: #FFFFFF; position: relative;}

#imageindustrial{ vertical-align: middle; height: 250px; min-height: 250px; width: 13%; float: left; display: inline-block; padding-top: 0px; padding-left: 0px; padding-right: 1px; border-bottom: 1px solid #CCC; background-color: #FFFFFF; position: relative;}
#imageindustrial img {
	vertical-align: middle;
	display: inline-block;
    max-width: 95%; /* You can use different numbers for max-width and max-height! */
    max-height: 95%;
    width: auto;
    height: auto;
	position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}
#productindustrialnarrow { height: 250px; min-height: 250px; width: 23%; float: left; display: inline-block; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-bottom: 1px solid #CCC; border-right: 1px solid #CCC; background-color: #FFFFFF; position: relative;}

#iconindustrial{ vertical-align: middle; height: 250px; min-height: 250px; width: 12%; float: left; display: inline-block; padding-top: 0px; padding-left: 1px; padding-right: 1px; background-color: #FFFFFF; position: relative; overflow: hidden;
}

#imagecatalogue{ vertical-align: middle; height: 380px; min-height: 380px; width: 33%; float: left; display: inline-block; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-right: 1px solid #CCC; border-left: 1px solid #CCC; border-bottom: 1px solid #CCC; background-color: #FFFFFF; position: relative;}

#imagecatalogue img {
	vertical-align: middle;
	display: inline-block;
	margin-top: 20px;
    max-width: 80%; /* You can use different numbers for max-width and max-height! */
    max-height: 80%;
    width: 80%;
    height: auto;
	position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}
	
#productcatalogue { vertical-align: middle; height: 380px; min-height: 380px; width: 33%; float: left; display: inline-block; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-bottom: 1px solid #CCC; background-color: #FFFFFF; border-right: 1px solid #CCC; position: relative;}

#iconcatalogue{ vertical-align: middle; height: 380px; min-height:380px; width: 15%; float: left; display: inline-block; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-right: 1px solid #CCC; border-bottom: 1px solid #CCC; background-color: #FFFFFF; position: relative; overflow: hidden;
}
.icon{
	width: 40%;
	display: inline-block;
	vertical-align: middle; 
	float: left;
}

.iconholder{
	position:relative;
	width: 100%;
	display: inline-block;
	height: 35px;
	vertical-align: middle; 
	float: left;
}
.iconnote{
	width: 60%;
	display: inline-block;
	vertical-align: middle; 
	float: right;
}

#productindustrial { vertical-align: middle; text-align: center; height: 200px; min-height: 200px; width: 20%; float: left; display: inline-block; padding-top: 10px; padding-left: 10px; padding-right: 10px; background-color: #FFFFFF; position: relative;}

#productlarge { display: table; vertical-align: middle; height: auto; min-height: 320px; width: 23%; float: left; display: inline-block; padding-top: 10px; padding-left: 10px; padding-right: 10px; background-color: #FFFFFF; position: relative;}
.buttonholderlarge { display: table; vertical-align: middle; text-align: center; height: 50px; min-height: 50px; width: 30%; float: left; display: inline-block; padding-top: 10px; padding-left: 10px; padding-right: 10px; margin-bottom: 20px; position: relative;}
#imagelarge { display: table; vertical-align: middle; height: 320px; min-height: 320px; width: 23%; float: left; display: inline-block; padding-top: 10px; padding-left: 10px; padding-right: 10px; background-color: #FFFFFF; position: relative;}

#productlargetangye { display: table-cell; height: 400px; min-height: 400px; width: 23%; float: left; padding-top: 10px; padding-left: 10px; padding-right: 10px; background-color: #FFFFFF; position: relative; }
#imagelargetangye { vertical-align: middle; height: 400px; min-height: 400px; width: 23%; float: left; display: inline-block; padding-top: 10px; padding-left: 10px; padding-right: 10px; background-color: #FFFFFF; position: relative;}

.servicepanels { height: 60px; min-height: 60px; width: 32%; display: inline-block; background-color: #F1F1F1; outline: 1px solid #333; position:relative; margin-right: 10px; float:left;}
.servicepanelsimage { height: 60px; min-height: 60px; width: 20%; display: inline-block; position:relative; padding-left: 10px; padding-top: 10px;margin-right: 5px; float:left}
.servicepanelstext { height: 60px; min-height: 60px; width: 70%; text-align: center; padding-top: 20px; display: inline-block; position:relative; float:left; }
	
.hidethis { display: block;}
	
#parentlarge { height: 480px; min-height: 480px; width: 350px; float: left; display: inline-block; margin-right: 8px; margin-bottom: 8px; background-color: #FFFFFF; position: relative;}
#wrapperlarge { height: 480px; min-height: 480px; width: 350px; display: inline-block; background-color: #FFFFFF; outline: 2px solid #F1F1F1; position: relative}
#wrapperlarge:hover { outline: 2px solid #4cb6ea;}

#highlightlarge { height: 480px; min-height: 480px; width: 350px; display: inline-block; background-color: #FFFFFF; outline: 2px solid #F1F1F1; position:relative; padding-left: 5px;}
#highlightlarge:hover { height: 480px; min-height: 480px; width: 350px; outline: 2px solid #4cb6ea;}


#contentlarge { float: left; height: 270px; min-height: 270px;line-height: 270px; width: 340px; display: inline-block; text-align:center; position: relative;}
#contentlarge img {vertical-align: middle;}
#content2large { float: left; height: 190px; min-height: 190px; width: 340px; display: inline-block; vertical-align: middle; text-align:center; position: relative;}

  .fullheader{display:block; background-color: #FFF;}
  .textdescriptions { display:none;}
  .phoneheader{display:none;}
  .section {
    padding: 1rem 0 1rem;
  }
  ul.products li {
    width: 148px;
	margin-right: 3px;
    display: inline-block;
}
  .product2 { display:none;}
  .hero {
    padding: 22rem 0;
  }
  .hero-heading {
    font-size: 3.0rem;
  }
  .phone {
    top: -16rem;
    max-height: 615px;
  }
  .phone + .phone {
    top: -14rem;
    max-height: 570px;
  }
#footer {
		float:left;
		padding:15px 0;
		min-width:100%;
		min-height:400px;
		background:#006bc5;
		display: block;
	}
#footerportal {
		float:left;
		padding:15px 0;
		min-width:100%;
		min-height:190px;
		max-height:240px;
		background:#006bc5;
		display: block;
	}
	    #footerblue {
		float:left;
		padding:15px 0;
		min-width:100%;
		min-height:140px;
		background:#006bc5;
		display: block;
	}
		#footerwhite {
		float:left;
		padding:15px 0;
		min-width:100%;
		min-height:60px;
		background:#FFFFFF;
		display: block;
	}
	
	#smallfooter {
		display: none;
	}
	.socialpanel-small {
	position: relative;
	width: 100%;
	height: 70px; 
	text-align: center;
	margin-top: 1px;
	padding-top: 10px;
	float: left;
	background-color: #0082Cf; 
	clear: both;
	display: none;
  }
    .cardpanel-small {
	position: relative;
	width: 100%;
	height: 110px; 
	text-align: center;
	margin-top: 0px;
	padding-top: 10px;
	float: left;
	background-color: #FFF; 
	clear: both;
	display: none;
  }
    .cardpanel-large {
	position: relative;
	width: 100%;
	height: 50px; 
	text-align: center;
	margin-top: 0px;
	margin-bottom: -10px;
	padding-top: 10px;
	float: left;
	background-color: #FFF; 
	clear: both;
	display: block;
  }
  
  .eqi4-container {
  border: 0px solid black;
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.eqi4-container img{
  max-width: 100%;
  height: auto;
}

.eqi4-container div large{
  width:65.0%;
  height: auto;
}
.eqi4-container div small{
  width: 34.75%;
  padding-top:20px;
  height: auto;
}

.eqi4-container div left{
  width:33.0%;
  height: auto;
  text-align: left;
}

.eqi4-container div center{
  width:33.0%;
  height: auto;
  text-align: center;
}
.eqi4-container div right{
  width:33.0%;
  height: auto;
  text-align: right;
}
	
	.appleLinksWhite a {color:#ffffff; text-decoration: none; font-weight: 600; }
	.appleLinksBlue a {color:#4cb6ea; text-decoration: none;  font-weight: 600;}
  
}

/* Bigger than 1200 */
@media (min-width: 1200px) {
	
.desktop{ display: block;}	
.tablet{ display: none;}
.supertablet{ display: none;}
.mobile{ display: none;}
	
	.footer1pc {
	position: relative;
	display: block;
	background-color: #006bc5;
	min-height: 190px;
	width:100%;
	margin-top: -160px;
	padding-top: 20px;
	padding-bottom: 20px;

	
}
   .footer2pc {
	position: relative;
	display: block;
	background-color: #006bc5;
	min-height: 60px;
	width:100%;
	padding-bottom: 20px;
	clear: both;
}
    .footermobile{
	position: relative;
	display: none;
	background-color: #006bc5;
	height: auto;
	min-height:100px;
	width:100%;
	padding-top: 20px;
}
	
/* Online cat css*/
	
#catprodimage{ vertical-align: middle; height: 361px; min-height: 361px; width: 33%; float: left; display: inline-block; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-right: 1px solid #CCC; border-left: 1px solid #CCC; border-bottom: 1px solid #CCC; background-color: #FFFFFF; position: relative;}

#catprodimage img {
	vertical-align: middle;
	display: inline-block;
    max-width: 80%; /* You can use different numbers for max-width and max-height! */
    max-height: 80%;
    width: 80%;
    height: 80%;
	position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}
	
#catprodcontainer { vertical-align: middle; height: 360px; min-height: 360px; width: 33%; float: left; display: inline-block; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-bottom: 1px solid #CCC; background-color: #FFFFFF; border-right: 1px solid #CCC; position: relative;}

#catprodinfo { vertical-align: middle; height: 260px; min-height: 260px; width: 100%; float: left; display: inline-block; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; padding-right: 0px; background-color: #fff; position: relative;}

#catprodavail { vertical-align: middle; height: 178px; min-height: 178px; width: 100%; float: left; display: inline-block; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; padding-right: 0px; background-color: #fff; position: relative;}

#catprodlist { vertical-align: middle; height: 30px; min-height: 30px; width: 100%; float: left; display: inline-block; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; padding-right: 0px; background-color: #FFF; border-top: 1px solid #CCC; position: relative; text-align: center;}

#catprodbuy { vertical-align: middle; height: 50px; min-height: 50px; width: 100%; float: left; display: inline-block; padding-bottom: 0px; padding-top: 10px; padding-left: 0px; padding-right: 0px; background-color: #FFF; border-top: 1px solid #CCC; position: relative;}

#catprodqty { vertical-align: middle; height: 40px; min-height: 40px; width: 100%; float: left; display: inline-block; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; padding-right: 0px; background-color: #FFF; border-top: 1px solid #CCC; position: relative;}

#catprodbase { vertical-align: middle; height: 48px; min-height: 48px; width: 100%; float: left; display: inline-block; padding-bottom: 0px; padding-top: 10px; padding-left: 0px; padding-right: 0px; background-color: #FFF; border-top: 1px solid #CCC; position: relative;}

/* End Online cat css*/
	
  .phoneonly {
  position: relative;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 0 0px;
  box-sizing: border-box;
  background-color : transparent;
  clear: both;
  display: none;
  }
  
  .phoneonlytel {
  display: none;
  }
	
	.showhide{ width: 100%; display: block;}
	.showhide2{max-height: 1px; display: block;}
	
	  #drillmedium {
	position: relative;
	width: 48%;
	margin-right: 10px;
	height: 440px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	margin-bottom: 10px; 
	float: left;
  }
  #drillmedium:hover {
	outline: 3px solid #4cb6ea;
	-webkit-box-shadow: 0 0 10px 5px #C9C9C9;
	box-shadow: 0 0 10px 5px #C9C9C9;}
  #drillmediumchild1 {
	position: relative;
	width: 100%;
	height: 260px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	float: left;
  }
  #drillmediumchild1 img {
	vertical-align: middle;
	display: inline-block;
    max-width: 90%; /* You can use different numbers for max-width and max-height! */
    max-height: 90%;
    width: auto;
    height: auto;
	position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}
  #drillmediumchild2 {
	position: relative;
	width: 100%;
	height: 180px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	float: left;
	text-align: center;
  }
	
  .pumpaccessories {
  position: relative;
  width: 11.5%;
  height: 170px;
  margin-right: 10px;
  margin-bottom: 10px;
  box-sizing: border-box; 
  background-color: #FFF;
  display: block;
  text-align: center;
  float: left;
  }
  .pumpaccessories:hover {
	outline: 3px solid #4cb6ea;
	-webkit-box-shadow: 0 0 10px 5px #C9C9C9;
	box-shadow: 0 0 10px 5px #C9C9C9;}
	
	.pumpaccessories img{
  width: 90%;
  text-align: center;
  }
	
	.showblueheader{ width: 100%; display: block;}

	
	.submenu2 {
	position: relative;
	width: 100%;
	font-size: 16px; 
	font-weight: 600; 
	line-height: 22px; 
	text-align:center;
	height: 55px; 
	max-height: 55px;
	float: left;
	background-color: #ffffff; 
	padding-top: 5px;
	margin-bottom: 15px;
	z-index: 9;
	-webkit-box-shadow: 0 12px 12px 0px #999;
    box-shadow: 0 12px 12px 0px #999;
	clear: both;
  }
	
	#portalquotewide {
	position: relative;
	width: 40%;
	margin-right: 4px;
	margin-bottom: 4px;
	box-sizing: border-box;
	background-color: #FFFFFF;
	float: left;
  }
  #portalquote {
	position: relative;
	width: 25%;
	margin-right: 4px;
	margin-bottom: 4px;
	box-sizing: border-box; 
	background-color: #FFFFFF; 
	float: left;
  }
	#drillbrandshome {
	position: relative;
	width: 260px;
	max-width: 260px;
	height: 210px;
	margin-right: 0px;
	margin-bottom: 10px;
	box-sizing: border-box; 
	background-color: #FFFFFF; 
	float: left;
  }
  #drillbrandshome:hover {
	outline: 3px solid #4cb6ea;
	-webkit-box-shadow: 0 0 10px 5px #C9C9C9;
	box-shadow: 0 0 10px 5px #C9C9C9;}
  #drillbrandshomechild1 {
	position: relative;
	width: 260px;
	max-width: 260px;
	height: 120px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	float: left;
  }
  #drillbrandshomechild1 img {
	vertical-align: middle;
	display: inline-block;
	width: 260px;
    max-width: 260px; /* You can use different numbers for max-width and max-height! */
	height: 100px;
    max-height: 120px;
    width: auto;
    height: auto;
	position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}
  #drillbrandshomechild2 {
	position: relative;
	width: 260px;
	max-width: 260px;
	height: 70px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	float: left;
	text-align: center;
  }
	
	#drilllarge {
	position: relative;
	width: 32.333%;
	max-width: 32.333%;
	margin-right: 10px;
	height: 500px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	margin-bottom: 10px; 
	border-style: solid;
    border-width: 1px;
	border-color: #DDD;
	float: left;
  }
  #drilllarge:hover {
	outline: 3px solid #4cb6ea;
	-webkit-box-shadow: 0 0 10px 5px #C9C9C9;
	box-shadow: 0 0 10px 5px #C9C9C9;}
  #drillchild1 {
	position: relative;
	width: 95%;
	max-width: 95%;
	margin-right: 10px;
	margin-left: 10px;
	height: 260px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	float: left;
  }
  #drillchild1 img {
	vertical-align: middle;
	display: inline-block;
    max-width: 98%; /* You can use different numbers for max-width and max-height! */
    max-height: 90%;
    width: auto;
    height: auto;
	position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}
  #drillchild2 {
	position: relative;
	width: 95%;
	max-width: 95%;
	margin-right: 10px;
	margin-left: 10px;
	height: 230px;
	box-sizing: border-box; 
	background-color: #FFFFFF;
	float: left;
	text-align: center;
  }
#smallwrapper { height: 240px; width: 16%; min-height: 220px; display: inline-block; background-color: #FFFFFF; outline: 2px solid #DDD; position: relative}
#smallwrapper:hover { outline: 2px solid #4cb6ea;-webkit-box-shadow: 0 0 20px 10px #C9C9C9;}

#smallwrappermedium { height: 280px; width: 16%; min-height: 280px; display: inline-block; background-color: #FFFFFF; outline: 2px solid #DDD; position: relative}
#smallwrappermedium:hover { outline: 2px solid #4cb6ea;-webkit-box-shadow: 0 0 20px 10px #C9C9C9; box-shadow: 0 0 20px 10px #C9C9C9;}
#contentmedium2 { float: left; height: 130px; width: 100%; margin:0 auto; display: inline-block; text-align:center; position: relative;}

#contentmedium { float: left; height: 140px; line-height: 130px; width: 100%; margin:0 auto; display: inline-block; text-align:center; position: relative;}
#contentmedium img {
	vertical-align: middle;
	display: inline-block;
    max-width: 90%; /* You can use different numbers for max-width and max-height! */
    max-height: 90%;
    width: auto;
    height: auto;
	position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}
	
#xxcontentmedium:hover img {
    position:relative;
    top:0px;
    left:0px;
    width:400px;
    height:400px;
    display:block;
    z-index:999;
}
	

#content { float: left; height: 140px; line-height: 130px; width: 100%; margin:0 auto; display: inline-block; text-align:center; position: relative;}
#content img {
	vertical-align: middle;
	display: inline-block;
    max-width: 90%; /* You can use different numbers for max-width and max-height! */
    max-height: 90%;
    width: auto;
    height: auto;
	position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}
#content2 { float: left; height: 100px; width: 100%; margin:0 auto; display: inline-block; text-align:center; position: relative;}

#productmedium { vertical-align: middle; height: 235px; min-height: 235px; width: 25%; float: left; display: inline-block; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-right: 1px solid #CCC; border-left: 1px solid #CCC; border-bottom: 1px solid #CCC; background-color: #FFFFFF; position: relative;}

#imagemedium{ vertical-align: middle; height: 235px; min-height: 235px; width: 23%; float: left; display: inline-block; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-right: 1px solid #CCC; border-left: 1px solid #CCC; border-bottom: 1px solid #CCC; background-color: #FFFFFF; position: relative;}
	
#imagecatalogue{ vertical-align: middle; height: 380px; min-height: 380px; width: 33%; float: left; display: inline-block; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-right: 1px solid #CCC; border-left: 1px solid #CCC; border-bottom: 1px solid #CCC; background-color: #FFFFFF; position: relative;}

#imagecatalogue img {
	vertical-align: middle;
	display: inline-block;
    max-width: 80%; /* You can use different numbers for max-width and max-height! */
    max-height: 80%;
    width: 80%;
    height: 80%;
	position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}
	
#productcatalogue { vertical-align: middle; height: 380px; min-height: 380px; width: 33%; float: left; display: inline-block; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-bottom: 1px solid #CCC; background-color: #FFFFFF; border-right: 1px solid #CCC; position: relative;}

#iconcatalogue{ vertical-align: middle; height: 380px; min-height:380px; width: 15%; float: left; display: inline-block; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-right: 1px solid #CCC; border-bottom: 1px solid #CCC; background-color: #FFFFFF; position: relative; overflow: hidden;
}
.icon{
	width: 40%;
	display: inline-block;
	vertical-align: middle; 
	float: left;
}

.iconholder{
	position:relative;
	width: 100%;
	display: inline-block;
	height: 35px;
	vertical-align: middle; 
	float: left;
}
.iconnote{
	width: 60%;
	display: inline-block;
	vertical-align: middle; 
	float: right;
}

#imageindustrial{ vertical-align: middle; height: 250px; min-height: 250px; width: 13%; float: left; display: inline-block; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-right: 1px solid #CCC; border-left: 1px solid #CCC; border-bottom: 1px solid #CCC; background-color: #FFFFFF; position: relative;}

#imageindustrial img {
	vertical-align: middle;
	display: inline-block;
    max-width: 95%; /* You can use different numbers for max-width and max-height! */
    max-height: 95%;
    width: auto;
    height: auto;
	position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	}

#iconindustrial{ vertical-align: middle; height: 250px; min-height: 250px; width: 15%; float: left; display: inline-block; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-right: 1px solid #CCC; border-bottom: 1px solid #CCC; background-color: #FFFFFF; position: relative; overflow: hidden;
}

#productindustrial { vertical-align: middle; height: 250px; min-height: 250px; width: 25%; float: left; display: inline-block; padding-top: 10px; padding-left: 10px; padding-right: 10px; background-color: #FFFFFF; position: relative;}

#productindustrialnarrow { vertical-align: middle; height: 250px; min-height: 250px; width: 23%; float: left; display: inline-block; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-bottom: 1px solid #CCC; background-color: #FFFFFF; border-right: 1px solid #CCC; position: relative;}

#productlarge { display: table; vertical-align: middle; height: auto; min-height: 320px; width: 25%; float: left; display: inline-block; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-right: 1px solid #CCC; border-left: 1px solid #CCC; border-bottom: 1px solid #CCC; background-color: #FFFFFF; position: relative;}

#imagelarge { display: table; vertical-align: middle; height: 320px; min-height: 320px; width: 23%; float: left; display: inline-block; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-right: 1px solid #CCC; border-left: 1px solid #CCC; border-bottom: 1px solid #CCC; background-color: #FFFFFF; position: relative;}

#productlargetangye { display: table-cell; height: 370px; min-height: 370px; width: 24%; float: left; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-right: 1px solid #CCC; border-left: 1px solid #CCC; border-bottom: 1px solid #CCC; background-color: #FFFFFF; position: relative; }
#imagelargetangye { vertical-align: middle; height: 400px; min-height: 400px; width: 23%; float: left; display: inline-block; padding-top: 10px; padding-left: 10px; padding-right: 10px; background-color: #FFFFFF; position: relative;}

.servicepanels { height: 60px; min-height: 60px; width: 32%; display: inline-block; background-color: #F1F1F1; outline: 1px solid #333; position:relative; margin-right: 10px; float:left;}
.servicepanels2 { height:28px; min-height: 28px; width: 100%; display: inline-block; background-color: #F1F1F1; border: 1px solid #333; position:relative; border-radius: 5px;  float:left;}
.servicepanelsimage { height: 60px; min-height: 60px; width: 20%; display: inline-block; position:relative; padding-left: 10px; padding-top: 10px;margin-right: 5px; float:left}
.servicepanelstext { height: 60px; min-height: 60px; width: 70%; text-align: center; padding-top: 20px; display: inline-block; position:relative; float:left; }
	
.hidethis { display: block;}
	
#parentlarge { height: 480px; min-height: 480px; width: 350px; float: left; display: inline-block; margin-right: 8px; margin-bottom: 8px; background-color: #FFFFFF; position: relative;}
#wrapperlarge { height: 480px; min-height: 480px; width: 350px; display: inline-block; background-color: #FFFFFF; outline: 2px solid #F1F1F1; position: relative}
#wrapperlarge:hover { outline: 2px solid #4cb6ea;}

#highlightlarge { height: 480px; min-height: 480px; width: 350px; display: inline-block; background-color: #FFFFFF; outline: 2px solid #F1F1F1; position:relative; padding-left: 5px;}
#highlightlarge:hover { height: 480px; min-height: 480px; width: 350px; outline: 2px solid #4cb6ea;}


#contentlarge { float: left; height: 270px; min-height: 270px;line-height: 270px; width: 340px; display: inline-block; text-align:center; position: relative;}
#contentlarge img {vertical-align: middle;}
#content2large { float: left; height: 190px; min-height: 190px; width: 340px; display: inline-block; vertical-align: middle; text-align:center; position: relative;}

  .fullheader{display:block; background-color: #FFF;}
  .textdescriptions { display:none;}
  .phoneheader{display:none;}
  .section {
    padding: 1rem 0 1rem;
  }
  ul.products li {
    width: 148px;
	margin-right: 3px;
    display: inline-block;
}
  .product2 { display:none;}
  .hero {
    padding: 22rem 0;
  }
  .hero-heading {
    font-size: 3.0rem;
  }
  .phone {
    top: -16rem;
    max-height: 615px;
  }
  .phone + .phone {
    top: -14rem;
    max-height: 570px;
  }
#footer {
		float:left;
		padding:15px 0;
		min-width:100%;
		min-height:400px;
		background:#006bc5;
		display: block;
	}
#footerportal {
		float:left;
		padding:15px 0;
		min-width:100%;
		min-height:190px;
		max-height:240px;
		background:#006bc5;
		display: block;
	}
	    #footerblue {
		float:left;
		padding:15px 0;
		min-width:100%;
		min-height:140px;
		background:#006bc5;
		display: block;
	}
		#footerwhite {
		float:left;
		padding:15px 0;
		min-width:100%;
		min-height:60px;
		background:#FFFFFF;
		display: block;
	}
	
	#smallfooter {
		display: none;
	}
	.socialpanel-small {
	position: relative;
	width: 100%;
	height: 70px; 
	text-align: center;
	margin-top: 1px;
	padding-top: 10px;
	float: left;
	background-color: #0082Cf; 
	clear: both;
	display: none;
  }
    .cardpanel-small {
	position: relative;
	width: 100%;
	height: 110px; 
	text-align: center;
	margin-top: 0px;
	padding-top: 10px;
	float: left;
	background-color: #FFF; 
	clear: both;
	display: none;
  }
    .cardpanel-large {
	position: relative;
	width: 100%;
	height: 50px; 
	text-align: center;
	margin-top: 0px;
	margin-bottom: -10px;
	padding-top: 10px;
	float: left;
	background-color: #FFF; 
	clear: both;
	display: block;
  }
    .pdflinks a {color:#999; text-decoration: none; font-weight: 300; }
	.appleLinksWhite a {color:#ffffff; text-decoration: none; font-weight: 600; }
	.appleLinksBlue a {color:#4cb6ea; text-decoration: none;  font-weight: 600;}
	
.eqi4-container {
  border: 0px solid black;
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.eqi4-container img{
  max-width: 100%;
  height: auto;
}

.eqi4-container div large{
  width:65.0%;
  height: auto;
}
.eqi4-container div small{
  width: 34.75%;
  padding-top:20px;
  height: auto;
}

.eqi4-container div left{
  width:33.0%;
  height: auto;
  text-align: left;
}

.eqi4-container div center{
  width:33.0%;
  height: auto;
  text-align: center;
}
.eqi4-container div right{
  width:33.0%;
  height: auto;
  text-align: right;
}


.eqi4-container div img{
  max-width: 100%;
  height: auto;
}
.eqi4-container img:hover {
    opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
}

  
}