/* =============================================
 *
 *   FIXED RESPONSIVE NAV
 *
 *   (c) 2014 @adtileHQ
 *   http://www.adtile.me
 *   http://twitter.com/adtilehq
 *
 *   Free to use under the MIT License.
 *
 * ============================================= */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:200,300);
@import "../font/fontawesome/css/font-awesome.css";


body, div,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, dl, dt, dd, ol, ul, li, hr,
fieldset, form, label, legend, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section,
summary, hgroup {
  margin: 0;
  padding: 0;
  border: 0;
  font-family:'Open Sans',sans-serif;

}
a
{
	outline:none;
}

a:active,
a:hover {
  outline: 0;
}

@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }


/* ------------------------------------------
  RESPONSIVE NAV STYLES
--------------------------------------------- */

.nav-collapse ul {
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
  list-style: none;
}

.nav-collapse li {
  width: 100%;
  display: block;
}

.js .nav-collapse {
  clip: rect(0 0 0 0);
  max-height: 0;
  position: absolute;
  display: block;
  overflow: hidden;
  zoom: 1;
}

.nav-collapse.opened {
  max-height: 9999px;
}

.disable-pointer-events {
  pointer-events: none !important;
}

.nav-toggle {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

@media screen and (min-width: 40em) {
  .js .nav-collapse {
    position: relative;
  }
  .js .nav-collapse.closed {
    max-height: none;
  }
  .nav-toggle {
    display: none;
  }
}


/* ------------------------------------------
  DEMO STYLES
--------------------------------------------- */

body {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color: #37302a;
  
  font: normal 100%/1.4 sans-serif;
}


/* ------------------------------------------
  FIXED HEADER
--------------------------------------------- */

header {
 background: none repeat scroll 0 0 #ffffff;
    box-shadow: 0px 4px 4px 0px rgba(75, 75, 75, 0.45);
  position: fixed;
  z-index: 3;
  width: 100%;
  height:55px;
  left: 0;
  top: 0;
}

.logo {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  text-decoration: none;
  font-weight: bold;
  line-height: 55px;
  padding: 0 20px;
  color: #fff;
  float: left;
}


/* ------------------------------------------
  MASK
--------------------------------------------- */

.mask {
  -webkit-transition: opacity 300ms;
  -moz-transition: opacity 300ms;
  transition: opacity 300ms;
  background: rgba(0,0,0, .5);
  visibility: hidden;
  position: fixed;
  opacity: 0;
  z-index: 2;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

.android .mask {
  -webkit-transition: none;
  transition: none;
}

.js-nav-active .mask {
  visibility: visible;
  opacity: 1;
}

@media screen and (min-width: 40em) {
  .mask {
    display: none !important;
    opacity: 0 !important;
  }
}


/* ------------------------------------------
  NAVIGATION STYLES
--------------------------------------------- */

.fixed {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
}

.nav-collapse,
.nav-collapse * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  top:0px;
}

.nav-collapse,
.nav-collapse ul {
  list-style: none;
  width: 100%;
  float: left;
}

@media screen and (min-width: 40em) {
  .nav-collapse {
    float: right;
    width: auto;
  }
}

.nav-collapse li {
  float: left;
  width: 100%;
background: #fff;
}

@media screen and (min-width: 40em) {
  .nav-collapse li {
    width: auto;
  }
}

.nav-collapse a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  text-decoration: none;
  
  font-size: 15px;
font-weight: bold;
  padding: 0.7em 1em;
    color: #424446;
  width: 100%;
  float: left;
}
.nav-collapse a:hover
{
	 color:#c50011;
}
.nav-collapse a:active,
.nav-collapse .active a {
 color:#c50011;
}

@media screen and (min-width: 40em) {
  .nav-collapse a {
  
    padding: 1.02em 2em;
    text-align: center;
    border-top: 0;
    float: left;
    margin: 0;
  }
}

.nav-collapse ul ul a {
  background: #ca3716;
  padding-left: 2em;
}

@media screen and (min-width: 40em) {
  .nav-collapse ul ul a {
    display: none;
  }
}

@media only screen and (min-width: 40em) and (max-width: 60em)
{
	.nav-collapse a {
		padding:8px;
		font-size:13px;
	}
}
/* ------------------------------------------
  NAV TOGGLE STYLES
--------------------------------------------- */

.nav-toggle {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
  text-indent: -300px;
  position: relative;
  overflow: hidden;
  width: 60px;
  height: 55px;
  float: right;
}

.nav-toggle:before {
  color: #c50011; /* Edit this to change the icon color */
  font: normal 28px/55px 'FontAwesome'; /* Edit font-size (28px) to change the icon size */
  text-transform: none;
  text-align: center;
  position: absolute;
  content: "\f0c9"; /* Hamburger icon */
  text-indent: 0;
  speak: none;
  width: 100%;
  left: 0;
  top: 0;
}

.nav-toggle.active:before {
  font-size: 24px;
  content: "\f00d"; /* Close icon */
}
/*
----------------------------------------------------------------------------------------------------------------------------------
									CONTENT
----------------------------------------------------------------------------------------------------------------------------------
*/

#content_wrapper
{
	width:100%;
	height:100%;
	
}

@media only screen and (min-width: 1367px) and (max-width: 1920px) 
{
#content_wrapper
{
min-height: 947px;
}

.portfolio_wrapper
{
margin-top:10%;
}




}

.home_wrapper{
width:100%;


}

#home,
#home:after {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index:0;
}
#home:after {
    content: '';
    background: transparent url(../images/pattern.png) repeat;
}



#menu-toggle2{
	position: fixed;
	height:auto;
	top:45%;
	left: 145px;
	z-index:111;
	transition: all 0.3s ease;
	
	background:#c50011;
	padding:10px 10px 10px 40px;
	border-radius:100px;
	box-shadow:1px 1px 20px #888;
	-webkit-box-shadow:1px 1px 20px #888;
	-moz-box-shadow:1px 1px 20px #888;

	z-index:999;
}
#menu-toggle2:hover{
cursor: pointer;
}

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

}






/*
----------------------------------------------------------------------------------------------------------------------------------
									COMPANY
----------------------------------------------------------------------------------------------------------------------------------
*/
.company_wrapper
{
	
	min-height:610px;
	height:auto;
	background:#efefef;

}
.company_wrapper
{
	width:100%;
	height:auto;

	}
	.main_class{
	-webkit-animation: mymove_left 1.5s; /* Chrome, Safari, Opera */
        animation: mymove_left 1.5s ;
}


/*
----------------------------------------------------------------------------------------------------------------------------------
									PORTFOLIO
----------------------------------------------------------------------------------------------------------------------------------
*/



#portfolio
{
background:#c50011;
min-height:655px;
}

.portfolio_wrapper
{
	width:100%;
	height:auto;
	background-color:#c50011;	
    padding-top:2.5%;
}

.row {
height:40%;
margin-left:20px;
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div {
display: block;
}
.row:before, .row:after {
display: table;
content: " ";
}
.row:after {
clear: both;
}
.pad-bottom {
width:100%;
padding-bottom:40px;
}

@media (max-width: 992px)
{
.pad-bottom {
padding-bottom:40px;
padding-top:30px;
}
}

@media (min-width: 992px)
{
.col-md-3 {
width: 25%;
}
.portfolio_wrapper
{
margin:2.5% 50px;
}

}
@media (min-width: 992px)
{
 .col-md-3 {
float: left;
}
}
@media (min-width: 768px)
{
.col-sm-3 {
width: 33%;
float: left;
}
}

@media (min-width:1200px) and (max-width: 1900px) {
.row
{
width:100%;
}

}
.col-sm-3, .col-md-3{
position: relative;
min-height: 1px;
padding:0px 20px;
}
.feature-box {
width: 100%;
text-align: center;
margin: 10px 0;
}
.animated {
opacity: 0;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.bounceIn {
opacity: 1;
-webkit-animation-name: bounceIn;
-moz-animation-name: bounceIn;
-o-animation-name: bounceIn;
animation-name: bounceIn;
}
.feature-box span {
-webkit-border-radius: 100% 0% 100% 100%;
-moz-border-radius: 100% 0% 100% 100%;
border-radius: 100% 0% 100% 100%;
width: 110px;
height: 110px;
margin: 0 auto 10px;
display: inline-block;
background: #F1F1F1;
border: 6px solid #F4F4F4;
color: #DDD;
overflow: hidden;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.feature-box span i {
display: block;
line-height: 99px;
font-size: 50px;
color: #C50011;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.feature-box:hover span
{

	background: transparent;
	border: 6px solid transparent;
}
.feature-box:hover span i
{
    color:#fff;
    -moz-transform: rotate(360deg) scale(1.5);
    -ms-transform: rotate(360deg) scale(1.5);
    -webkit-transform: rotate(360deg) scale(1.5);
    transform: rotate(360deg) scale(1.5);
}

.feature-box h4
{
	font-family: 'Arial', Helvetica, sans-serif;

font-weight: 400;
font-size: 18px;

line-height: 1.1;
display: block;
color:#fff;

}
.feature-box p {
margin: 10px;
font-family: 'Open Sans', Helvetica, sans-serif;
font-size:15px;
display: block;
color:#fff;
text-align:justify;
}






/*
----------------------------------------------------------------------------------------------------------------------------------
									PRODUCTS
----------------------------------------------------------------------------------------------------------------------------------
*/


.text_box{
max-width:55%;
width:100%;
}

#h2{
font-size:30px;
color:#eca81d;
line-height:2;
}

.scroller{
width:100%;
min-height:100%;
height:auto;

}
.products_content
{
display: inline-flex;
}
@media only screen and (max-width :1240px)
{
.text_box{
max-width:100%;
}
.products_content
{
display: block;

}
.scroller{
text-align:center;
}
.diagram
{
width:100%;
min-width:50%;
}

}
@media only screen and (max-width :1024px)
{
.products_wrapper
{
height:auto;
min-height:60%;
overflow:auto;
}
.text_box{
max-width:100%;
}
.content{
width:100%;
text-align:center;
}

.products_content
{
width:100%;
display:block;
text-align:center;
}
.diagram
{
width:100%;
text-align:center;
min-width:100%;
}
.heading_box
{
width:100%;
}
.heading_box #h2{
font-size:25px;
font-weight:500;
}
.scroller
{
padding-bottom:50px;
}
}

@media only screen and (max-width :1135px)
{
.content
{

height:100%;
}
.diagram img
{
padding-bottom:150px;
}

}
@media only screen and (max-width :920px)
{
.content
{
height:750px;
}
.diagram img
{
padding-bottom:0px;
}
}
@media only screen and (max-width :640px)
{

.products_wrapper
{
margin-left:10px;
}
.bb-bookblock
{
background:blue;
}
.products_content p{
font-size:12px;
}
.diagram  img
{
padding-bottom:100px;
}
.content
{
height:500px;
}
.heading_box #h2{
font-size:15px;
width:100%;
text-align:left;
font-weight:500;
}
}





/*
----------------------------------------------------------------------------------------------------------------------------------
									CONTACT US
----------------------------------------------------------------------------------------------------------------------------------
*/
.contact_wrapper
{
	min-height:300px;
	margin-top:55px;
	height:auto;
	

}

.animate {
  -webkit-transition: all 0.250s -in-out;
  -moz-transition: all 0.250s ease-in-out;
  -o-transition: all 0.250s ease-in-out;
  transition: all 0.250s ease-in-out;
}

.address_style
	{
	list-style:none;
	font-size:12px;
	text-shadow:1px 1px 1px #888;
	color:#000024;
	font-family:calibri;
	font-weight:bold;
	height:auto;
	text-wrap:none;
	padding:2px 5px;

	}
@media only screen and (max-width: 800px) {
.hi-icon
{
	margin: 5px 10px;
	width: 60px;
	height: 60px;

}
.hi-icon:before {
	font-family: 'ecoicon';
	speak: none;
	font-size: 35px;
	line-height: 60px;
	}
	.contact-col-text img,.contact-col-text-bar-last img
	{
		width:90px;
		height:50px;
		margin-top:10px;
		text-align:center;
	}
	.address_style
	{
	font-size:9px;
	text-wrap:normal;
	}
}














/*
----------------------------------------------------------------------------------------------------------------------------------
									FOOTER
----------------------------------------------------------------------------------------------------------------------------------
*/

footer 
{
    background: none repeat scroll 0px 0px #c50011;
    box-shadow: 0px 4px 4px 0px rgba(75, 75, 75, 0.45);
    position: fixed;
    z-index: 11;
    width: 100%;
    height: auto;
    font-size:100%;
	font-family:"Open Sans", "Open Sans Semibold";
    padding-top: 5px;
    left: 0px;
    bottom: 0px;

}
.copy {
	float:left;
	text-align:center;
	line-height:3;
	margin-left:20px;
	color:#fff;
	font-size:12px;
	font-family:"Open Sans", "Open Sans Semibold";
}



.social_icons ul
{
	float:right;
	list-style-type:none;
	margin-top:6px;margin-right:10px;
}
.social_icons ul li
{
	width:auto;
	height:auto;
	display:inline;
/*
	border:1px solid #fff;
	border-radius:10em;
	
	background:#fff;
*/
	}
.social_icons ul li i
{
	color:#c50011;
	width:26px;
	height:26px;
	text-align:center;
}