@charset "utf-8";
/* CSS Document */
/******************************product range******************************************/
/* Center website */
/*.main {
	max-width: 1000px;
    margin: auto;
}*/
.main .row{
	max-width: 1000px;
    margin: auto;

}
/* Create four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  height: 90%;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-top: 10px;
}

/* Clear floats after rows */ 
.row:after {
  content2: "";
  display: table;
  clear: both;
}
.row:after {
  content3: "";
  display: table;
  clear: both;
}

.row:after {
  content4: "";
  display: table;
  clear: both;
}
.row:after {
  content5: "";
  display: table;
  clear: both;
}
.row:after {
  content6: "";
  display: table;
  clear: both;
}
/* Content2 */
 .content2 {
  background-color: white;
  padding:  10px ;
  width: 100%;
  height: 390px;
}
 .content3 {
  background-color: white;
  padding:  10px ;
  width: 100%;
  height: 390px;
}
 .content4 {
  background-color: white;
  padding:  10px ;
  width: 100%;
  height: 420px;
}
 .content5 {
  background-color: white;
  padding:  10px ;
  width: 100%;
  height: 380px;
}
 .content6 {
  background-color: white;
  padding:  10px ;
  width: 100%;
  height: 400px;
}
.pdimage{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 225px;
}
.readmore{
padding-top: 3px;
text-align: right;
text-decoration: none;
}

.subhead{
	font-size: 16px;
	padding: 5px 3px;

}
.subhead a{
	color: #FF8C00;
	text-decoration: none;
}
.subhead1 a{
	color: #FF4500;
	text-decoration: none;
	padding-left: 10px;
}
.subcontent
{
	font-size: 12px;
	background-color:#F5F5F5;
	height: 180px;
}
.subcontent1
{
	font-size: 12px;
	background-color:#F5F5F5;
	height: 100px;
}
.subcontent1sp
{
	font-size: 12px;
	background-color:#F5F5F5;
	height: 120px;
}
.subcontent2
{
	font-size: 12px;
	background-color:#F5F5F5;
	height: 150px;
}
.subcontent2sp
{
	font-size: 12px;
	background-color:#F5F5F5;
	height: 130px;
}
.subcontent3
{
	font-size: 12px;
	background-color:#F5F5F5;
	height: 150px;
}
.subcontent3sp{
	font-size: 12px;
	background-color:#F5F5F5;
	height: 130px;
}
.subcontent4
{
	font-size: 12px;
	background-color:#F5F5F5;
	height: 145px;
}
.subcontent5
{
	font-size: 12px;
	background-color:#F5F5F5;
	height: 130px;
}
.introduction{
  justify-content: center;
}

/*********************************fancybox************************/
.fancyboxd a{
	padding: 2px;
}

/*********************************accordion************************/
button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
	
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

button.accordion:after {
    content: '\02795';
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2796";
}

div.panel {
	width: 100%;
    padding: 0 18px;
    background-color: white;
    max-height:0;
    overflow: hidden;
	/*position: fixed;*/
    transition: 0.6s ease-in-out;
    opacity: 0;

}

div.panel.show {
    opacity: 1;
    max-height: 1530px;  
}

div.panel.cd{
	padding: 15px;
}
.cd a{
	color:#696969;
}
.cd a.active,.cd a:hover {
    color: #696969;
	text-decoration: none;
}
.cd{
	padding: 2px;
}

button.job{
	background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
	
	
}

button.job a
{
	color: black;
	text-decoration: none;
}

.moreinform{
	color: #FF4500;
	/*text-decoration: none;*/
}
.moreinform.active, .moreinform:hover {
  color: #FF7F50;
  text-decoration: none;
}
/***********************************product ranage - crawler******************************************/
.crawler{
	color:orangered; 
	padding: 10px;
}

.contentmodel{
	color:#FF4500; 
}
/****************************************paragraph******************************************/
.paragraph{
	padding: 10px;
	text-align:left;
	width:100%;
}

/**************************************slideshow***************************************/

img {
  vertical-align: middle;
}

/* Position the image container (needed to position the left and right arrows) */
.container1 {
  position: relative;
  width: 100%;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

.row1:after {
  content: "";
  display: table;
  clear: both;
}
/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #778899;
  color: #ffffff;
  width:91%;
  height: 45px;	
  font-weight: bold;
  font-size: 20px;

}
.caption-container2{
  text-align: center;
  background-color: #778899;
  color: #ffffff;
  width:91%;
  height: 49px;	
  font-weight: bold;
  font-size: 18px;
}

.caption-container3 {
  text-align: center;
  background-color: #778899;
  color: #ffffff;
  width:80.2%;
  height: 45px;	
  font-weight: bold;
  font-size: 20px;

}
.caption-container4 {
  text-align: center;
  background-color: #778899;
  color: #ffffff;
  width:84.8%;
  height: 45px;	
  font-weight: bold;
  font-size: 16px;

}
.caption-container5 {
  text-align: center;
  background-color: #778899;
  color: #ffffff;
  width:80.2%;
  height: 45px;	
  font-weight: bold;
  font-size: 16px;

}
/* Six columns side by side */
.columndrill {
  float: left;
  width: 22.5%;
  
}/* for 2/3 photos*/
.columndrill1 {
  float: left;
  width: 16.15%;/* for 5 photos*/
  
}/* for 5 photos*/
.columndrill2 {
  float: left;
  width: 10.15%;
  
}
.columndrill3{
  float: left;
  width: 20.1%; 
}/* for 4 photos*/
.columndrill4{
  float: left;
  width: 12.15%;
}/* for 6 photos*/
.columndrill5{
  float: left;
  width: 12.15%;
}/* for 7 photos*/
/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}
.whiteline{
	padding:3px;
}
/**************************job site photo - image grid************************************/
.row3 {
  display: -ms-flexbox; /* IE 10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE 10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create two equal columns that sits next to each other */
.column3{
  -ms-flex: 25%; /* IE 10 */
  flex: 25%;
}

.column3 img {
  margin-top: 8px;
  vertical-align: middle;
  padding: 0 4px;
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  font-size: 18px;
}

.btn:hover {
  background-color: #ddd;
}

.btn.active {
  background-color: #666;
  color: white;
}
/*************************************rotator sub heading ******************************/
.rotatorsubhead{
	padding-top:10px;
	color:#f26722;
}

/*********************************business partner**********************************/

.image {
  box-shadow: 0 0 2px 2px rgba(90, 90, 90, 0.6);
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}
.image:hover{
	  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
}
.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.container4:hover .image {
  opacity: 0.3;
}

.container4:hover .middle {
  opacity: 1;
}

.text {
  background-color: #FF8C00;
  box-shadow: 0 0 2px 2px rgba(166, 165, 165, 0.5);
  color: white;
  font-size: 16px;
  padding: 16px 32px;

}

.text a{
    color: white;
	text-decoration: none;
}

.partner{
	font-size: 13px;
	padding: 5px 0px; 
	font-weight: bold;
}


/***********************************pagination*****************************************/
.pagenumber {
  /*display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;*/
  padding-left: 400px;
  padding-top: 20px;
}
.pagenumber1 {
  /*display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;*/
  padding-left: 270px;
  padding-top: 20px;
}

.pagenumber2 {
  /*display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;*/
  padding-left: 350px;
  padding-top: 20px;
}
.pagenumber3 {
  /*display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;*/
  padding-left: 420px;
  padding-top: 20px;
}
.pagenumber4 {
  /*display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;*/
  padding-left: 500px;
  padding-top: 20px;
}
.pagenumber5 {
  /*display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;*/
  padding-left: 100px;
  padding-top: 20px;
}
.pagination {
  display: flex;
  padding: 1rem;
  background-color: #cdcccc;
  width: fit-content;
  border-radius: 0.25rem;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
  gap: 0.5rem;
}

.crumb {
  display: block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: currentColor;
  border-radius: 0.2rem;
  border: 0.0625rem solid #d7d7d7; /* 1px */
}

.crumb:hover, .crumb__active {
  background-color: #A9A9A9;
  color: #fdfdfd;
  border-color: #A9A9A9;
  text-decoration: none;
}

.crumb__prev { margin-right: 0.5rem; cursor: pointer; }
.crumb__next { margin-left: 0.5rem; cursor: pointer; }

/*********************************breadcrumb************************************/
ul.breadcrumb {
  padding: 5px 15px;
  list-style: none;
  background-color: #f26722;
}
ul.breadcrumb li {
  display: inline;
  font-size: 18px;
}
ul.breadcrumb li+li:before {
  padding: 8px;
  color: #ffffff;
  content: "/\00a0";
}
ul.breadcrumb li a {
  color: #ffffff;
  text-decoration: none;
}
ul.breadcrumb li a:hover {
  color: #DCDCDC;
  text-decoration: none;
}
.breadcrumb{
	color: #ffffff;
	font-size: 18px;
}

/******************************media screen******************************/
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
.pdimage{
	width: 93%;
	font-size: 15px;
	}

}
/* Responsive layout - makes a two column-layout instead of four columns */


@media only screen and (max-width: 800px) {

	.fancyboxd{
		width: 100%;
	}
	ul.breadcrumb li{
	 font-size: 18px;
	 padding-top: 5px;
	}
	.paragraph{
		
	     padding-left: 5px;
		 width:140%;
		 /*position: relative;*/
		 /*left:20px;*/
	}
	.drillcontent{
		  padding-left: 10px;
		  width:200%;
		  display: flex;
  		  flex-direction:column;
  		  flex-wrap: wrap;
  		  /*justify-content: left;*/
	}
	.row3 .column3 {
		display: flex;
		flex-direction:wrap;
		flex-wrap: wrap;
		padding-top: 48%;
		/*padding-right: 1%;*/
		
		
		
	}
	.container1 img{
  		display: block;
  		margin-left: 30%;
 		margin-right: 30%;
	}
	.container1 .row1 .columndrill3 img{
  		display: block;
  		margin-left: 147%;
 		margin-right: 147%;
	}/*for 4 photos */
	.container1 .row1 .columndrill img{
  		display: block;
  		margin-left: 131%;
 		/*margin-right: 147%;*/
	}/*for 2/3 photos */
	.container1 .row1 .columndrill1 img{
  		display: block;
  		margin-left: 180%;
 		/*margin-right: 147%;*/
	}/*for 5 photos */
	.container1 .row1 .columndrill4 img{
  		display: block;
  		margin-left: 243%;
 		/*margin-right: 147%;*/
	}/*for 6 photos */	
	.container1 .row1 .columndrill5 img{
  		display: block;
  		margin-left: 280%;
 		/*margin-right: 147%;*/
	}/*for 7 photos */	
	.container1 .row1 .columndrill2 img{
  		display: block;
  		margin-left: 280%;
 		/*margin-right: 147%;*/
	}/*for 8 photos */	
	button.accordion, div.panel{width:325%;}
	.pagenumber {
		  padding-left: 10px;
	}
	.pagenumber1{
		 padding-left: 10px;
	}
	.pagenumber2{
		 padding-left: 10px;
	}
	.pagenumber3{
		padding-left: 10px;
	}
	.pagenumber4{
		padding-left: 10px;
	}
    .pagenumber5{
		padding-left: 10px;
	}
/*****************************************************************************/
	.row:after {
  content2: "";
  display: table;
  clear: both;
}
.row:after {
  content3: "";
  display: table;
  clear: both;
}

.row:after {
  content4: "";
  display: table;
  clear: both;
}
.row:after {
  content5: "";
  display: table;
  clear: both;
}
.row:after {
  content6: "";
  display: table;
  clear: both;
}
/* Content2 */
 .content2 {
  background-color: white;
  padding:  10px ;
  width: 100%;
  height: 350px;
}
 .content3 {
  background-color: white;
  padding:  10px ;
  width: 100%;
  height: 370px;
}
 .content4 {
  background-color: white;
  padding:  10px ;
  width: 100%;
  height: 440px;
}
 .content5 {
  background-color: white;
  padding:  10px ;
  width: 100%;
  height: 380px;
}
 .content6 {
  background-color: white;
  padding:  10px ;
  width: 100%;
  height: 420px;
}
.subcontent
{
	font-size: 11px;
	background-color:#F5F5F5;
	height: 240px;
}
.subcontent1
{
	font-size: 11px;
	background-color:#F5F5F5;
	height: 140px;
}
.subcontent2
{
	font-size: 11px;
	background-color:#F5F5F5;
	height: 120px;
}
.subcontent3
{
	font-size: 11px;
	background-color:#F5F5F5;
	height: 200px;
}
.subcontent4
{
	font-size: 11px;
	background-color:#F5F5F5;
	height: 160px;
}
.subcontent5
{
	font-size: 11px;
	background-color:#F5F5F5;
	height: 130px;
}

}
@media screen and (max-width: 500px) {
.pdimage{
	width: 100%;
	font-size: 13px;
	}
  .column {
    width: 85%;
	padding-left: 50px;
  }
}
@media only screen and (max-width: 400px) {

	.fancyboxd{
		width: 100%;
	}
	.paragraph{
		padding-left: 5px;  
		width:95%;
		/*position: relative;*/
		/*left:0;*/
	}
	ul.breadcrumb li{
	 font-size: 16px;
	padding-top: 10px;
	}
	.drillcontent{
		padding-left: 10px;
		width:250%;
		display: flex;
		flex-direction:column;
		flex-wrap: wrap;
  		  /*justify-content: left;*/
	}
	.row3 .column3{
		display: flex;
		flex-direction:wrap;
		flex-wrap: wrap;
		padding: 5% 0 0 0;
	}
	.container1 img{
  		display: block;
  		margin-left: 5%;
 		margin-right: 5%;
	}
	.container1 .row1 .columndrill3 img{
  		display: block;
  		margin-left: 21%;

	}/* for 4 photos*/
	.container1 .row1 .columndrill img{
  		display: block;
  		margin-left: 20%;
 		/*margin-right: 147%;*/
	}/* for 2/3 photos*/
	.container1 .row1 .columndrill1 img{
  		display: block;
  		margin-left: 30%;
 		/*margin-right: 147%;*/
	}/*for 5 photos */
	.container1 .row1 .columndrill5 img{
  		display: block;
  		margin-left: 35%;
 		/*margin-right: 147%;*/
	}/*for 7 photos */	
	.container1 .row1 .columndrill4 img{
  		display: block;
  		margin-left: 35%;
 		/*margin-right: 147%;*/
	}/*for 6 photos */
	.container1 .row1 .columndrill2 img{
  		display: block;
  		margin-left: 35%;
 		/*margin-right: 147%;*/
	}/*for 8 photos */		
	button.accordion, div.panel{width:100%;}
	.pagenumber {
		  padding-left: 10px;
	}
	.pagenumber1{
		 padding-left: 10px;
	}
	.pagenumber2{
		 padding-left: 10px;
	}
	.pagenumber3{
		padding-left: 10px;
	}
	.pagenumber4{
		padding-left: 10px;
	}
    .pagenumber5{
		padding-left: 10px;
	}
	/*****************************************************************/
	.row:after {
  content2: "";
  display: table;
  clear: both;
}
.row:after {
  content3: "";
  display: table;
  clear: both;
}

.row:after {
  content4: "";
  display: table;
  clear: both;
}
.row:after {
  content5: "";
  display: table;
  clear: both;
}
.row:after {
  content6: "";
  display: table;
  clear: both;
}
/* Content2 */
 .content2 {
  background-color: white;
  padding:  10px ;
  width: 105%;
  height: 400px;
}
 .content3 {
  background-color: white;
  padding:  10px ;
  width: 105%;/*100*/
  height: 390px;/*370*/
}
 .content4 {
  background-color: white;
  padding:  10px ;
  width: 105%;
  height: 420px;
}
 .content5 {
  background-color: white;
  padding:  10px ;
  width: 105%;
  height: 380px;
}
 .content6 {
  background-color: white;
  padding:  10px ;
  width: 105%;
  height: 400px;
}
.subcontent
{
	font-size: 12px;
	background-color:#F5F5F5;
	height: 180px;
}
.subcontent1
{
	font-size: 12px;
	background-color:#F5F5F5;
	height: 100px;
}
.subcontent2
{
	font-size: 12px;
	background-color:#F5F5F5;
	height: 150px;
}
.subcontent3
{
	font-size: 12px;
	background-color:#F5F5F5;
	height: 150px;
}
.subcontent4
{
	font-size: 12px;
	background-color:#F5F5F5;
	height: 145px;
}
.subcontent5
{
	font-size: 12px;
	background-color:#F5F5F5;
	height: 130px;
}


}