body
{
font-family: 'Titillium Web', sans-serif;
text-align:center;
}
*{
padding:0px;
margin:0px;
}



@media screen and (min-width: 860px) {
#maindiv{
width:100%;
height:62px;
position:fixed;
}
.navdiv{
background:#000;
height:62px;
width:100%;
line-height:0px;
}
#logo{
float:left;
cursor:pointer;
margin-left:45px;
padding-top:7px;
}
#logos
{
float:right;
margin-right:-840px;
cursor pointer;
padding-top:5px;
}
.navdiv ul{
float:right;
margin-right:250px;
line-height:20px;
position:relative;
z-index:auto;
}
.navdiv ul li{
list-style-type:none;
display:inline-block;
}
.navdiv ul li a{
padding:20px;
text-decoration:none;
color:#e4ecf3;
font-size:15px;
display:block;
}
.navdiv ul li a:hover{
color: #FFA500;
transition:all 0.40s;
}
.navdiv ul li:hover ul{
display:block;
margin-left:17px;
}
.navdiv ul ul{
display:none;
width:200px;
position:absolute;
}
.navdiv ul li li{
background:#000;
display:block;
text-align:justify;
border:1px solid #e4ecf3;
}
.navdiv ul li li a{
padding:9px;
}
.navdiv .current_page{
color: #FFA500;
}
.mobile-menu{display:none;
width:100%;
padding:11px;
background:#3E4156;
color:#ffffff;
text-transform:uppercase;
font-weight:600;
}
.mobile-menu:hover{background:#3E4156;
color:#ffffff;
text-decoration:none;
}

}

				
/* === Featured Area === */
@media screen and (min-width:860px) and (max-width:860px)
{
#hold{position:relative;width:100%;}

#featured{
	background:#EBEBEB;
	width:100%;
	height:400px;
	padding-bottom:2px;
	border-bottom:4px #b0c6e3 solid;
	position:relative;
	overflow:hidden;
	margin:0;
	z-index:4;	}

#hold .w3-content{max-width:860px;margin:auto}
.mySlides {display:none;}
}


@media screen and (min-width:860px){
#industry{
background:#FFF;
width:100%;
height:340px;
}

.left-column
{
width:35%;
height:340px;
float:left;
}
.left-column .quality{
color:red;
padding:5px;
padding-top:100px;
margin-left:110px;
}
h1{
font-size:40px;
}
h2{
font-weight:normal;
}
.bar{
width:50px;
padding-bottom:15px;
}

.barrior{
height:340px;
margin-left:-30px;
}

.right-column{
width:65%;
height:340px;
float:right;
}

.aerospace{
float:left;
}
.aerospace .image1{
width:90px;
padding-top:100px;
margin-left:60px;
margin-bottom:15px;
}
.aerospace p{
margin-left:60px;
}
.aerospace:hover{
color:red;
}


.automotive{
float:left;
}
.automotive .image2{
width:90px;
padding-top:100px;
margin-left:100px;
margin-bottom:15px;
}
.automotive p{
margin-left:100px;
}
.automotive:hover{
color:red;
}


.heavyeng{
float:left;
}
.heavyeng .image3{
width:90px;
padding-top:100px;
margin-left:100px;
margin-bottom:15px;
}
.heavyeng p{
margin-left:100px;
}
.heavyeng:hover{
color:red;
}

.industrial{
float:left;
}
.industrial .image4{
width:90px;
padding-top:100px;
margin-left:100px;
margin-bottom:15px;
}
.industrial p{
margin-left:100px;
}
.industrial:hover{
color:red;
}



#service{
background:#f2f2f2;
}
.container2{
width:100%;
height:750px;
}
.upper-column{
width:100%;
height:50px;
}
.upper-column .services-name{
  display: block;
padding-top:20px;
 text-align: center;
}
.services-name h1{
font-size:30px;
}

.lower-column{
width:100%;
height:100px;
margin-left:15px;
}


.automation{
float:left;
width:400px;
height:360px;

}
 .automation .automation-image{
width:370px;
padding-top:90px;
margin-left:30px;
transition: .5s ease;
 display: block;
backface-visibility: hidden;
}
.automation .automation-image:hover{
opacity:0.4;
}
.automation a span{
margin-left:30px;
padding-bottom:-40px;
transition: .5s ease;
top: 145%;
left: 17%;
opacity:1;
display:block;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}
.automation a{
text-decoration:none;
color:white;
font-size:22px;
}




.oil-gas{
float:left;
width:420px;
height:360px;
overflow:hidden;
}
 .oil-gas .oil-gas-image{
width:370px;
padding-top:90px;
margin-left:40px;
}
.oil-gas .oil-gas-image:hover{
opacity:0.4;
}
.oil-gas .middle{
top: 215%;
left:48%;
margin-left:30px;
padding-bottom:-40px;
transition: .5s ease;
position: absolute;
transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%)
}


.software-development{
float:left;
width:400px;
height:360px;
overflow:hidden;
}
 .software-development .software-development-image{
width:360px;
padding-top:90px;
margin-left:40px;
transition: .5s ease;
display: block;
backface-visibility: hidden;
}
.software-development .software-development-image:hover{
opacity:0.4;
}
.software-development .middle{
margin-left:30px;
padding-bottom:-40px;
transition: .5s ease;
top: 215%;
left: 79%;
opacity:1;
position: absolute;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}



.cax-customization{
float:left;
width:400px;
height:360px;
overflow:hidden;
}
 .cax-customization .cax-customization-image{
width:370px;
padding: 10px 30px 20px 1px;
margin:30px;
transition: .5s ease;
display: block;
backface-visibility: hidden;
}
 .cax-customization .cax-customization-image:hover{
opacity:0.4;
}
.cax-customization .middle{
margin-left:30px;
padding-bottom:-40px;
transition: .5s ease;
top: 530%;
left: 15%;
opacity:1;
position: absolute;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}



.industrial-engineering{
float:left;
width:420px;
height:360px;
overflow:hidden;
}
 .industrial-engineering .industrial-engineering-image{
width:370px;
padding-top:40px;
margin-left:43px;
transition: .5s ease;
display: block;
backface-visibility: hidden;
}
.industrial-engineering .industrial-engineering-image:hover{
opacity:0.4;
}
.industrial-engineering .middle{
margin-left:30px;
padding-bottom:-40px;
transition: .5s ease;
top: 530%;
left: 48%;
opacity:1;
position: absolute;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}

.staffing{
float:left;
width:400px;
height:360px;
overflow:hidden;
}
 .staffing .staffing-image{
width:370px;
padding-top:40px;
margin-left:55px;
transition: .5s ease;
display: block;
backface-visibility: hidden;
}
.staffing .staffing-image:hover{
opacity:0.4;
}
.staffing .middle{
margin-left:30px;
padding-bottom:-40px;
transition: .5s ease;
top: 530%;
left: 79%;
opacity:1;
position: absolute;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}



#value-pro
{
background:#fff;
}
.container3{
width:100%;
height:350px;
}
.upper-column-value{
width:100%;
height:30px;
}
.upper-column-value .value-name{
display: block;
padding-top:20px;
 text-align: center;
}
.value-name h1{
font-size:30px;
}

.lower-column-value{
width:100%;
height:300px;
}
.technology{
float:left;
}
.technology-image{
width:270px;
cursor:pointer;
padding-top:70px;
margin-left:200px;
}

.time{
float:left;
}
.time-image{
width:270px;
cursor:pointer;
padding:70px;
margin-left:-50px;
}

.quality{
float:left;
}
.quality-image{
width:270px;
cursor:pointer;
padding:70px;
margin-left:-100px;
}

.footer {
    background:#000;
    display: block;
    float: left;
    height:260px;
    margin: 0 auto;
    width: 100%;
}

.main_footer_fix {
    margin: 0 auto;
    padding-top: 0;
    width: 90%;
}
.span1
{
    color: #FFF;
margin-left:-20px;
    display: block;
    padding: 20px;
    margin-bottom:-10px;
    text-align:left;
    font-weight:bold;
    font-size:18px;
}
.pg
{
    color: #DCDCDC;
    text-align:left;
    display: block;
}



.right_side {
    display: block;
    float: left;
    list-style-type: none;
    margin: 8px 2px 0px 0;
    padding: 15px 0px 20px 0px;
    width:28%;
}

.left_side {
    display: block;
    float: left;
    list-style-type: none;
    margin: 8px 2px 0;
    padding: 15px 10px 20px 0px;
    width: 20%;
}

.left_side ul {
    list-style-type: none;
    margin:0px;
    padding: 0px;
}
li.fotter_big_txt {
    color: #FFF;
    display: block;
    padding:25px;
    margin-left:-24px;
margin-bottom:8px;
    text-decoration: none; 
    font-weight:bold;
}
li.fotter_big_txt a {
    color: #FFFFFF;
    display: block;
    font-size: 18px;
    line-height: 20px;
    font-weight:bold;
    float:left;
text-decoration: none;
}

li.fotter_txt {
    color: #fff;
    font-size: 16px;
    font-weight:normal;
    text-align:left; 
    list-style-type:none;
}
li.fotter_txt a {
    color: #fff;
    font-size: 16px;
    text-decoration: none;
}
li.fotter_txt a:hover {
    color: #FFA500;
    font-size: 16px;
    text-decoration: none;
}

.span2
{
    color: #FFF;
margin-left:25px;
    display: block;
    padding: 20px;
    margin-bottom:-10px;
    text-align:left;
    font-weight:bold;
    font-size:18px;
}


.logo1{
display: block;
float:left;
}
.logo1 .fotter_txt_w{
    float:left;
margin:12px;
}

.logo1 .fotter_txt_wp {
    color: #fff;
    font-size: 16px;
    font-weight:normal;
    text-align:left; 
    list-style-type:none;

}
.logo1 .fotter_txt_wp a {
     color: #fff;
    font-size: 16px;
    text-decoration: none;

}
.logo1 .fotter_txt_wp a:hover {
     color: #FFA500;
    font-size: 16px;
    text-decoration: none;

}

.logo2{
display: block;
margin-left:20px;
float:left;
}
.logo2 .fotter_txt_w{
    float:left;
margin:12px;
}

.logo2 .fotter_txt_wp {
    color: #fff;
    font-size: 16px;
    font-weight:normal;
    text-align:left; 
    list-style-type:none;

}
.logo2 .fotter_txt_wp a {
     color: #fff;
    font-size: 16px;
    text-decoration: none;

}
.logo2 .fotter_txt_wp a:hover {
     color: #FFA500;
    font-size: 16px;
    text-decoration: none;

}

.logo3{
display: block;
margin-left:20px;
float:left;
}
.logo3 .fotter_txt_w{
    margin:12px;
float:left;
}

.logo3 .fotter_txt_wp {
    color: #fff;
    font-size: 16px;

    font-weight:normal;


    text-align:left; 
    list-style-type:none;

}
.logo3 .fotter_txt_wp a {
     color: #fff;
    font-size: 16px;
    text-decoration: none;

}
.logo3 .fotter_txt_wp a:hover {
     color: #FFA500;
    font-size: 16px;
    text-decoration: none;

}
.row
{
margin-right:-15px;
margin-left:-15px
}
.footer_hide
{ 
display:block;
}

}


/*media query for tablet */

@media screen and (min-width: 430px) and (max-width: 860px) {
#logo{
float:left;
cursor:pointer;
margin-left:15px;
padding-top:5px;
}
#logos{
display:none;
}
.navdiv ul{
float:right;
margin-right:25px;
line-height:20px;
position:relative;
z-index:100;
}
.navdiv ul li{
list-style-type:none;
display:inline-block;
}
.navdiv ul li a{
padding:20px;
text-decoration:none;
color:black;
font-size:12px;
display:block;
}
.navdiv ul li a:hover{
color: #FFA500;
transition:all 0.40s;
}
.navdiv ul li:hover ul{
display:block;
margin-left:17px;
}
.navdiv ul ul{
display:none;
width:200px;
position:absolute;
}
.navdiv ul li li{
background:black;
display:block;
text-align:justify;
border:1px solid white;
}
.navdiv ul li li a{
padding:9px;
color:white;
}
.navdiv .current_page{
color: #FFA500;
}

.mobile-menu{display:none;
width:100%;
padding:11px;
background:#3E4156;
color:#ffffff;
text-transform:uppercase;
font-weight:600;
}
.mobile-menu:hover{background:#3E4156;
color:#ffffff;
text-decoration:none;
}

#industry{
background:#fff;
}
.container1{
width:100%;
height:440px;
position:relative;
}
.left-column
{
width:35%;
height:340px;
float:left;
position:relative;
}
.left-column .quality{
color:red;
padding:5px;
padding-top:100px;
margin-left:30px;
}
h1{
font-size:40px;
}
h2{
font-weight:normal;
}
.bar{
width:50px;
padding-bottom:15px;
}
.barrior{
height:340px;
margin-left:-10px;
}

.right-column{
width:65%;
height:340px;
float:right;
position:relative;
}
.aerospace{
float:left;
}
.aerospace .image1{
width:90px;
padding:60px;
margin:30px;
margin-bottom:5px;
}
.aerospace p{
margin:-40px;
}
.aerospace:hover{
color:red;
}


.automotive{
float:right;
}
.automotive .image2{
width:100px;
padding-top:45px;
margin:50px;
margin-bottom:50px;
}
.automotive p{
margin:-40px;
}
.automotive:hover{
color:red;
}


.industrial{
float:left;
}
.industrial .image3{
width:90px;
padding:60px;
margin-left:180px;
margin-bottom:-35px;
}
.industrial p{
margin-left:180px;
}
.industrial:hover{
color:red;
}

#service{
background:#f2f2f2;
}
.container2{
width:100%;
height:2000px;
position:relative;
}
.upper-column{
width:100%;
height:100px;
position:relative;
}
.upper-column .services-name{
  display: block;
padding-top:20px;
 text-align: center;
}
.services-name h1{
font-size:30px;
}

.automation{
float:left;
width:400px;
height:300px;
margin-left:180px;
position:relative;
}
 .automation .automation-image{
width:370px;
padding-top:20px;
margin-left:18px;
transition: .5s ease;
display: block;
backface-visibility: hidden;
}
.automation .automation-image:hover{
opacity:0.4;
}
.automation .middle{
margin-left:30px;
transition: .5s ease;
top: 50%;
left: 45%;
opacity:1;
position: absolute;
 transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}
.middle a{
text-decoration:none;
color:white;
font-size:22px;
}

.oil-gas{
float:left;
width:400px;
height:300px;
margin-left:180px;
overflow:hidden;
}
 .oil-gas .oil-gas-image{
width:370px;
padding-top:17px;
margin-left:8px;
}
.oil-gas .oil-gas-image:hover{
opacity:0.4;
}
.oil-gas .middle{
top: 27%;
left:48%;
margin-left:30px;
padding-bottom:-40px;
transition: .5s ease;
position: absolute;
transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%)
}

.software-development{
float:left;
width:400px;
height:300px;
margin-left:180px;
overflow:hidden;
}
 .software-development .software-development-image{
width:370px;
padding-top:20px;
margin-left:20px;
transition: .5s ease;
display: block;
backface-visibility: hidden;
}
.software-development .software-development-image:hover{
opacity:0.4;
}
.software-development .middle{
margin-left:30px;
padding-bottom:-40px;
transition: .5s ease;
top: 42%;
left: 47%;
opacity:1;
position: absolute;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}

.cax-customization{
float:left;
width:400px;
height:300px;
margin-left:180px;
overflow:hidden;
}
 .cax-customization .cax-customization-image{
width:370px;
padding-top:10px;
margin-left:20px;
transition: .5s ease;
display: block;
backface-visibility: hidden;
}
 .cax-customization .cax-customization-image:hover{
opacity:0.4;
}
.cax-customization .middle{
margin-left:30px;
padding-bottom:-40px;
transition: .5s ease;
top: 57%;
left: 47%;
opacity:1;
position: absolute;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}

.industrial-engineering{
float:left;
width:400px;
height:300px;
margin-left:180px;
overflow:hidden;
}
 .industrial-engineering .industrial-engineering-image{
width:370px;
padding-top:20px;
margin-left:20px;
transition: .5s ease;
display: block;
backface-visibility: hidden;
}
.industrial-engineering .industrial-engineering-image:hover{
opacity:0.4;
}
.industrial-engineering .middle{
margin-left:30px;
padding-bottom:-40px;
transition: .5s ease;
top: 73%;
left: 48%;
opacity:1;
position: absolute;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}

.staffing{
float:left;
width:400px;
height:300px;
margin-left:180px;
overflow:hidden;
}
 .staffing .staffing-image{
width:370px;
padding-top:20px;
margin-left:20px;
transition: .5s ease;
display: block;
backface-visibility: hidden;
}
.staffing .staffing-image:hover{
opacity:0.4;
}
.staffing .middle{
margin-left:30px;
padding-bottom:-40px;
transition: .5s ease;
top: 87%;
left: 47%;
opacity:1;
position: absolute;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}

#value-pro
{
background:#fff;
}
.container3{
width:100%;
height:350px;
position:relative;
}
.upper-column-value{
width:100%;
height:30px;
position:relative;
}
.upper-column-value .value-name{
display: block;
padding-top:20px;
 text-align: center;
}
.value-name h1{
font-size:30px;
}

.lower-column-value{
width:100%;
height:300px;
position:relative;
}
.technology{
float:left;
}
.technology-image{
width:200px;
cursor:pointer;
padding-top:70px;
margin-left:37px;
}

.time{
float:left;
}
.time-image{
width:200px;
cursor:pointer;
padding:70px;
margin-left:-50px;
}

.quality{
float:left;
}
.quality-image{
width:200px;
cursor:pointer;
padding:70px;
margin-left:-100px;
}


.footer {
    background-color: #000;
    display: block;
    float: left;
    height:270px;
    margin: 0 auto;
    width: 100%;
}

.main_footer_fix {
    margin: 0 auto;
    padding-top: 0;
    width: 90%;
}
.span1
{
    color: #FFF;
margin-left:-20px;
    display: block;
    padding: 20px;
    margin-bottom:-10px;
    text-align:left;
    font-weight:bold;
    font-size:16px;
}
.pg
{
    color: #DCDCDC;
    text-align:left;
    font-size:14px;
    display: block;
}



.right_side {
    display: block;
    float: left;
    list-style-type: none;
    margin: 8px 2px 0px 0;
    padding: 15px 0px 20px 0px;
    width:28%;
}

.left_side {
    display: block;
    float: left;
    list-style-type: none;
    margin: 8px 2px 0;
    padding: 15px 10px 20px 0px;
    width: 20%;
}

.left_side ul {
    list-style-type: none;
    margin:0px;
    padding: 0px;
}
li.fotter_big_txt {
    color: #FFF;
    display: block;
    padding:25px;
    margin-left:-24px;
margin-bottom:8px;
    text-decoration: none; 
    font-weight:bold;
}
li.fotter_big_txt a {
    color: #FFFFFF;
    display: block;
    font-size:16px;
    line-height: 20px;
    font-weight:bold;
    float:left;
}

li.fotter_txt {
    color: #fff;
    font-size: 14px;
    font-weight:normal;
    text-align:left; 
    list-style-type:none;
}
li.fotter_txt a {
    color: #fff;
    text-decoration: none;
}
li.fotter_txt a:hover {
    color: #FFA500;
    font-size: 16px;
    text-decoration: none;
}

.span2
{
    color: #FFF;
margin-left:2px;
    display: block;
    padding: 20px;
    margin-bottom:-10px;
    text-align:left;
    font-weight:bold;
    font-size:16px;
}


.logo1{
display: block;
float:left;
}
.logo1 .fotter_txt_w{
    float:left;
margin:10px;
}

.logo1 .fotter_txt_wp {
    color: #fff;
    font-weight:normal;
    text-align:left; 
    list-style-type:none;

}
.logo1 .fotter_txt_wp a {
     color: #fff;
    font-size: 14px;
    text-decoration: none;

}
.logo1 .fotter_txt_wp a:hover {
     color: #FFA500;
    font-size: 16px;
    text-decoration: none;

}

.logo2{
display: block;
margin-left:20px;
float:left;
}
.logo2 .fotter_txt_w{
    float:left;
margin:10px;
}

.logo2 .fotter_txt_wp {
    color: #fff;
    font-size: 16px;
    font-weight:normal;
    text-align:left; 
    list-style-type:none;

}
.logo2 .fotter_txt_wp a {
     color: #fff;
    font-size: 14px;
    text-decoration: none;

}
.logo2 .fotter_txt_wp a:hover {
     color: #FFA500;
    font-size: 16px;
    text-decoration: none;

}

.logo3{
display: block;
float:left;
}
.logo3 .fotter_txt_w{
    margin:12px;
float:left;
}

.logo3 .fotter_txt_wp {
    color: #fff;
    font-weight:normal;
    text-align:left; 
    list-style-type:none;

}
.logo3 .fotter_txt_wp a {
     color: #fff;
    font-size: 14px;
    text-decoration: none;

}
.logo3 .fotter_txt_wp a:hover {
     color: #FFA500;
    font-size: 16px;
    text-decoration: none;

}


.row
{
margin-right:-15px;
margin-left:-15px
}
.footer_hide
{ 
display:block;
}
}

@media screen and (max-width: 425px){
#logo{
float:left;
cursor:pointer;
margin-left:15px;
padding-top:5px;
}
#logos{
display:none;
}

}