@import "normalize.css";
@import "skeleton.css";

body {		
	color: #333;	
	-webkit-font-smoothing: antialiased; 
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;	
}
/*font size: html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So 1.5rem = 15px :) body font-size is set to 1.5em*/
/* heading styles over-riding skeleton */
h1 { font-size: 2.25em; color:#cb260a; font-weight: 400; }
h2 { font-size: 1.5em; color:#7f7f7f; font-weight: 400;  margin-top: 1em;  }
h2 span {color:#0c60b9;}
h3 { font-size: 1.25em; color: #cb260a; font-weight: 400;	margin-top: 30px;}

p { margin: 0 0 1.5em 0; }
em { font-style: italic; }
strong { font-weight: bold;}
img, object, video {max-width: 100%; height: auto; display:block;}
.social img {display:inline-block; margin:2% .5em;}
img { max-width: 100%; width: auto; border: 0; -ms-interpolation-mode: bicubic;}
hr { border: solid #ff7a00; border-width: 1px 0 0; clear: both; margin: 30px auto; height: 0; width:80%;}

/* links */
a:link, a:visited { 
	color: #cb260a; 
	text-decoration: none; 
	outline: 0;
}
a:hover, a:active { color: #cccbcc; }
a.button:link, a.button:visited { 
	color: #fff; 
	}
a.button:hover, a.button:active { background:#1f1a17; }

.align-left{text-align: left;}
.align-center{text-align: center;}
.align-right{text-align: right;}
.imageLeft {float: left;	margin: 2%;}
.imageRight {float:right; margin: 2%;}
.imageCenter {margin:2% auto;}

header {
  margin:0 auto;
  padding: 0;
	width: 100%;
	z-index: 4;
	position:fixed;
	color:#fff;
	background:rgba(0,0,0,0.5);
}
header.black {background:rgba(0,0,0,0.8);}
#logo { padding-top:1em;}
#call { padding-top:1em;}
#call p {float:right; margin:1em 0 0 0;}
#call a {color:#fff;}
#call .button {display:block; float:right; width:160px;}
#call span { white-space: nowrap;}
#call img {display:inline-block;vertical-align:middle;}
#nav {background: #1f1a17;}
/* hero */
#hero {width:100%; max-height: 600px; overflow:hidden; position:relative; z-index:1;}
.photoSlide  {width:100%; height: 600px;	background: url(../images/bg1.jpg) center bottom no-repeat;}
.photoSlide .text {padding: 18em 0 0; text-align:center; }
.photoSlide h1 { color: #fff; font-size: 2.25em; }
.photoSlide h2 { color: #fff; font-size: 1.5em; }
.photoSlide p { color: #fff;  }

.photoSlide .button {margin-top:1em;}
#bg2 {width:100%; height: 400px; padding-top:200px; overflow:hidden; position:relative; z-index:1; background: url(../images/bg2.jpg) center bottom no-repeat; text-align:center;}
#bg2 h2, #bg3 h2, #bg4 h2 {font-size: 3em;  color: #fff;}
#bg2 p, #bg3 p, #bg4 p {font-size: 1.5em; color: #fff; margin:0 1em;}
#bg3 {width:100%; height: 400px; padding-top:200px; overflow:hidden; position:relative; z-index:1; background: url(../images/bg3.jpg) center bottom no-repeat; text-align:center;}
#bg4 {width:100%; height: 400px; padding-top:200px; overflow:hidden; position:relative; z-index:1; background: url(../images/bg4.jpg) center bottom no-repeat; text-align:center;}
#bg5 {width:100%; height: 400px; padding-top:200px; overflow:hidden; position:relative; z-index:1; background: url(../images/bg-automation.jpg) center bottom no-repeat; text-align:center;}
#bg5 h2, #bg6 h2, #bg7 h2, #bg8 h2, #bg9 h2, #bg10 h2, #bg11 h2, #bg12 h2, #bg13 h2, #bg14 h2, #bg15 h2, #bg16 h2, #bg17 h2 {font-size: 2.5em;  color: #fff; padding: 3em 0 0;}
 #bg17 h2 {font-weight:700;}
#bg6 {width:100%; height: 400px; padding-top:200px; overflow:hidden; position:relative; z-index:1; background: url(../images/bg-displays.jpg) center bottom no-repeat; text-align:center;}
#bg7 {width:100%; height: 400px; padding-top:200px; overflow:hidden; position:relative; z-index:1; background: url(../images/bg-manufacturing.jpg) center bottom no-repeat; text-align:center;}
#bg8 {width:100%; height: 400px; padding-top:200px; overflow:hidden; position:relative; z-index:1; background: url(../images/bg-machine-framing.jpg) center bottom no-repeat; text-align:center;}
#bg9 {width:100%; height: 400px; padding-top:200px; overflow:hidden; position:relative; z-index:1; background: url(../images/bg-material-handling.jpg) center bottom no-repeat; text-align:center;}
#bg10 {width:100%; height: 400px; padding-top:200px; overflow:hidden; position:relative; z-index:1; background: url(../images/bg-pneumatics.jpg) center bottom no-repeat; text-align:center;}
#bg11 {width:100%; height: 400px; padding-top:200px; overflow:hidden; position:relative; z-index:1; background: url(../images/bg-robotics.jpg) center bottom no-repeat; text-align:center;}
#bg12 {width:100%; height: 400px; padding-top:200px; overflow:hidden; position:relative; z-index:1; background: url(../images/bg-guarding.jpg) center bottom no-repeat; text-align:center;}
#bg13 {width:100%; height: 400px; padding-top:200px; overflow:hidden; position:relative; z-index:1; background: url(../images/bg-workstations.jpg) center bottom no-repeat; text-align:center;}
#bg14 {width:100%; height: 400px; padding-top:200px; overflow:hidden; position:relative; z-index:1; background: url(../images/bg-applications.jpg) center bottom no-repeat; text-align:center;}
#bg15 {width:100%; height: 400px; padding-top:200px; overflow:hidden; position:relative; z-index:1; background: url(../images/bg-about.jpg) center bottom no-repeat; text-align:center;}
#bg16 {width:100%; height: 400px; padding-top:200px; overflow:hidden; position:relative; z-index:1; background: url(../images/bg-contact.jpg) center bottom no-repeat; text-align:center;}
#bg17 {width:100%; height: 400px; padding-top:200px; overflow:hidden; position:relative; z-index:1; background: url(../images/bg-research.jpg) center bottom no-repeat; text-align:center;}


nav {	
	width: 100%;
	text-align:center;
	
	font-size: 1em;	
	position: relative;	
	z-index: 10;
	text-transform:uppercase;
	font-weight: 600;
}
nav ul {
	padding: 0;
	margin: 0 auto;
	list-style:none;
}
nav li {
	display: inline;	
	padding:0 2.4%;
	margin:0; 
}
nav a {	
	display: inline-block;
	padding: 1em 0;
	text-decoration: none;		
}

nav ul li a:link, nav ul li a:visited {color:#fff;} 
nav ul li a:hover, nav ul li a:active {color:#e4e3e3;}
nav ul li.active a { color: #f371b0;}

nav a#pull {display: none;}
.mobile {display:none;}

.content {padding: 2.5em 0;}
.content-inner {padding: 0 0 2.5em;}
.whatis {padding-top:5em;}
.space {padding:1em 2.5em;}
.content-form {padding: 5em 0 3em; background:#afb2b7;}
.content-form h2 {color:#fff;}
.b-cont {text-align:center;}
.content-dark {padding: 5em 0 3em; background:#4e4e4e; color:#fff;}
.content-dark h2 {display:inline-block; margin:.5em; background:#cb260a; padding:.25em; color:#fff; font-size:1.25em;}

.appl {padding:0;}
.appl li {display:inline-block; margin:.5em; background:#cb260a; padding:.25em; color:#fff; font-size:1.25em;}
.appl li a {color:#fff;}
.products img {display:inline-block;}

.technical {padding-top:15em;}
.specs h2 {color:#cb260a; margin-top:2em;}
.faq {padding-top:15em;}
.faq h2 {font-size:1.25em; margin-bottom:.25em;}

a h3 {display:inline-block; margin:.5em; background:#cb260a; padding:.25em; color:#fff; font-size:1.25em;}

.list {text-align:left;}

.video-container {position: relative; padding-bottom: 56.25%;  padding-top: 35px; height: 0; overflow: hidden; margin-bottom: 3rem; }
.video-container iframe {position: absolute; top:0; left: 0; width: 100%; height: 100%;}

footer {width: 100%;	display: block;	background:#cb260a;	}
.footerMiddle {color:#fff; padding: 1.5em 0 0 0;	margin: 0;	position: relative;}
.footerMiddle img {display:inline-block; vertical-align:middle; max-width:16px;}
footer ul {padding:0;}
footer h3 {color:#fff; text-transform:uppercase; font-weight:600;}
.c3 {text-align:right;}
footer a:link, footer a:visited {color:#fff;}
footer a:hover, footer a:active {border-bottom: 1px solid #fff;}
.social a:hover, a:active {border: 0;}
footer .button {background:#000;}
#footerBottom {background:#000;}
#copyright {color: #fff; margin: 1.5em 0; font-size: .75em;}
#copyright a, #copyright span {color:#fff;}
#copyright a:hover, #copyright a:active{border:0;}

/* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

/*media queries*/
@media screen and (max-width: 1200px) {
/* ipad portrait */

  nav li {padding:0 2%; }
  nav a {}
	
	.content {-webkit-overflow-scrolling : touch;}	
	header {-webkit-overflow-scrolling : touch;}
	
}


/* mobile devices */
@media only screen and (max-width: 990px) {
#nav {position:absolute; top:0; right:0; width:100%;}
.mobile {display:block;}
.mobile-cart {position:absolute; top:6px; left:48%; z-index: 20;}
.mobile-email {position:absolute; top:8px; left:40px; z-index: 20;}
#logo {margin-top:2em;}
#logo img{margin:0 auto;}
#call {padding-top:1em; text-align:center; display:none;}
#call p {float:none; margin-bottom:1em;}
#call .button { float:none; margin:.5em auto;}
.photoSlide .text { }
.photoSlide h2 {}
.photoSlide h1 { font-size: 1.5em; }
	
	nav ul {
		display: none;
		height: auto;
		margin-top:2em;
	}
	nav li {
		display: block;		
		width: 96%;
	}
	nav a {
    width: 100%;
		border-bottom: 1px solid #576979;
		text-align: left;
		padding:.5em 0;	
	}
	nav a#pull {
		display: inline-block;		
		width: 100%;
		position: relative;
		text-align:right;
	}
	nav a#pull:after {
		content:"";
		background: url('../images/nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 45px;
		top: 10px;
	}
	.mobile {display:inline-block; }
	.mobile img{ }
	
.imageLeft {float: none;	margin: 2% auto; max-width:96%;}
.imageRight {float:none; margin: 2% auto; max-width:96%;}
.footerMiddle .column {text-align:center;}
.footerMiddle .column img {margin:0 auto;}

#copyright {text-align:center;}


}

@media only screen and (max-width: 600px) {
header { background:#000;}
#hero {}
.photoSlide  { 	}
.photoSlide .text { }
.whatis {}
#bg2 {height: 550px; padding-top:50px; }
#bg4 {height: 550px; padding-top:50px; }
#footerBottom {padding-top:1em;}


}