*{
  margin:0px;
  padding:0px;
}

body{
  font-family: 'Ubuntu';
  overflow-x: hidden;
  background-color:#222;
  color:#fff;
}

.dim{
  opacity:0.5;
}

a{
  color:#fff;
  text-decoration: none;
}

/* HEADER */

#main_header{
  width:100%;
  height:120px;
  position: relative;
  background: #222;
  opacity:1.0;
  /* border-bottom:2px solid #111; */
  z-index:99;
}

#main_header #main_logo{
  width:250px;
  position: absolute;
  padding-top:15px;
  padding-left:70px;
  top:6px;
  left:6px;
}

#main_header #menu{
  position: absolute;
  top:20px;
  right:30px;
  padding:20px;
}

#main_header #menu li{
  color:#eee;
  cursor:pointer;
  margin-left:20px;
  padding:20px 10px 20px 10px;
  letter-spacing: 1px;
  display: inline-block;
  position: relative;
  transition: border-top 0.3s, border-bottom 0.3s;
  border-radius:50%;
}

#main_header #menu li:hover{
  color:#fff;
  background:radial-gradient(#444 40%, #111 ) no-repeat;

}

#main_header #sub_header{
  position: absolute;
  top: 82px;
  right:10px;
  width:589.38px;
  z-index: 999;
}

#main_header #sub_header .sub_headers{
  position: absolute;
  padding:20px;
  display: none;
}

#main_header #sub_header .sub_headers li{
  list-style: none;
  padding-top:10px;
  padding-bottom:10px;
  cursor: pointer;
  opacity: 0.5;
  border:1px solid #b00f0a;
  transition: opacity 0.3s;
}

#main_header #sub_header .sub_headers li:hover{
  opacity: 1;
}

#main_header #sub_header #sub_about{
  left: 5px;
  background: #b00f0a;
  color:#FFF;
  transition:color 0.3;
}

#main_header #sub_header #sub_products{
  left: 106px;
  background: #b00f0a;
  color:#FFF;
  transition:color 0.3;
}

#main_header #sub_header #sub_projects{
  left: 226px;
  background: #b00f0a;
  color:#FFF;
  transition:color 0.3;
}

#temp_image_fit{
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}


/* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky {
  position: fixed !important;
  top: 0;
  width: 100% !important;
  opacity:1 !important;
  height:80px !important;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
.sticky + #content {
  padding-top: 102px;
}
.sticky  > #menu{
	top:0px !important;
}
.sticky > img {
	transform: scale(0.7);
	position:relative !important;
	left:-50px !important;
	top:-10px !important;
}
.social-btns{
	position:fixed;
	right:15px;
	height:auto;
	top:50%;
	width:30px;
	z-index:999;
}
.fa {
  padding: 10px;
  font-size: 20px;
  width: 20px;
  text-align: center;
  text-decoration: none;
  margin: 0px 2px;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}
.fa-instagram {
  background: #125688;
  color: white;
}
.fa-whatsapp {
  background: #28D146;
  color: white;
}
.fa-linkedin {
  background: #0072b1;
  color: white;
}

#clients {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
#clients .clients-wrap {
  display: block;
  /*padding-top:50px;*/
  width: 98%;
  margin: 0 auto;
  overflow: hidden;
}
#clients .clients-wrap ul {
  display: block;
  list-style: none;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
#clients .clients-wrap ul li {
  display: block;
  float: left;
  position: relative;
  width: 220px;
  height: 200px;
  box-sizing: border-box;
  line-height: 200px;
  text-align: center;
  padding-left:20px;
  padding-right:20px;
}
#clients .clients-wrap ul li img {
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  -webkit-transition: 0 linear left;
  -moz-transition: 0 linear left;
  transition: 0 linear left;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
  filter: alpha(opacity=75);
  opacity: 0.75;
}
#clients .clients-wrap ul li img:hover {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1.0;
}

#ham_out{
  position:absolute;
  width: 35px;
  height: 38px;
  top: 22px;
  display: inline-block;
  cursor: pointer;
  right:22px;
  display:none;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
}

#content{
  width:100%;
  height:auto;
  position: relative;
  top:0px;
  z-index:1;
}

#mobile_menu_outer{
  width:250px;
  height:auto;
  padding-bottom: 100px;
  position: absolute;
  text-align: center;
  right:-270px;
  display:none;
  background: rgba(51,51,51,1);
  color:#fff;
  z-index: 999;
  transition: right 0.3s;
  box-shadow: -5px 2px 10px rgba(0,0,0,0.4);
}

.show_mobile_menu{
  right:0 !important;
}

#mobile_menu{
  position: relative;
  top:40px;
}

#mobile_menu_outer #mobile_menu li{
  list-style: none;
  letter-spacing: 1px;
  padding:9px 0px 9px 0px;
  position: relative;
  cursor: pointer;
  z-index: 999;
  
}

#mobile_menu_outer #mobile_menu .mobile_sub_headers{
  padding:5px;
  opacity:0.4;
  font-size: 12px;
  display:none;
}

@media (max-width: 892px){
  #main_header #menu{
    display:none;
  }
  #ham_out{
    display: block;
  }
  #mobile_menu_outer{
    display:block;
	position:fixed;
  }
}

/* JITHIN FOOTER */
* {
  margin: 0px;
  padding: 0px;
}

.footer {
  width: 100%;
  height: 250px;
  background-color: #222;
  font-family: 'Ubuntu', sans-serif;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  overflow-x: hidden;

}
.subfooter >label >a{
	color:#888! important;
}
.subfooter {
  box-sizing: border-box;
  border: 1px solid #222;
  float: left;
  width: 25%;
  height: 200px;
  min-width: 120px;
  margin-top: 20px;
  color: #888;
  font-size: 12px;
}
#content{
	position:relative;
	top:-120px;
}
.social {
  height: 40px;
  width: 40px;
  padding: 10px;
}

.social img {
  height: 30px;
  width: 30px;
}

.f-icon {
  height: 30px;
  width: 30px;
  padding: 10px;
  position: relative;
  top: 5px;
}

.f-icon img {
  height: 20px;
  width: 20px;
}

.flabel {
  color: #fff;
  font-size: 16px;
}

.sub-fullwidth {
  height: auto;
  width: 100%;
  margin-top: 20px;
}

.s {
  font-size: 14px;
}

.sm {
  width: 16%;
}

@media (max-width:736px) {
  .subfooter {
    width: 50%;
  }
  .sm {
    display: none;
  }
}
/* JITHIN FOOTER END */
@media (max-width:736px) {
	#main_header{
		height:70px;
	}
	#main_header #main_logo{
		width:150px;
		padding-left:20px;
	}
	#ham_out{
		top:13px;
	}
	.sticky {
		height:70px !important;
	}
	.sticky > img {
	transform: none;
	position:relative !important;
	left:10px !important;
	top:10px !important;
}
}