body {		
	color: #000;	
	line-height: 1.6em;	
	-webkit-font-smoothing: antialiased; 
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
	font-family: 'Roboto', sans-serif;
}

h1 { font-size: 2.5em; color: #1d2758; line-height: 1.2; font-weight: 700; text-transform:uppercase; text-align:center; }
h2 { font-size: 1.5em; color: #038442; margin-top: 1em; line-height: 1.2; font-weight: 700; text-transform:uppercase;  text-align:center;}
h3 { font-size: 1.25em; color: #000; margin-top: 1em; line-height: 1.2; font-weight: 700; text-transform:uppercase; text-align:left;}

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;}
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: #038442; 	 
	outline: 0;
	text-decoration:none;
}
a:hover, a:active { color: #05b95d; }

.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;  
	width: 100%;		
}
header .button  {margin-bottom:0;}

#logo {margin:2em 0 1em;}

nav {	
	width: 100%;
	text-align:right;	
	font-size: 1em;		
	font-weight:700;
	text-transform:uppercase;		
	display:block;
	margin-top:1em;
}
nav:after {
  content: "";
  display: table;
  clear: both;
}
nav ul {
	padding: 0;
	margin: 0 auto;
	list-style:none;	
}
.menu {display:block;}
nav ul li {
	display: inline-block;	
	padding:0;
	margin:0; 
	position:relative;
	 z-index: 100;
}
nav ul li a {	
	display: block;
	padding: 1em;
	text-decoration: none;	
	transition: .5s;   
}

nav a:link, nav a:visited {color:#1d2758;} 
nav a:hover, nav a:active {color:#34459b;}

nav li ul {
  position: absolute;
  left: 0;  
  opacity: 0;
  visibility: hidden;
  z-index: 99;   
  transition: all 0.5s ease 0s;
  text-align: left;
  width: 280px;  
}

nav li ul li {  
  display: block;  
  background:#f6f2ef;   
  border-bottom:1px solid #fff;
}

nav li:hover>ul {
    opacity: 1;   
    visibility: visible;
    z-index: 99;    
}

.responsive-menu {
    display: none;
    width: 100%;
    padding: 10px 15px;    
    text-transform: uppercase;
    font-weight: 600;
}
.responsive-menu:hover {    
    text-decoration: none;
}
.mobile {display:none;}
.intro {width:100%; padding:1em 0 6em; overflow:hidden; position:relative; z-index:1; background: #1f2657 url(../images/electric-motor2.jpg) center center no-repeat;	color:#fff;}
.intro h2 {margin:3em 0 0; font-size:1.5em; color:#fff; text-align:left;}
.intro h2 span {margin:0 1em;}
.intro h1 {margin:0; font-size:3em; color:#fff; text-transform:uppercase; text-align:left;}
.intro p {margin:2em 0 0; max-width: 450px; font-size:1.125em; line-height:2.0;}

.intro-inner {width:100%; padding:3em 0; overflow:hidden; position:relative; z-index:1; background: #1f2657;	color:#fff;}
.intro-inner h1 {margin:0; font-size:3em; color:#fff; text-align:left; }
.intro.about { padding:10em 0; background: #1f2658 url(../images/about.jpg) bottom center no-repeat;	}
.intro.contact { padding:10em 0; background: #1f2657 url(../images/building.jpg) bottom center no-repeat;	}

a.button:link, a.button:visited, a.button2:link, a.button2:visited {background:#038442; color:#fff;}
a.button:hover, a.button:active, a.button2:hover, a.button2:active {background:#05c161;}
.button-container {margin:2em 0 1em; text-align:center;}
.button-container .button {margin:.5em;}
.quote-button {margin-top:5em;}
.scrolling .quote-button {margin:2em 0 0;}

.cat {text-align:center;}
.cat img {display:inline-block; max-width:13%;}

.how {background: #ccc; padding:5em 0;}
.how .container {max-width:100%;}

.h2-move {margin-top:10em; transition: all 0.9s ease 0s;}
.h2-move.trigger-scroll {margin:1em 0;}

.kudos-container {padding:2em 0;}
.kudos-container .container {max-width:1600px;}

ul.accordion {list-style: none; padding: 0;}
ul .inner {list-style: none; padding: 1em; overflow: hidden; display: none; text-transform:uppercase;}
ul .inner.show {
  /*display: block;*/
}
ul .inner.show li { padding-bottom:1em; border-bottom:1px solid #ccc;}
ul .inner img {display:inline-block; vertical-align: middle; }
ul .inner span {display:inline-block; width:200px;}
ul .inner a:link, ul .inner a:visited { margin: 0 2em; font-weight: 700;}
a.toggle {
            width: 100%;
            display: block;            
            padding: 1em 2em;
            transition: background .3s ease;background: #1f2657;	color:#fff;}
a.toggle:hover, a.toggle:focus {  background: #038442;}
.content {padding-bottom:5em;}
.products {padding:5em 0;}
.products ul .inner {text-transform:none;}
.products li.outer {width: 33%; display:inline-block;}
.products img {margin:2em auto 0;}

.contactlist {padding-top:5em; padding-bottom:5em;}
.contactlist h1, .contactlist h2 {text-align:left;}


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

footer {width: 100%;	display: block;	background: #1d2758; color:#fff;}
#footer {padding:3em 0; }
#footer h3 {color:#fff; text-align:left; margin-top:0;}
#footer a:link, #footer a:visited {color:#fff; }
#copyright { padding: 1.5em 0 0; font-size: .75em; text-align:center;}




@media screen and (max-width: 1400px) {
	.container {max-width:80%;}
	
}
  
  	

@media screen and (max-width: 1200px) {
/* ipad */ 		
		
	header {-webkit-overflow-scrolling : touch;}
	.content {-webkit-overflow-scrolling : touch;}
	
	
  h1 { font-size: 2.25em;}
	
}

/* mobile devices */
@media all and (max-width : 980px) {

#logo img{margin:0 auto;}
header .button {display:none;}
.intro {padding:1em 0 2em; background: #1d2758 url(../images/electric-motor.jpg) center center no-repeat;}
.intro .container {max-width:80%;}
.intro h1 {margin: 0;}
.intro p {margin: 1em 0 0;}

nav {position:absolute; top:0; right:10px;}
.menu { display: none;}
.responsive-menu { display: block; }
nav {
        margin: 0;
        background: none;
    }
.menu li {
        display: block;
        margin: 0;
        background:#efefef;   
        border-bottom:1px solid #fff;
        text-align:right;
    }
.menu ul {
        visibility: hidden;
        opacity: 0;
        top: 0;
        left: 0;
        width: 100%;
        transform: initial;
    }
.menu li:hover>ul {
        visibility: visible;
        opacity: 1;
        position: relative;
        transform: initial;
    }
.menu ul ul {
        left: 0;
        transform: initial;
    }
 .menu li>ul ul:hover {
        transform: initial;
    }
nav#subnav {position:relative; text-align:center;}
nav#subnav span{display:none;}
nav#subnav ul li a {	padding: .5em;}
.mobile {display:block;}


.imageLeft {float: none;	margin: 2% auto; max-width:96%;}
.imageRight {float:none; margin: 2% auto; max-width:96%;}

#footer .columns {text-align:center;}
#footer .columns img {margin:1em auto;}
#footer h3 { text-align:center;}

}


@media all and (max-width : 720px) {
.intro-inner .container {max-width:90%;}
.intro-inner h1 {font-size: 2.25em; text-align:center;}
.button {letter-spacing:0;}
.button-container .button { width:80%;}
.cat img { max-width:24%;}
ul .inner.show li {text-align:center;}
ul .inner img {display:block; margin:0 auto;}
ul .inner a:link, ul .inner a:visited {display:block; margin: 1em 2em;}


}