@charset 'UTF-8';
/**
  * @toc 1.0
  * @name Global styles
  * @slug global-styles
  * @description This section contains fonts, icons, and the base Bootstrap UI elements available everywhere in the site.
  */
/**
  * @name Eaton brand font
  * @slug eatone-brand-font
  * @description The Eaton brand fonts used in the digital experience design are Eaton Regular and Eaton Medium. These are embedded as a custom web font. For more information about using fonts on the web and other digital media, see <a href="/guiding-principles/the-eaton-brand/visual-identity.html#typography-brand-fonts">Visual identity</a>.
  * @toc 1.1
  * @container true
  * @gridclass col-sm-12
  * @hidemarkup true
  * @markup
  * <h2 style="font-family: Eaton Reg">Eaton Regular</h2>
  * <h2 style="font-family: Eaton Med">Eaton Medium</h2>
  */
@font-face {
  font-family: 'Eaton Reg';
  src: url('../fonts/eatonreg-webfont.eot');
  src: url('../fonts/eatonreg-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/eatonreg-webfont.woff') format('woff'), url('../fonts/eatonreg-webfont.ttf') format('truetype'), url('../fonts/eatonreg-webfont.svg#fonts/eatonreg-webfont') format('svg');
}
@font-face {
  font-family: 'Eaton Med';
  src: url('../fonts/eatonmed-webfont.eot');
  src: url('../fonts/eatonmed-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/eatonmed-webfont.woff') format('woff'), url('../fonts/eatonmed-webfont.ttf') format('truetype'), url('../fonts/eatonmed-webfont.svg#fonts/eatonmed-webfont') format('svg');
}
/**
  * @toc 1.2
  * @name Eaton brand icons
  * @slug brand-icons
  * @description IcoMoon (https://icomoon.io/app/) is used to generate a custom icon font with a subset of the official Eaton brand icons. The IcoMoon configuration file used on this project can be found in <samp>src/fonts/selection.json</samp>. For more information about Eaton's Digital Icon Library, see <a href="/responsive-web-experience/design-styles.html#icons">Design styles</a>.
  * @state .icon-calendar
  * @state .icon-left-ring
  * @state .icon-right-ring
  * @state .icon-camera
  * @state .icon-chevron-down
  * @state .icon-details
  * @state .icon-notes
  * @state .icon-first
  * @state .icon-last
  * @state .icon-next
  * @state .icon-previous
  * @state .icon-chevron-up
  * @state .icon-find-reseller
  * @state .icon-download-alt
  * @state .icon-contact
  * @state .icon-user
  * @state .icon-uncheck
  * @state .icon-check
  * @state .icon-external-link
  * @state .icon-arrowup
  * @state .icon-arrowdown
  * @state .icon-share
  * @state .icon-build-assembly
  * @state .icon-2d
  * @state .icon-chevron-left
  * @state .icon-chevron-right
  * @state .icon-eye
  * @state .icon-calculator
  * @state .icon-videos
  * @state .icon-literature
  * @state .icon-locator
  * @state .icon-3d
  * @state .icon-products
  * @state .icon-market-segments
  * @state .icon-spec-sheet
  * @state .icon-news
  * @state .icon-cross-ref
  * @state .icon-close
  * @state .icon-close-box
  * @state .icon-book
  * @state .icon-info
  * @state .icon-alert
  * @state .icon-truck
  * @state .icon-download
  * @state .icon-search-page
  * @state .icon-cog
  * @state .icon-mail
  * @state .icon-filter
  * @state .icon-refresh
  * @state .icon-cancel
  * @state .icon-search
  * @state .icon-favorite
  * @state .icon-Subtract
  * @state .icon-Add
  * @state .icon-radio-checked
  * @state .icon-radio-unchecked
  * @state .icon-mail2
  * @state .icon-facebook2
  * @state .icon-twitter2
  * @state .icon-youtube3
  * @state .icon-tumblr2
  * @state .icon-linkedin
  * @state .icon-checkmark
  * @hidemarkup true
  * @markup
  	<p data-mh="icons"><i class="{{class}}"></i> {{class}}</p>
  */
@font-face {
  font-family: 'icomoon';
  src: url('../fonts/icomoon.eot?9yf8u1');
  src: url('../fonts/icomoon.eot?#iefix9yf8u1') format('embedded-opentype'), url('../fonts/icomoon.ttf?9yf8u1') format('truetype'), url('../fonts/icomoon.woff?9yf8u1') format('woff'), url('../fonts/icomoon.svg?9yf8u1#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"],
[class*=" icon-"] {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-calendar:before {
  content: "\e635";
}
.icon-left-ring:before {
  content: "\e633";
}
.icon-right-ring:before {
  content: "\e634";
}
.icon-camera:before {
  content: "\e632";
}
.icon-chevron-down:before {
  content: "\e612";
}
.icon-details:before {
  content: "\e615";
}
.icon-notes:before {
  content: "\e631";
}
.icon-first:before {
  content: "\e62d";
}
.icon-last:before {
  content: "\e62e";
}
.icon-next:before {
  content: "\e62f";
}
.icon-previous:before {
  content: "\e630";
}
.icon-chevron-up:before {
  content: "\e62c";
}
.icon-find-reseller:before {
  content: "\e62b";
}
.icon-download-alt:before {
  content: "\e62a";
}
.icon-contact:before {
  content: "\e628";
}
.icon-user:before {
  content: "\e629";
}
.icon-uncheck:before {
  content: "\e605";
}
.icon-check:before {
  content: "\e627";
}
.icon-external-link:before {
  content: "\e626";
}
.icon-arrowup:before {
  content: "\e620";
}
.icon-arrowdown:before {
  content: "\e621";
}
.icon-share:before {
  content: "\e61f";
}
.icon-build-assembly:before {
  content: "\e625";
}
.icon-2d:before {
  content: "\e624";
}
.icon-chevron-left:before {
  content: "\e623";
}
.icon-chevron-right:before {
  content: "\e622";
}
.icon-eye:before {
  content: "\e61e";
}
.icon-calculator:before {
  content: "\e61d";
}
.icon-videos:before {
  content: "\e613";
}
.icon-literature:before {
  content: "\e614";
}
.icon-locator:before {
  content: "\e616";
}
.icon-3d:before {
  content: "\e617";
}
.icon-products:before {
  content: "\e618";
}
.icon-market-segments:before {
  content: "\e619";
}
.icon-spec-sheet:before {
  content: "\e61a";
}
.icon-news:before {
  content: "\e61b";
}
.icon-cross-ref:before {
  content: "\e61c";
}
.icon-close:before {
  content: "\e603";
}
.icon-close-box:before {
  content: "\e604";
}
.icon-book:before {
  content: "\e606";
}
.icon-info:before {
  content: "\e607";
}
.icon-alert:before {
  content: "\e608";
}
.icon-truck:before {
  content: "\e609";
}
.icon-download:before {
  content: "\e60a";
}
.icon-search-page:before {
  content: "\e60b";
}
.icon-cog:before {
  content: "\e60c";
}
.icon-mail:before {
  content: "\e60d";
}
.icon-filter:before {
  content: "\e60e";
}
.icon-refresh:before {
  content: "\e60f";
}
.icon-cancel:before {
  content: "\e610";
}
.icon-search:before {
  content: "\e611";
}
.icon-favorite:before {
  content: "\e600";
}
.icon-Subtract:before {
  content: "\e601";
}
.icon-Add:before {
  content: "\e602";
}
.icon-radio-checked:before {
  content: "\ea54";
}
.icon-radio-unchecked:before {
  content: "\ea56";
}
.icon-mail2:before {
  content: "\ea83";
}
.icon-facebook2:before {
  content: "\ea8d";
}
.icon-twitter2:before {
  content: "\ea92";
}
.icon-youtube3:before {
  content: "\ea99";
}
.icon-tumblr2:before {
  content: "\eabc";
}
.icon-linkedin:before {
  content: "\eac8";
}
.icon-checkmark:before {
  content: "\ea10";
}
/*!
 *  Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
/**
  * @toc 1.3
  * @name Font Awesome icons
  * @slug font-awesome-icons
  * @container true
  * @gridclass col-xs-12
  * @description The Font Awesome icon library (<a href="http://fortawesome.github.io/Font-Awesome/) is provided to supplement the official Eaton Digital Icon Library. Whenever possible, use Eaton standard icons. See <a href="/responsive-web-experience/design-styles.html#icons">Design styles</a> for more information.
  */
/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.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;
  transform: translate(0, 0);
}
/* makes the font 33% larger relative to the icon container */
.fa-lg {
  font-size: 1.33333333em;
  line-height: 0.75em;
  vertical-align: -15%;
}
.fa-2x {
  font-size: 2em;
}
.fa-3x {
  font-size: 3em;
}
.fa-4x {
  font-size: 4em;
}
.fa-5x {
  font-size: 5em;
}
.fa-fw {
  width: 1.28571429em;
  text-align: center;
}
.fa-ul {
  padding-left: 0;
  margin-left: 2.14285714em;
  list-style-type: none;
}
.fa-ul > li {
  position: relative;
}
.fa-li {
  position: absolute;
  left: -2.14285714em;
  width: 2.14285714em;
  top: 0.14285714em;
  text-align: center;
}
.fa-li.fa-lg {
  left: -1.85714286em;
}
.fa-border {
  padding: .2em .25em .15em;
  border: solid 0.08em #eeeeee;
  border-radius: .1em;
}
.pull-right {
  float: right;
}
.pull-left {
  float: left;
}
.fa.pull-left {
  margin-right: .3em;
}
.fa.pull-right {
  margin-left: .3em;
}
.fa-spin {
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}
.fa-pulse {
  -webkit-animation: fa-spin 1s infinite steps(8);
  animation: fa-spin 1s infinite steps(8);
}
@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
.fa-rotate-90 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.fa-rotate-180 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.fa-rotate-270 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}
.fa-flip-horizontal {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.fa-flip-vertical {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
  -webkit-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}
:root .fa-rotate-90,
:root .fa-rotate-180,
:root .fa-rotate-270,
:root .fa-flip-horizontal,
:root .fa-flip-vertical {
  filter: none;
}
.fa-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}
.fa-stack-1x,
.fa-stack-2x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}
.fa-stack-1x {
  line-height: inherit;
}
.fa-stack-2x {
  font-size: 2em;
}
.fa-inverse {
  color: #ffffff;
}
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
   readers do not read off random characters that represent icons */
.fa-glass:before {
  content: "\f000";
}
.fa-music:before {
  content: "\f001";
}
.fa-search:before {
  content: "\f002";
}
.fa-envelope-o:before {
  content: "\f003";
}
.fa-heart:before {
  content: "\f004";
}
.fa-star:before {
  content: "\f005";
}
.fa-star-o:before {
  content: "\f006";
}
.fa-user:before {
  content: "\f007";
}
.fa-film:before {
  content: "\f008";
}
.fa-th-large:before {
  content: "\f009";
}
.fa-th:before {
  content: "\f00a";
}
.fa-th-list:before {
  content: "\f00b";
}
.fa-check:before {
  content: "\f00c";
}
.fa-remove:before,
.fa-close:before,
.fa-times:before {
  content: "\f00d";
}
.fa-search-plus:before {
  content: "\f00e";
}
.fa-search-minus:before {
  content: "\f010";
}
.fa-power-off:before {
  content: "\f011";
}
.fa-signal:before {
  content: "\f012";
}
.fa-gear:before,
.fa-cog:before {
  content: "\f013";
}
.fa-trash-o:before {
  content: "\f014";
}
.fa-home:before {
  content: "\f015";
}
.fa-file-o:before {
  content: "\f016";
}
.fa-clock-o:before {
  content: "\f017";
}
.fa-road:before {
  content: "\f018";
}
.fa-download:before {
  content: "\f019";
}
.fa-arrow-circle-o-down:before {
  content: "\f01a";
}
.fa-arrow-circle-o-up:before {
  content: "\f01b";
}
.fa-inbox:before {
  content: "\f01c";
}
.fa-play-circle-o:before {
  content: "\f01d";
}
.fa-rotate-right:before,
.fa-repeat:before {
  content: "\f01e";
}
.fa-refresh:before {
  content: "\f021";
}
.fa-list-alt:before {
  content: "\f022";
}
.fa-lock:before {
  content: "\f023";
}
.fa-flag:before {
  content: "\f024";
}
.fa-headphones:before {
  content: "\f025";
}
.fa-volume-off:before {
  content: "\f026";
}
.fa-volume-down:before {
  content: "\f027";
}
.fa-volume-up:before {
  content: "\f028";
}
.fa-qrcode:before {
  content: "\f029";
}
.fa-barcode:before {
  content: "\f02a";
}
.fa-tag:before {
  content: "\f02b";
}
.fa-tags:before {
  content: "\f02c";
}
.fa-book:before {
  content: "\f02d";
}
.fa-bookmark:before {
  content: "\f02e";
}
.fa-print:before {
  content: "\f02f";
}
.fa-camera:before {
  content: "\f030";
}
.fa-font:before {
  content: "\f031";
}
.fa-bold:before {
  content: "\f032";
}
.fa-italic:before {
  content: "\f033";
}
.fa-text-height:before {
  content: "\f034";
}
.fa-text-width:before {
  content: "\f035";
}
.fa-align-left:before {
  content: "\f036";
}
.fa-align-center:before {
  content: "\f037";
}
.fa-align-right:before {
  content: "\f038";
}
.fa-align-justify:before {
  content: "\f039";
}
.fa-list:before {
  content: "\f03a";
}
.fa-dedent:before,
.fa-outdent:before {
  content: "\f03b";
}
.fa-indent:before {
  content: "\f03c";
}
.fa-video-camera:before {
  content: "\f03d";
}
.fa-photo:before,
.fa-image:before,
.fa-picture-o:before {
  content: "\f03e";
}
.fa-pencil:before {
  content: "\f040";
}
.fa-map-marker:before {
  content: "\f041";
}
.fa-adjust:before {
  content: "\f042";
}
.fa-tint:before {
  content: "\f043";
}
.fa-edit:before,
.fa-pencil-square-o:before {
  content: "\f044";
}
.fa-share-square-o:before {
  content: "\f045";
}
.fa-check-square-o:before {
  content: "\f046";
}
.fa-arrows:before {
  content: "\f047";
}
.fa-step-backward:before {
  content: "\f048";
}
.fa-fast-backward:before {
  content: "\f049";
}
.fa-backward:before {
  content: "\f04a";
}
.fa-play:before {
  content: "\f04b";
}
.fa-pause:before {
  content: "\f04c";
}
.fa-stop:before {
  content: "\f04d";
}
.fa-forward:before {
  content: "\f04e";
}
.fa-fast-forward:before {
  content: "\f050";
}
.fa-step-forward:before {
  content: "\f051";
}
.fa-eject:before {
  content: "\f052";
}
.fa-chevron-left:before {
  content: "\f053";
}
.fa-chevron-right:before {
  content: "\f054";
}
.fa-plus-circle:before {
  content: "\f055";
}
.fa-minus-circle:before {
  content: "\f056";
}
.fa-times-circle:before {
  content: "\f057";
}
.fa-check-circle:before {
  content: "\f058";
}
.fa-question-circle:before {
  content: "\f059";
}
.fa-info-circle:before {
  content: "\f05a";
}
.fa-crosshairs:before {
  content: "\f05b";
}
.fa-times-circle-o:before {
  content: "\f05c";
}
.fa-check-circle-o:before {
  content: "\f05d";
}
.fa-ban:before {
  content: "\f05e";
}
.fa-arrow-left:before {
  content: "\f060";
}
.fa-arrow-right:before {
  content: "\f061";
}
.fa-arrow-up:before {
  content: "\f062";
}
.fa-arrow-down:before {
  content: "\f063";
}
.fa-mail-forward:before,
.fa-share:before {
  content: "\f064";
}
.fa-expand:before {
  content: "\f065";
}
.fa-compress:before {
  content: "\f066";
}
.fa-plus:before {
  content: "\f067";
}
.fa-minus:before {
  content: "\f068";
}
.fa-asterisk:before {
  content: "\f069";
}
.fa-exclamation-circle:before {
  content: "\f06a";
}
.fa-gift:before {
  content: "\f06b";
}
.fa-leaf:before {
  content: "\f06c";
}
.fa-fire:before {
  content: "\f06d";
}
.fa-eye:before {
  content: "\f06e";
}
.fa-eye-slash:before {
  content: "\f070";
}
.fa-warning:before,
.fa-exclamation-triangle:before {
  content: "\f071";
}
.fa-plane:before {
  content: "\f072";
}
.fa-calendar:before {
  content: "\f073";
}
.fa-random:before {
  content: "\f074";
}
.fa-comment:before {
  content: "\f075";
}
.fa-magnet:before {
  content: "\f076";
}
.fa-chevron-up:before {
  content: "\f077";
}
.fa-chevron-down:before {
  content: "\f078";
}
.fa-retweet:before {
  content: "\f079";
}
.fa-shopping-cart:before {
  content: "\f07a";
}
.fa-folder:before {
  content: "\f07b";
}
.fa-folder-open:before {
  content: "\f07c";
}
.fa-arrows-v:before {
  content: "\f07d";
}
.fa-arrows-h:before {
  content: "\f07e";
}
.fa-bar-chart-o:before,
.fa-bar-chart:before {
  content: "\f080";
}
.fa-twitter-square:before {
  content: "\f081";
}
.fa-facebook-square:before {
  content: "\f082";
}
.fa-camera-retro:before {
  content: "\f083";
}
.fa-key:before {
  content: "\f084";
}
.fa-gears:before,
.fa-cogs:before {
  content: "\f085";
}
.fa-comments:before {
  content: "\f086";
}
.fa-thumbs-o-up:before {
  content: "\f087";
}
.fa-thumbs-o-down:before {
  content: "\f088";
}
.fa-star-half:before {
  content: "\f089";
}
.fa-heart-o:before {
  content: "\f08a";
}
.fa-sign-out:before {
  content: "\f08b";
}
.fa-linkedin-square:before {
  content: "\f08c";
}
.fa-thumb-tack:before {
  content: "\f08d";
}
.fa-external-link:before {
  content: "\f08e";
}
.fa-sign-in:before {
  content: "\f090";
}
.fa-trophy:before {
  content: "\f091";
}
.fa-github-square:before {
  content: "\f092";
}
.fa-upload:before {
  content: "\f093";
}
.fa-lemon-o:before {
  content: "\f094";
}
.fa-phone:before {
  content: "\f095";
}
.fa-square-o:before {
  content: "\f096";
}
.fa-bookmark-o:before {
  content: "\f097";
}
.fa-phone-square:before {
  content: "\f098";
}
.fa-twitter:before {
  content: "\f099";
}
.fa-facebook-f:before,
.fa-facebook:before {
  content: "\f09a";
}
.fa-github:before {
  content: "\f09b";
}
.fa-unlock:before {
  content: "\f09c";
}
.fa-credit-card:before {
  content: "\f09d";
}
.fa-rss:before {
  content: "\f09e";
}
.fa-hdd-o:before {
  content: "\f0a0";
}
.fa-bullhorn:before {
  content: "\f0a1";
}
.fa-bell:before {
  content: "\f0f3";
}
.fa-certificate:before {
  content: "\f0a3";
}
.fa-hand-o-right:before {
  content: "\f0a4";
}
.fa-hand-o-left:before {
  content: "\f0a5";
}
.fa-hand-o-up:before {
  content: "\f0a6";
}
.fa-hand-o-down:before {
  content: "\f0a7";
}
.fa-arrow-circle-left:before {
  content: "\f0a8";
}
.fa-arrow-circle-right:before {
  content: "\f0a9";
}
.fa-arrow-circle-up:before {
  content: "\f0aa";
}
.fa-arrow-circle-down:before {
  content: "\f0ab";
}
.fa-globe:before {
  content: "\f0ac";
}
.fa-wrench:before {
  content: "\f0ad";
}
.fa-tasks:before {
  content: "\f0ae";
}
.fa-filter:before {
  content: "\f0b0";
}
.fa-briefcase:before {
  content: "\f0b1";
}
.fa-arrows-alt:before {
  content: "\f0b2";
}
.fa-group:before,
.fa-users:before {
  content: "\f0c0";
}
.fa-chain:before,
.fa-link:before {
  content: "\f0c1";
}
.fa-cloud:before {
  content: "\f0c2";
}
.fa-flask:before {
  content: "\f0c3";
}
.fa-cut:before,
.fa-scissors:before {
  content: "\f0c4";
}
.fa-copy:before,
.fa-files-o:before {
  content: "\f0c5";
}
.fa-paperclip:before {
  content: "\f0c6";
}
.fa-save:before,
.fa-floppy-o:before {
  content: "\f0c7";
}
.fa-square:before {
  content: "\f0c8";
}
.fa-navicon:before,
.fa-reorder:before,
.fa-bars:before {
  content: "\f0c9";
}
.fa-list-ul:before {
  content: "\f0ca";
}
.fa-list-ol:before {
  content: "\f0cb";
}
.fa-strikethrough:before {
  content: "\f0cc";
}
.fa-underline:before {
  content: "\f0cd";
}
.fa-table:before {
  content: "\f0ce";
}
.fa-magic:before {
  content: "\f0d0";
}
.fa-truck:before {
  content: "\f0d1";
}
.fa-pinterest:before {
  content: "\f0d2";
}
.fa-pinterest-square:before {
  content: "\f0d3";
}
.fa-google-plus-square:before {
  content: "\f0d4";
}
.fa-google-plus:before {
  content: "\f0d5";
}
.fa-money:before {
  content: "\f0d6";
}
.fa-caret-down:before {
  content: "\f0d7";
}
.fa-caret-up:before {
  content: "\f0d8";
}
.fa-caret-left:before {
  content: "\f0d9";
}
.fa-caret-right:before {
  content: "\f0da";
}
.fa-columns:before {
  content: "\f0db";
}
.fa-unsorted:before,
.fa-sort:before {
  content: "\f0dc";
}
.fa-sort-down:before,
.fa-sort-desc:before {
  content: "\f0dd";
}
.fa-sort-up:before,
.fa-sort-asc:before {
  content: "\f0de";
}
.fa-envelope:before {
  content: "\f0e0";
}
.fa-linkedin:before {
  content: "\f0e1";
}
.fa-rotate-left:before,
.fa-undo:before {
  content: "\f0e2";
}
.fa-legal:before,
.fa-gavel:before {
  content: "\f0e3";
}
.fa-dashboard:before,
.fa-tachometer:before {
  content: "\f0e4";
}
.fa-comment-o:before {
  content: "\f0e5";
}
.fa-comments-o:before {
  content: "\f0e6";
}
.fa-flash:before,
.fa-bolt:before {
  content: "\f0e7";
}
.fa-sitemap:before {
  content: "\f0e8";
}
.fa-umbrella:before {
  content: "\f0e9";
}
.fa-paste:before,
.fa-clipboard:before {
  content: "\f0ea";
}
.fa-lightbulb-o:before {
  content: "\f0eb";
}
.fa-exchange:before {
  content: "\f0ec";
}
.fa-cloud-download:before {
  content: "\f0ed";
}
.fa-cloud-upload:before {
  content: "\f0ee";
}
.fa-user-md:before {
  content: "\f0f0";
}
.fa-stethoscope:before {
  content: "\f0f1";
}
.fa-suitcase:before {
  content: "\f0f2";
}
.fa-bell-o:before {
  content: "\f0a2";
}
.fa-coffee:before {
  content: "\f0f4";
}
.fa-cutlery:before {
  content: "\f0f5";
}
.fa-file-text-o:before {
  content: "\f0f6";
}
.fa-building-o:before {
  content: "\f0f7";
}
.fa-hospital-o:before {
  content: "\f0f8";
}
.fa-ambulance:before {
  content: "\f0f9";
}
.fa-medkit:before {
  content: "\f0fa";
}
.fa-fighter-jet:before {
  content: "\f0fb";
}
.fa-beer:before {
  content: "\f0fc";
}
.fa-h-square:before {
  content: "\f0fd";
}
.fa-plus-square:before {
  content: "\f0fe";
}
.fa-angle-double-left:before {
  content: "\f100";
}
.fa-angle-double-right:before {
  content: "\f101";
}
.fa-angle-double-up:before {
  content: "\f102";
}
.fa-angle-double-down:before {
  content: "\f103";
}
.fa-angle-left:before {
  content: "\f104";
}
.fa-angle-right:before {
  content: "\f105";
}
.fa-angle-up:before {
  content: "\f106";
}
.fa-angle-down:before {
  content: "\f107";
}
.fa-desktop:before {
  content: "\f108";
}
.fa-laptop:before {
  content: "\f109";
}
.fa-tablet:before {
  content: "\f10a";
}
.fa-mobile-phone:before,
.fa-mobile:before {
  content: "\f10b";
}
.fa-circle-o:before {
  content: "\f10c";
}
.fa-quote-left:before {
  content: "\f10d";
}
.fa-quote-right:before {
  content: "\f10e";
}
.fa-spinner:before {
  content: "\f110";
}
.fa-circle:before {
  content: "\f111";
}
.fa-mail-reply:before,
.fa-reply:before {
  content: "\f112";
}
.fa-github-alt:before {
  content: "\f113";
}
.fa-folder-o:before {
  content: "\f114";
}
.fa-folder-open-o:before {
  content: "\f115";
}
.fa-smile-o:before {
  content: "\f118";
}
.fa-frown-o:before {
  content: "\f119";
}
.fa-meh-o:before {
  content: "\f11a";
}
.fa-gamepad:before {
  content: "\f11b";
}
.fa-keyboard-o:before {
  content: "\f11c";
}
.fa-flag-o:before {
  content: "\f11d";
}
.fa-flag-checkered:before {
  content: "\f11e";
}
.fa-terminal:before {
  content: "\f120";
}
.fa-code:before {
  content: "\f121";
}
.fa-mail-reply-all:before,
.fa-reply-all:before {
  content: "\f122";
}
.fa-star-half-empty:before,
.fa-star-half-full:before,
.fa-star-half-o:before {
  content: "\f123";
}
.fa-location-arrow:before {
  content: "\f124";
}
.fa-crop:before {
  content: "\f125";
}
.fa-code-fork:before {
  content: "\f126";
}
.fa-unlink:before,
.fa-chain-broken:before {
  content: "\f127";
}
.fa-question:before {
  content: "\f128";
}
.fa-info:before {
  content: "\f129";
}
.fa-exclamation:before {
  content: "\f12a";
}
.fa-superscript:before {
  content: "\f12b";
}
.fa-subscript:before {
  content: "\f12c";
}
.fa-eraser:before {
  content: "\f12d";
}
.fa-puzzle-piece:before {
  content: "\f12e";
}
.fa-microphone:before {
  content: "\f130";
}
.fa-microphone-slash:before {
  content: "\f131";
}
.fa-shield:before {
  content: "\f132";
}
.fa-calendar-o:before {
  content: "\f133";
}
.fa-fire-extinguisher:before {
  content: "\f134";
}
.fa-rocket:before {
  content: "\f135";
}
.fa-maxcdn:before {
  content: "\f136";
}
.fa-chevron-circle-left:before {
  content: "\f137";
}
.fa-chevron-circle-right:before {
  content: "\f138";
}
.fa-chevron-circle-up:before {
  content: "\f139";
}
.fa-chevron-circle-down:before {
  content: "\f13a";
}
.fa-html5:before {
  content: "\f13b";
}
.fa-css3:before {
  content: "\f13c";
}
.fa-anchor:before {
  content: "\f13d";
}
.fa-unlock-alt:before {
  content: "\f13e";
}
.fa-bullseye:before {
  content: "\f140";
}
.fa-ellipsis-h:before {
  content: "\f141";
}
.fa-ellipsis-v:before {
  content: "\f142";
}
.fa-rss-square:before {
  content: "\f143";
}
.fa-play-circle:before {
  content: "\f144";
}
.fa-ticket:before {
  content: "\f145";
}
.fa-minus-square:before {
  content: "\f146";
}
.fa-minus-square-o:before {
  content: "\f147";
}
.fa-level-up:before {
  content: "\f148";
}
.fa-level-down:before {
  content: "\f149";
}
.fa-check-square:before {
  content: "\f14a";
}
.fa-pencil-square:before {
  content: "\f14b";
}
.fa-external-link-square:before {
  content: "\f14c";
}
.fa-share-square:before {
  content: "\f14d";
}
.fa-compass:before {
  content: "\f14e";
}
.fa-toggle-down:before,
.fa-caret-square-o-down:before {
  content: "\f150";
}
.fa-toggle-up:before,
.fa-caret-square-o-up:before {
  content: "\f151";
}
.fa-toggle-right:before,
.fa-caret-square-o-right:before {
  content: "\f152";
}
.fa-euro:before,
.fa-eur:before {
  content: "\f153";
}
.fa-gbp:before {
  content: "\f154";
}
.fa-dollar:before,
.fa-usd:before {
  content: "\f155";
}
.fa-rupee:before,
.fa-inr:before {
  content: "\f156";
}
.fa-cny:before,
.fa-rmb:before,
.fa-yen:before,
.fa-jpy:before {
  content: "\f157";
}
.fa-ruble:before,
.fa-rouble:before,
.fa-rub:before {
  content: "\f158";
}
.fa-won:before,
.fa-krw:before {
  content: "\f159";
}
.fa-bitcoin:before,
.fa-btc:before {
  content: "\f15a";
}
.fa-file:before {
  content: "\f15b";
}
.fa-file-text:before {
  content: "\f15c";
}
.fa-sort-alpha-asc:before {
  content: "\f15d";
}
.fa-sort-alpha-desc:before {
  content: "\f15e";
}
.fa-sort-amount-asc:before {
  content: "\f160";
}
.fa-sort-amount-desc:before {
  content: "\f161";
}
.fa-sort-numeric-asc:before {
  content: "\f162";
}
.fa-sort-numeric-desc:before {
  content: "\f163";
}
.fa-thumbs-up:before {
  content: "\f164";
}
.fa-thumbs-down:before {
  content: "\f165";
}
.fa-youtube-square:before {
  content: "\f166";
}
.fa-youtube:before {
  content: "\f167";
}
.fa-xing:before {
  content: "\f168";
}
.fa-xing-square:before {
  content: "\f169";
}
.fa-youtube-play:before {
  content: "\f16a";
}
.fa-dropbox:before {
  content: "\f16b";
}
.fa-stack-overflow:before {
  content: "\f16c";
}
.fa-instagram:before {
  content: "\f16d";
}
.fa-flickr:before {
  content: "\f16e";
}
.fa-adn:before {
  content: "\f170";
}
.fa-bitbucket:before {
  content: "\f171";
}
.fa-bitbucket-square:before {
  content: "\f172";
}
.fa-tumblr:before {
  content: "\f173";
}
.fa-tumblr-square:before {
  content: "\f174";
}
.fa-long-arrow-down:before {
  content: "\f175";
}
.fa-long-arrow-up:before {
  content: "\f176";
}
.fa-long-arrow-left:before {
  content: "\f177";
}
.fa-long-arrow-right:before {
  content: "\f178";
}
.fa-apple:before {
  content: "\f179";
}
.fa-windows:before {
  content: "\f17a";
}
.fa-android:before {
  content: "\f17b";
}
.fa-linux:before {
  content: "\f17c";
}
.fa-dribbble:before {
  content: "\f17d";
}
.fa-skype:before {
  content: "\f17e";
}
.fa-foursquare:before {
  content: "\f180";
}
.fa-trello:before {
  content: "\f181";
}
.fa-female:before {
  content: "\f182";
}
.fa-male:before {
  content: "\f183";
}
.fa-gittip:before,
.fa-gratipay:before {
  content: "\f184";
}
.fa-sun-o:before {
  content: "\f185";
}
.fa-moon-o:before {
  content: "\f186";
}
.fa-archive:before {
  content: "\f187";
}
.fa-bug:before {
  content: "\f188";
}
.fa-vk:before {
  content: "\f189";
}
.fa-weibo:before {
  content: "\f18a";
}
.fa-renren:before {
  content: "\f18b";
}
.fa-pagelines:before {
  content: "\f18c";
}
.fa-stack-exchange:before {
  content: "\f18d";
}
.fa-arrow-circle-o-right:before {
  content: "\f18e";
}
.fa-arrow-circle-o-left:before {
  content: "\f190";
}
.fa-toggle-left:before,
.fa-caret-square-o-left:before {
  content: "\f191";
}
.fa-dot-circle-o:before {
  content: "\f192";
}
.fa-wheelchair:before {
  content: "\f193";
}
.fa-vimeo-square:before {
  content: "\f194";
}
.fa-turkish-lira:before,
.fa-try:before {
  content: "\f195";
}
.fa-plus-square-o:before {
  content: "\f196";
}
.fa-space-shuttle:before {
  content: "\f197";
}
.fa-slack:before {
  content: "\f198";
}
.fa-envelope-square:before {
  content: "\f199";
}
.fa-wordpress:before {
  content: "\f19a";
}
.fa-openid:before {
  content: "\f19b";
}
.fa-institution:before,
.fa-bank:before,
.fa-university:before {
  content: "\f19c";
}
.fa-mortar-board:before,
.fa-graduation-cap:before {
  content: "\f19d";
}
.fa-yahoo:before {
  content: "\f19e";
}
.fa-google:before {
  content: "\f1a0";
}
.fa-reddit:before {
  content: "\f1a1";
}
.fa-reddit-square:before {
  content: "\f1a2";
}
.fa-stumbleupon-circle:before {
  content: "\f1a3";
}
.fa-stumbleupon:before {
  content: "\f1a4";
}
.fa-delicious:before {
  content: "\f1a5";
}
.fa-digg:before {
  content: "\f1a6";
}
.fa-pied-piper:before {
  content: "\f1a7";
}
.fa-pied-piper-alt:before {
  content: "\f1a8";
}
.fa-drupal:before {
  content: "\f1a9";
}
.fa-joomla:before {
  content: "\f1aa";
}
.fa-language:before {
  content: "\f1ab";
}
.fa-fax:before {
  content: "\f1ac";
}
.fa-building:before {
  content: "\f1ad";
}
.fa-child:before {
  content: "\f1ae";
}
.fa-paw:before {
  content: "\f1b0";
}
.fa-spoon:before {
  content: "\f1b1";
}
.fa-cube:before {
  content: "\f1b2";
}
.fa-cubes:before {
  content: "\f1b3";
}
.fa-behance:before {
  content: "\f1b4";
}
.fa-behance-square:before {
  content: "\f1b5";
}
.fa-steam:before {
  content: "\f1b6";
}
.fa-steam-square:before {
  content: "\f1b7";
}
.fa-recycle:before {
  content: "\f1b8";
}
.fa-automobile:before,
.fa-car:before {
  content: "\f1b9";
}
.fa-cab:before,
.fa-taxi:before {
  content: "\f1ba";
}
.fa-tree:before {
  content: "\f1bb";
}
.fa-spotify:before {
  content: "\f1bc";
}
.fa-deviantart:before {
  content: "\f1bd";
}
.fa-soundcloud:before {
  content: "\f1be";
}
.fa-database:before {
  content: "\f1c0";
}
.fa-file-pdf-o:before {
  content: "\f1c1";
}
.fa-file-word-o:before {
  content: "\f1c2";
}
.fa-file-excel-o:before {
  content: "\f1c3";
}
.fa-file-powerpoint-o:before {
  content: "\f1c4";
}
.fa-file-photo-o:before,
.fa-file-picture-o:before,
.fa-file-image-o:before {
  content: "\f1c5";
}
.fa-file-zip-o:before,
.fa-file-archive-o:before {
  content: "\f1c6";
}
.fa-file-sound-o:before,
.fa-file-audio-o:before {
  content: "\f1c7";
}
.fa-file-movie-o:before,
.fa-file-video-o:before {
  content: "\f1c8";
}
.fa-file-code-o:before {
  content: "\f1c9";
}
.fa-vine:before {
  content: "\f1ca";
}
.fa-codepen:before {
  content: "\f1cb";
}
.fa-jsfiddle:before {
  content: "\f1cc";
}
.fa-life-bouy:before,
.fa-life-buoy:before,
.fa-life-saver:before,
.fa-support:before,
.fa-life-ring:before {
  content: "\f1cd";
}
.fa-circle-o-notch:before {
  content: "\f1ce";
}
.fa-ra:before,
.fa-rebel:before {
  content: "\f1d0";
}
.fa-ge:before,
.fa-empire:before {
  content: "\f1d1";
}
.fa-git-square:before {
  content: "\f1d2";
}
.fa-git:before {
  content: "\f1d3";
}
.fa-hacker-news:before {
  content: "\f1d4";
}
.fa-tencent-weibo:before {
  content: "\f1d5";
}
.fa-qq:before {
  content: "\f1d6";
}
.fa-wechat:before,
.fa-weixin:before {
  content: "\f1d7";
}
.fa-send:before,
.fa-paper-plane:before {
  content: "\f1d8";
}
.fa-send-o:before,
.fa-paper-plane-o:before {
  content: "\f1d9";
}
.fa-history:before {
  content: "\f1da";
}
.fa-genderless:before,
.fa-circle-thin:before {
  content: "\f1db";
}
.fa-header:before {
  content: "\f1dc";
}
.fa-paragraph:before {
  content: "\f1dd";
}
.fa-sliders:before {
  content: "\f1de";
}
.fa-share-alt:before {
  content: "\f1e0";
}
.fa-share-alt-square:before {
  content: "\f1e1";
}
.fa-bomb:before {
  content: "\f1e2";
}
.fa-soccer-ball-o:before,
.fa-futbol-o:before {
  content: "\f1e3";
}
.fa-tty:before {
  content: "\f1e4";
}
.fa-binoculars:before {
  content: "\f1e5";
}
.fa-plug:before {
  content: "\f1e6";
}
.fa-slideshare:before {
  content: "\f1e7";
}
.fa-twitch:before {
  content: "\f1e8";
}
.fa-yelp:before {
  content: "\f1e9";
}
.fa-newspaper-o:before {
  content: "\f1ea";
}
.fa-wifi:before {
  content: "\f1eb";
}
.fa-calculator:before {
  content: "\f1ec";
}
.fa-paypal:before {
  content: "\f1ed";
}
.fa-google-wallet:before {
  content: "\f1ee";
}
.fa-cc-visa:before {
  content: "\f1f0";
}
.fa-cc-mastercard:before {
  content: "\f1f1";
}
.fa-cc-discover:before {
  content: "\f1f2";
}
.fa-cc-amex:before {
  content: "\f1f3";
}
.fa-cc-paypal:before {
  content: "\f1f4";
}
.fa-cc-stripe:before {
  content: "\f1f5";
}
.fa-bell-slash:before {
  content: "\f1f6";
}
.fa-bell-slash-o:before {
  content: "\f1f7";
}
.fa-trash:before {
  content: "\f1f8";
}
.fa-copyright:before {
  content: "\f1f9";
}
.fa-at:before {
  content: "\f1fa";
}
.fa-eyedropper:before {
  content: "\f1fb";
}
.fa-paint-brush:before {
  content: "\f1fc";
}
.fa-birthday-cake:before {
  content: "\f1fd";
}
.fa-area-chart:before {
  content: "\f1fe";
}
.fa-pie-chart:before {
  content: "\f200";
}
.fa-line-chart:before {
  content: "\f201";
}
.fa-lastfm:before {
  content: "\f202";
}
.fa-lastfm-square:before {
  content: "\f203";
}
.fa-toggle-off:before {
  content: "\f204";
}
.fa-toggle-on:before {
  content: "\f205";
}
.fa-bicycle:before {
  content: "\f206";
}
.fa-bus:before {
  content: "\f207";
}
.fa-ioxhost:before {
  content: "\f208";
}
.fa-angellist:before {
  content: "\f209";
}
.fa-cc:before {
  content: "\f20a";
}
.fa-shekel:before,
.fa-sheqel:before,
.fa-ils:before {
  content: "\f20b";
}
.fa-meanpath:before {
  content: "\f20c";
}
.fa-buysellads:before {
  content: "\f20d";
}
.fa-connectdevelop:before {
  content: "\f20e";
}
.fa-dashcube:before {
  content: "\f210";
}
.fa-forumbee:before {
  content: "\f211";
}
.fa-leanpub:before {
  content: "\f212";
}
.fa-sellsy:before {
  content: "\f213";
}
.fa-shirtsinbulk:before {
  content: "\f214";
}
.fa-simplybuilt:before {
  content: "\f215";
}
.fa-skyatlas:before {
  content: "\f216";
}
.fa-cart-plus:before {
  content: "\f217";
}
.fa-cart-arrow-down:before {
  content: "\f218";
}
.fa-diamond:before {
  content: "\f219";
}
.fa-ship:before {
  content: "\f21a";
}
.fa-user-secret:before {
  content: "\f21b";
}
.fa-motorcycle:before {
  content: "\f21c";
}
.fa-street-view:before {
  content: "\f21d";
}
.fa-heartbeat:before {
  content: "\f21e";
}
.fa-venus:before {
  content: "\f221";
}
.fa-mars:before {
  content: "\f222";
}
.fa-mercury:before {
  content: "\f223";
}
.fa-transgender:before {
  content: "\f224";
}
.fa-transgender-alt:before {
  content: "\f225";
}
.fa-venus-double:before {
  content: "\f226";
}
.fa-mars-double:before {
  content: "\f227";
}
.fa-venus-mars:before {
  content: "\f228";
}
.fa-mars-stroke:before {
  content: "\f229";
}
.fa-mars-stroke-v:before {
  content: "\f22a";
}
.fa-mars-stroke-h:before {
  content: "\f22b";
}
.fa-neuter:before {
  content: "\f22c";
}
.fa-facebook-official:before {
  content: "\f230";
}
.fa-pinterest-p:before {
  content: "\f231";
}
.fa-whatsapp:before {
  content: "\f232";
}
.fa-server:before {
  content: "\f233";
}
.fa-user-plus:before {
  content: "\f234";
}
.fa-user-times:before {
  content: "\f235";
}
.fa-hotel:before,
.fa-bed:before {
  content: "\f236";
}
.fa-viacoin:before {
  content: "\f237";
}
.fa-train:before {
  content: "\f238";
}
.fa-subway:before {
  content: "\f239";
}
.fa-medium:before {
  content: "\f23a";
}
/**
  * @toc 1.4
  * @name Global variables
  * @slug global-variables
  * @container true
  * @gridclass col-xs-12
  * @description A number of global color, font, size, and other variables are used extensively throughout the Eaton.com stylesheets. See <code>/src/less/bootstrap/variables.less</code>.
  */
/* spacing helpers
p, m = padding, margin
a, t, r, b, l, h, v = all, top, right, bottom, left, horizontal, vertical
s, m, l, n = small(5px), medium(10px), large(20px), none(0px)
*/
.ptn,
.pvn,
.pan {
  padding-top: 0 !important;
}
.pts,
.pvs,
.pas {
  padding-top: 5px !important;
}
.ptm,
.pvm,
.pam {
  padding-top: 10px !important;
}
.ptl,
.pvl,
.pal {
  padding-top: 20px !important;
}
.pth,
.pvh,
.pah {
  padding-top: 30px !important;
}
.ptg,
.pvg,
.pag {
  padding-top: 50px !important;
}
.prn,
.phn,
.pan {
  padding-right: 0 !important;
}
.prs,
.phs,
.pas {
  padding-right: 5px !important;
}
.prm,
.phm,
.pam {
  padding-right: 10px !important;
}
.prl,
.phl,
.pal {
  padding-right: 20px !important;
}
.prh,
.phh,
.pah {
  padding-right: 30px !important;
}
.prg,
.phg,
.pag {
  padding-right: 50px !important;
}
.pbn,
.pvn,
.pan {
  padding-bottom: 0 !important;
}
.pbs,
.pvs,
.pas {
  padding-bottom: 5px !important;
}
.pbm,
.pvm,
.pam {
  padding-bottom: 10px !important;
}
.pbl,
.pvl,
.pal {
  padding-bottom: 20px !important;
}
.pbh,
.pvh,
.pah {
  padding-bottom: 30px !important;
}
.pbg,
.pvg,
.pag {
  padding-bottom: 50px !important;
}
.pln,
.phn,
.pan {
  padding-left: 0 !important;
}
.pls,
.phs,
.pas {
  padding-left: 5px !important;
}
.plm,
.phm,
.pam {
  padding-left: 10px !important;
}
.pll,
.phl,
.pal {
  padding-left: 20px !important;
}
.plh,
.phh,
.pah {
  padding-left: 30px !important;
}
.plg,
.phg,
.pag {
  padding-left: 50px !important;
}
.mtn,
.mvn,
.man {
  margin-top: 0 !important;
}
.mts,
.mvs,
.mas {
  margin-top: 5px !important;
}
.mtm,
.mvm,
.mam {
  margin-top: 10px !important;
}
.mtl,
.mvl,
.mal {
  margin-top: 20px !important;
}
.mth,
.mvh,
.mah {
  margin-top: 30px !important;
}
.mtg,
.mvg,
.mag {
  margin-top: 50px !important;
}
.mrn,
.mhn,
.man {
  margin-right: 0 !important;
}
.mrs,
.mhs,
.mas {
  margin-right: 5px !important;
}
.mrm,
.mhm,
.mam {
  margin-right: 10px !important;
}
.mrl,
.mhl,
.mal {
  margin-right: 20px !important;
}
.mrh,
.mhh,
.mah {
  margin-right: 30px !important;
}
.mrg,
.mhg,
.mag {
  margin-right: 50px !important;
}
.mbn,
.mvn,
.man {
  margin-bottom: 0 !important;
}
.mbs,
.mvs,
.mas {
  margin-bottom: 5px !important;
}
.mbm,
.mvm,
.mam {
  margin-bottom: 10px !important;
}
.mbl,
.mvl,
.mal {
  margin-bottom: 20px !important;
}
.mbh,
.mvh,
.mah {
  margin-bottom: 30px !important;
}
.mbg,
.mvg,
.mag {
  margin-bottom: 50px !important;
}
.mln,
.mhn,
.man {
  margin-left: 0 !important;
}
.mls,
.mhs,
.mas {
  margin-left: 5px !important;
}
.mlm,
.mhm,
.mam {
  margin-left: 10px !important;
}
.mll,
.mhl,
.mal {
  margin-left: 20px !important;
}
.mlh,
.mhh,
.mah {
  margin-left: 30px !important;
}
.mlg,
.mhg,
.mag {
  margin-left: 50px !important;
}
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden],
template {
  display: none;
}
a {
  background-color: transparent;
}
a:active,
a:hover {
  outline: 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
mark {
  background: #ff0;
  color: #000;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 1em 40px;
}
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}
pre {
  overflow: auto;
}
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}
button {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
button[disabled],
html input[disabled] {
  cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
input {
  line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
legend {
  border: 0;
  padding: 0;
}
textarea {
  overflow: auto;
}
optgroup {
  font-weight: bold;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}
/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
@page {
  size: 8.5in 11in;
  margin: 2cm;
}
@media print {
  *,
  *:before,
  *:after {
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  select {
    background: #fff !important;
  }
  .btn > .caret,
  .dropup > .btn > .caret {
    border-top-color: #000 !important;
  }
  .label {
    border: 1px solid #000;
  }
  .table {
    border-collapse: collapse !important;
  }
  .table-bordered th,
  .table-bordered td {
    border: 1px solid #ddd !important;
  }
  .hero,
  .next-link,
  .hero img,
  .mobile-nav-toggle,
  .breadcrumb-container,
  .snap-content > footer,
  .nav.navbar-nav {
    display: none !important;
  }
  .snap-content {
    border-left: 0 !important;
  }
  .print-no-break {
    page-break-inside: avoid !important;
  }
  .print-block {
    float: none !important;
    width: 100% !important;
    position: static !important;
  }
  .col-print-3 {
    width: 25% !important;
  }
  .col-print-4 {
    width: 33% !important;
    float: left;
  }
  .col-print-6 {
    width: 50% !important;
    float: left;
  }
  .print-height {
    height: auto !important;
  }
  .site-marker-breadcrumb {
    top: 30px !important;
  }
  .site-marker {
    top: 50px !important;
    font-size: 20pt !important;
    line-height: 20pt !important;
  }
  .color-swatches .swatch {
    -webkit-print-color-adjust: exact;
    page-break-inside: avoid !important;
  }
  .color-swatches .swatch-info {
    font-size: 14px;
    font-weight: bold;
    line-height: 18px;
    page-break-inside: avoid !important;
  }
  .table-striped td,
  .table-striped th {
    -webkit-print-color-adjust: exact;
  }
  .highlight-box {
    -webkit-print-color-adjust: exact;
  }
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  font-size: 10px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333333;
  background-color: #ffffff;
}
input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
a {
  color: #0067cd;
  text-decoration: none;
}
a:hover,
a:focus {
  color: #004181;
  text-decoration: underline;
}
a:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
a:visited {
  color: #004181;
}
figure {
  margin: 0;
}
img {
  vertical-align: middle;
}
.img-responsive,
.thumbnail > img,
.thumbnail a > img {
  display: block;
  max-width: 100%;
  height: auto;
}
.img-rounded {
  border-radius: 0;
}
.img-thumbnail {
  padding: 4px;
  line-height: 1.42857143;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 0;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  display: inline-block;
  max-width: 100%;
  height: auto;
}
.img-circle {
  border-radius: 50%;
}
hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #b1b5b8;
}
hr.blue {
  border-top: 4px solid #0067cd;
  margin-top: 36px;
  margin-bottom: 36px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}
/**
  * @toc 1.5
  * @name Global typography
  * @slug global-typography
  * @container true
  * @gridclass col-sm-12
  * @hidemarkup true
  * @markup

  */
/**
  * @toc 1.5.1
  * @name Links
  * @slug links
  * @description
  * @container true
  * @submodule true
  * @gridclass col-sm-6
  * @description Basic links take two forms: standard links to other pages or websites, and telephone numbers which are only active on mobile devices. For information about link colors, see <a href="/responsive-web-experience/design-styles.html#links">Design styles</a>.

  * @markup
  *   <div>Text link: <a href="#">Example link</a></div>
  *   <div>Telephone link (only active on mobile devices): <a href="tel:555-555-1212">555-555-1212</a></div>
  */
a {
  color: #0067cd;
}
a:focus {
  outline: none;
}
.touch a[rel=tel]:before,
.touch a[href^=tel]:before {
  font-family: 'icomoon';
  content: "\e628";
  padding-right: 3px;
}
.no-touch a[rel=tel],
.no-touch a[href^=tel],
.no-touch a[rel=tel]:hover,
.no-touch a[href^=tel]:hover,
.no-touch a[rel=tel]:active,
.no-touch a[href^=tel]:active,
.no-touch a[rel=tel]:focus,
.no-touch a[href^=tel]:focus {
  text-decoration: none;
  pointer-events: none;
  cursor: default;
  color: inherit;
}
.no-touch a[rel=tel],
.no-touch a[href^=tel] {
  color: #333333;
  text-decoration: none;
}
/**
  * @toc 1.5.2
  * @name Headings
  * @slug headings
  * @submodule true
  * @description
  * @container true
  * @gridclass col-sm-12
  * @markup
     <h1>H1 Lorem ipsum dolor - 40px, #333333</h1>
     <h2>H2 Lorem ipsum dolor - 30px, #333333</h2>
     <h3>H3 Lorem ipsum dolor - 24px, #82B8c9</h3>
     <h4>H4 Lorem ipsum dolor - 18px, #333333</h4>
     <h5>H5 Lorem ipsum dolor - 14px, #333333</h5>
     <h6>H6 Lorem ipsum dolor - 12px, #333333</h6>
  */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: 'Eaton Reg', Helvetica, Arial, sans-serif;
  font-weight: bold;
  line-height: 1.2;
  color: inherit;
}
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small,
.h1 small,
.h2 small,
.h3 small,
.h4 small,
.h5 small,
.h6 small,
h1 .small,
h2 .small,
h3 .small,
h4 .small,
h5 .small,
h6 .small,
.h1 .small,
.h2 .small,
.h3 .small,
.h4 .small,
.h5 .small,
.h6 .small {
  font-weight: normal;
  line-height: 1;
  color: #777777;
}
h1.subtle,
h2.subtle,
h3.subtle,
h4.subtle,
h5.subtle,
h6.subtle,
.h1.subtle,
.h2.subtle,
.h3.subtle,
.h4.subtle,
.h5.subtle,
.h6.subtle,
.product-detail-extended h3 {
  color: #636c71;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
}
h1,
.h1,
h2,
.h2,
h3,
.h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}
h1 small,
.h1 small,
h2 small,
.h2 small,
h3 small,
.h3 small,
h1 .small,
.h1 .small,
h2 .small,
.h2 .small,
h3 .small,
.h3 .small {
  font-size: 65%;
}
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  margin-top: 10px;
  margin-bottom: 10px;
}
h4 small,
.h4 small,
h5 small,
.h5 small,
h6 small,
.h6 small,
h4 .small,
.h4 .small,
h5 .small,
.h5 .small,
h6 .small,
.h6 .small {
  font-size: 75%;
}
h1,
.h1 {
  font-size: 36px;
  margin-top: 12px;
  margin-bottom: 12px;
  letter-spacing: -0.025em;
}
@media (min-width: 768px) {
  h1,
  .h1 {
    font-size: 40px;
  }
}
h2,
.h2 {
  font-size: 20px;
  font-family: 'Eaton Reg', Helvetica, Arial, sans-serif;
  margin-bottom: 12px;
}
h2.subtle,
.h2.subtle {
  font-size: 18px;
}
.sidebar h2.panel-heading,
.sidebar .h2.panel-heading {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
h2.styleguide,
.h2.styleguide {
  font-size: 36px;
}
* + h2,
* + .h2 {
  margin-top: 36px;
}
h3,
.h3 {
  font-size: 24px;
  font-family: 'Eaton Med', Helvetica, Arial, sans-serif;
  color: #82b8c9;
}
h3.subtle,
.h3.subtle,
.product-detail-extended h3 {
  font-size: 16px;
}
.sidebar h3.panel-heading,
.sidebar .h3.panel-heading {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
* + h3,
* + .h3 {
  margin-top: 36px;
}
h4,
.h4 {
  font-size: 18px;
  font-family: 'Eaton Reg', Helvetica, Arial, sans-serif;
}
h5,
.h5 {
  font-size: 14px;
}
h6,
.h6 {
  font-size: 12px;
}
/**
  * @toc 1.5.3
  * @name Paragraphs
  * @slug paragraphs
  * @description
  * @container true
  * @gridclass col-sm-12
  * @submodule true
  * @description Body copy is 14px Helvetica Neue, Helvetica, Arial. A "lead" paragraph style is also available for short sentences that summarize the contents of a page or section, or to call special attention to a paragraph in copy. Do not use the lead paragraph for direct quotes. Use the <a href="#module-blockquote">blockquote</a> module instead.
  * @markup
    <p>Default paragraph - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquam amet beatae, corporis cupiditate
	exercitationem fuga iure magnam, maiores minima mollitia natus necessitatibus nesciunt quaerat quisquam repellendus
	tenetur unde voluptates!</p>
     <p class="lead">Lead paragraph - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquam amet beatae, corporis cupiditate
	exercitationem fuga iure magnam, maiores minima mollitia natus necessitatibus nesciunt quaerat quisquam repellendus
	tenetur unde voluptates!</p>
  */
p {
  margin: 0 0 10px;
}
.lead {
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.4;
}
@media (min-width: 768px) {
  .lead {
    font-size: 21px;
  }
}
/**
  * @toc 1.5.4
  * @name Emphasis styles
  * @slug emphasis-styles
  * @submodule true
  * @description These styles can be used to make text smaller or mark it as having special importance.
  * @container true
  * @gridclass col-sm-12
  * @markup
   <p>Regular text with embedded <small>small text</small></p>
   <p>Regular text with embedded <mark>marked text</mark></p>
  */
small,
.small {
  font-size: 92%;
}
mark,
.mark {
  background-color: #fcf8e3;
  padding: .2em;
}
/**
  * @toc 1.5.5
  * @name Text alignment
  * @slug text-alignment
  * @submodule true
  * @description Use these styles to make text left, right, or center aligned, or to stop text from wrapping. These should be used for special purposes only. Per Eaton brand standards: Body copy always sets flush left, rag right, never center-align, right-align, or justify Eaton body copy. See page 24 of the <a href="/docs/01_BrandIdentity_Final_V11.pdf">The Eaton Brand Identity</a> for more information.
  * @container true
  * @gridclass col-sm-12
  * @markup
  <div class="row">
    <div class="col-md-6">
		<p class="text-left">.text-left</p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
        <p class="text-right">.text-right</p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
        <p class="text-center">.text-center</p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
        <p class="text-justify">.text-justify - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-2">
		<p class="text-nowrap">.text-nowrap - 1-800-555-1212</p>
    </div>
  </div>
  */
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}
.text-justify {
  text-align: justify;
}
.text-nowrap {
  white-space: nowrap;
}
/**
  * @toc 1.5.6
  * @name Text transformation
  * @slug text-transformation
  * @submodule true
  * @description These styles can be used to transform the case of text.
  * @container true
  * @gridclass col-sm-12
  * @markup
   <p><span class="text-lowercase">This text is made lowercase</span> - .text-lowercase</p>
  <p><span class="text-uppercase">This text is made uppercase</span> - .text-uppercase</p>
  <p><span class="text-capitalize">This text is capitalized</span> - .text-capitalize</p>
  */
.text-lowercase {
  text-transform: lowercase;
}
.text-uppercase {
  text-transform: uppercase;
}
.text-capitalize {
  text-transform: capitalize;
}
/**
  * @toc 1.5.7
  * @name Contextual colors
  * @slug contextual-colors
  * @submodule true
  * @description These styles give special emphasis colors to text.
  * @container true
  * @gridclass col-sm-12
  * @markup
   <p class="text-muted">.text-muted - Marks text as visually less important.</p>
    <p class="text-primary">.text-primary - Applies Eaton Brand Blue to text.</p>
     <p class="text-success">.text-success - Marks text as good or successful.</p>
      <p class="text-info">.text-info - Marks text as informational or instructional.</p>
       <p class="text-warning">.text-warning - Marks text as something to watch out for.</p>
        <p class="text-danger">.text-danger - Marks text as potentially harmful or incorrect.</p>

  */
.text-muted {
  color: #777777;
}
.text-primary {
  color: #0067cd;
}
a.text-primary:hover {
  color: #004d9a;
}
.text-success {
  color: #3c763d;
}
a.text-success:hover {
  color: #2b542c;
}
.text-info {
  color: #31708f;
}
a.text-info:hover {
  color: #245269;
}
.text-warning {
  color: #8a6d3b;
}
a.text-warning:hover {
  color: #66512c;
}
.text-danger {
  color: #a94442;
}
a.text-danger:hover {
  color: #843534;
}
.bg-primary {
  color: #fff;
  background-color: #0067cd;
}
a.bg-primary:hover {
  background-color: #004d9a;
}
.bg-success {
  background-color: #dff0d8;
}
a.bg-success:hover {
  background-color: #c1e2b3;
}
.bg-info {
  background-color: #d9edf7;
}
a.bg-info:hover {
  background-color: #afd9ee;
}
.bg-warning {
  background-color: #fcf8e3;
}
a.bg-warning:hover {
  background-color: #f7ecb5;
}
.bg-danger {
  background-color: #f2dede;
}
a.bg-danger:hover {
  background-color: #e4b9b9;
}
/**
  * @toc 1.5.8
  * @name Page header
  * @slug slug-page-header
  * @submodule true
  * @description This module is used for the most important heading on a page - usually the page title. Three different sizes are available.
  * @container true
  * @gridclass col-sm-12
  * @markup
   <h1 class="page-header">This is a standard page header</h1>
   <h1 class="page-header small">This is a small page header</h1>
   <h1 class="page-header smaller">This is a smaller page header</h1>
  */
.page-header {
  padding-bottom: 9px;
  margin: 40px 0 20px;
  color: #000000;
  font-size: 40px;
}
@media (min-width: 768px) {
  .page-header {
    font-size: 48px;
  }
}
@media (min-width: 992px) {
  .page-header {
    font-size: 57.6px;
  }
}
.page-header.with-hero {
  margin-bottom: 0;
}
h1.small {
  font-size: 32px;
  margin-bottom: 0;
}
@media (min-width: 768px) {
  h1.small {
    font-size: 40px;
    margin-bottom: 5px;
  }
}
@media (min-width: 992px) {
  h1.small {
    font-size: 44px;
  }
}
h1.smaller {
  font-size: 32px;
  margin-bottom: 0;
}
@media (min-width: 768px) {
  h1.smaller {
    font-size: 32px;
    margin-bottom: 5px;
  }
}
@media (min-width: 992px) {
  h1.smaller {
    font-size: 32px;
  }
}
ul,
ol {
  margin-top: 0;
  margin-bottom: 10px;
}
ul ul,
ol ul,
ul ol,
ol ol {
  margin-bottom: 0;
}
.list-unstyled {
  padding-left: 0;
  list-style: none;
}
.list-inline {
  padding-left: 0;
  list-style: none;
  margin-left: -5px;
}
.list-inline > li {
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
}
dl {
  margin-top: 0;
  margin-bottom: 20px;
}
dt,
dd {
  line-height: 1.42857143;
}
dt {
  font-weight: bold;
}
dd {
  margin-left: 0;
}
@media (min-width: 768px) {
  .dl-horizontal dt {
    float: left;
    width: 160px;
    clear: left;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dl-horizontal dd {
    margin-left: 180px;
  }
}
abbr[title],
abbr[data-original-title] {
  cursor: help;
  border-bottom: 1px dotted #777777;
}
.initialism {
  font-size: 90%;
  text-transform: uppercase;
}
/**
  * @toc 1.5.9
  * @name Blockquote
  * @slug slug-blockquote
  * @submodule true
  * @description Blockquotes are used to call attention to direct quotes from customers, Eaton Employees, or other authorities and subject mater experts. Regular and reversed (for right-to-left languages) variants are available.
  * @container true
  * @gridclass col-sm-12
  * @markup
	<blockquote>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquam amet beatae, corporis cupiditate exercitationem fuga iure magnam, maiores minima mollitia natus necessitatibus nesciunt quaerat quisquam repellendus tenetur unde voluptates!</p>

		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#">Accusamus aliquam</a> amet beatae!</p>
	</blockquote>

	<blockquote class="blockquote-reverse">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquam amet beatae, corporis cupiditate exercitationem fuga iure magnam, maiores minima mollitia natus necessitatibus nesciunt quaerat quisquam repellendus tenetur unde voluptates!</p>

		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#">Accusamus aliquam</a> amet beatae!</p>
	</blockquote>
  */
blockquote {
  padding: 10px 20px;
  margin: 0 0 20px;
  font-size: 17.5px;
  border-left: 5px solid #0067cd;
  color: #898989;
  font-style: italic;
}
blockquote cite {
  color: #0067cd;
}
blockquote p:last-child,
blockquote ul:last-child,
blockquote ol:last-child {
  margin-bottom: 0;
}
blockquote footer,
blockquote small,
blockquote .small {
  display: block;
  font-size: 80%;
  line-height: 1.42857143;
  color: #777777;
}
blockquote footer:before,
blockquote small:before,
blockquote .small:before {
  content: '\2014 \00A0';
}
.blockquote-reverse,
blockquote.pull-right {
  padding-right: 15px;
  padding-left: 0;
  border-right: 5px solid #0067cd;
  border-left: 0;
  text-align: right;
}
.blockquote-reverse footer:before,
blockquote.pull-right footer:before,
.blockquote-reverse small:before,
blockquote.pull-right small:before,
.blockquote-reverse .small:before,
blockquote.pull-right .small:before {
  content: '';
}
.blockquote-reverse footer:after,
blockquote.pull-right footer:after,
.blockquote-reverse small:after,
blockquote.pull-right small:after,
.blockquote-reverse .small:after,
blockquote.pull-right .small:after {
  content: '\00A0 \2014';
}
address {
  margin-bottom: 20px;
  font-style: normal;
  line-height: 1.42857143;
}
.nobr {
  white-space: nowrap;
}
.bb {
  border-bottom: 1px solid #b1b5b8;
}
.bt {
  border-top: 1px solid #b1b5b8;
}
.bl {
  border-left: 1px solid #b1b5b8;
}
.br {
  border-right: 1px solid #b1b5b8;
}
/**
* @toc 1.6
* @name Grid
* @slug grid
* @container true
* @gridclass col-sm-12
* @description Eaton's digital experience design uses a 12-column responsive grid based on Bootstrap 3.0. For detailed information about the capabilities and uses of the grid, consult http://getbootstrap.com/css/#grid. For more information about the available breakpoints, see <a href="/responsive-web-experience/responsive-and-modular-design.html#breakpoints">Responsive and modular design</a>.
* @markup
<div class="row"><div class="col-sm-1">.col-sm-1</div></div>
<div class="row"><div class="col-sm-2">.col-sm-2</div></div>
<div class="row"><div class="col-sm-3">.col-sm-3</div></div>
<div class="row"><div class="col-sm-4">.col-sm-4</div></div>
<div class="row"><div class="col-sm-5">.col-sm-5</div></div>
<div class="row"><div class="col-sm-6">.col-sm-6</div></div>
<div class="row"><div class="col-sm-7">.col-sm-7</div></div>
<div class="row"><div class="col-sm-8">.col-sm-8</div></div>
<div class="row"><div class="col-sm-9">.col-sm-9</div></div>
<div class="row"><div class="col-sm-10">.col-sm-10</div></div>
<div class="row"><div class="col-sm-11">.col-sm-11</div></div>
<div class="row"><div class="col-sm-12">.col-sm-12</div></div>
*/
/**
* @toc 1.6.1
* @name Responsive grid sizing
* @slug grid-responsive
* @container true
* @submodule true
* @gridclass col-sm-12
* @description Grid sections can fill varying numbers of columns based on screen width just by adding multiple grid classes (resize this window to see these grid columns change their relative widths)
* @markup
<div class="row">
	<div class="col-xs-12 col-sm-8 col-md-4">.col-xs-12 .col-sm-8 .col-md-4</div>
	<div class="col-xs-12 col-sm-4 col-md-8">.col-xs-12 .col-sm-4 .col-md-8</div>
</div>
*/
/**
* @toc 1.6.2
* @name Grid offsets
* @slug grid-offsets
* @container true
* @submodule true
* @gridclass col-sm-12
* @description Grid offsets can be used to push columns away from the left
* @markup
<div class="row"><div class="col-sm-3">.col-sm-3</div></div>
<div class="row"><div class="col-sm-3 col-sm-offset-1">.col-sm-3 .col-sm-offset-1</div></div>
<div class="row"><div class="col-sm-3 col-sm-offset-2">.col-sm-3 .col-sm-offset-2</div></div>
<div class="row"><div class="col-sm-3 col-sm-offset-3">.col-sm-3 .col-sm-offset-3</div></div>
<div class="row"><div class="col-sm-3 col-sm-offset-6">.col-sm-3 .col-sm-offset-6</div></div>
<div class="row"><div class="col-sm-3 col-sm-offset-9">.col-sm-3 .col-sm-offset-9</div></div>
*/
/**
* @toc 1.6.3
* @name Grid ordering
* @slug grid-ordering
* @container true
* @submodule true
* @gridclass col-sm-12
* @description Grid column ordering can be changed with push and pull classes, and even set to different values based on breakpoint
* @markup
<div class="row">
	<div class="col-sm-3 col-sm-push-9">.col-sm-3 .col-sm-push-9 (1st column)</div>
	<div class="col-sm-9 col-sm-pull-3">.col-sm-9 .col-sm-pull-3 (2nd column)</div>
</div>
*/
.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}
.row {
  margin-left: -15px;
  margin-right: -15px;
}
.col-xs-1, .col-xsl-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-xsl-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-xsl-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-xsl-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-xsl-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-xsl-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-xsl-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-xsl-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-xsl-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-xsl-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-xsl-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-xsl-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
}
.col-xs-12 {
  width: 100%;
}
.col-xs-11 {
  width: 91.66666667%;
}
.col-xs-10 {
  width: 83.33333333%;
}
.col-xs-9 {
  width: 75%;
}
.col-xs-8 {
  width: 66.66666667%;
}
.col-xs-7 {
  width: 58.33333333%;
}
.col-xs-6 {
  width: 50%;
}
.col-xs-5 {
  width: 41.66666667%;
}
.col-xs-4 {
  width: 33.33333333%;
}
.col-xs-3 {
  width: 25%;
}
.col-xs-2 {
  width: 16.66666667%;
}
.col-xs-1 {
  width: 8.33333333%;
}
.col-xs-pull-12 {
  right: 100%;
}
.col-xs-pull-11 {
  right: 91.66666667%;
}
.col-xs-pull-10 {
  right: 83.33333333%;
}
.col-xs-pull-9 {
  right: 75%;
}
.col-xs-pull-8 {
  right: 66.66666667%;
}
.col-xs-pull-7 {
  right: 58.33333333%;
}
.col-xs-pull-6 {
  right: 50%;
}
.col-xs-pull-5 {
  right: 41.66666667%;
}
.col-xs-pull-4 {
  right: 33.33333333%;
}
.col-xs-pull-3 {
  right: 25%;
}
.col-xs-pull-2 {
  right: 16.66666667%;
}
.col-xs-pull-1 {
  right: 8.33333333%;
}
.col-xs-pull-0 {
  right: auto;
}
.col-xs-push-12 {
  left: 100%;
}
.col-xs-push-11 {
  left: 91.66666667%;
}
.col-xs-push-10 {
  left: 83.33333333%;
}
.col-xs-push-9 {
  left: 75%;
}
.col-xs-push-8 {
  left: 66.66666667%;
}
.col-xs-push-7 {
  left: 58.33333333%;
}
.col-xs-push-6 {
  left: 50%;
}
.col-xs-push-5 {
  left: 41.66666667%;
}
.col-xs-push-4 {
  left: 33.33333333%;
}
.col-xs-push-3 {
  left: 25%;
}
.col-xs-push-2 {
  left: 16.66666667%;
}
.col-xs-push-1 {
  left: 8.33333333%;
}
.col-xs-push-0 {
  left: auto;
}
.col-xs-offset-12 {
  margin-left: 100%;
}
.col-xs-offset-11 {
  margin-left: 91.66666667%;
}
.col-xs-offset-10 {
  margin-left: 83.33333333%;
}
.col-xs-offset-9 {
  margin-left: 75%;
}
.col-xs-offset-8 {
  margin-left: 66.66666667%;
}
.col-xs-offset-7 {
  margin-left: 58.33333333%;
}
.col-xs-offset-6 {
  margin-left: 50%;
}
.col-xs-offset-5 {
  margin-left: 41.66666667%;
}
.col-xs-offset-4 {
  margin-left: 33.33333333%;
}
.col-xs-offset-3 {
  margin-left: 25%;
}
.col-xs-offset-2 {
  margin-left: 16.66666667%;
}
.col-xs-offset-1 {
  margin-left: 8.33333333%;
}
.col-xs-offset-0 {
  margin-left: 0%;
}
@media (min-width: 480px) {
  .col-xsl-1, .col-xsl-2, .col-xsl-3, .col-xsl-4, .col-xsl-5, .col-xsl-6, .col-xsl-7, .col-xsl-8, .col-xsl-9, .col-xsl-10, .col-xsl-11, .col-xsl-12 {
    float: left;
  }
  .col-xsl-12 {
    width: 100%;
  }
  .col-xsl-11 {
    width: 91.66666667%;
  }
  .col-xsl-10 {
    width: 83.33333333%;
  }
  .col-xsl-9 {
    width: 75%;
  }
  .col-xsl-8 {
    width: 66.66666667%;
  }
  .col-xsl-7 {
    width: 58.33333333%;
  }
  .col-xsl-6 {
    width: 50%;
  }
  .col-xsl-5 {
    width: 41.66666667%;
  }
  .col-xsl-4 {
    width: 33.33333333%;
  }
  .col-xsl-3 {
    width: 25%;
  }
  .col-xsl-2 {
    width: 16.66666667%;
  }
  .col-xsl-1 {
    width: 8.33333333%;
  }
  .col-xsl-pull-12 {
    right: 100%;
  }
  .col-xsl-pull-11 {
    right: 91.66666667%;
  }
  .col-xsl-pull-10 {
    right: 83.33333333%;
  }
  .col-xsl-pull-9 {
    right: 75%;
  }
  .col-xsl-pull-8 {
    right: 66.66666667%;
  }
  .col-xsl-pull-7 {
    right: 58.33333333%;
  }
  .col-xsl-pull-6 {
    right: 50%;
  }
  .col-xsl-pull-5 {
    right: 41.66666667%;
  }
  .col-xsl-pull-4 {
    right: 33.33333333%;
  }
  .col-xsl-pull-3 {
    right: 25%;
  }
  .col-xsl-pull-2 {
    right: 16.66666667%;
  }
  .col-xsl-pull-1 {
    right: 8.33333333%;
  }
  .col-xsl-pull-0 {
    right: auto;
  }
  .col-xsl-push-12 {
    left: 100%;
  }
  .col-xsl-push-11 {
    left: 91.66666667%;
  }
  .col-xsl-push-10 {
    left: 83.33333333%;
  }
  .col-xsl-push-9 {
    left: 75%;
  }
  .col-xsl-push-8 {
    left: 66.66666667%;
  }
  .col-xsl-push-7 {
    left: 58.33333333%;
  }
  .col-xsl-push-6 {
    left: 50%;
  }
  .col-xsl-push-5 {
    left: 41.66666667%;
  }
  .col-xsl-push-4 {
    left: 33.33333333%;
  }
  .col-xsl-push-3 {
    left: 25%;
  }
  .col-xsl-push-2 {
    left: 16.66666667%;
  }
  .col-xsl-push-1 {
    left: 8.33333333%;
  }
  .col-xsl-push-0 {
    left: auto;
  }
  .col-xsl-offset-12 {
    margin-left: 100%;
  }
  .col-xsl-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-xsl-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-xsl-offset-9 {
    margin-left: 75%;
  }
  .col-xsl-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-xsl-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-xsl-offset-6 {
    margin-left: 50%;
  }
  .col-xsl-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-xsl-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-xsl-offset-3 {
    margin-left: 25%;
  }
  .col-xsl-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-xsl-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-xsl-offset-0 {
    margin-left: 0%;
  }
}
@media (min-width: 768px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }
  .col-sm-12 {
    width: 100%;
  }
  .col-sm-11 {
    width: 91.66666667%;
  }
  .col-sm-10 {
    width: 83.33333333%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-8 {
    width: 66.66666667%;
  }
  .col-sm-7 {
    width: 58.33333333%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-5 {
    width: 41.66666667%;
  }
  .col-sm-4 {
    width: 33.33333333%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-2 {
    width: 16.66666667%;
  }
  .col-sm-1 {
    width: 8.33333333%;
  }
  .col-sm-pull-12 {
    right: 100%;
  }
  .col-sm-pull-11 {
    right: 91.66666667%;
  }
  .col-sm-pull-10 {
    right: 83.33333333%;
  }
  .col-sm-pull-9 {
    right: 75%;
  }
  .col-sm-pull-8 {
    right: 66.66666667%;
  }
  .col-sm-pull-7 {
    right: 58.33333333%;
  }
  .col-sm-pull-6 {
    right: 50%;
  }
  .col-sm-pull-5 {
    right: 41.66666667%;
  }
  .col-sm-pull-4 {
    right: 33.33333333%;
  }
  .col-sm-pull-3 {
    right: 25%;
  }
  .col-sm-pull-2 {
    right: 16.66666667%;
  }
  .col-sm-pull-1 {
    right: 8.33333333%;
  }
  .col-sm-pull-0 {
    right: auto;
  }
  .col-sm-push-12 {
    left: 100%;
  }
  .col-sm-push-11 {
    left: 91.66666667%;
  }
  .col-sm-push-10 {
    left: 83.33333333%;
  }
  .col-sm-push-9 {
    left: 75%;
  }
  .col-sm-push-8 {
    left: 66.66666667%;
  }
  .col-sm-push-7 {
    left: 58.33333333%;
  }
  .col-sm-push-6 {
    left: 50%;
  }
  .col-sm-push-5 {
    left: 41.66666667%;
  }
  .col-sm-push-4 {
    left: 33.33333333%;
  }
  .col-sm-push-3 {
    left: 25%;
  }
  .col-sm-push-2 {
    left: 16.66666667%;
  }
  .col-sm-push-1 {
    left: 8.33333333%;
  }
  .col-sm-push-0 {
    left: auto;
  }
  .col-sm-offset-12 {
    margin-left: 100%;
  }
  .col-sm-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-sm-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-sm-offset-9 {
    margin-left: 75%;
  }
  .col-sm-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-sm-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-sm-offset-6 {
    margin-left: 50%;
  }
  .col-sm-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-sm-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-sm-offset-3 {
    margin-left: 25%;
  }
  .col-sm-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-sm-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-sm-offset-0 {
    margin-left: 0%;
  }
}
@media (min-width: 992px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }
  .col-md-12 {
    width: 100%;
  }
  .col-md-11 {
    width: 91.66666667%;
  }
  .col-md-10 {
    width: 83.33333333%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-8 {
    width: 66.66666667%;
  }
  .col-md-7 {
    width: 58.33333333%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-5 {
    width: 41.66666667%;
  }
  .col-md-4 {
    width: 33.33333333%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-2 {
    width: 16.66666667%;
  }
  .col-md-1 {
    width: 8.33333333%;
  }
  .col-md-pull-12 {
    right: 100%;
  }
  .col-md-pull-11 {
    right: 91.66666667%;
  }
  .col-md-pull-10 {
    right: 83.33333333%;
  }
  .col-md-pull-9 {
    right: 75%;
  }
  .col-md-pull-8 {
    right: 66.66666667%;
  }
  .col-md-pull-7 {
    right: 58.33333333%;
  }
  .col-md-pull-6 {
    right: 50%;
  }
  .col-md-pull-5 {
    right: 41.66666667%;
  }
  .col-md-pull-4 {
    right: 33.33333333%;
  }
  .col-md-pull-3 {
    right: 25%;
  }
  .col-md-pull-2 {
    right: 16.66666667%;
  }
  .col-md-pull-1 {
    right: 8.33333333%;
  }
  .col-md-pull-0 {
    right: auto;
  }
  .col-md-push-12 {
    left: 100%;
  }
  .col-md-push-11 {
    left: 91.66666667%;
  }
  .col-md-push-10 {
    left: 83.33333333%;
  }
  .col-md-push-9 {
    left: 75%;
  }
  .col-md-push-8 {
    left: 66.66666667%;
  }
  .col-md-push-7 {
    left: 58.33333333%;
  }
  .col-md-push-6 {
    left: 50%;
  }
  .col-md-push-5 {
    left: 41.66666667%;
  }
  .col-md-push-4 {
    left: 33.33333333%;
  }
  .col-md-push-3 {
    left: 25%;
  }
  .col-md-push-2 {
    left: 16.66666667%;
  }
  .col-md-push-1 {
    left: 8.33333333%;
  }
  .col-md-push-0 {
    left: auto;
  }
  .col-md-offset-12 {
    margin-left: 100%;
  }
  .col-md-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-md-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-md-offset-9 {
    margin-left: 75%;
  }
  .col-md-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-md-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-md-offset-6 {
    margin-left: 50%;
  }
  .col-md-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-md-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-md-offset-3 {
    margin-left: 25%;
  }
  .col-md-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-md-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-md-offset-0 {
    margin-left: 0%;
  }
}
@media (min-width: 1200px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
  }
  .col-lg-12 {
    width: 100%;
  }
  .col-lg-11 {
    width: 91.66666667%;
  }
  .col-lg-10 {
    width: 83.33333333%;
  }
  .col-lg-9 {
    width: 75%;
  }
  .col-lg-8 {
    width: 66.66666667%;
  }
  .col-lg-7 {
    width: 58.33333333%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-5 {
    width: 41.66666667%;
  }
  .col-lg-4 {
    width: 33.33333333%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-2 {
    width: 16.66666667%;
  }
  .col-lg-1 {
    width: 8.33333333%;
  }
  .col-lg-pull-12 {
    right: 100%;
  }
  .col-lg-pull-11 {
    right: 91.66666667%;
  }
  .col-lg-pull-10 {
    right: 83.33333333%;
  }
  .col-lg-pull-9 {
    right: 75%;
  }
  .col-lg-pull-8 {
    right: 66.66666667%;
  }
  .col-lg-pull-7 {
    right: 58.33333333%;
  }
  .col-lg-pull-6 {
    right: 50%;
  }
  .col-lg-pull-5 {
    right: 41.66666667%;
  }
  .col-lg-pull-4 {
    right: 33.33333333%;
  }
  .col-lg-pull-3 {
    right: 25%;
  }
  .col-lg-pull-2 {
    right: 16.66666667%;
  }
  .col-lg-pull-1 {
    right: 8.33333333%;
  }
  .col-lg-pull-0 {
    right: auto;
  }
  .col-lg-push-12 {
    left: 100%;
  }
  .col-lg-push-11 {
    left: 91.66666667%;
  }
  .col-lg-push-10 {
    left: 83.33333333%;
  }
  .col-lg-push-9 {
    left: 75%;
  }
  .col-lg-push-8 {
    left: 66.66666667%;
  }
  .col-lg-push-7 {
    left: 58.33333333%;
  }
  .col-lg-push-6 {
    left: 50%;
  }
  .col-lg-push-5 {
    left: 41.66666667%;
  }
  .col-lg-push-4 {
    left: 33.33333333%;
  }
  .col-lg-push-3 {
    left: 25%;
  }
  .col-lg-push-2 {
    left: 16.66666667%;
  }
  .col-lg-push-1 {
    left: 8.33333333%;
  }
  .col-lg-push-0 {
    left: auto;
  }
  .col-lg-offset-12 {
    margin-left: 100%;
  }
  .col-lg-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-lg-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-lg-offset-9 {
    margin-left: 75%;
  }
  .col-lg-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-lg-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-lg-offset-6 {
    margin-left: 50%;
  }
  .col-lg-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-lg-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-lg-offset-3 {
    margin-left: 25%;
  }
  .col-lg-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-lg-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-lg-offset-0 {
    margin-left: 0%;
  }
}
@media (min-width: 0) {
  .xs-no-pad {
    padding: 0;
  }
  .xs-no-pad-left {
    padding-left: 0;
  }
  .xs-half-pad-left {
    padding-left: 7.5px;
  }
  .xs-no-pad-right {
    padding-right: 0;
  }
  .xs-half-pad-right {
    padding-right: 7.5px;
  }
  .xs-full-pad {
    padding-left: 15px;
    padding-right: 15px;
  }
  .xs-full-pad-left {
    padding-left: 15px;
  }
  .xs-full-pad-right {
    padding-right: 15px;
  }
}
@media (min-width: 768px) {
  .sm-no-pad {
    padding: 0;
  }
  .sm-no-pad-left {
    padding-left: 0;
  }
  .sm-half-pad-left {
    padding-left: 7.5px;
  }
  .sm-no-pad-right {
    padding-right: 0;
  }
  .sm-half-pad-right {
    padding-right: 7.5px;
  }
  .sm-full-pad {
    padding-left: 15px;
    padding-right: 15px;
  }
  .sm-full-pad-left {
    padding-left: 15px;
  }
  .sm-full-pad-right {
    padding-right: 15px;
  }
}
@media (min-width: 992px) {
  .md-no-pad {
    padding: 0;
  }
  .md-no-pad-left {
    padding-left: 0;
  }
  .md-half-pad-left {
    padding-left: 7.5px;
  }
  .md-no-pad-right {
    padding-right: 0;
  }
  .md-half-pad-right {
    padding-right: 7.5px;
  }
  .md-full-pad {
    padding-left: 15px;
    padding-right: 15px;
  }
  .md-full-pad-left {
    padding-left: 15px;
  }
  .md-full-pad-right {
    padding-right: 15px;
  }
}
@media (min-width: 1200px) {
  .lg-no-pad {
    padding: 0;
  }
  .lg-no-pad-left {
    padding-left: 0;
  }
  .lg-half-pad-left {
    padding-left: 7.5px;
  }
  .lg-no-pad-right {
    padding-right: 0;
  }
  .lg-half-pad-right {
    padding-right: 7.5px;
  }
  .lg-full-pad {
    padding-left: 15px;
    padding-right: 15px;
  }
  .lg-full-pad-left {
    padding-left: 15px;
  }
  .lg-full-pad-right {
    padding-right: 15px;
  }
}
@media (min-width: 768px) {
  .flexbox .vertical-align {
    display: flex;
    align-items: center;
  }
}
@media (min-width: 768px) {
  .flexbox .vertical-align-bottom {
    align-items: flex-end;
  }
}
/**
* @toc 1.7
* @name Global tables
* @slug global-tables
* @container true
* @description The following styles are provided for all HTML tables. Several variants are available.
* @gridclass col-sm-12
* @hidemarkup true
* @markup
*/
/**
* @toc 1.7.1
* @submodule true
* @name Table default
* @slug table-default
* @container true
* @gridclass col-sm-12
* @description Standard table styles
* @markup
<table class="table">
	<thead>
		<tr>
			<th>Table Headline</th>
			<th>Table Headline</th>
			<th>Table Headline</th>
			<th>Table Headline</th>
			<th>Table Headline</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
		</tr>
		<tr>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
		</tr>
		<tr>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
		</tr>
	</tbody>
</table>
*/
/**
* @toc 1.7.2
* @submodule true
* @name Table striped
* @slug table-striped
* @container true
* @gridclass col-sm-12
* @description Styles for tables that are striped
* @markup
<table class="table table-striped">
	<thead>
		<tr>
			<th>Table Headline</th>
			<th>Table Headline</th>
			<th>Table Headline Goes Here</th>
			<th>Table Headline</th>
			<th>Table Headline</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
		</tr>
		<tr>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
		</tr>
		<tr>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
		</tr>
	</tbody>
</table>
*/
/**
* @toc 1.7.3
* @submodule true
* @name Table responsive
* @slug responsive-table
* @container true
* @gridclass col-sm-12
* @description Styles for tables that are responsive
* @markup
<div class="table-responsive-wrap">
<table class="table table-responsive">
	<thead>
		<tr>
			<th>Table Headline</th>
			<th>Table Headline</th>
			<th>Table Headline Goes Here</th>
			<th>Table Headline</th>
			<th>Table Headline</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
		</tr>
		<tr>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
		</tr>
		<tr>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
		</tr>
	</tbody>
</table>
</div>
*/
/**
* @toc 1.7.4
* @submodule true
* @name Table bordered
* @slug border-table
* @container true
* @gridclass col-sm-12
* @description Styles for tables that are bordered
* @markup

<table class="table table-bordered">
	<thead>
		<tr>
			<th>Table Headline</th>
			<th>Table Headline</th>
			<th>Table Headline Goes Here</th>
			<th>Table Headline</th>
			<th>Table Headline</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
		</tr>
		<tr>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
		</tr>
		<tr>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
			<td>Table Cell</td>
		</tr>
	</tbody>
</table>
*/
table {
  background-color: transparent;
}
caption {
  padding-top: 8px;
  padding-bottom: 8px;
  color: #777777;
  text-align: left;
}
th {
  text-align: left;
}
.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
  border-collapse: collapse;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #e6e6e5;
  padding: 5px;
  font-size: 12px;
}
.table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 2px solid #e6e6e5;
}
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {
  border-top: 0;
}
.table > tbody + tbody {
  border-top: 2px solid #e6e6e5;
}
.table .table {
  background-color: #ffffff;
}
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
  padding: 5px;
}
.table-bordered {
  border: 1px solid #e6e6e5;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #e6e6e5;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border-bottom-width: 2px;
}
.table-striped > tbody > tr:nth-of-type(even) {
  background-color: #f4f4f4;
}
.table-striped th {
  background-color: #f4f4f4;
}
.table-hover > tbody > tr:hover {
  background-color: #f5f5f5;
}
table col[class*="col-"] {
  position: static;
  float: none;
  display: table-column;
}
table td[class*="col-"],
table th[class*="col-"] {
  position: static;
  float: none;
  display: table-cell;
}
.table > thead > tr > td.active,
.table > tbody > tr > td.active,
.table > tfoot > tr > td.active,
.table > thead > tr > th.active,
.table > tbody > tr > th.active,
.table > tfoot > tr > th.active,
.table > thead > tr.active > td,
.table > tbody > tr.active > td,
.table > tfoot > tr.active > td,
.table > thead > tr.active > th,
.table > tbody > tr.active > th,
.table > tfoot > tr.active > th {
  background-color: #f5f5f5;
}
.table-hover > tbody > tr > td.active:hover,
.table-hover > tbody > tr > th.active:hover,
.table-hover > tbody > tr.active:hover > td,
.table-hover > tbody > tr:hover > .active,
.table-hover > tbody > tr.active:hover > th {
  background-color: #e8e8e8;
}
.table > thead > tr > td.success,
.table > tbody > tr > td.success,
.table > tfoot > tr > td.success,
.table > thead > tr > th.success,
.table > tbody > tr > th.success,
.table > tfoot > tr > th.success,
.table > thead > tr.success > td,
.table > tbody > tr.success > td,
.table > tfoot > tr.success > td,
.table > thead > tr.success > th,
.table > tbody > tr.success > th,
.table > tfoot > tr.success > th {
  background-color: #dff0d8;
}
.table-hover > tbody > tr > td.success:hover,
.table-hover > tbody > tr > th.success:hover,
.table-hover > tbody > tr.success:hover > td,
.table-hover > tbody > tr:hover > .success,
.table-hover > tbody > tr.success:hover > th {
  background-color: #d0e9c6;
}
.table > thead > tr > td.info,
.table > tbody > tr > td.info,
.table > tfoot > tr > td.info,
.table > thead > tr > th.info,
.table > tbody > tr > th.info,
.table > tfoot > tr > th.info,
.table > thead > tr.info > td,
.table > tbody > tr.info > td,
.table > tfoot > tr.info > td,
.table > thead > tr.info > th,
.table > tbody > tr.info > th,
.table > tfoot > tr.info > th {
  background-color: #d9edf7;
}
.table-hover > tbody > tr > td.info:hover,
.table-hover > tbody > tr > th.info:hover,
.table-hover > tbody > tr.info:hover > td,
.table-hover > tbody > tr:hover > .info,
.table-hover > tbody > tr.info:hover > th {
  background-color: #c4e3f3;
}
.table > thead > tr > td.warning,
.table > tbody > tr > td.warning,
.table > tfoot > tr > td.warning,
.table > thead > tr > th.warning,
.table > tbody > tr > th.warning,
.table > tfoot > tr > th.warning,
.table > thead > tr.warning > td,
.table > tbody > tr.warning > td,
.table > tfoot > tr.warning > td,
.table > thead > tr.warning > th,
.table > tbody > tr.warning > th,
.table > tfoot > tr.warning > th {
  background-color: #fcf8e3;
}
.table-hover > tbody > tr > td.warning:hover,
.table-hover > tbody > tr > th.warning:hover,
.table-hover > tbody > tr.warning:hover > td,
.table-hover > tbody > tr:hover > .warning,
.table-hover > tbody > tr.warning:hover > th {
  background-color: #faf2cc;
}
.table > thead > tr > td.danger,
.table > tbody > tr > td.danger,
.table > tfoot > tr > td.danger,
.table > thead > tr > th.danger,
.table > tbody > tr > th.danger,
.table > tfoot > tr > th.danger,
.table > thead > tr.danger > td,
.table > tbody > tr.danger > td,
.table > tfoot > tr.danger > td,
.table > thead > tr.danger > th,
.table > tbody > tr.danger > th,
.table > tfoot > tr.danger > th {
  background-color: #f2dede;
}
.table-hover > tbody > tr > td.danger:hover,
.table-hover > tbody > tr > th.danger:hover,
.table-hover > tbody > tr.danger:hover > td,
.table-hover > tbody > tr:hover > .danger,
.table-hover > tbody > tr.danger:hover > th {
  background-color: #ebcccc;
}
.table-responsive {
  overflow-x: auto;
  min-height: 0.01%;
}
@media screen and (max-width: 767px) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #e6e6e5;
  }
  .table-responsive > .table {
    margin-bottom: 0;
  }
  .table-responsive > .table > thead > tr > th,
  .table-responsive > .table > tbody > tr > th,
  .table-responsive > .table > tfoot > tr > th,
  .table-responsive > .table > thead > tr > td,
  .table-responsive > .table > tbody > tr > td,
  .table-responsive > .table > tfoot > tr > td {
    white-space: nowrap;
  }
  .table-responsive > .table-bordered {
    border: 0;
  }
  .table-responsive > .table-bordered > thead > tr > th:first-child,
  .table-responsive > .table-bordered > tbody > tr > th:first-child,
  .table-responsive > .table-bordered > tfoot > tr > th:first-child,
  .table-responsive > .table-bordered > thead > tr > td:first-child,
  .table-responsive > .table-bordered > tbody > tr > td:first-child,
  .table-responsive > .table-bordered > tfoot > tr > td:first-child {
    border-left: 0;
  }
  .table-responsive > .table-bordered > thead > tr > th:last-child,
  .table-responsive > .table-bordered > tbody > tr > th:last-child,
  .table-responsive > .table-bordered > tfoot > tr > th:last-child,
  .table-responsive > .table-bordered > thead > tr > td:last-child,
  .table-responsive > .table-bordered > tbody > tr > td:last-child,
  .table-responsive > .table-bordered > tfoot > tr > td:last-child {
    border-right: 0;
  }
  .table-responsive > .table-bordered > tbody > tr:last-child > th,
  .table-responsive > .table-bordered > tfoot > tr:last-child > th,
  .table-responsive > .table-bordered > tbody > tr:last-child > td,
  .table-responsive > .table-bordered > tfoot > tr:last-child > td {
    border-bottom: 0;
  }
}
.table-responsive-wrap {
  position: relative;
}
.table-responsive-wrap.overflow:after {
  content: '';
  display: block;
  position: absolute;
  height: 100%;
  right: 0;
  top: 0;
  width: 25px;
  	background-repeat: repeat-x;
	background-image: linear-gradient(to right, rgba(230, 230, 229, 0) 0%, #e6e6e5 100%);
}
/**
* @toc 1.8
* @name Forms
* @slug forms
* @container true
* @gridclass col-sm-12
* @description Below is default styling for form elements. For more information about the complete capabilities for form styling, see http://getbootstrap.com/css/#forms.
* @markup

<form>
<div class="row">
	<div class="col-sm-6">
		 <div class="form-group">
		    <h5>Input</h5>
			<input type="text" class="form-control" placeholder="Input Text">
		</div>

		<div class="form-group">
			<h5>Input .form-control-small</h5>
			<input type="text" class="form-control form-control-small" placeholder="Input Text">
		</div>

		<div class="form-group">
			<h5>Input .form-control-xsmall</h5>
			<input type="text" class="form-control form-control-xsmall" placeholder="Input Text">
		</div>

		<div class="form-group">
			<h5>Select</h5>
		    <select class="form-control">
		        <option value="1">option 1</option>
		        <option value="2">option 2</option>
		        <option value="3">option 3</option>
		        <option value="4">option 4</option>
		        <option value="5">option 5</option>
		    </select>
		</div>

		<div class="form-group">
			<h5>Select .form-control-small</h5>
		    <select class="form-control form-control-small">
		        <option value="1">option 1</option>
		        <option value="2">option 2</option>
		        <option value="3">option 3</option>
		        <option value="4">option 4</option>
		        <option value="5">option 5</option>
		    </select>
		</div>

		<div class="form-group">
			<h5>Select .form-control-xsmall</h5>
		    <select class="form-control form-control-xsmall">
		        <option value="1">option 1</option>
		        <option value="2">option 2</option>
		        <option value="3">option 3</option>
		        <option value="4">option 4</option>
		        <option value="5">option 5</option>
		    </select>
		</div>

		<div class="form-group">
			<div class="radio">
				<label><input type="radio" class="no-proxy"/> This is a radio input</label>
			</div>
		</div>

		<div class="form-group">
			<div class="checkbox">
				<label><input type="checkbox" class="no-proxy"> This is a checkbox input</label>
			</div>
		</div>

		<div class="form-group">
			<button type="submit" class="btn btn-primary">Submit</button>
			<button type="reset" class="btn btn-default">Reset</button>
		</div>
	</div>
</div>
</form>
*/
/**
* @toc 1.8.2
* @submodule true
* @name Crafting forms
* @slug crafting-forms
* @container true
* @gridclass col-sm-12
* @description Below are some examples of form layouts within pages.
* @markup

<form>
		<section class="panel">
			<div class="panel-heading">
				<h3 class="panel-title">Documents</h3>
			</div>
			<div class="panel-body">
				<div class="row">
					<div class="col-sm-6">
						<div class="form-group">
							<div class="checkbox">
								<label class="col-sm-9 col-sm-push-3">
									<input type="checkbox" class="no-proxy"/>
									Most recent form 10-K
								</label>
							</div>
						</div>
						<div class="form-group">
							<div class="checkbox">
								<label class="col-sm-9 col-sm-push-3">
									<input type="checkbox" class="no-proxy"/>
									2014 annual report
								</label>
							</div>
						</div>
						<div class="form-group">
							<div class="checkbox">
								<label class="col-sm-9 col-sm-push-3">
									<input type="checkbox" class="no-proxy"/>
									Most recent form 10-Q
								</label>
							</div>
						</div>
					</div>
					<div class="col-sm-6">
						<div class="form-group">
							<div class="checkbox">
								<label class="col-sm-9 col-sm-push-3">
									<input type="checkbox" class="no-proxy"/>
									2015 proxy statement
								</label>
							</div>
						</div>
						<div class="form-group">
							<div class="checkbox">
								<label class="col-sm-9 col-sm-push-3">
									<input type="checkbox" class="no-proxy"/>
									Recent quarterly releases
								</label>
							</div>
						</div>
						<div class="form-group">
							<div class="checkbox">
								<label class="col-sm-9 col-sm-push-3">
									<input type="checkbox" class="no-proxy"/>
									Dividend reinvestment program information
								</label>
							</div>
						</div>
					</div>
				</div>
			</div>

		</section>

		<section class="panel">
			<div class="panel-heading">
				<h3 class="panel-title">Shipping information</h3>
			</div>
			<div class="panel-body">
				<div class="row">
						<div class="col-sm-6">
							<div class="form-group right-aligned">
								<div class="row">
									<label class="col-sm-3 prn">
										Shipping method
									</label>
									<div class="col-sm-9">
										<select class="form-control block" data-placeholder="Choose a Shipping Method">
											<option value="">5 Day Standard Shipping</option>
											<option value="">3 Day Shipping</option>
											<option value="">2 Day Air</option>
										</select>
									</div>
								</div>
							</div>
						</div>
						<div class="col-sm-6">
							<div class="form-group right-aligned">
								<div class="row">
									<label class="col-sm-3 prn minify">
										Account #<br/><span>(For express delivery)</span>
									</label>
									<div class="col-sm-9"><input type="text" class="form-control"/></div>
								</div>
							</div>
						</div>
				</div>
			</div>
		</section>

		<section class="panel">
			<div class="panel-heading">
				<h3 class="panel-title">Other related information</h3>
			</div>
			<div class="panel-body">
				<div class="row">
					<div class="col-sm-6">
						<div class="form-group right-aligned">
							<div class="row">
								<label class="col-sm-3 prn">
									Work phone
								</label>
								<div class="col-sm-9"><input type="phone" class="form-control"/></div>
							</div>
						</div>
					</div>
					<div class="col-sm-6">
						<div class="form-group right-aligned">
							<div class="row">
								<label class="col-sm-3 prn">
									Email
								</label>
								<div class="col-sm-9"><input type="text" class="form-control"/></div>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-6">
						<div class="form-group right-aligned">
							<div class="row">
								<label class="col-sm-3 prn">
									Investor type
								</label>
								<div class="col-sm-9">
									<select class="form-control block" data-placeholder="Choose a Shipping Method">
										<option value="">Lorem Ipsum Dolar Absolom</option>
										<option value="">Lorem Ipsum Dolar Absolom</option>
										<option value="">Lorem Ipsum Dolar Absolom</option>
									</select>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>

		<section>
			<div class="row">
				<div class="col-sm-12 text-right">
					<div class="bt pvl">
						<button type="reset" class="btn btn-default mrm">Reset</button><button class="btn btn-primary" type="submit">Submit</button>
					</div>
				</div>
			</div>
		</section>
</form>
*/
fieldset {
  padding: 0;
  margin: 0;
  border: 0;
  min-width: 0;
}
legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}
label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: bold;
}
input[type="search"] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
input[type="radio"],
input[type="checkbox"] {
  margin: 4px 0 0;
  margin-top: 1px \9;
  line-height: normal;
}
input[type="file"] {
  display: block;
}
input[type="range"] {
  display: block;
  width: 100%;
}
select[multiple],
select[size] {
  height: auto;
}
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
output {
  display: block;
  padding-top: 11px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555555;
}
.form-control {
  display: block;
  width: 100%;
  height: 42px;
  padding: 10px 10px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555555;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #b1b5b8;
  border-radius: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.form-control::-moz-placeholder {
  color: rgba(54, 54, 54, 0.6);
  opacity: 1;
}
.form-control:-ms-input-placeholder {
  color: rgba(54, 54, 54, 0.6);
}
.form-control::-webkit-input-placeholder {
  color: rgba(54, 54, 54, 0.6);
}
.form-control[disabled],
fieldset[disabled] .form-control {
  cursor: not-allowed;
  background-color: #eeeeee;
  opacity: 1;
}
textarea.form-control {
  height: auto;
}
.form-control.form-control-small {
  padding: 5px 10px;
  height: 32px;
}
select.form-control.form-control-small {
  padding: 5px;
}
.form-control.form-control-xsmall {
  padding: 4px 5px;
  height: 24px;
  font-size: 10px;
}
select.form-control.form-control-xsmall {
  padding: 3px;
}
input[type="search"] {
  -webkit-appearance: none;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"] {
    line-height: 42px;
  }
  input[type="date"].input-sm,
  input[type="time"].input-sm,
  input[type="datetime-local"].input-sm,
  input[type="month"].input-sm,
  .input-group-sm input[type="date"],
  .input-group-sm input[type="time"],
  .input-group-sm input[type="datetime-local"],
  .input-group-sm input[type="month"] {
    line-height: 31px;
  }
  input[type="date"].input-lg,
  input[type="time"].input-lg,
  input[type="datetime-local"].input-lg,
  input[type="month"].input-lg,
  .input-group-lg input[type="date"],
  .input-group-lg input[type="time"],
  .input-group-lg input[type="datetime-local"],
  .input-group-lg input[type="month"] {
    line-height: 46px;
  }
}
.form-group {
  margin-bottom: 15px;
}
@media (min-width: 768px) {
  .form-group.right-aligned label {
    text-align: right;
  }
}
.radio,
.checkbox {
  position: relative;
  display: block;
}
.radio label,
.checkbox label {
  min-height: 20px;
  padding-left: 20px;
  margin-bottom: 0;
  font-weight: bold;
  cursor: pointer;
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
  position: absolute;
  margin-left: -20px;
  margin-top: 4px \9;
}
.radio + .radio,
.checkbox + .checkbox {
  margin-top: -5px;
}
.radio-inline,
.checkbox-inline {
  display: inline-block;
  padding-left: 20px;
  margin-bottom: 0;
  vertical-align: middle;
  font-weight: normal;
  cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
  margin-top: 0;
  margin-left: 10px;
}
input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"].disabled,
input[type="checkbox"].disabled,
fieldset[disabled] input[type="radio"],
fieldset[disabled] input[type="checkbox"] {
  cursor: not-allowed;
}
.radio-inline.disabled,
.checkbox-inline.disabled,
fieldset[disabled] .radio-inline,
fieldset[disabled] .checkbox-inline {
  cursor: not-allowed;
}
.radio.disabled label,
.checkbox.disabled label,
fieldset[disabled] .radio label,
fieldset[disabled] .checkbox label {
  cursor: not-allowed;
}
.form-control-static {
  padding-top: 11px;
  padding-bottom: 11px;
  margin-bottom: 0;
}
.form-control-static.input-lg,
.form-control-static.input-sm {
  padding-left: 0;
  padding-right: 0;
}
.input-sm {
  height: 31px;
  padding: 5px 10px;
  font-size: 13px;
  line-height: 1.5;
  border-radius: 0;
}
select.input-sm {
  height: 31px;
  line-height: 31px;
}
textarea.input-sm,
select[multiple].input-sm {
  height: auto;
}
.form-group-sm .form-control {
  height: 31px;
  padding: 5px 10px;
  font-size: 13px;
  line-height: 1.5;
  border-radius: 0;
}
select.form-group-sm .form-control {
  height: 31px;
  line-height: 31px;
}
textarea.form-group-sm .form-control,
select[multiple].form-group-sm .form-control {
  height: auto;
}
.form-group-sm .form-control-static {
  height: 31px;
  padding: 5px 10px;
  font-size: 13px;
  line-height: 1.5;
}
.input-lg {
  height: 46px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 0;
}
select.input-lg {
  height: 46px;
  line-height: 46px;
}
textarea.input-lg,
select[multiple].input-lg {
  height: auto;
}
.form-group-lg .form-control {
  height: 46px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 0;
}
select.form-group-lg .form-control {
  height: 46px;
  line-height: 46px;
}
textarea.form-group-lg .form-control,
select[multiple].form-group-lg .form-control {
  height: auto;
}
.form-group-lg .form-control-static {
  height: 46px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
}
.has-feedback {
  position: relative;
}
.has-feedback .form-control {
  padding-right: 52.5px;
}
.has-feedback.has-feedback-left {
  padding-left: 30px;
}
.form-control-feedback {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: block;
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  pointer-events: none;
}
.has-feedback-left + .form-control-feedback {
  right: auto;
  left: -5px;
}
.input-lg + .form-control-feedback {
  width: 46px;
  height: 46px;
  line-height: 46px;
}
.input-sm + .form-control-feedback {
  width: 31px;
  height: 31px;
  line-height: 31px;
}
.has-success .help-block,
.has-success .control-label,
.has-success .radio,
.has-success .checkbox,
.has-success .radio-inline,
.has-success .checkbox-inline,
.has-success.radio label,
.has-success.checkbox label,
.has-success.radio-inline label,
.has-success.checkbox-inline label {
  color: #3c763d;
}
.has-success .form-control {
  border-color: #3c763d;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-success .form-control:focus {
  border-color: #2b542c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
}
.has-success .input-group-addon {
  color: #3c763d;
  border-color: #3c763d;
  background-color: #dff0d8;
}
.has-success .form-control-feedback {
  color: #3c763d;
}
.has-warning .help-block,
.has-warning .control-label,
.has-warning .radio,
.has-warning .checkbox,
.has-warning .radio-inline,
.has-warning .checkbox-inline,
.has-warning.radio label,
.has-warning.checkbox label,
.has-warning.radio-inline label,
.has-warning.checkbox-inline label {
  color: #8a6d3b;
}
.has-warning .form-control {
  border-color: #8a6d3b;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-warning .form-control:focus {
  border-color: #66512c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
}
.has-warning .input-group-addon {
  color: #8a6d3b;
  border-color: #8a6d3b;
  background-color: #fcf8e3;
}
.has-warning .form-control-feedback {
  color: #8a6d3b;
}
.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline,
.has-error.radio label,
.has-error.checkbox label,
.has-error.radio-inline label,
.has-error.checkbox-inline label {
  color: #a94442;
}
.has-error .form-control {
  border-color: #a94442;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-error .form-control:focus {
  border-color: #843534;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
}
.has-error .input-group-addon {
  color: #a94442;
  border-color: #a94442;
  background-color: #f2dede;
}
.has-error .form-control-feedback {
  color: #a94442;
}
.has-feedback label ~ .form-control-feedback {
  top: 25px;
}
.has-feedback label.sr-only ~ .form-control-feedback {
  top: 0;
}
.help-block {
  display: block;
  margin-top: 5px;
  margin-bottom: 10px;
  color: #737373;
}
@media (min-width: 768px) {
  .form-inline .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }
  .form-inline .form-control,
  .form-inline .btn {
    margin-right: 5px !important;
  }
  .form-inline .form-control:last-child,
  .form-inline .btn:last-child {
    margin-right: 0 !important;
  }
  .form-inline .form-control-static {
    display: inline-block;
  }
  .form-inline .input-group {
    display: inline-table;
    vertical-align: middle;
  }
  .form-inline .input-group .input-group-addon,
  .form-inline .input-group .input-group-btn,
  .form-inline .input-group .form-control {
    width: auto;
  }
  .form-inline .input-group > .form-control {
    width: 100%;
  }
  .form-inline .control-label {
    margin-bottom: 0;
    vertical-align: middle;
  }
  .form-inline .radio,
  .form-inline .checkbox {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .form-inline .radio label,
  .form-inline .checkbox label {
    padding-left: 0;
  }
  .form-inline .radio input[type="radio"],
  .form-inline .checkbox input[type="checkbox"] {
    position: relative;
    margin-left: 0;
  }
  .form-inline .has-feedback .form-control-feedback {
    top: 0;
  }
}
.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 11px;
}
.form-horizontal .radio,
.form-horizontal .checkbox {
  min-height: 31px;
}
.form-horizontal .form-group {
  margin-left: -15px;
  margin-right: -15px;
}
@media (min-width: 768px) {
  .form-horizontal .control-label {
    text-align: right;
    margin-bottom: 0;
    padding-top: 11px;
  }
}
.form-horizontal .has-feedback .form-control-feedback {
  right: 15px;
}
@media (min-width: 768px) {
  .form-horizontal .form-group-lg .control-label {
    padding-top: 14.333333px;
  }
}
@media (min-width: 768px) {
  .form-horizontal .form-group-sm .control-label {
    padding-top: 6px;
  }
}
/*------------------------------------------------------------------
[Form variant - padding between rows]
*/
.form-default-padding .form-control {
  margin-bottom: 10px !important;
}
.android-fix {
  width: 100%;
  margin-bottom: 10px;
}
.form-inline .android-fix {
  width: auto;
}
/**
* @toc 1.9
* @name Buttons
* @slug buttons
* @container true
* @gridclass col-sm-6
* @description Buttons are highly-visible calls-to-action. Use them to direct users to the most important links on a page. Button styles can be applied to <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code> or <code>&lt;input&gt;</code> elements. For more information, see http://getbootstrap.com/css/#buttons.
* @markup
<a href="#" class="btn btn-default">.btn.btn-default</a>
<a href="#" class="btn btn-primary">.btn.btn-primary</a>
*/
/**
* @toc 1.9.1
* @name Full-width button
* @slug buttons-block
* @container true
* @submodule true
* @gridclass col-sm-6
* @markup
<a href="#" class="btn btn-primary btn-block">.btn.btn-primary.btn-block</a>
*/
/**
* @toc 1.9.2
* @name Small buttons
* @slug buttons-small
* @container true
* @submodule true
* @gridclass col-sm-6
* @markup
<a href="#" class="btn btn-primary btn-xs">.btn.btn-primary.btn-xs</a>
<a href="#" class="btn btn-primary btn-sm">.btn.btn-primary.btn-small</a>
*/
/**
* @toc 1.9.3
* @name Button element with link appearance
* @slug buttons-link
* @container true
* @submodule true
* @gridclass col-sm-6
* @markup
<button class="btn btn-link">.btn.btn-link</button>
*/
.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 10px 10px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
  outline: none;
}
.btn:hover,
.btn:focus,
.btn.focus {
  color: #ffffff;
  text-decoration: none;
}
.btn:visited {
  color: #ffffff;
}
.btn:active,
.btn.active {
  outline: 0;
  background-image: none;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;
}
.hero-overlay .btn {
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.lt-ie9 .hero-overlay .btn {
  border: 1px solid #4ea7ff;
}
.hero-overlay .btn:hover {
  border: 1px solid rgba(255, 255, 255, 0.35);
}
@media (max-width: 991px) {
  .hero-overlay .btn {
    padding: 5px 10px;
    font-size: 13px;
    line-height: 1.5;
    border-radius: 0;
  }
  .hero-overlay .btn.btn-wide {
    padding: 5px 25px;
  }
}
.btn-default {
  color: #ffffff;
  background-color: #898989;
  border-color: transparent;
}
.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default,
.btn-default .selected {
  color: #ffffff;
  background-color: #707070;
  border-color: rgba(0, 0, 0, 0);
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  background-image: none;
}
.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
  background-color: #898989;
  border-color: transparent;
}
.btn-default .badge {
  color: #898989;
  background-color: #ffffff;
}
.btn-primary {
  color: #ffffff;
  background-color: #0067cd;
  border-color: transparent;
  margin-bottom:10px; 
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary,
.btn-primary .selected {
  color: #ffffff;
  background-color: #004d9a;
  border-color: rgba(0, 0, 0, 0);
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-image: none;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
  background-color: #0067cd;
  border-color: transparent;
}
.btn-primary .badge {
  color: #0067cd;
  background-color: #ffffff;
}
.btn-primary.selected {
  background-color: #003d6e;
}
.btn-success {
  color: #ffffff;
  background-color: #338c26;
  border-color: #2c7821;
}
.btn-success:hover,
.btn-success:focus,
.btn-success.focus,
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success,
.btn-success .selected {
  color: #ffffff;
  background-color: #24641b;
  border-color: #1a4813;
}
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
  background-image: none;
}
.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled.focus,
.btn-success[disabled].focus,
fieldset[disabled] .btn-success.focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active {
  background-color: #338c26;
  border-color: #2c7821;
}
.btn-success .badge {
  color: #338c26;
  background-color: #ffffff;
}
.btn-info {
  color: #ffffff;
  background-color: #4ea7ff;
  border-color: #349aff;
}
.btn-info:hover,
.btn-info:focus,
.btn-info.focus,
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info,
.btn-info .selected {
  color: #ffffff;
  background-color: #1b8dff;
  border-color: #007bf6;
}
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
  background-image: none;
}
.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info,
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled.focus,
.btn-info[disabled].focus,
fieldset[disabled] .btn-info.focus,
.btn-info.disabled:active,
.btn-info[disabled]:active,
fieldset[disabled] .btn-info:active,
.btn-info.disabled.active,
.btn-info[disabled].active,
fieldset[disabled] .btn-info.active {
  background-color: #4ea7ff;
  border-color: #349aff;
}
.btn-info .badge {
  color: #4ea7ff;
  background-color: #ffffff;
}
.btn-warning {
  color: #ffffff;
  background-color: #de8703;
  border-color: #c57803;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning.focus,
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning,
.btn-warning .selected {
  color: #ffffff;
  background-color: #ac6802;
  border-color: #885302;
}
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
  background-image: none;
}
.btn-warning.disabled,
.btn-warning[disabled],
fieldset[disabled] .btn-warning,
.btn-warning.disabled:hover,
.btn-warning[disabled]:hover,
fieldset[disabled] .btn-warning:hover,
.btn-warning.disabled:focus,
.btn-warning[disabled]:focus,
fieldset[disabled] .btn-warning:focus,
.btn-warning.disabled.focus,
.btn-warning[disabled].focus,
fieldset[disabled] .btn-warning.focus,
.btn-warning.disabled:active,
.btn-warning[disabled]:active,
fieldset[disabled] .btn-warning:active,
.btn-warning.disabled.active,
.btn-warning[disabled].active,
fieldset[disabled] .btn-warning.active {
  background-color: #de8703;
  border-color: #c57803;
}
.btn-warning .badge {
  color: #de8703;
  background-color: #ffffff;
}
.btn-danger {
  color: #ffffff;
  background-color: #9c1f2e;
  border-color: #871b28;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger.focus,
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger,
.btn-danger .selected {
  color: #ffffff;
  background-color: #711721;
  border-color: #541119;
}
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger {
  background-image: none;
}
.btn-danger.disabled,
.btn-danger[disabled],
fieldset[disabled] .btn-danger,
.btn-danger.disabled:hover,
.btn-danger[disabled]:hover,
fieldset[disabled] .btn-danger:hover,
.btn-danger.disabled:focus,
.btn-danger[disabled]:focus,
fieldset[disabled] .btn-danger:focus,
.btn-danger.disabled.focus,
.btn-danger[disabled].focus,
fieldset[disabled] .btn-danger.focus,
.btn-danger.disabled:active,
.btn-danger[disabled]:active,
fieldset[disabled] .btn-danger:active,
.btn-danger.disabled.active,
.btn-danger[disabled].active,
fieldset[disabled] .btn-danger.active {
  background-color: #9c1f2e;
  border-color: #871b28;
}
.btn-danger .badge {
  color: #9c1f2e;
  background-color: #ffffff;
}
.btn-link {
  color: #0067cd;
  font-weight: normal;
  border-radius: 0;
}
.btn-link,
.btn-link:active,
.btn-link.active,
.btn-link[disabled],
fieldset[disabled] .btn-link {
  background-color: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.btn-link,
.btn-link:hover,
.btn-link:focus,
.btn-link:active {
  border-color: transparent;
}
.btn-link:hover,
.btn-link:focus {
  color: #004181;
  text-decoration: underline;
  background-color: transparent;
}
.btn-link[disabled]:hover,
fieldset[disabled] .btn-link:hover,
.btn-link[disabled]:focus,
fieldset[disabled] .btn-link:focus {
  color: #777777;
  text-decoration: none;
}
.btn-lg,
.btn-group-lg > .btn {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 0;
}
.btn-sm,
.btn-group-sm > .btn {
  padding: 5px 10px;
  font-size: 13px;
  line-height: 1.5;
  border-radius: 0;
}
.btn-xs,
.btn-group-xs > .btn {
  padding: 1px 5px;
  font-size: 13px;
  line-height: 1.5;
  border-radius: 0;
}
.btn-block {
  display: block;
  width: 100%;
}
.btn-inline-block {
  display: inline-block;
  width: auto;
}
.btn-block + .btn-block {
  margin-top: 5px;
}
input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
  width: 100%;
}
.btn-padded {
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 992px) {
  .btn-padded {
    padding-left: 25px;
    padding-right: 25px;
  }
}
.btn-wide {
  padding-left: 55px;
  padding-right: 55px;
}
.fade {
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.fade.in {
  opacity: 1;
}
.collapse {
  display: none;
  visibility: hidden;
}
.collapse.in {
  display: block;
  visibility: visible;
}
tr.collapse.in {
  display: table-row;
}
tbody.collapse.in {
  display: table-row-group;
}
.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-property: height, visibility;
  transition-property: height, visibility;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
}
/**
  * @toc 1.10
  * @name Dropdowns
  * @slug dropdowns
  * @container true
  * @gridclass col-xs-12
  * @description See http://getbootstrap.com/components/#dropdowns
  */
.caret {
  display: inline-block;
  width: 0;
  height: 0;
  whitespace: nowrap;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px solid;
  border-bottom: 0 transparent;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}
.caret.up {
  border-top: 0 transparent;
  border-bottom: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}
.dropup,
.dropdown {
  position: relative;
}
.dropdown-toggle:focus {
  outline: 0;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 14px;
  text-align: left;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
}
.dropdown-menu.pull-right {
  right: 0;
  left: auto;
}
.dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}
.dropdown-menu > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333333;
  white-space: nowrap;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  text-decoration: none;
  color: #262626;
  background-color: #f5f5f5;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #ffffff;
  text-decoration: none;
  outline: 0;
  background-color: #0067cd;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
  color: #777777;
}
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
  text-decoration: none;
  background-color: transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  cursor: not-allowed;
}
.open > .dropdown-menu {
  display: block;
}
.open > a {
  outline: 0;
}
.dropdown-menu-right {
  left: auto;
  right: 0;
}
.dropdown-menu-left {
  left: 0;
  right: auto;
}
.dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: 13px;
  line-height: 1.42857143;
  color: #777777;
  white-space: nowrap;
}
.dropdown-backdrop {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 990;
}
.pull-right > .dropdown-menu {
  right: 0;
  left: auto;
}
.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
  border-top: 0;
  border-bottom: 4px solid;
  content: "";
}
.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-bottom: 2px;
}
@media (min-width: 768px) {
  .navbar-right .dropdown-menu {
    left: auto;
    right: 0;
  }
  .navbar-right .dropdown-menu-left {
    left: 0;
    right: auto;
  }
}
/**
  * @toc 1.11
  * @name Button groups
  * @slug button-groups
  * @container true
  * @gridclass col-xs-12
  * @description See http://getbootstrap.com/components/#btn-groups
  */
.btn-group,
.btn-group-vertical {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.btn-group > .btn,
.btn-group-vertical > .btn {
  position: relative;
  float: left;
}
.btn-group > .btn:hover,
.btn-group-vertical > .btn:hover,
.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus,
.btn-group > .btn:active,
.btn-group-vertical > .btn:active,
.btn-group > .btn.active,
.btn-group-vertical > .btn.active {
  z-index: 2;
}
.btn-toolbar {
  margin-left: -5px;
}
.btn-toolbar .btn-group,
.btn-toolbar .input-group {
  float: left;
}
.btn-toolbar > .btn,
.btn-toolbar > .btn-group,
.btn-toolbar > .input-group {
  margin-left: 5px;
}
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
  border-radius: 0;
}
.btn-group > .btn:first-child {
  margin-left: 0;
}
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
.btn-group > .btn-group {
  float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
  border-radius: 0;
}
.btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child,
.btn-group > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
  outline: 0;
}
.btn-group > .btn + .dropdown-toggle {
  padding-left: 8px;
  padding-right: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
  padding-left: 12px;
  padding-right: 12px;
}
.btn-group.open .dropdown-toggle {
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn-group.open .dropdown-toggle.btn-link {
  -webkit-box-shadow: none;
  box-shadow: none;
}
.btn .caret {
  margin-left: 0;
}
.btn-lg .caret {
  border-width: 5px 5px 0;
  border-bottom-width: 0;
}
.dropup .btn-lg .caret {
  border-width: 0 5px 5px;
}
.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group,
.btn-group-vertical > .btn-group > .btn {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
}
.btn-group-vertical > .btn-group > .btn {
  float: none;
}
.btn-group-vertical > .btn + .btn,
.btn-group-vertical > .btn + .btn-group,
.btn-group-vertical > .btn-group + .btn,
.btn-group-vertical > .btn-group + .btn-group {
  margin-top: -1px;
}
.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.btn-group-vertical > .btn:first-child:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn:last-child:not(:first-child) {
  border-bottom-left-radius: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
  border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
.btn-group-justified {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
}
.btn-group-justified > .btn,
.btn-group-justified > .btn-group {
  float: none;
  display: table-cell;
  width: 1%;
}
.btn-group-justified > .btn-group .btn {
  width: 100%;
}
.btn-group-justified > .btn-group .dropdown-menu {
  left: auto;
}
[data-toggle="buttons"] > .btn input[type="radio"],
[data-toggle="buttons"] > .btn-group > .btn input[type="radio"],
[data-toggle="buttons"] > .btn input[type="checkbox"],
[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}
/**
  * @toc 1.12
  * @name Input groups
  * @slug input-groups
  * @container true
  * @gridclass col-xs-12
  * @description See http://getbootstrap.com/components/#input-groups
  */
.input-group {
  position: relative;
  display: table;
  border-collapse: separate;
}
.input-group[class*="col-"] {
  float: none;
  padding-left: 0;
  padding-right: 0;
}
.input-group .form-control {
  position: relative;
  z-index: 2;
  float: left;
  width: 100%;
  margin-bottom: 0;
}
.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
  height: 46px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 0;
}
select.input-group-lg > .form-control,
select.input-group-lg > .input-group-addon,
select.input-group-lg > .input-group-btn > .btn {
  height: 46px;
  line-height: 46px;
}
textarea.input-group-lg > .form-control,
textarea.input-group-lg > .input-group-addon,
textarea.input-group-lg > .input-group-btn > .btn,
select[multiple].input-group-lg > .form-control,
select[multiple].input-group-lg > .input-group-addon,
select[multiple].input-group-lg > .input-group-btn > .btn {
  height: auto;
}
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn {
  height: 31px;
  padding: 5px 10px;
  font-size: 13px;
  line-height: 1.5;
  border-radius: 0;
}
select.input-group-sm > .form-control,
select.input-group-sm > .input-group-addon,
select.input-group-sm > .input-group-btn > .btn {
  height: 31px;
  line-height: 31px;
}
textarea.input-group-sm > .form-control,
textarea.input-group-sm > .input-group-addon,
textarea.input-group-sm > .input-group-btn > .btn,
select[multiple].input-group-sm > .form-control,
select[multiple].input-group-sm > .input-group-addon,
select[multiple].input-group-sm > .input-group-btn > .btn {
  height: auto;
}
.input-group-addon,
.input-group-btn,
.input-group .form-control {
  display: table-cell;
}
.input-group-addon:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child),
.input-group .form-control:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.input-group-addon,
.input-group-btn {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
}
.input-group-addon {
  padding: 10px 10px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1;
  color: #555555;
  text-align: center;
  background-color: #eeeeee;
  border: 1px solid #b1b5b8;
  border-radius: 0;
}
.input-group-addon.input-sm {
  padding: 5px 10px;
  font-size: 13px;
  border-radius: 0;
}
.input-group-addon.input-lg {
  padding: 10px 16px;
  font-size: 18px;
  border-radius: 0;
}
.input-group-addon input[type="radio"],
.input-group-addon input[type="checkbox"] {
  margin-top: 0;
}
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.input-group-addon:first-child {
  border-right: 0;
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child),
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
.input-group-addon:last-child {
  border-left: 0;
}
.input-group-btn {
  position: relative;
  font-size: 0;
  white-space: nowrap;
}
.input-group-btn > .btn {
  position: relative;
}
.input-group-btn > .btn + .btn {
  margin-left: -1px;
}
.input-group-btn > .btn:hover,
.input-group-btn > .btn:focus,
.input-group-btn > .btn:active {
  z-index: 2;
}
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group {
  margin-right: -1px;
}
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group {
  margin-left: -1px;
}
/**
  * @toc 1.13
  * @name Navs
  * @slug navs
  * @container true
  * @gridclass col-xs-12
  * @description See http://getbootstrap.com/components/#nav
  */
.nav {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}
.nav > li {
  position: relative;
  display: block;
}
.nav > li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
}
.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: #eeeeee;
}
.nav > li.disabled > a {
  color: #777777;
}
.nav > li.disabled > a:hover,
.nav > li.disabled > a:focus {
  color: #777777;
  text-decoration: none;
  background-color: transparent;
  cursor: not-allowed;
}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
  background-color: #eeeeee;
  border-color: #0067cd;
}
.nav .nav-divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}
.nav > li > a > img {
  max-width: none;
}
.nav-tabs {
  border-bottom: 1px solid #dddddd;
  /* Photo Gallery Uses This*/
}
.nav-tabs > li {
  float: left;
  margin-bottom: -1px;
}
.nav-tabs > li > a {
  margin-right: 2px;
  line-height: 1.42857143;
  border: 1px solid transparent;
  border-radius: 0 0 0 0;
}
.nav-tabs > li > a:hover {
  border-color: #eeeeee #eeeeee #dddddd;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: #555555;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-bottom-color: transparent;
  cursor: default;
}
.nav-tabs.nav-justified {
  width: 100%;
  border-bottom: 0;
}
.nav-tabs.nav-justified > li {
  float: none;
}
.nav-tabs.nav-justified > li > a {
  text-align: center;
  margin-bottom: 5px;
}
.nav-tabs.nav-justified > .dropdown .dropdown-menu {
  top: auto;
  left: auto;
}
@media (min-width: 768px) {
  .nav-tabs.nav-justified > li {
    display: table-cell;
    width: 1%;
  }
  .nav-tabs.nav-justified > li > a {
    margin-bottom: 0;
  }
}
.nav-tabs.nav-justified > li > a {
  margin-right: 0;
  border-radius: 0;
}
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active > a:hover,
.nav-tabs.nav-justified > .active > a:focus {
  border: 1px solid #dddddd;
}
@media (min-width: 768px) {
  .nav-tabs.nav-justified > li > a {
    border-bottom: 1px solid #dddddd;
    border-radius: 0 0 0 0;
  }
  .nav-tabs.nav-justified > .active > a,
  .nav-tabs.nav-justified > .active > a:hover,
  .nav-tabs.nav-justified > .active > a:focus {
    border-bottom-color: #ffffff;
  }
}
.nav-tabs.side-nav {
  border: 0;
}
.nav-tabs.side-nav > li {
  float: none;
  margin: 0;
  border: 0;
}
.nav-tabs.side-nav > li.active {
  border: 0;
}
.nav-tabs.side-nav > li.active > a {
  border: 0;
}
.nav-tabs.side-nav > li > a {
  border: 0;
  padding-left: 0;
}
.nav-tabs.side-nav > li > a:hover {
  background: #ffffff;
  color: #636c71;
}
.nav-pills > li {
  float: left;
}
.nav-pills > li > a {
  border-radius: 0;
}
.nav-pills > li + li {
  margin-left: 2px;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  color: #ffffff;
  background-color: #0067cd;
}
.nav-stacked > li {
  float: none;
}
.nav-stacked > li + li {
  margin-top: 2px;
  margin-left: 0;
}
.nav-justified {
  width: 100%;
}
.nav-justified > li {
  float: none;
}
.nav-justified > li > a {
  text-align: center;
  margin-bottom: 5px;
}
.nav-justified > .dropdown .dropdown-menu {
  top: auto;
  left: auto;
}
@media (min-width: 768px) {
  .nav-justified > li {
    display: table-cell;
    width: 1%;
  }
  .nav-justified > li > a {
    margin-bottom: 0;
  }
}
.nav-tabs-justified {
  border-bottom: 0;
}
.nav-tabs-justified > li > a {
  margin-right: 0;
  border-radius: 0;
}
.nav-tabs-justified > .active > a,
.nav-tabs-justified > .active > a:hover,
.nav-tabs-justified > .active > a:focus {
  border: 1px solid #dddddd;
}
@media (min-width: 768px) {
  .nav-tabs-justified > li > a {
    border-bottom: 1px solid #dddddd;
    border-radius: 0 0 0 0;
  }
  .nav-tabs-justified > .active > a,
  .nav-tabs-justified > .active > a:hover,
  .nav-tabs-justified > .active > a:focus {
    border-bottom-color: #ffffff;
  }
}
.tab-content > .tab-pane {
  display: none;
  visibility: hidden;
}
.tab-content > .active {
  display: block;
  visibility: visible;
}
.nav-tabs .dropdown-menu {
  margin-top: -1px;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
/**
  * @toc 1.14
  * @name Navbar
  * @slug navbar
  * @container true
  * @gridclass col-xs-12
  * @description See http://getbootstrap.com/components/#navbar
  */
.navbar {
  position: relative;
  min-height: 50px;
  margin-bottom: 20px;
  border: 1px solid transparent;
}
@media (min-width: 768px) {
  .navbar {
    border-radius: 0;
  }
}
@media (min-width: 768px), print and (min-width: 0) {
  .navbar-header {
    float: left;
  }
}
.navbar-collapse {
  overflow-x: visible;
  padding-right: 15px;
  padding-left: 15px;
  border-top: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  -webkit-overflow-scrolling: touch;
}
.navbar-collapse.in {
  overflow-y: auto;
}
@media (min-width: 768px) {
  .navbar-collapse {
    width: auto;
    border-top: 0;
    box-shadow: none;
  }
  .navbar-collapse.collapse {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
  }
  .navbar-collapse.in {
    overflow-y: visible;
  }
  .navbar-fixed-top .navbar-collapse,
  .navbar-static-top .navbar-collapse,
  .navbar-fixed-bottom .navbar-collapse {
    padding-left: 0;
    padding-right: 0;
  }
}
.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
  max-height: 340px;
}
@media (max-device-width: 480px) and (orientation: landscape) {
  .navbar-fixed-top .navbar-collapse,
  .navbar-fixed-bottom .navbar-collapse {
    max-height: 200px;
  }
}
.container > .navbar-header,
.container-fluid > .navbar-header,
.container > .navbar-collapse,
.container-fluid > .navbar-collapse {
/*
  margin-right: -15px;
  margin-left: -15px;*/
}
@media (min-width: 768px), print and (min-width: 0) {
  .container > .navbar-header,
  .container-fluid > .navbar-header,
  .container > .navbar-collapse,
  .container-fluid > .navbar-collapse {
    margin-right: 0;
    margin-left: 0;
  }
}
.navbar-static-top {
  z-index: 1000;
  border-width: 0 0 1px;
}
@media (min-width: 768px) {
  .navbar-static-top {
    border-radius: 0;
  }
}
.navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030;
}
@media (min-width: 768px) {
  .navbar-fixed-top,
  .navbar-fixed-bottom {
    border-radius: 0;
  }
}
.navbar-fixed-top {
  top: 0;
  border-width: 0 0 1px;
}
.navbar-fixed-bottom {
  bottom: 0;
  margin-bottom: 0;
  border-width: 1px 0 0;
}
.navbar-brand {
  float: left;
  padding: 15px 15px;
  font-size: 18px;
  line-height: 20px;
  height: 50px;
}
.navbar-brand:hover,
.navbar-brand:focus {
  text-decoration: none;
}
.navbar-brand > img {
  display: block;
}
@media (min-width: 768px) {
  .navbar > .container .navbar-brand,
  .navbar > .container-fluid .navbar-brand {
    margin-left: -15px;
  }
}
.navbar-toggle {
  position: relative;
  float: right;
  margin-right: 15px;
  padding: 9px 10px;
  margin-top: 8px;
  margin-bottom: 8px;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 0;
}
.navbar-toggle:focus {
  outline: 0;
}
.navbar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
}
.navbar-toggle .icon-bar + .icon-bar {
  margin-top: 4px;
}
@media (min-width: 768px) {
  .navbar-toggle {
    display: none;
  }
}
.navbar-nav {
  margin: 7.5px -15px;
}
.navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}
@media (max-width: 767px) {
  .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    box-shadow: none;
  }
  .navbar-nav .open .dropdown-menu > li > a,
  .navbar-nav .open .dropdown-menu .dropdown-header {
    padding: 5px 15px 5px 25px;
  }
  .navbar-nav .open .dropdown-menu > li > a {
    line-height: 20px;
  }
  .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-nav .open .dropdown-menu > li > a:focus {
    background-image: none;
  }
}
@media (min-width: 768px) {
  .navbar-nav {
    float: left;
    margin: 0;
  }
  .navbar-nav > li {
    float: left;
  }
  .navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}
.navbar-form {
  margin-left: -15px;
  margin-right: -15px;
  padding: 10px 15px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
  margin-top: 4px;
  margin-bottom: 4px;
}
@media (min-width: 768px) {
  .navbar-form .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .navbar-form .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }
  .navbar-form .form-control,
  .navbar-form .btn {
    margin-right: 5px !important;
  }
  .navbar-form .form-control:last-child,
  .navbar-form .btn:last-child {
    margin-right: 0 !important;
  }
  .navbar-form .form-control-static {
    display: inline-block;
  }
  .navbar-form .input-group {
    display: inline-table;
    vertical-align: middle;
  }
  .navbar-form .input-group .input-group-addon,
  .navbar-form .input-group .input-group-btn,
  .navbar-form .input-group .form-control {
    width: auto;
  }
  .navbar-form .input-group > .form-control {
    width: 100%;
  }
  .navbar-form .control-label {
    margin-bottom: 0;
    vertical-align: middle;
  }
  .navbar-form .radio,
  .navbar-form .checkbox {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .navbar-form .radio label,
  .navbar-form .checkbox label {
    padding-left: 0;
  }
  .navbar-form .radio input[type="radio"],
  .navbar-form .checkbox input[type="checkbox"] {
    position: relative;
    margin-left: 0;
  }
  .navbar-form .has-feedback .form-control-feedback {
    top: 0;
  }
}
@media (max-width: 767px) {
  .navbar-form .form-group {
    margin-bottom: 5px;
  }
  .navbar-form .form-group:last-child {
    margin-bottom: 0;
  }
}
@media (min-width: 768px) {
  .navbar-form {
    width: auto;
    border: 0;
    margin-left: 0;
    margin-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
}
.navbar-nav > li > .dropdown-menu {
  margin-top: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
  margin-bottom: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.navbar-btn {
  margin-top: 4px;
  margin-bottom: 4px;
}
.navbar-btn.btn-sm {
  margin-top: 9.5px;
  margin-bottom: 9.5px;
}
.navbar-btn.btn-xs {
  margin-top: 14px;
  margin-bottom: 14px;
}
.navbar-text {
  margin-top: 15px;
  margin-bottom: 15px;
}
@media (min-width: 768px) {
  .navbar-text {
    float: left;
    margin-left: 15px;
    margin-right: 15px;
  }
}
@media (min-width: 768px) {
  .navbar-left {
    float: left;
    float: left !important;
  }
  .navbar-right {
    float: right;
    float: right !important;
    margin-right: -15px;
  }
  .navbar-right ~ .navbar-right {
    margin-right: 0;
  }
  .lt-ie9 .navbar-right {
    margin-right: 0 !important;
  }
}
.navbar-default {
  background-color: #f8f8f8;
  border-color: #e7e7e7;
}
.navbar-default .navbar-brand {
  color: #777777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #5e5e5e;
  background-color: transparent;
}
.navbar-default .navbar-text {
  color: #777777;
}
.navbar-default .navbar-nav > li > a {
  color: #777777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #333333;
  background-color: transparent;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #555555;
  background-color: #e7e7e7;
}
.navbar-default .navbar-nav > .disabled > a,
.navbar-default .navbar-nav > .disabled > a:hover,
.navbar-default .navbar-nav > .disabled > a:focus {
  color: #cccccc;
  background-color: transparent;
}
.navbar-default .navbar-toggle {
  border-color: #dddddd;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #dddddd;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #888888;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #e7e7e7;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  background-color: #e7e7e7;
  color: #555555;
}
@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #777777;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #333333;
    background-color: transparent;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #555555;
    background-color: #e7e7e7;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #cccccc;
    background-color: transparent;
  }
}
.navbar-default .navbar-link {
  color: #777777;
}
.navbar-default .navbar-link:hover {
  color: #333333;
}
.navbar-default .btn-link {
  color: #777777;
}
.navbar-default .btn-link:hover,
.navbar-default .btn-link:focus {
  color: #333333;
}
.navbar-default .btn-link[disabled]:hover,
fieldset[disabled] .navbar-default .btn-link:hover,
.navbar-default .btn-link[disabled]:focus,
fieldset[disabled] .navbar-default .btn-link:focus {
  color: #cccccc;
}
.navbar-inverse {
  background-color: #222222;
  border-color: #080808;
}
.navbar-inverse .navbar-brand {
  color: #9d9d9d;
}
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
  color: #ffffff;
  background-color: transparent;
}
.navbar-inverse .navbar-text {
  color: #9d9d9d;
}
.navbar-inverse .navbar-nav > li > a {
  color: #9d9d9d;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  color: #ffffff;
  background-color: transparent;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: #ffffff;
  background-color: #080808;
}
.navbar-inverse .navbar-nav > .disabled > a,
.navbar-inverse .navbar-nav > .disabled > a:hover,
.navbar-inverse .navbar-nav > .disabled > a:focus {
  color: #444444;
  background-color: transparent;
}
.navbar-inverse .navbar-toggle {
  border-color: #333333;
}
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
  background-color: #333333;
}
.navbar-inverse .navbar-toggle .icon-bar {
  background-color: #ffffff;
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
  border-color: #101010;
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
  background-color: #080808;
  color: #ffffff;
}
@media (max-width: 767px) {
  .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
    border-color: #080808;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
    background-color: #080808;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
    color: #9d9d9d;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ffffff;
    background-color: transparent;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ffffff;
    background-color: #080808;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #444444;
    background-color: transparent;
  }
}
.navbar-inverse .navbar-link {
  color: #9d9d9d;
}
.navbar-inverse .navbar-link:hover {
  color: #ffffff;
}
.navbar-inverse .btn-link {
  color: #9d9d9d;
}
.navbar-inverse .btn-link:hover,
.navbar-inverse .btn-link:focus {
  color: #ffffff;
}
.navbar-inverse .btn-link[disabled]:hover,
fieldset[disabled] .navbar-inverse .btn-link:hover,
.navbar-inverse .btn-link[disabled]:focus,
fieldset[disabled] .navbar-inverse .btn-link:focus {
  color: #444444;
}
/**
	  * @toc 1.15
	  * @name Global breadcrumbs
	  * @slug global-breadcrumbs
	  * @description Breadcrumbs are used to convey sense of place with in the site.
	  * @markup
	 <section class="masthead">
		<div class="container">
			<div class="row col-xs-12 breadcrumb-container">
				<ul class="breadcrumb">
					<li><a href="#">Home</a></li>
					<li><a href="#">News</a></li>
					<li><a href="#">Lorem Ipsum</a></li>
				</ul>
			</div>
		</div>
	</section>
		*/
.breadcrumb-container {
  margin-top: 20px;
}
@media (min-width: 768px) {
  .breadcrumb-container {
    margin-bottom: -20px;
  }
}
/**
	  * @toc 1.15.1
	  * @name Breadcrumb with back button
	  * @slug breadcrumb-with-back-button
	  * @description
	  * @submodule true
	  * @markup
	<section class="masthead">
		<div class="container">
			<div class="row col-xs-12 breadcrumb-container">
				<p class="back-link"><a href="#">&lt; Back to results</a></p>
				<ul class="breadcrumb">
					<li><a href="#">Home</a></li>
					<li><a href="#">News</a></li>
				</ul>
			</div>
		</div>
	</section>
		*/
.back-link {
  line-height: 1;
  font-size: 13px;
  display: inline;
}
.breadcrumb {
  display: block;
  padding: 0 0;
  margin-bottom: 20px;
  list-style: none;
  background-color: transparent;
  border-radius: 0;
  font-size: 13px;
}
.breadcrumb.in-page {
  margin: 20px 0 -20px 0;
}
.breadcrumb > li {
  display: inline;
}
.breadcrumb > li + li:before,
.breadcrumb > li:last-child:after {
  content: "\0003E\00a0";
  padding: 0 5px;
  color: #333333;
}
.lt-ie9 .breadcrumb > li {
  position: relative;
  margin-right: 15px;
}
.lt-ie9 .breadcrumb > li:before {
  padding: 0 5px;
  content: "\0003E\00a0";
  display: inline-block;
  position: absolute;
  color: #333333;
  left: 100%;
}
.lt-ie9 .breadcrumb > li.last-breadcrumb:before {
  display: none;
}
.breadcrumb > .active {
  color: #777777;
}
@media (min-width: 992px) {
  .breadcrumb {
    font-size: 14px;
  }
}
.back-link + .breadcrumb {
  display: inline-block;
}
.back-link + .breadcrumb:before {
  content: ' | ';
  font-size: 0.9;
  position: relative;
  padding-right: 3px;
}
/* At the sm, md, lg breakpoints, the first visible breadcrumb repeats the active top nav item.
   Suppress the preceding chevron.
 */
@media (min-width: 768px) {
  .section-repeat:before {
    display: none;
  }
}
.ui-datepicker {
  width: 17em;
  padding: .2em .2em 0;
  display: none;
  background: #ffffff;
}
.ui-datepicker .ui-datepicker-header {
  position: relative;
  padding: .2em 0;
  margin: -0.2em -0.2em 0;
  background: #0067cd;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  position: absolute;
  top: 2px;
  width: 1.8em;
  height: 1.8em;
}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
  top: 1px;
}
.ui-datepicker .ui-datepicker-prev {
  left: 2px;
}
.ui-datepicker .ui-datepicker-prev .ui-icon {
  color: transparent;
  font-size: 0;
  border: 0;
}
.ui-datepicker .ui-datepicker-prev .ui-icon:before {
  font-size: 14px;
  content: "\e623";
  font-family: 'icomoon';
  display: inline-block;
  color: #ffffff;
}
.ui-datepicker .ui-datepicker-prev:hover {
  border: 0;
}
.ui-datepicker .ui-datepicker-next {
  right: 2px;
}
.ui-datepicker .ui-datepicker-next .ui-icon {
  color: transparent;
  font-size: 0;
  border: 0;
}
.ui-datepicker .ui-datepicker-next .ui-icon:before {
  font-size: 14px;
  content: "\e622";
  font-family: 'icomoon';
  display: inline-block;
  color: #ffffff;
}
.ui-datepicker .ui-datepicker-next:hover {
  border: 0;
}
.ui-datepicker .ui-datepicker-prev-hover {
  left: 1px;
}
.ui-datepicker .ui-datepicker-next-hover {
  right: 1px;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -8px;
  top: 50%;
  margin-top: -8px;
}
.ui-datepicker .ui-datepicker-title {
  margin: 0 2.3em;
  line-height: 1.8em;
  text-align: center;
  color: #ffffff;
}
.ui-datepicker .ui-datepicker-title select {
  font-size: 1em;
  margin: 1px 0;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
  width: 45%;
}
.ui-datepicker table {
  width: 100%;
  font-size: .9em;
  border-collapse: collapse;
  margin: 0 0 .4em;
}
.ui-datepicker th {
  padding: .7em .3em;
  text-align: center;
  font-weight: bold;
  border: 0;
}
.ui-datepicker td {
  border: 0;
  padding: 1px;
}
.ui-datepicker td span,
.ui-datepicker td a {
  display: block;
  padding: .2em;
  text-align: right;
  text-decoration: none;
}
.ui-datepicker .ui-datepicker-buttonpane {
  background-image: none;
  margin: .7em 0 0 0;
  padding: 0 .2em;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}
.ui-datepicker .ui-datepicker-buttonpane button {
  float: right;
  margin: .5em .2em .4em;
  cursor: pointer;
  padding: .2em .6em .3em .6em;
  width: auto;
  overflow: visible;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
  float: left;
}
/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
  width: auto;
}
.ui-datepicker-multi .ui-datepicker-group {
  float: left;
}
.ui-datepicker-multi .ui-datepicker-group table {
  width: 95%;
  margin: 0 auto .4em;
}
.ui-datepicker-multi-2 .ui-datepicker-group {
  width: 50%;
}
.ui-datepicker-multi-3 .ui-datepicker-group {
  width: 33.3%;
}
.ui-datepicker-multi-4 .ui-datepicker-group {
  width: 25%;
}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
  border-left-width: 0;
}
.ui-datepicker-multi .ui-datepicker-buttonpane {
  clear: left;
}
.ui-datepicker-row-break {
  clear: both;
  width: 100%;
  font-size: 0;
}
/* RTL support */
.ui-datepicker-rtl {
  direction: rtl;
}
.ui-datepicker-rtl .ui-datepicker-prev {
  right: 2px;
  left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next {
  left: 2px;
  right: auto;
}
.ui-datepicker-rtl .ui-datepicker-prev:hover {
  right: 1px;
  left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next:hover {
  left: 1px;
  right: auto;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane {
  clear: right;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
  float: left;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
  float: right;
}
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
  border-right-width: 0;
  border-left-width: 1px;
}
.ui-dialog {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  padding: .2em;
  outline: 0;
}
.ui-dialog .ui-dialog-titlebar {
  padding: .4em 1em;
  position: relative;
}
.ui-dialog .ui-dialog-title {
  float: left;
  margin: .1em 0;
  white-space: nowrap;
  width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-dialog .ui-dialog-titlebar-close {
  position: absolute;
  right: .3em;
  top: 50%;
  width: 20px;
  margin: -10px 0 0 0;
  padding: 1px;
  height: 20px;
}
.ui-dialog .ui-dialog-content {
  position: relative;
  border: 0;
  padding: .5em 1em;
  background: none;
  overflow: auto;
}
.ui-dialog .ui-dialog-buttonpane {
  text-align: left;
  border-width: 1px 0 0 0;
  background-image: none;
  margin-top: .5em;
  padding: .3em 1em .5em .4em;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  float: right;
}
.ui-dialog .ui-dialog-buttonpane button {
  margin: .5em .4em .5em 0;
  cursor: pointer;
}
.ui-dialog .ui-resizable-se {
  width: 12px;
  height: 12px;
  right: -5px;
  bottom: -5px;
  background-position: 16px 16px;
}
.ui-draggable .ui-dialog-titlebar {
  cursor: move;
}
.ui-draggable-handle {
  -ms-touch-action: none;
  touch-action: none;
}
.ui-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block;
  outline: none;
}
.ui-menu .ui-menu {
  position: absolute;
}
.ui-menu .ui-menu-item {
  position: relative;
  margin: 0;
  padding: 3px 1em 3px .4em;
  cursor: pointer;
  min-height: 0;
  /* support: IE7 */
  /* support: IE10, see #8844 */
  list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
}
.ui-menu .ui-menu-divider {
  margin: 5px 0;
  height: 0;
  font-size: 0;
  line-height: 0;
  border-width: 1px 0 0 0;
}
.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
  margin: -1px;
}
/* icon support */
.ui-menu-icons {
  position: relative;
}
.ui-menu-icons .ui-menu-item {
  padding-left: 2em;
}
/* left-aligned */
.ui-menu .ui-icon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: .2em;
  margin: auto 0;
}
/* right-aligned */
.ui-menu .ui-menu-icon {
  left: auto;
  right: 0;
}
.ui-tooltip {
  padding: 8px;
  position: absolute;
  z-index: 9999;
  max-width: 300px;
  -webkit-box-shadow: 0 0 5px #aaa;
  box-shadow: 0 0 5px #aaa;
}
body .ui-tooltip {
  border-width: 2px;
}
/* Component containers
----------------------------------*/
.ui-widget {
  font-family: Verdana, Arial, sans-serif;
  font-size: 1.1em;
}
.ui-widget .ui-widget {
  font-size: 1em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
  font-family: Verdana, Arial, sans-serif;
  font-size: 1em;
}
.ui-widget-content {
  border: 1px solid #aaaaaa;
  color: #222222;
}
.ui-widget-content a {
  color: #222222;
}
.ui-widget-header {
  color: #222222;
  font-family: 'Eaton Reg', Helvetica, Arial, sans-serif;
}
.ui-widget-header a {
  color: #222222;
}
/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  border: 0;
  font-weight: normal;
  color: #555555;
  background: #f4f4f4;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
  color: #555555;
  text-decoration: none;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
  border: 0;
  color: #212121;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited {
  color: #212121;
  text-decoration: none;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
  border: 0;
  font-weight: normal;
  color: #212121;
  background: #e6e6e5;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
  color: #212121;
  text-decoration: none;
}
/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  border: 0;
  background: #0067cd;
  color: #ffffff;
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
  color: #363636;
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
  border: 1px solid #cd0a0a;
  color: #cd0a0a;
}
.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
  color: #cd0a0a;
}
.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
  color: #cd0a0a;
}
.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
  font-weight: bold;
}
.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
  opacity: .7;
  filter: alpha(opacity=70);
  /* support: IE8 */
  font-weight: normal;
}
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
  opacity: .35;
  filter: alpha(opacity=35);
  /* support: IE8 */
  background-image: none;
}
.ui-state-disabled .ui-icon {
  filter: alpha(opacity=35);
  /* support: IE8 - See #6059 */
}
/* Misc visuals
----------------------------------*/
/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
  border-top-left-radius: 0px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
  border-top-right-radius: 0px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
  border-bottom-left-radius: 0px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
  border-bottom-right-radius: 0px;
}
/* Overlays */
.ui-widget-overlay {
  opacity: .3;
  filter: alpha(opacity=30);
  /* support: IE8 */
}
.ui-widget-shadow {
  margin: -8px 0 0 -8px;
  padding: 8px;
  opacity: .3;
  filter: alpha(opacity=30);
  /* support: IE8 */
}
/**
  * @toc 1.16
  * @name Thumbnails
  * @slug thumbnails
  * @container true
  * @gridclass col-xs-12
  * @description See http://getbootstrap.com/components/#thumbnails
  */
.thumbnail {
  display: block;
  margin-bottom: 10px;
  line-height: 1.42857143;
}
.thumbnail > img,
.thumbnail a > img {
  margin-left: auto;
  margin-right: auto;
}
.thumbnail .caption {
  padding: 9px;
  color: #333333;
}
/**
	  * @toc 1.17
	  * @name Global media lists
	  * @slug global-media-lists
	  * @description
	  * @container true
	  * @gridclass col-sm-6 col-md-4
	  * @description Media lists are lists of items consisting of text content with an optional image. See http://getbootstrap.com/components/#media.
	  * @markup
	<ul class="media-list" id="{{listID}}">
	<li>
		<div class="media">
			<div class="media-left">
				<a href="#"><img src="../img/graphics/products/related-product-1.jpg" alt="" class="media-object"/></a></div>
			<div class="media-body">
				<h3 class="media-heading"><a href="#">Product name lorem ipsum dolor</a></h3>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit.
			</div>
		</div>
	</li>
	<li>
		<div class="media">
			<div class="media-left">
				<a href="#"><img src="../img/graphics/products/related-product-2.jpg" alt="" class="media-object"/></a></div>
			<div class="media-body">
				<h3 class="media-heading"><a href="#">Product name lorem ipsum dolor</a></h3>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit.
			</div>
		</div>
	</li>
	<li>
		<div class="media">
			<div class="media-left">
				<a href="#"><img src="../img/graphics/products/related-product-3.jpg" alt="" class="media-object"/></a></div>
			<div class="media-body">
				<h3 class="media-heading"><a href="#">Product name lorem ipsum dolor</a></h3>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit.
			</div>
		</div>
	</li>
	<li>
		<div class="media">
			<div class="media-left">
				<a href="#"><img src="../img/graphics/products/related-product-4.jpg" alt="" class="media-object"/></a></div>
			<div class="media-body">
				<h3 class="media-heading"><a href="#">Product name lorem ipsum dolor</a></h3>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit.
			</div>
		</div>
	</li>
	<li>
		<div class="media">
			<div class="media-left">
				<a href="#"><img src="../img/graphics/products/related-product-1.jpg" alt="" class="media-object"/></a></div>
			<div class="media-body">
				<h3 class="media-heading"><a href="#">Product name lorem ipsum dolor</a></h3>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit.
			</div>
		</div>
	</li>
</ul>
		*/
.media {
  padding: 10px 0;
  border-bottom: 1px solid #dadbdc;
}
.media:first-child {
  margin-top: 0;
}
.media,
.media-body {
  zoom: 1;
  overflow: hidden;
}
.media-body {
  width: 10000px;
}
.media-object {
  display: block;
}
.media-right,
.media > .pull-right {
  padding-left: 10px;
}
.media-left,
.media > .pull-left {
  padding-right: 10px;
}
.media-left,
.media-right,
.media-body {
  display: table-cell;
  vertical-align: middle;
}
.media-left.align-top,
.media-right.align-top,
.media-body.align-top {
  vertical-align: top;
}
.media-middle {
  vertical-align: middle;
}
.media-bottom {
  vertical-align: bottom;
}
.media-heading {
  margin-top: 0;
  margin-bottom: 5px;
  font-size: 14px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.media-list {
  padding-left: 0;
  list-style: none;
}
.media-list li a {
  display: block;
}
/**
* @toc 1.18
* @name Panels
* @slug panels
* @container true
* @gridclass col-sm-12
* @description Panels are used for sections of content featuring a heading, content, and (optional) footer. See http://getbootstrap.com/components/#panels.
* @markup
<div class="panel panel-default">
	<div class="panel-heading">
		<h2 class="panel-title">Panel title</h2>
		<a href="#" class="view-all">View all</a>
	</div>
	<div class="panel-body">
		<p>Panel Body. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vehicula ornare nunc, ac ullamcorper leo ullamcorper eu. Sed imperdiet, eros sed tempus vestibulum, felis erat molestie mi, in porta nunc velit nec est. Praesent lorem neque, efficitur ut commodo at, gravida in mauris. Aenean pellentesque, dolor eu molestie facilisis, orci nulla consequat nibh, vel varius elit ipsum id tortor. In dapibus imperdiet tellus, id semper lectus consequat vel. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi scelerisque laoreet arcu et euismod. Vestibulum aliquet, elit non congue efficitur, est eros vulputate leo, eget lobortis ex erat quis lectus.</p>
	</div>
	<div class="panel-footer">
		<p>Panel Footer.</p>
	</div>
</div><!--/ .panel -->
*/
.panel {
  margin-bottom: 20px;
  color:#fff;
}
/*
@media (min-width: 768px) {
  .panel-body {
    padding: 20px 0;
  }
  .panel-body.ptn {
    padding-top: 0;
  }
}
@media (min-width: 992px) {
  .panel-body {
    padding: 30px 0;
  }
}
.panel-body.ptn {
  padding-top: 0;
}
    */
.panel-heading {
  padding: 20px 0;
  position: relative;
}
 /*
@media (min-width: 768px) {
  .panel-heading {
   border-bottom: 1px solid #b1b5b8;
  }
}
     */
.panel-heading > .dropdown .dropdown-toggle {
  color: inherit;
}
.panel-heading > a {
  font-size: 14px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: block;
}
@media (min-width: 480px) and (max-width: 767px) {
  .panel-heading > a {
    position: absolute;
    right: 0;
    top: 10px;
  }
}
@media (min-width: 768px) {
  .panel-heading > a {
    display: block;
  }
}
@media (min-width: 992px) {
  .panel-heading > a {
    position: absolute;
    right: 0;
    top: 10px;
  }
}
.panel-title {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  color: inherit;
}
.panel-title > a,
.panel-title > small,
.panel-title > .small,
.panel-title > small > a,
.panel-title > .small > a {
  color: inherit;
}
.panel-footer {
  padding: 15px 0 0;
  border-top: 1px solid #dddddd;
}
.panel > .list-group,
.panel > .panel-collapse > .list-group {
  margin-bottom: 0;
}
.panel > .list-group .list-group-item,
.panel > .panel-collapse > .list-group .list-group-item {
  border-width: 1px 0;
  border-radius: 0;
}
.panel > .list-group:first-child .list-group-item:first-child,
.panel > .panel-collapse > .list-group:first-child .list-group-item:first-child {
  border-top: 0;
  border-top-right-radius: -1;
  border-top-left-radius: -1;
}
.panel > .list-group:last-child .list-group-item:last-child,
.panel > .panel-collapse > .list-group:last-child .list-group-item:last-child {
  border-bottom: 0;
  border-bottom-right-radius: -1;
  border-bottom-left-radius: -1;
}
/*------------------------------------------------------------------
[Panel view all links]
*/
/**
  * @toc 1.19
  * @name Panel view all link
  * @slug panel-view-all-link
  * @container true
  * @gridclass col-xs-12
  * @description A right-floating link used to link from a short list of items to a page containing a full listing. See above, <a href="#module-panels">1.18 Panels</a>.
  */
.panel .view-all {
  position: absolute;
  right: 0;
  bottom: 20px;
  font-weight: bold;
  font-size: 13px;
}
.panel-heading + .list-group .list-group-item:first-child {
  border-top-width: 0;
}
.list-group + .panel-footer {
  border-top-width: 0;
}
.panel > .table,
.panel > .table-responsive > .table,
.panel > .panel-collapse > .table {
  margin-bottom: 0;
}
.panel > .table caption,
.panel > .table-responsive > .table caption,
.panel > .panel-collapse > .table caption {
  padding-left: 15px;
  padding-right: 15px;
}
.panel > .table:first-child,
.panel > .table-responsive:first-child > .table:first-child {
  border-top-right-radius: -1;
  border-top-left-radius: -1;
}
.panel > .table:first-child > thead:first-child > tr:first-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child,
.panel > .table:first-child > tbody:first-child > tr:first-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child {
  border-top-left-radius: -1;
  border-top-right-radius: -1;
}
.panel > .table:first-child > thead:first-child > tr:first-child td:first-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child,
.panel > .table:first-child > tbody:first-child > tr:first-child td:first-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child,
.panel > .table:first-child > thead:first-child > tr:first-child th:first-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child,
.panel > .table:first-child > tbody:first-child > tr:first-child th:first-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child {
  border-top-left-radius: -1;
}
.panel > .table:first-child > thead:first-child > tr:first-child td:last-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child,
.panel > .table:first-child > tbody:first-child > tr:first-child td:last-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child,
.panel > .table:first-child > thead:first-child > tr:first-child th:last-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child,
.panel > .table:first-child > tbody:first-child > tr:first-child th:last-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child {
  border-top-right-radius: -1;
}
.panel > .table:last-child,
.panel > .table-responsive:last-child > .table:last-child {
  border-bottom-right-radius: -1;
  border-bottom-left-radius: -1;
}
.panel > .table:last-child > tbody:last-child > tr:last-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child {
  border-bottom-left-radius: -1;
  border-bottom-right-radius: -1;
}
.panel > .table:last-child > tbody:last-child > tr:last-child td:first-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
.panel > .table:last-child > tbody:last-child > tr:last-child th:first-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child {
  border-bottom-left-radius: -1;
}
.panel > .table:last-child > tbody:last-child > tr:last-child td:last-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
.panel > .table:last-child > tbody:last-child > tr:last-child th:last-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child {
  border-bottom-right-radius: -1;
}
.panel > .panel-body + .table,
.panel > .panel-body + .table-responsive,
.panel > .table + .panel-body,
.panel > .table-responsive + .panel-body {
  border-top: 1px solid #e6e6e5;
}
.panel > .table > tbody:first-child > tr:first-child th,
.panel > .table > tbody:first-child > tr:first-child td {
  border-top: 0;
}
.panel > .table-bordered,
.panel > .table-responsive > .table-bordered {
  border: 0;
}
.panel > .table-bordered > thead > tr > th:first-child,
.panel > .table-responsive > .table-bordered > thead > tr > th:first-child,
.panel > .table-bordered > tbody > tr > th:first-child,
.panel > .table-responsive > .table-bordered > tbody > tr > th:first-child,
.panel > .table-bordered > tfoot > tr > th:first-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child,
.panel > .table-bordered > thead > tr > td:first-child,
.panel > .table-responsive > .table-bordered > thead > tr > td:first-child,
.panel > .table-bordered > tbody > tr > td:first-child,
.panel > .table-responsive > .table-bordered > tbody > tr > td:first-child,
.panel > .table-bordered > tfoot > tr > td:first-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child {
  border-left: 0;
}
.panel > .table-bordered > thead > tr > th:last-child,
.panel > .table-responsive > .table-bordered > thead > tr > th:last-child,
.panel > .table-bordered > tbody > tr > th:last-child,
.panel > .table-responsive > .table-bordered > tbody > tr > th:last-child,
.panel > .table-bordered > tfoot > tr > th:last-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child,
.panel > .table-bordered > thead > tr > td:last-child,
.panel > .table-responsive > .table-bordered > thead > tr > td:last-child,
.panel > .table-bordered > tbody > tr > td:last-child,
.panel > .table-responsive > .table-bordered > tbody > tr > td:last-child,
.panel > .table-bordered > tfoot > tr > td:last-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child {
  border-right: 0;
}
.panel > .table-bordered > thead > tr:first-child > td,
.panel > .table-responsive > .table-bordered > thead > tr:first-child > td,
.panel > .table-bordered > tbody > tr:first-child > td,
.panel > .table-responsive > .table-bordered > tbody > tr:first-child > td,
.panel > .table-bordered > thead > tr:first-child > th,
.panel > .table-responsive > .table-bordered > thead > tr:first-child > th,
.panel > .table-bordered > tbody > tr:first-child > th,
.panel > .table-responsive > .table-bordered > tbody > tr:first-child > th {
  border-bottom: 0;
}
.panel > .table-bordered > tbody > tr:last-child > td,
.panel > .table-responsive > .table-bordered > tbody > tr:last-child > td,
.panel > .table-bordered > tfoot > tr:last-child > td,
.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td,
.panel > .table-bordered > tbody > tr:last-child > th,
.panel > .table-responsive > .table-bordered > tbody > tr:last-child > th,
.panel > .table-bordered > tfoot > tr:last-child > th,
.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th {
  border-bottom: 0;
}
.panel > .table-responsive {
  border: 0;
  margin-bottom: 0;
}
.panel-group {
  margin-bottom: 20px;
}
.panel-group .panel {
  margin-bottom: 0;
  border-radius: 0;
}
.panel-group .panel + .panel {
  margin-top: 5px;
}
.panel-group .panel-heading {
  border-bottom: 0;
}
.panel-group .panel-heading + .panel-collapse > .panel-body,
.panel-group .panel-heading + .panel-collapse > .list-group {
  border-top: 1px solid #dddddd;
}
.panel-group .panel-footer {
  border-top: 0;
}
.panel-group .panel-footer + .panel-collapse .panel-body {
  border-bottom: 1px solid #dddddd;
}
.panel-default {
  border-color: #b1b5b8;
}
.panel-default > .panel-heading {
  color: #333333;
  border-color: #b1b5b8;
}
.panel-default > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #b1b5b8;
}
.panel-default > .panel-heading .badge {
  color: #f5f5f5;
  background-color: #333333;
}
.panel-default > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #b1b5b8;
}
.panel-primary {
  border-color: #0067cd;
}
.panel-primary > .panel-heading {
  color: #ffffff;
  border-color: #0067cd;
}
.panel-primary > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #0067cd;
}
.panel-primary > .panel-heading .badge {
  color: #0067cd;
  background-color: #ffffff;
}
.panel-primary > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #0067cd;
}
.panel-success {
  border-color: #d6e9c6;
}
.panel-success > .panel-heading {
  color: #3c763d;
  border-color: #d6e9c6;
}
.panel-success > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #d6e9c6;
}
.panel-success > .panel-heading .badge {
  color: #dff0d8;
  background-color: #3c763d;
}
.panel-success > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #d6e9c6;
}
.panel-info {
  border-color: #bce8f1;
}
.panel-info > .panel-heading {
  color: #31708f;
  border-color: #bce8f1;
}
.panel-info > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #bce8f1;
}
.panel-info > .panel-heading .badge {
  color: #d9edf7;
  background-color: #31708f;
}
.panel-info > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #bce8f1;
}
.panel-warning {
  border-color: #faebcc;
}
.panel-warning > .panel-heading {
  color: #8a6d3b;
  border-color: #faebcc;
}
.panel-warning > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #faebcc;
}
.panel-warning > .panel-heading .badge {
  color: #fcf8e3;
  background-color: #8a6d3b;
}
.panel-warning > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #faebcc;
}
.panel-danger {
  border-color: #ebccd1;
}
.panel-danger > .panel-heading {
  color: #a94442;
  border-color: #ebccd1;
}
.panel-danger > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #ebccd1;
}
.panel-danger > .panel-heading .badge {
  color: #f2dede;
  background-color: #a94442;
}
.panel-danger > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #ebccd1;
}
/**
* @toc 1.20
* @name Wells
* @slug wells
* @container true
* @gridclass col-sm-12
* @description Wells provide an inset around a block of content. They can be used to call content out or separate it from other elements on the page. See http://getbootstrap.com/components/#wells.
* @markup
<div class="well">
	<p>.well</p>
</div>
<div class="well well-sm">
	<p>.well.well-sm</p>
</div>
<div class="well well-lg">
	<p>.well.well-lg</p>
</div>
*/
.well {
  min-height: 20px;
  padding: 15px 10px;
  margin-bottom: 20px;
  -webkit-box-shadow: inset 0 40px 40px -40px #e6e6e5, inset 0 -40px 40px -40px #e6e6e5;
  box-shadow: inset 0 40px 40px -40px #e6e6e5, inset 0 -40px 40px -40px #e6e6e5;
}
.well blockquote {
  border-color: #ddd;
  border-color: rgba(0, 0, 0, 0.15);
}
.well-lg {
  padding: 24px;
}
.well-sm {
  padding: 9px;
}
.unwell {
  margin: 0;
  padding: 0;
  box-shadow: none;
  min-height: 0;
}
.modal-open {
  overflow: hidden;
}
.modal {
  display: none;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  -webkit-overflow-scrolling: touch;
  outline: 0;
}
.modal.fade .modal-dialog {
  -webkit-transform: translate(0, -25%);
  -ms-transform: translate(0, -25%);
  -o-transform: translate(0, -25%);
  transform: translate(0, -25%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -moz-transition: -moz-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}
.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}
.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}
.modal-dialog {
  position: relative;
  width: auto;
  margin: 10px;
}
.modal-content {
  position: relative;
  background-color: #ffffff;
  border: 1px solid #999999;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  background-clip: padding-box;
  outline: 0;
}
.modal-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background-color: #000000;
}
.modal-backdrop.fade {
  opacity: 0;
  filter: alpha(opacity=0);
}
.modal-backdrop.in {
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.modal-header {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
  min-height: 16.42857143px;
}
.modal-header .close {
  margin-top: -2px;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  color: transparent;
  height: 21px;
  width: 21px;
  float: right;
  position: relative;
}
.modal-header .close:before {
  content: "\e603";
  position: absolute;
  font-size: 18px;
  width: 21px;
  height: 21px;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  font-family: 'icomoon';
  display: block;
  color: #636c71;
}
.modal-title {
  margin: 0;
  line-height: 1.42857143;
}
.modal-body {
  position: relative;
  padding: 15px;
}
.modal-footer {
  padding: 15px;
  text-align: right;
  border-top: 1px solid #e5e5e5;
}
.modal-footer .btn + .btn {
  margin-left: 5px;
  margin-bottom: 0;
}
.modal-footer .btn-group .btn + .btn {
  margin-left: -1px;
}
.modal-footer .btn-block + .btn-block {
  margin-left: 0;
}
.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}
@media (min-width: 768px) {
  .modal-dialog {
    width: 700px;
    margin: 125px auto;
  }
  .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  }
  .modal-sm {
    width: 300px;
  }
}
@media (min-width: 992px) {
  .modal-lg {
    width: 900px;
  }
}
.clearfix:before,
.clearfix:after,
.dl-horizontal dd:before,
.dl-horizontal dd:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after,
.form-horizontal .form-group:before,
.form-horizontal .form-group:after,
.btn-toolbar:before,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:before,
.btn-group-vertical > .btn-group:after,
.nav:before,
.nav:after,
.navbar:before,
.navbar:after,
.navbar-header:before,
.navbar-header:after,
.navbar-collapse:before,
.navbar-collapse:after,
.panel-body:before,
.panel-body:after,
.modal-footer:before,
.modal-footer:after {
  content: " ";
  display: table;
}
.clearfix:after,
.dl-horizontal dd:after,
.container:after,
.container-fluid:after,
.row:after,
.form-horizontal .form-group:after,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:after,
.nav:after,
.navbar:after,
.navbar-header:after,
.navbar-collapse:after,
.panel-body:after,
.modal-footer:after {
  clear: both;
}
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.pull-right {
  float: right !important;
}
.pull-left {
  float: left !important;
}
.hide {
  display: none;
}
.show {
  display: block !important;
}
.invisible {
  visibility: hidden;
}
.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
.relative {
  position: relative;
}
.nowrap {
  white-space: nowrap;
}
.ib {
  display: inline-block;
}
.block {
  display: block;
}
.bold {
  font-weight: bold;
}
.required {
  color: #898989;
}
.required-asterisk {
  color: #9c1f2e;
  font-weight: bold;
}
.hidden {
  display: none !important;
  visibility: hidden !important;
}
.affix {
  position: fixed;
}
@-ms-viewport {
  width: device-width;
}
.visible-xs,
.visible-xsl,
.visible-sm,
.visible-md,
.visible-lg {
  display: none !important;
}
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-xsl-block,
.visible-xsl-inline,
.visible-xsl-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
  display: none !important;
}
@media (max-width: 767px) {
  .visible-xs {
    display: block !important;
  }
  table.visible-xs {
    display: table;
  }
  tr.visible-xs {
    display: table-row !important;
  }
  th.visible-xs,
  td.visible-xs {
    display: table-cell !important;
  }
}
@media (max-width: 767px) {
  .visible-xs-block {
    display: block !important;
  }
}
@media (max-width: 767px) {
  .visible-xs-inline {
    display: inline !important;
  }
}
@media (max-width: 767px) {
  .visible-xs-inline-block {
    display: inline-block !important;
  }
}
@media (max-width: 767px) {
  .visible-xsl {
    display: block !important;
  }
  table.visible-xsl {
    display: table;
  }
  tr.visible-xsl {
    display: table-row !important;
  }
  th.visible-xsl,
  td.visible-xsl {
    display: table-cell !important;
  }
}
@media (max-width: 767px) {
  .visible-xsl-block {
    display: block !important;
  }
}
@media (max-width: 767px) {
  .visible-xsl-inline {
    display: inline !important;
  }
}
@media (max-width: 767px) {
  .visible-xsl-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm {
    display: block !important;
  }
  table.visible-sm {
    display: table;
  }
  tr.visible-sm {
    display: table-row !important;
  }
  th.visible-sm,
  td.visible-sm {
    display: table-cell !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-block {
    display: block !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-inline {
    display: inline !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md {
    display: block !important;
  }
  table.visible-md {
    display: table;
  }
  tr.visible-md {
    display: table-row !important;
  }
  th.visible-md,
  td.visible-md {
    display: table-cell !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-block {
    display: block !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-inline {
    display: inline !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg {
    display: block !important;
  }
  table.visible-lg {
    display: table;
  }
  tr.visible-lg {
    display: table-row !important;
  }
  th.visible-lg,
  td.visible-lg {
    display: table-cell !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg-block {
    display: block !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg-inline {
    display: inline !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg-inline-block {
    display: inline-block !important;
  }
}
@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}
@media (max-width: 767px) {
  .hidden-xsl {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important;
  }
}
.visible-print {
  display: none !important;
}
@media print {
  .visible-print {
    display: block !important;
  }
  table.visible-print {
    display: table;
  }
  tr.visible-print {
    display: table-row !important;
  }
  th.visible-print,
  td.visible-print {
    display: table-cell !important;
  }
}
.visible-print-block {
  display: none !important;
}
@media print {
  .visible-print-block {
    display: block !important;
  }
}
.visible-print-inline {
  display: none !important;
}
@media print {
  .visible-print-inline {
    display: inline !important;
  }
}
.visible-print-inline-block {
  display: none !important;
}
@media print {
  .visible-print-inline-block {
    display: inline-block !important;
  }
}
@media print {
  .hidden-print {
    display: none !important;
  }
}
.responsive-iframe {
  border: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  width: 1px;
  min-width: 100%;
}
/**
  * @toc 2.0
  * @name Base site styles
  * @slug base-site-styles
  * @description These styles comprise the major structural elements of the site, including the header, footer, main navigation and content areas.
  */
/**
  * @toc 2.1
  * @name Header
  * @slug header
  * @description The site header is the standard signature. It consists of the Eaton logo (clickable to return to Eaton.com, the Site Marker and breadcrumb for the current site (if applicable), the user toolbar, and the mobile menu toggle and search icons (mobile breakpoint only).
  * @markup
  * <header class="navbar" id="top">
	<div class="container">

		<div class="navbar-header">
			<div class="highlight-element">
				<span class="label label-default">.site-logo</span>
				<a class="site-logo" href="#"><img class="img-responsive" src="/img/logo/eaton-logo.jpg" alt="Eaton logo"></a>
			</div>

			<button type="button" class="mobile-nav-toggle" id="open-left">
				<span class="sr-only">Toggle navigation</span>
				<span class="sr-only">MENU</span>
			</button>

			<ul class="breadcrumb site-marker-breadcrumb">
				<li><a href="#">Site marker breadcrumbs</a></li>
			</ul>
			<div class="site-marker">Site marker</div>

			<a href="#" class="mobile-search-toggle">
				<i class="icon-search"></i>
			</a>
		</div>
		<!-- /.navbar-header -->

		<div class="navbar-collapse user-tools highlight-element">
			<span class="label label-default">.user-tools</span>
			<ul class="nav navbar-nav navbar-right">
				<li><a href="#" class="tools-contact"><i class="icon-contact"></i>Contact</a></li>
				<li><a href="#" class="tools-login"><i class="icon-user"></i>Login</a></li>
				<li><a href="#" class="tools-country"><span class="selected-country" data-lang="en-us"><img src="/img/ui/us-flag-icon.png" alt="flag">USA &bull; English</span></a></li>
				<li class="search-btn">
					<a href="#" class="tools-search js-tools-search">
						<i class="icon-search"></i>Search
					</a>
				</li>
			</ul>
			<!-- /.nav .navbar-nav .navbar-right -->
		</div>
		<!--/.navbar-collapse .user-tools -->

		<div class="header-search-panel" id="headerSearchPanel">
			<div class="search-box">
				<div class="input-group">
					<input type="text" class="form-control has-feedback has-feedback-left" placeholder="Enter search criteria">
					<span class="icon-search form-control-feedback" aria-hidden="true"></span>
					<span class="input-group-btn">

						<button type="submit" class="btn btn-primary">
							<i class="icon-chevron-right"></i>
						</button>
					</span>
					<span class="input-group-addon advanced-search hidden-xs">
						<a href="#">Advanced search</a>
					</span>
				</div>
				<!-- /.input-group -->

				<a href="#" class="mobile-advanced-search visible-xs-block">Advanced search</a>
			</div>
			<!-- /.search-box -->

		</div>
	</div>
	<!-- /.container -->
</header>
<!-- /.navbar -->
  */
header.navbar {
  background-color: #ffe701;
  position: relative;
  z-index: 4;
  min-height: 50px;
  margin-bottom: 0;
  padding-bottom: 0;
 /*border-bottom: 1px solid #b1b5b8;*/ 
  -webkit-transition: -webkit-transform 0.25s ease;
  -moz-transition: -moz-transform 0.25s ease;
  -o-transition: -o-transform 0.25s ease;
  transition: transform 0.25s ease;
}
@media (min-width: 768px) {
  header.navbar {
    min-height: 90px;
  }
}
@media (min-width: 768px) {
  header.navbar .container {
    position: relative;
  }
}
.fixed-header header.navbar {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
}
.csstransforms .snap-open header.navbar {
  -webkit-transform: translate(275px, 0);
  -ms-transform: translate(275px, 0);
  -o-transform: translate(275px, 0);
  transform: translate(275px, 0);
}
header.navbar.headroom--pinned {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}
header.navbar.headroom--unpinned {
  -webkit-transform: translate(0, -70px);
  -ms-transform: translate(0, -70px);
  -o-transform: translate(0, -70px);
  transform: translate(0, -70px);
}
/*------------------------------------------------------------------
[1.1.0 Logo]
*/
.site-logo {
  width: 150px;
  display: block;
  /* margin: 14px auto 0; */
  /* margin: 14px 7px auto; */
  margin: 10px 0;
  float: left;
}
@media (min-width: 768px), print and (min-width: 0) {
  .site-logo {
    margin: 25px auto 25px;
    width: 275px;
    float: left;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .site-logo {
    margin: 25px auto 25px;
    float: left;
  }
}
.site-logo img {
 /* margin-left: 10px; */
 margin-left: 0px;
}
@media (min-width: 768px) {
  .site-logo img {
    margin-left: 0;
  }
}
/*------------------------------------------------------------------
[1.2 Mobile nav toggle]
*/
.mobile-nav-toggle {
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 0;
  position: absolute;
  left: 15px;
  top: 12px;
  width: 40px;
  height: 44px;
  padding: 0;
  background: url(../img/ui/menu-icon.png);
  background-size: cover;
  background-repeat: no-repeat;
}
.mobile-nav-toggle:focus {
  outline: 0;
}
@media (min-width: 768px) {
  .mobile-nav-toggle {
    display: none;
  }
}
/*------------------------------------------------------------------
[1.2.1 Mobile search toggle (search box styles are 4.1)]
*/
.mobile-search-toggle {
  display: block;
  position: absolute;
  width: 32.2px;
  height: 32.2px;
  top: 9px;
  right: 15px;
  font-family: 'Icomoon';
  font-size: 35px;
  color: #0067cd;
  background-size: cover;
  background-repeat: no-repeat;
}
.mobile-search-toggle,
.mobile-search-toggle:focus,
.mobile-search-toggle:hover,
.mobile-search-toggle:active {
  text-decoration: none;
}
@media (min-width: 768px) {
  .mobile-search-toggle {
    display: none;
  }
}
/*------------------------------------------------------------------
[1.3 User Tools / Header search box]
*/
.user-tools {
  font-size: 10px;
  background: #fff;
}
@media (max-width: 767px) {
  .user-tools {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .user-tools {
    font-size: 11px;
    position: absolute;
    top: 0;
    left: 0;
    right: 15px;
  }
}
@media (min-width: 992px) {
  .user-tools {
    position: static;
    float: right;
    width: auto;
    right: 0;
  }
}
.user-tools-mobile {
  display: none !important;
}
@media (max-width: 767px) {
  .user-tools-mobile {
    display: block !important;
  }
}
.user-tools .navbar-nav {
  position: relative;
  margin: -1px 0 0 0;
  border: solid #dadbdc;
  border-width: 0 1px 1px;
  display: block;
}
@media (min-width: 768px) {
  .user-tools .navbar-nav {
    float: none !important;
  }
}
.user-tools .navbar-nav > li {
  border-left: 1px solid #dadbdc;
  margin-bottom: 3px;
  display: block;
  float: left;
  width: 33.3%;
}
.user-tools .navbar-nav > li:first-child {
  border-left: none;
}
.user-tools .navbar-nav > li:hover,
.user-tools .navbar-nav > li:active,
.user-tools .navbar-nav > li [aria-expanded=true] {
  background-color: #eee;
}
@media (min-width: 768px) {
  .user-tools .navbar-nav > li {
    width: 25%;
  }
}
@media (min-width: 992px) {
  .user-tools .navbar-nav > li {
    width: auto;
    display: inline-block;
  }
}
.user-tools .navbar-nav > li > a {
  font-weight: bold;
  display: block;
  margin-bottom: -3px;
  color: #636c71;
  border-bottom: 3px solid #0067cd;
  padding: 15px 6px 9px;
  text-align: center;
  min-height: 72px;
}
@media (min-width: 768px) {
  .user-tools .navbar-nav > li > a {
    text-align: left;
    min-height: 0;
    padding: 15px 11px 9px;
  }
}
.user-tools .navbar-nav > li > a.tools-contact {
  border-color: #de8703;
}
.user-tools .navbar-nav > li > a.tools-country {
  border-color: #338c26;
}
.user-tools .navbar-nav > li > a.tools-search {
  border-color: #9c1f2e;
}
.user-tools .navbar-nav > li > a [class^="icon-"],
.user-tools .navbar-nav > li > a [class*=" icon-"],
.user-tools .navbar-nav > li > a img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) {
  .user-tools .navbar-nav > li > a [class^="icon-"],
  .user-tools .navbar-nav > li > a [class*=" icon-"],
  .user-tools .navbar-nav > li > a img {
    display: inline;
  }
}
.user-tools .navbar-nav > li > a [class^="icon-"],
.user-tools .navbar-nav > li > a [class*=" icon-"] {
  color: #b1b5b8;
  font-weight: bold;
  font-size: 2.25em;
}
@media (min-width: 768px) {
  .user-tools .navbar-nav > li > a [class^="icon-"],
  .user-tools .navbar-nav > li > a [class*=" icon-"] {
    font-size: 1.1em;
    padding-right: 8px;
  }
}
.user-tools .navbar-nav > li > a img {
  max-width: 999em;
  max-height: 23px;
}
@media (min-width: 768px) {
  .user-tools .navbar-nav > li > a img {
    display: inline-block;
    position: relative;
    top: -1.5px;
    max-width: 16px;
    max-height: 999em;
    padding-right: 6px;
  }
}
.user-tools .selected-country img {
  padding-bottom: 3px;
}
@media (min-width: 768px) {
  .user-tools .selected-country img {
    padding-bottom: 0;
  }
}
.user-tools .dropdown-menu {
  position: absolute;
  top: 100%;
  left: -1px;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-size: 12px;
  border-radius: 0;
  padding: 0;
}
.user-tools .dropdown-menu li:last-child {
  border-bottom: none;
}
.user-tools .dropdown-menu li a {
  white-space: normal;
  padding: 8px 10px;
}
.user-tools .tools-country-list img {
  padding-right: 10px;
}
.user-tools-mobile .navbar-nav {
  margin: 0 -15px;
  border: none;
}
.user-tools-mobile .mobile-nav-panel {
  border-bottom: 1px solid #424a52;
}
.user-tools-mobile .mobile-nav-select-country,
.user-tools-mobile .mobile-nav-search {
  margin: 0 -15px;
}
.user-tools-mobile .mobile-nav-search {
  padding: 0 15px;
}
.header-search-panel {
  display: none;
}
@media (min-width: 768px) {
  .header-search-panel {
    background: #fff;
    padding: 15px;
    max-width: 359px;
    max-height: 125px;
    position: absolute;
    right: 30px;
    top: 46px;
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
    border: solid #9c1f2e;
    border-width: 0 0 3px;
  }
  .header-search-panel .search-box {
    margin: 10px 0 0;
    position: relative;
  }
}
@media (min-width: 992px) {
  .header-search-panel {
    max-width: 354px;
  }
}
.lt-ie9 .header-search-panel {
  max-width: 335px;
  border: 1px solid #e6e6e5;
}
/*------------------------------------------------------------------
[1.4 Main navigation]
*/
/************* Pulldown navigation - desktop and tablet *************/
.main-navigation {
  background: #0067cd;
}
@media (max-width: 767px) {
  .main-navigation {
    display: none !important;
  }
}
.main-navigation ul.nav {
  padding-left: 0;
  list-style: none;
  margin-left: -5px;
  display: table;
  table-layout: fixed;
  width: 100%;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  /* 4-up navigation */
  /* 6-up navigation */
}
.main-navigation ul.nav > li {
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
}
.main-navigation ul.nav > li {
  display: table-cell;
  width: 20%;
  text-align: center;
  padding: 0;
  cursor: pointer;
}
.lt-ie9 .main-navigation ul.nav > li {
  width: auto;
}
.lt-ie9 .main-navigation ul.nav > li:first-child {
  padding-left: 0;
  border-left: 1px solid #0052a4;
}
.lt-ie9 .main-navigation ul.nav > li > a {
  border-left: 1px solid #3385d7;
  border-right: 1px solid #0052a4;
}
.main-navigation ul.nav > li > a {
  padding: 13px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  color: #fff;
  font-size: 11px;
  line-height: 13px;
}
@media (min-width: 992px) {
  .main-navigation ul.nav > li > a {
    font-size: 13px;
    line-height: 1;
  }
}
@media (min-width: 1200px) {
  .main-navigation ul.nav > li > a {
    font-size: 14px;
  }
}
.main-navigation ul.nav > li > a:hover,
.main-navigation ul.nav > li > a:focus,
.main-navigation ul.nav > li > a[aria-expanded=true] {
  background: #fff;
  color: #424a52;
}
.main-navigation ul.nav > li:last-child > a:after {
  content: "";
  position: absolute;
  right: -3px;
  display: block;
  width: 2px;
  top: 0;
  bottom: 0;
  z-index: 10;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.main-navigation ul.nav > li.selected > a {
  background: #003d6e;
  color: #ffffff;
}
.main-navigation ul.nav > li:nth-child(1):nth-last-child(4),
.main-navigation ul.nav > li:nth-child(2):nth-last-child(3),
.main-navigation ul.nav > li:nth-child(3):nth-last-child(2),
.main-navigation ul.nav > li:nth-child(4):nth-last-child(1) {
  width: 25%;
}
@media (min-width: 992px) {
  .main-navigation ul.nav > li:nth-child(1):nth-last-child(4) .dropdown-menu,
  .main-navigation ul.nav > li:nth-child(2):nth-last-child(3) .dropdown-menu,
  .main-navigation ul.nav > li:nth-child(3):nth-last-child(2) .dropdown-menu,
  .main-navigation ul.nav > li:nth-child(4):nth-last-child(1) .dropdown-menu {
    width: 280px;
  }
  .main-navigation ul.nav > li:nth-child(1):nth-last-child(4) .dropdown-menu.has-feature,
  .main-navigation ul.nav > li:nth-child(2):nth-last-child(3) .dropdown-menu.has-feature,
  .main-navigation ul.nav > li:nth-child(3):nth-last-child(2) .dropdown-menu.has-feature,
  .main-navigation ul.nav > li:nth-child(4):nth-last-child(1) .dropdown-menu.has-feature {
    width: 480px;
  }
}
@media (min-width: 1200px) {
  .main-navigation ul.nav > li:nth-child(1):nth-last-child(4) .dropdown-menu,
  .main-navigation ul.nav > li:nth-child(2):nth-last-child(3) .dropdown-menu,
  .main-navigation ul.nav > li:nth-child(3):nth-last-child(2) .dropdown-menu,
  .main-navigation ul.nav > li:nth-child(4):nth-last-child(1) .dropdown-menu {
    width: 330px;
  }
  .main-navigation ul.nav > li:nth-child(1):nth-last-child(4) .dropdown-menu.has-feature,
  .main-navigation ul.nav > li:nth-child(2):nth-last-child(3) .dropdown-menu.has-feature,
  .main-navigation ul.nav > li:nth-child(3):nth-last-child(2) .dropdown-menu.has-feature,
  .main-navigation ul.nav > li:nth-child(4):nth-last-child(1) .dropdown-menu.has-feature {
    width: 580px;
  }
}
.main-navigation ul.nav > li:nth-child(1):nth-last-child(6),
.main-navigation ul.nav > li:nth-child(2):nth-last-child(5),
.main-navigation ul.nav > li:nth-child(3):nth-last-child(4),
.main-navigation ul.nav > li:nth-child(4):nth-last-child(3),
.main-navigation ul.nav > li:nth-child(5):nth-last-child(2),
.main-navigation ul.nav > li:nth-child(6):nth-last-child(1) {
  width: 16.66%;
}
.main-navigation .dropdown-menu {
  width: 250px;
  margin-left: -20px;
  border: none;
  -webkit-box-shadow: 3px 5.196px 8px 0px rgba(0, 1, 1, 0.75);
  box-shadow: 3px 5.196px 8px 0px rgba(0, 1, 1, 0.75);
  padding: 15px;
}
@media (min-width: 1200px) {
  .main-navigation .dropdown-menu {
    width: 280px;
  }
}
.main-navigation .dropdown-menu.right {
  margin-left: -35px;
}
.main-navigation .dropdown-menu.has-feature {
  width: 520px;
}
@media (min-width: 1200px) {
  .main-navigation .dropdown-menu.has-feature {
    width: 580px;
  }
}
.main-navigation .dropdown-menu.has-feature.right {
  margin-left: -350px;
}
@media (min-width: 992px) {
  .main-navigation .dropdown-menu.has-feature.right {
    margin-left: -310px;
  }
}
.main-navigation .dropdown-menu.has-feature ul {
  max-width: 250px;
  float: left;
}
@media (min-width: 1200px) {
  .main-navigation .dropdown-menu.has-feature ul {
    max-width: 280px;
  }
}
.main-navigation .dropdown-menu ul,
.main-navigation .dropdown-menu {
  padding-left: 0;
  list-style: none;
}
.main-navigation .dropdown-menu ul li a,
.main-navigation .dropdown-menu li a,
.main-navigation .dropdown-menu ul li b,
.main-navigation .dropdown-menu li b {
  display: block;
  padding: 10px 15px;
  border-top: 1px solid #b1b5b8;
}
.main-navigation .dropdown-menu ul li:first-child a,
.main-navigation .dropdown-menu li:first-child a,
.main-navigation .dropdown-menu ul li:first-child b,
.main-navigation .dropdown-menu li:first-child b {
  border-top: none;
}
@media (max-width: 767px) {
  .list-divided-container + .list-divided-container > .main-navigation .dropdown-menu ul,
  .list-divided-container + .list-divided-container > .main-navigation .dropdown-menu {
    border-top: 1px solid #b1b5b8;
  }
}
.main-navigation .dropdown-menu ul {
  padding-left: 15px;
}
.main-navigation .dropdown-menu li a {
  color: #0067cd;
  border-color: #e6e6e5;
  text-decoration: none;
  font-size: 13px;
}
@media (min-width: 992px) {
  .main-navigation .dropdown-menu li a {
    font-size: 14px;
  }
}
.main-navigation .dropdown-menu li:first-child a {
  border-top: 1px solid #e6e6e5;
}
.main-navigation .dropdown-menu li:last-child {
  border-bottom: 1px solid #e6e6e5;
}
.main-navigation .dropdown-menu .feature-block-cta {
  float: right;
  max-width: 240px;
  font-size: 13px;
}
@media (min-width: 1200px) {
  .main-navigation .dropdown-menu .feature-block-cta {
    max-width: 280px;
  }
}
.main-navigation .dropdown-menu .feature-block-cta img {
  display: block;
  max-width: 100%;
  height: auto;
  padding-bottom: 10px;
}
@media (min-width: 768px) {
  .no-flexbox .main-navigation ul.nav > li > a {
    padding: 13px 28px 13px 28px;
  }
}
.no-flexbox .main-navigation .caret {
  position: absolute;
  right: 15px;
  display: block;
  width: 10px;
  top: 20px;
  margin-top: -2px;
}
.flexbox .main-navigation ul.nav {
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
}
.flexbox .main-navigation ul.nav > li {
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
}
.flexbox .main-navigation ul.nav > li > a {
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
  width: 100%;
  text-align: center;
  vertical-align: middle;
  align-items: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
}
.no-flexbox.lt-ie9 .main-navigation > .container {
  text-align: left;
}
.no-flexbox.lt-ie9 .main-navigation .dropdown-menu {
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.no-flexbox.lt-ie9 .main-navigation ul.nav {
  display: table;
  table-layout: auto;
  width: auto;
  min-width: 60%;
}
.no-flexbox.lt-ie9 .main-navigation ul.nav > li {
  float: none;
  max-width: 20%;
  display: table-cell;
}
.no-flexbox.lt-ie9 .main-navigation ul.nav > li > a {
  display: block;
  padding-left: 35px;
  padding-right: 35px;
}
.touch-close {
  position: fixed;
  z-index: 999;
  background: rgba(0, 0, 0, 0.01);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
/************* Pullout tray nav - mobile *************/
/**
 * Uses mixins from mixins/expand-list.less
 .nav-snap = .expand-list-dark
 .navbar-nav = .expand-list-header(-dark)
 .header-name = expand-list-header-name
 .header-icon = .expand-list-header-icon
 .dropdown-menu = .expand-list-list
 	li = .expand-list-item
 		a = .expand-list-item-link
 			.item-name = .expand-list-item-name
 			.item-icon = .expand-list-item-icon
*/
.nav-snap {
  background: #363636;
  width: 274px;
  overflow: hidden;
}
.nav-snap .nav-panels {
  margin-top: 1px;
  width: 550px;
  -webkit-transition: -webkit-transform 0.25s ease-in-out;
  -moz-transition: -moz-transform 0.25s ease-in-out;
  -o-transition: -o-transform 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out;
  will-change: transform;
}
.csstransforms .nav-snap .nav-panels {
  -webkit-transform: translate(-275px, 0);
  -ms-transform: translate(-275px, 0);
  -o-transform: translate(-275px, 0);
  transform: translate(-275px, 0);
}
.csstransforms .nav-snap .nav-panels.show-parent {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}
.nav-snap .nav-panel {
  width: 275px;
  display: block;
  float: left;
}
.nav-snap .nav-panel a {
  white-space: normal;
}
.nav-snap .nav-panel-toggle a,
.nav-snap .nav-header a {
  display: block;
  padding: 15px;
  color: #fff;
}
.nav-snap .nav-panel-toggle a {
  background: #003d6e;
  font-weight: bold;
  text-decoration: none;
}
.nav-snap .nav-panel-toggle [class^="icon-"],
.nav-snap .nav-panel-toggle [class*=" icon-"] {
  color: #4dc3f6;
  position: relative;
  top: 2px;
}
.nav-snap .nav-panel-toggle [class^="icon-"].left,
.nav-snap .nav-panel-toggle [class*=" icon-"].left {
  padding-right: 5px;
}
.nav-snap .nav-panel-toggle [class^="icon-"].right,
.nav-snap .nav-panel-toggle [class*=" icon-"].right {
  padding-left: 5px;
}
.nav-snap .nav-header a {
  background: #0067cd;
  font-size: 20px;
  text-decoration: none;
}
.nav-snap ul {
  padding-left: 0;
  list-style: none;
  padding-bottom: 5px;
}
.nav-snap .nav-menu > li {
  border-bottom: 1px solid #b1b5b8;
  position: relative;
  border-bottom: 1px solid #636c71;
  display: block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  padding: 15px;
  margin: 0 auto;
  letter-spacing: 0;
  color: #e6e6e5;
}
.nav-snap .nav-menu > li:hover,
.nav-snap .nav-menu > li:focus {
  background: transparent;
  color: #e6e6e5;
  border-color: #636c71;
}
.nav-snap .nav-menu > li a,
.nav-snap .nav-menu > li a:hover,
.nav-snap .nav-menu > li a:focus,
.nav-snap .nav-menu > li a:active {
  color: #e6e6e5;
}
@media (min-width: 768px) {
  .nav-snap .nav-menu > li {
    font-size: 15px;
  }
}
.nav-snap .nav-menu > li > a {
  font-weight: normal;
  font-size: 18px;
  text-decoration: none;
  display: block;
  padding-right: 30px;
}
.nav-snap .nav-menu > li > a .header-icon {
  position: absolute;
  top: 14px;
  right: 15px;
  font-size: 1.5em;
  height: 40px;
  text-decoration: none;
  -webkit-transition: right 0.2s ease-in-out;
  -o-transition: right 0.2s ease-in-out;
  transition: right 0.2s ease-in-out;
  display: block;
  color: #0067cd;
}
.nav-snap .nav-menu > li > a .header-icon[aria-expanded="true"]:before {
  content: '\e601';
}
.nav-snap .nav-menu > li.selected > a:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-left: 4px solid #0067cd;
}
.nav-snap .expand-sublist {
  background: transparent;
  border: none;
}
.nav-snap .expand-sublist ul,
.nav-snap .expand-sublist ol {
  padding-left: 0;
  list-style: none;
  padding-bottom: 5px;
}
.nav-snap .expand-sublist li {
  color: #fff;
  font-size: 18px;
  border-bottom: 1px solid #183f6e;
  font-weight: bold;
  padding: 15px;
  display: block;
  text-decoration: none;
  position: relative;
  border-bottom: none;
  padding-top: 5px;
  margin-right: -13px;
  margin-left: -15px;
}
.nav-snap .expand-sublist li:hover,
.nav-snap .expand-sublist li:focus {
  text-decoration: none;
}
.nav-snap .expand-sublist li.selected a {
  cursor: default;
}
.nav-snap .expand-sublist li.selected:before {
  content: '';
  display: block;
  position: absolute;
  height: 100%;
  left: -15px;
  top: 0;
  border-left: 6px solid #0067cd;
}
@media (min-width: 768px) {
  .nav-snap .expand-sublist li {
    font-size: 15px;
  }
}
.nav-snap .expand-sublist li a {
  color: #fff;
}
.nav-snap .expand-sublist li a,
.nav-snap .expand-sublist li a:hover,
.nav-snap .expand-sublist li a:focus {
  text-decoration: none;
}
.nav-snap .expand-sublist li:first-child {
  padding-top: 15px;
}
.nav-snap .expand-sublist li.selected:before {
  left: 0;
}
.nav-snap .expand-sublist li a {
  font-size: 15px;
  font-weight: normal;
  text-decoration: none;
}
.nav-snap .expand-sublist li a .item-name {
  display: block;
  margin-right: 30px;
  color: #e6e6e5;
}
.nav-snap .expand-sublist li a .item-icon {
  position: absolute;
  top: 50%;
  right: 15px;
  font-size: 1.5em;
  height: 40px;
  text-decoration: none;
  -webkit-transition: right 0.2s ease-in-out;
  -o-transition: right 0.2s ease-in-out;
  transition: right 0.2s ease-in-out;
  -webkit-transform: translate(0, -25%);
  -ms-transform: translate(0, -25%);
  -o-transform: translate(0, -25%);
  transform: translate(0, -25%);
  display: block;
}
.lt-ie9 .nav-snap .expand-sublist li a .item-icon {
  top: 28%;
}
.nav-snap .expand-sublist li:first-child a {
  padding-top: 10px;
}
.nav-snap a.selected {
  border-left: 4px solid #0067cd;
}
/*------------------------------------------------------------------
[1.5 Site Marker]
*/
.site-marker {
  font-family: 'Eaton Reg', Helvetica, Arial, sans-serif;
  position: absolute;
  color: #000000;
  display: block;
  left: 244px;
  top: 80px;
  font-size: 36px;
}
@media screen and (max-width: 767px) {
  .site-marker {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .site-marker {
    line-height: 36px;
  }
}
@media (min-width: 992px) {
  .site-marker {
    font-size: 34px;
    color: #000000;
    left: 244px;
    display: block;
    top: 58px;
  }
}
@media (min-width: 1200px) {
  .site-marker {
    font-size: 44px;
    top: 50px;
    left: 244px;
  }
}
/**
	  * @toc 1.15.2
	  * @name Sitemarker Breadcrumb
	  * @slug sitemarker-breadcrumb
	  * @description
	  * @submodule true
	  * @container true
	  * @gridclass col-sm-12
	  * @markup
	<em>See <a href="#module-Header">2.1 Header</a></em>
		*/
/*------------------------------------------------------------------
[1.5.1 Site Marker Breadcrumb]
*/
.site-marker-breadcrumb {
  position: absolute;
  font-size: 12px;
}
@media screen and (max-width: 767px) {
  .site-marker-breadcrumb {
    display: none;
  }
}
@media (min-width: 768px), print {
  .site-marker-breadcrumb {
    top: 70px;
    left: 244px;
  }
}
@media (min-width: 992px) {
  .site-marker-breadcrumb {
    top: 47px;
    left: 246px;
  }
}
@media (min-width: 1200px) {
  .site-marker-breadcrumb {
    top: 39px;
    left: 246px;
  }
}
.site-marker-breadcrumb li:last-child:after {
  display: none;
}
/*------------------------------------------------------------------
[2.0 CONTENT AREA]
*/
.snap-content {
  background: #fff;
}
@media (min-width: 768px) {
  .subsite-home .masthead {
    display: none;
  }
}
/*------------------------------------------------------------------
[2.1 Sidebar]
*/
.sidebar {
  background: #f4f4f4;
  padding-top: 30px !important;
  border-top: 8px solid #0067cd;
  /* when sidebar needs to be pushed down on desktop */
}
.sidebar.plain {
  background: transparent;
}
@media (min-width: 768px) {
  .sidebar {
    background: transparent;
    padding-top: 0 !important;
    border: none;
  }
}
.sidebar.last-row {
  padding-bottom: 20px !important;
  margin-bottom: -20px;
}
.sidebar.mtg {
  margin-top: 0 !important;
}
@media (min-width: 768px) {
  .sidebar.mtg {
    margin-top: 50px !important;
  }
}
/** Adds top-padding to sidebar when used alongside .column-features. See About Eaton page for example */
@media (min-width: 768px) {
  .column-features-container + .sidebar {
    padding-top: 45px !important;
  }
}
@media (min-width: 768px) {
  .column-features-container + .sidebar .panel-heading {
    padding-bottom: 15px !important;
  }
}
@media (min-width: 768px) {
  .column-features-container + .sidebar .panel-title {
    font-size: 23px;
  }
}
@media (min-width: 992px) {
  .column-features-container + .sidebar .panel-title {
    font-size: 28px;
  }
}
.align-to-panel {
  padding-top: 43px;
}
/*------------------------------------------------------------------
[2.2 Side navigation]
*/
.side-navigation {
  background: #e6e6e5;
}
.side-navigation:before,
.side-navigation:after {
  content: " ";
  display: table;
}
.side-navigation:after {
  clear: both;
}
.side-navigation:before,
.side-navigation:after {
  content: " ";
  display: table;
}
.side-navigation:after {
  clear: both;
}
@media (max-width: 767px) {
  .side-navigation {
    margin-top: 20px !important;
  }
}
.side-navigation-headers {
  padding-left: 0;
  list-style: none;
  margin-bottom: 0 !important;
}
.side-navigation-header {
  border-bottom: 1px solid #b1b5b8;
  position: relative;
  text-decoration: none;
}
.side-navigation-header .header-name {
  display: block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  padding: 15px;
  margin: 0 auto;
  letter-spacing: 0;
  color: #0067cd;
}
@media (min-width: 768px) {
  .side-navigation-header .header-name {
    font-size: 15px;
  }
}
.side-navigation-header .header-icon {
  position: absolute;
  top: 14px;
  right: 15px;
  font-size: 1.5em;
  height: 40px;
  text-decoration: none;
  -webkit-transition: right 0.2s ease-in-out;
  -o-transition: right 0.2s ease-in-out;
  transition: right 0.2s ease-in-out;
  display: block;
}
.side-navigation-list {
  background-color: #0067cd;
}
.side-navigation-list ul,
.side-navigation-list ol {
  padding-left: 0;
  list-style: none;
  padding-bottom: 5px;
}
.side-navigation-list > ul > li > a {
  font-size: 18px;
  border-bottom: 1px solid #183f6e;
  font-weight: bold;
  padding: 15px;
  display: block;
  text-decoration: none;
  position: relative;
  -webkit-box-shadow: inset 0 -2px 2px 0 rgba(0, 61, 110, 0.2);
  box-shadow: inset 0 -2px 2px 0 rgba(0, 61, 110, 0.2);
  color: #fff;
}
.side-navigation-list > ul > li > a:hover,
.side-navigation-list > ul > li > a:focus {
  text-decoration: none;
}
.side-navigation-list > ul > li > a.selected a {
  cursor: default;
}
.side-navigation-list > ul > li > a.selected:before {
  content: '';
  display: block;
  position: absolute;
  height: 100%;
  left: -15px;
  top: 0;
  border-left: 6px solid #0067cd;
}
@media (min-width: 768px) {
  .side-navigation-list > ul > li > a {
    font-size: 15px;
  }
}
.side-navigation-list > ul > li > a a {
  color: #fff;
}
.side-navigation-list > ul > li > a a,
.side-navigation-list > ul > li > a a:hover,
.side-navigation-list > ul > li > a a:focus {
  text-decoration: none;
}
.side-navigation-list > ul > li > a[aria-expanded="true"] .icon-Add:before {
  content: "\e601";
}
.side-navigation-list > ul > li .item-name {
  display: block;
  margin-right: 30px;
}
.side-navigation-list > ul > li .item-icon {
  position: absolute;
  top: 50%;
  right: 15px;
  font-size: 1.5em;
  height: 40px;
  text-decoration: none;
  -webkit-transition: right 0.2s ease-in-out;
  -o-transition: right 0.2s ease-in-out;
  transition: right 0.2s ease-in-out;
  -webkit-transform: translate(0, -25%);
  -ms-transform: translate(0, -25%);
  -o-transform: translate(0, -25%);
  transform: translate(0, -25%);
  display: block;
}
.lt-ie9 .side-navigation-list > ul > li .item-icon {
  top: 28%;
}
.side-navigation-list > ul > li.selected > a,
.side-navigation-list > ul > li.active > a {
  background: #003d6e;
}
.side-navigation-sublist {
  display: none;
  background: #363636;
  color: #fff;
}
.side-navigation-sublist ul,
.side-navigation-sublist ol {
  padding-left: 0;
  list-style: none;
  padding-bottom: 5px;
  margin: 0 15px;
}
.side-navigation-sublist li:last-child a {
  border-bottom: none;
}
.side-navigation-sublist > ul > li {
  color: #fff;
  font-size: 18px;
  border-bottom: 1px solid #183f6e;
  font-weight: bold;
  padding: 15px;
  display: block;
  text-decoration: none;
  position: relative;
  -webkit-box-shadow: inset 0 -2px 2px 0 rgba(0, 61, 110, 0.2);
  box-shadow: inset 0 -2px 2px 0 rgba(0, 61, 110, 0.2);
  padding: 15px 0;
  border-color: #636c71;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-weight: normal;
}
.side-navigation-sublist > ul > li:hover,
.side-navigation-sublist > ul > li:focus {
  text-decoration: none;
}
.side-navigation-sublist > ul > li.selected a {
  cursor: default;
}
.side-navigation-sublist > ul > li.selected:before {
  content: '';
  display: block;
  position: absolute;
  height: 100%;
  left: -15px;
  top: 0;
  border-left: 6px solid #0067cd;
}
@media (min-width: 768px) {
  .side-navigation-sublist > ul > li {
    font-size: 15px;
  }
}
.side-navigation-sublist > ul > li a {
  color: #fff;
}
.side-navigation-sublist > ul > li a,
.side-navigation-sublist > ul > li a:hover,
.side-navigation-sublist > ul > li a:focus {
  text-decoration: none;
}
/*------------------------------------------------------------------
[Back to top]
*/
.back-to-top {
  display: none;
  position: fixed;
  bottom: 0;
  right: 15px;
  width: 60px;
  height: 54px;
  background: #0067cd;
  z-index: 1000;
}
.back-to-top a {
  display: block;
  width: 60px;
  height: 60px;
  text-align: center;
  text-decoration: none;
}
.back-to-top .icon-chevron-up {
  font-size: 36px;
  color: #4dc3f6;
}
.back-to-top .icon-chevron-up:before {
  line-height: 50px;
}
.snap-open .back-to-top {
  display: none !important;
}
.jump-to-top {
  display: none !important;
}
.is_stuck .jump-to-top {
  display: block !important;
}
/*------------------------------------------------------------------
[2.2.3 Section navigation]
*/
@media (min-width: 768px) {
  .section-nav {
    border-top: 1px solid #b1b5b8;
    padding-top: 0 !important;
    margin-right: -15px;
    padding-right: 15px;
  }
}
.section-nav.is_stuck {
  border-top: none;
}
.section-nav-header {
  font-weight: bold;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}
@media (min-width: 768px) {
  .section-nav-header {
    display: none;
  }
}
.section-nav-list {
  padding-left: 0;
  list-style: none;
}
.section-nav-list li,
.section-nav-list a {
  display: block;
}
.section-nav-list a {
  background: #e6e6e5;
  border-bottom: 1px solid #b1b5b8;
  font-weight: bold;
  color: 16px;
  padding: 8px 10px;
  cursor: pointer;
}
.section-nav-list li.selected a {
  background: #0067cd;
  color: #fff;
}
/*------------------------------------------------------------------
[2.3 Section]
*/
/**
  * @toc 2.2
  * @name Section
  * @slug section
  * @description Sections are used to divide pages up into rows of content.
*/
/**
  * @toc 2.2.1
  * @name Section - default variant
  * @slug section-default
  * @description
  * @submodule true
  * @container true
  * @gridclass col-sm-12
  * @description Using section with the .default class automatically adds padding on top and bottom to provide visual separation for rows of content.
  * @markup
<section class="default">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget feugiat purus. Nullam congue dictum tortor, in consequat nulla gravida non. Pellentesque dapibus, lectus eget pellentesque eleifend, eros turpis rhoncus odio, imperdiet hendrerit elit libero sit amet lorem. Sed mollis, ipsum ut euismod ullamcorper, ipsum eros bibendum odio, vel rhoncus purus mi eu risus. Sed velit dolor, congue vitae venenatis vel, luctus iaculis lorem. Fusce commodo, leo sit amet mattis tristique, leo mi luctus orci, ac cursus massa arcu non neque. Donec placerat placerat nunc sed elementum. Aenean porttitor sapien ut lectus eleifend at tempor urna semper. Pellentesque metus tortor, tincidunt id ultricies a, venenatis a mi. Vestibulum quis ligula tellus, quis dictum nibh. Proin volutpat vulputate tortor nec sagittis.</p>
				<section class="table-blocks alternating-colors in-grid-column">
					<section>
						<div class="row table-block-row">
							<div class="col-sm-12">
								<div class="centered-content">
									<h2 class="table-block-header" >R&amp;D 100 award from R&amp;D magazine</h2>
									<p>Eaton LifeSense has received the prestigious R&D 100 Award from R&D Magazine. Selected by an independent panel of experts from a strong field of nominations Eaton LifeSense joins the ranks of other breakthrough technologies that have been recognized as the most technologically significant products within a given year. <a href="#">Learn more</a></p>
								</div>
							</div>
						</div>
					</section>

					<section class="shaded">
						<div class="row table-block-row">
							<div class="col-sm-12">
								<div class="centered-content">
									<h2 class="table-block-header" >Gold King award</h2>
									<p>LifeSense hose continues to be recognized as a game-changing, new technology. The latest evidence is a Gold King Award as &quot;one of industry&rsquo;s best new products of the year&quot; in the fluid/pneumatic power category of the annual King Awards competition conducted by New Equipment Digest Magazine. The King Awards, named after the magazine&rsquo;s long-time chief editor Bob King, were established to recognize superior industrial product innovation. <a href="#">Learn more</a></p>
								</div>
							</div>
						</div>
					</section>
				</section>
			</div>
		</div>
	</div>
</section>
*/
/**
  * @toc 2.2.2
  * @name Section with top divider
  * @slug section-top-divider
  * @description
  * @submodule true
  * @container true
  * @gridclass col-sm-12
  * @description Using section with the .top-divider class adds a thin blue top border
  * @markup
<section class="top-divider">
	<div class="container">
		<div class="row pvg">
			<div class="col-xs-12 col-xsl-6 col-sm-4 block-cta" data-mh="block-cta">
				<div class="block-cta-content">
					<a href="#">
						<h3 class="block-cta-title">Upstream</h3>
					</a>
					<p class="block-cta-copy" data-mh="block-content">The trend to reduce personnel in hazardous locations is driven by several factors, including physical risks, shortage of expertise and rising costs. Additionally, costs of offshore drilling platforms are heavily influenced by weight. These risks increase your reliance on proven partners who can help you grow your bottom line.</p>
				</div>
			</div>
			<div class="col-xs-12 col-xsl-6 col-sm-4 block-cta" data-mh="block-cta">
				<div class="block-cta-content">
					<a href="#">
						<h3 class="block-cta-title">Midstream</h3>
					</a>
					<p class="block-cta-copy" data-mh="block-content">An increased focus on midstream is fueling the use of ever larger vessels and the need to ensure asset integrity in aging pipelines. Tougher environmental scrutiny applied to pipeline certifications and increasing safety concerns with road and rail distribution call for comprehensive safety, control and monitoring solutions.</p>
				</div>
			</div>
			<div class="col-xs-12 col-xsl-6 col-sm-4 block-cta" data-mh="block-cta">
				<div class="block-cta-content">
					<a href="#">
						<h2 class="block-cta-title">Downstream</h2>
					</a>
					<p class="block-cta-copy" data-mh="block-content">We understand your need to upgrade aging refineries and bring new technology on-line to process changing crudes, while decreasing downtime. We also know that upgrades are impacted by difficult approvals driven by an ever changing regulatory environment.</p>
				</div>
			</div>
		</div>
	</div>
</section>
*/
/**
  * @toc 2.2.3
  * @name Section with bold top divider
  * @slug section-top-divider-bold
  * @description
  * @submodule true
  * @container true
  * @gridclass col-sm-12
  * @description Using section with the .top-divider-bold class adds a thick blue top border
  * @markup
<section class="top-divider-bold">
	<div class="features divided">
		<div class="container">
			<div class="row">
				<div class="col-sm-6 col-md-4 feature">
					<div class="feature-content" data-mh="feature-content">
						<h2 class="feature-title" data-mh="feature-title">Why Eaton?</h2>
						<p class="feature-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
					</div>
					<p class="feature-cta">
						<a href="#" class="btn btn-primary">Why Eaton?</a>
					</p>

					<a class="feature-mobile-cta" href="#">
						<span class="feature-mobile-cta-title">Why Eaton?</span>
						<span class="feature-mobile-cta-icon icon-chevron-right"></span>
					</a>
				</div>
				<!-- /.col-sm-6 col-md-4 .feature -->

				<div class="col-sm-6 col-md-4 feature">
					<div class="feature-content" data-mh="feature-content">
						<h2 class="feature-title" data-mh="feature-title">Career opportunities</h2>
						<p class="feature-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
					</div>

					<p class="feature-cta">
						<a href="#" class="btn btn-primary">Career opportunities</a>
					</p>

					<a class="feature-mobile-cta" href="#">
						<span class="feature-mobile-cta-title">Career opportunities</span>
						<span class="feature-mobile-cta-icon icon-chevron-right"></span>
					</a>
				</div>
				<!-- /.col-sm-6 col-md-4 .feature -->

				<div class="col-sm-6 col-md-4 feature">
					<div class="feature-content" data-mh="feature-content">
						<h2 class="feature-title" data-mh="feature-title">Check your application status</h2>
						<p class="feature-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
					</div>

					<p class="feature-cta">
						<a href="#" class="btn btn-primary">Check your application status</a>
					</p>

					<a class="feature-mobile-cta" href="#">
						<span class="feature-mobile-cta-title">Application status</span>
						<span class="feature-mobile-cta-icon icon-chevron-right"></span>
					</a>
				</div>
				<!-- /.col-sm-6 col-md-4 .feature -->

			</div>
			<!-- /.row -->

			<!-- /.row .features-btns -->
		</div>
		<!-- /.container .features --></div>

</section>
*/
section.default {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}
@media (min-width: 768px) and (max-width: 1440px) {
  section.default {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }
}
@media (min-width: 1441px) {
  section.default {
      
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
}

section.top-divider {
  border-top: 4px solid #0067cd;
}
section.top-divider-bold {
  border-top: 8px solid #0067cd;
}
.bottom-divider,
.bottom-divider-light {
  border-bottom: 1px solid #b1b5b8;
  margin-bottom: 20px !important;
  padding-bottom: 20px !important;
}
.bottom-divider-light {
  border-color: #e6e6e5;
}
/*------------------------------------------------------------------
[3.0 FOOTER]
*/
/**
  * @toc 2.3
  * @name Footer
  * @slug footer
  * @description Site footer
  *
  * @markup
 <footer>
	<div class="container">
		<div class="row">
			<div class="col-sm-8">
				<p class="footer-title">Eaton.com</p>

				<div class="highlight-element">
					<span class="label label-default">.footer-nav1</span>
					<ul class="footer-nav1">
						<li><a href="#">Products &amp; Solutions</a></li>
						<li><a href="#">Careers</a></li>
						<li><a href="#">About Eaton</a></li>
						<li><a href="#">News</a></li>
						<li><a href="#">Investor Relations</a></li>
						<li><a href="#">Contact</a></li>
						<li><a href="#">Login</a></li>
					</ul>
				</div>
				<!-- /.footer-nav1 -->
			</div>
			<!-- /.col-md-8 .footer-top-left -->


			<div class="col-sm-4 highlight-element">
				<span class="label label-default">Social List</span>
				<p class="footer-title">Connect With Us</p>

				<ul class="social-icons">
					<li><a href="#" target="_blank"><img src="/img/logo/linkedin-logo.png" alt="LinkedIn logo"></a></li>
					<li><a href="#" target="_blank"><img src="/img/logo/twitter-logo.png" alt="Twitter logo"></a></li>
					<li><a href="#" target="_blank"><img src="/img/logo/youtube-logo.png" alt="YouTube logo"></a></li>
					<li><a href="#" target="_blank"><img src="/img/logo/facebook-logo.png" alt="Facebook logo"></a>
					</li>
				</ul>
				<!-- /.social-icons -->

			</div>
			<!-- /.col-md-4 .footer-top-right -->

		</div>
		<!-- /.row .row1 -->


		<div class="row">
			<div class="col-sm-8 highlight-element">
				<span class="label label-default">.footer-nav2</span>
				<ul class="footer-nav2">
					<li><a href="#">Privacy, Cookies, &amp; Data Protection Policy</a></li>
					<li><a href="#">Terms &amp; Conditions</a></li>
					<li><a href="#">Sitemap</a></li>
					<li><a href="#">Policy to Combat Slavery and Human Trafficking</a></li>
					<li><a href="#">Trademarks</a></li>
				</ul>
				<!-- /.footer-nav2 -->
			</div>
			<!-- /.col-md-9 -->

			<div class="col-sm-4 copyright">
				<p>&copy; 2015 Eaton. All Right Reserved.</p>
			</div>
			<!-- /.col-md-3 copyright -->

		</div>
		<!-- /.row .row2 -->

	</div>
	<!-- /.container -->
</footer>
  */
footer {
  font-size: 11px;
  background: #000000;
  border-top: 1px solid #383838;
  padding: 20px 0 0 0;
  color:#bebfbf;
}
.footer-top-left {
  padding-right: 70px;
}
.footer-title {
  color: #bebfbf;
  font-weight: bold;
  text-transform: uppercase;
  padding-bottom: 5px;
  margin-bottom: 15px;
 /* border-bottom: 1px solid #b1b5b8;*/
}
/*------------------------------------------------------------------
[3.1 Footer nav 1]
[3.2 Footer nav 2]
*/
.footer-nav1,
.footer-nav2 {
  padding-left: 0;
  list-style: none;
  margin-left: -5px;
  margin: 0 0 20px;
}
.footer-nav1 > li,
.footer-nav2 > li {
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
}
.footer-nav1 li,
.footer-nav2 li {
  font-weight: bold;
  margin: 0 8px 5px 0;
  padding: 0 8px 0 0;
  border-right: 1px solid #b1b5b8;
}
.footer-nav1 li:last-child,
.footer-nav2 li:last-child {
  border: none;
  padding-right: 0;
}
.footer-nav2 a {
  color: #636c71;
}
/*------------------------------------------------------------------
[3.3 Social icons]
*/
.social-icons {
  padding-left: 0;
  list-style: none;
  margin-left: -5px;
  margin-bottom: 20px;
}
.social-icons > li {
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
}
.social-icons img {
  max-width: 47.5px;
}
@media screen and (min-width: 768px) {
  .social-icons img {
    max-width: 30px;
  }
}
.social-icons li {
  display: inline;
  padding-left: 8px;
  padding-right: 8px;
}
.social-icons li:first-child {
  padding-left: 0;
}
.social-icons li:last-child {
  padding-right: 0;
}
/**
  * @toc 3.0
  * @name Third-party components
  * @slug third-party-components
  * @description This section contains UI elements provided by third parties for the mobile menu, carousels, and form element styling.
  */
/**
  * @toc 3.1
  * @name Snap.js mobile menus
  * @slug snap-js-mobile-menus
  * @container true
  * @gridclass col-xs-12
  * @description Snap.js is used to implement the pull-out mobile menus on the site. See http://jakiestfu.github.io/Snap.js/ for documentation and see <a href="/docs/Eaton navigation modules with names.pdf">Eaton navigation modules</a> for an illustration of the sub-components of mobile and desktop navigation menus.
  */
/**
  * 1.0 Core styles
  */
html,
body {
  margin: 0;
  padding: 0;
  background: #363636;
}
.snap-drawers {
  display: none;
}
.snap-content {
  overflow-x: hidden;
}
.snap-enabled html,
.snap-enabled body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}
.snap-enabled .snap-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  z-index: 2;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.snap-enabled .snap-drawers {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
}
.snap-drawer {
  position: absolute;
  top: 0;
  right: auto;
  bottom: 0;
  left: auto;
  width: 275px;
  height: auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-transition: width 0.3s ease;
  -o-transition: width 0.3s ease;
  transition: width 0.3s ease;
}
.snap-drawer-left {
  left: 0;
  z-index: 1;
}
.snap-drawer-right {
  right: 0;
  z-index: 1;
}
.snapjs-left .snap-drawer-right,
.snapjs-right .snap-drawer-left {
  display: none;
}
.snapjs-expand-left .snap-drawer-left,
.snapjs-expand-right .snap-drawer-right {
  width: 100%;
}
/**
  * 2.0 Site-specific Customizations
  */
.snap-content {
  background: #000;
 /* border-left: 1px solid #424a52;*/
}
.snap-menu {
  background: #363636;
  position: absolute;
  width: 275px;
  height: 100%;
  z-index: 1;
  border-right: 1px solid #b1b5b8;
  will-change: auto;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transform: translate(-100px, 0);
  -ms-transform: translate(-100px, 0);
  -o-transform: translate(-100px, 0);
  transform: translate(-100px, 0);
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.snap-open .snap-menu {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}
.snap-content {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Chrome and Safari */
  -moz-backface-visibility: hidden;
  /* Firefox */
  -ms-backface-visibility: hidden;
  /* Internet Explorer 10+ */
}
.snap-enabled .snap-content {
  top: 0;
}
.snap-open .snap-content {
  overflow: hidden;
  pointer-events: none;
}
.snap-enabled .header-top .snap-content,
.snap-enabled .fixed-header .snap-content {
  top: 70px;
}
body.snap-open {
  position: fixed;
}
/* Slider */
.slick-slider {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.hero-carousel-wrap .slick-slider {
  margin-bottom: 0;
}
.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
}
.slick-track:before,
.slick-track:after {
  display: table;
  content: '';
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}
.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
  padding: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.hero-carousel .slick-slide {
  margin: 0;
  padding: 0;
  position: relative;
}
[dir='rtl'] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}
/*------------------------------------------------------------------
[Slick Theme]
*/
/* Slider */
.slick-loading .slick-list {
  background: #ffffff url('ajax-loader.gif') center center no-repeat;
}
/* Arrows */
.slick-prev,
.slick-next {
  font-size: 40px;
  line-height: 0;
  position: absolute;
  display: block;
  bottom: 25px;
  top: auto;
  width: 35px;
  height: 35px;
  margin-top: -10px;
  padding: 0;
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
}
.lt-ie9 .slick-prev,
.lt-ie9 .slick-next {
  font-size: 0 !important;
}
.hero-carousel-wrap .slick-prev,
.hero-carousel-wrap .slick-next {
  bottom: 20px;
  margin-top: -23px;
  width: 42px;
  height: 42px;
}
@media (min-width: 768px) {
  .slick-prev,
  .slick-next {
    top: 30px;
    bottom: auto;
  }
  .hero-carousel-wrap .slick-prev,
  .hero-carousel-wrap .slick-next {
    top: auto;
    bottom: 20px;
    margin-top: -23px;
    width: 42px;
    height: 42px;
  }
}
.carousel-wrap.compact .slick-prev,
.carousel-wrap.compact .slick-next {
  top: 50%;
  margin-top: -18px;
}
@media (min-width: 768px) {
  .carousel-wrap.compact .slick-prev,
  .carousel-wrap.compact .slick-next {
    top: 50%;
  }
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  color: transparent;
  outline: none;
  background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
  opacity: 1;
  filter: alpha(opacity=100);
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: 0.5;
  filter: alpha(opacity=50);
  color: #b1b5b8;
}
.hero-carousel-wrap .slick-prev.slick-disabled:before,
.hero-carousel-wrap .slick-next.slick-disabled:before {
  color: #f4f4f4;
}
.slick-prev:before,
.slick-next:before {
  font-family: 'icomoon';
  font-size: 30px;
  line-height: 1;
  opacity: 0.75;
  filter: alpha(opacity=75);
  color: #0067cd;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.hero-carousel-wrap .slick-prev:before,
.hero-carousel-wrap .slick-next:before {
  font-size: 40px;
  color: #ffffff;
}
.slick-prev {
  right: auto;
  left: 10px;
}
.hero-carousel-wrap .slick-prev {
  left: auto;
  right: 50px;
}
@media (min-width: 768px) {
  .slick-prev {
    right: 50px;
    left: auto;
  }
}
.carousel-wrap.compact .slick-prev {
  left: 0;
}
@media (min-width: 768px) {
  .carousel-wrap.compact .slick-prev {
    left: 0;
    right: auto;
  }
}
[dir='rtl'] .slick-prev {
  right: auto;
  left: 10px;
}
@media (min-width: 768px) {
  [dir='rtl'] .slick-prev {
    right: 50px;
    left: auto;
  }
}
.slick-prev:before {
  content: "\e623";
  font-family: "icomoon";
}
.hero-carousel-wrap .slick-prev:before {
  color: #ffffff;
}
[dir='rtl'] .slick-prev:before {
  content: "\e622";
  font-family: "icomoon";
}
.slick-next {
  right: 10px;
}
.hero-carousel-wrap .slick-next {
  right: 10px;
}
.carousel-wrap.compact .slick-next {
  right: 0;
}
[dir='rtl'] .slick-next {
  right: 10px;
}
.slick-next:before {
  content: "\e622";
}
.hero-carousel-wrap .slick-next:before {
  color: #ffffff;
}
[dir='rtl'] .slick-next:before {
  content: "\e623";
}
.hero-carousel-wrap [dir='rtl'] .slick-next:before {
  color: #ffffff;
}
/* Dots */
.slick-slider {
  margin-bottom: 30px;
}
.carousel-wrap.compact .slick-slider {
  margin-bottom: 0;
}
.slick-dots {
  position: absolute;
  bottom: -45px;
  display: block;
  width: 100%;
  padding: 0;
  list-style: none;
  text-align: center;
}
.hero-carousel-wrap .slick-dots {
  bottom: -15px;
}
.slick-dots li {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}
.slick-dots li button {
  font-size: 0px;
  line-height: 0;
  display: block;
  width: 15px;
  height: 15px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus {
  outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
  opacity: 1;
  filter: alpha(opacity=100);
  color: #b1b5b8;
}
.slick-dots li button:before {
  line-height: 20px;
  content: '•';
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  display: block;
  background: #ffffff;
  text-align: center;
  border: 1px solid #b1b5b8;
  opacity: 0.5;
  filter: alpha(opacity=50);
  color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
  content: '\2022';
  opacity: 0.75;
  filter: alpha(opacity=75);
  background: #0067cd;
  border: 1px solid #0067cd;
}
.controls {
  position: relative;
  bottom: 0;
}
/*!
 * Polyfill CSS object-fit
 * http://helloanselm.com/object-fit
 *
 * @author: Anselm Hannemann <hello@anselm-hannemann.com>
 * @author: Christian "Schepp" Schaefer <schaepp@gmx.de>
 * @version: 0.3.4
 *
 */
x-object-fit {
  position: relative !important;
  display: inline-block !important;
}
x-object-fit > .x-object-fit-taller,
x-object-fit > .x-object-fit-wider {
  position: absolute !important;
  left: -100% !important;
  right: -100% !important;
  top: -100% !important;
  bottom: -100% !important;
  margin: auto !important;
}
.x-object-fit-none > .x-object-fit-taller,
.x-object-fit-none > .x-object-fit-wider {
  width: auto !important;
  height: auto !important;
}
.x-object-fit-fill > .x-object-fit-taller,
.x-object-fit-fill > .x-object-fit-wider {
  width: 100% !important;
  height: 100% !important;
}
.x-object-fit-contain > .x-object-fit-taller {
  width: auto !important;
  height: 100% !important;
}
.x-object-fit-contain > .x-object-fit-wider {
  width: 100% !important;
  height: auto !important;
}
.x-object-fit-cover > .x-object-fit-taller,
.x-object-fit-cover > .x-object-fit-wider {
  max-width: none !important;
  max-height: none !important;
}
.x-object-fit-cover > .x-object-fit-taller {
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
}
.x-object-fit-cover > .x-object-fit-wider {
  width: auto !important;
  height: 100% !important;
  max-width: none !important;
}
.x-object-position-top > .x-object-fit-taller,
.x-object-position-top > .x-object-fit-wider {
  top: 0 !important;
  bottom: auto !important;
}
.x-object-position-right > .x-object-fit-taller,
.x-object-position-right > .x-object-fit-wider {
  left: auto !important;
  right: 0 !important;
}
.x-object-position-bottom > .x-object-fit-taller,
.x-object-position-bottom > .x-object-fit-wider {
  top: auto !important;
  bottom: 0 !important;
}
.x-object-position-left > .x-object-fit-taller,
.x-object-position-left > .x-object-fit-wider {
  left: 0 !important;
  right: auto !important;
}
/**
  * @toc 3.3
  * @name Chosen form element library
  * @slug chosen-form-element-library
  * @container true
  * @gridclass col-xs-12
  * @description Chosen is a UI library used to enhance some form elements. See http://harvesthq.github.io/chosen/ for more information.
  */
/*!
Chosen, a Select Box Enhancer for jQuery and Prototype
by Patrick Filler for Harvest, http://getharvest.com

Version 1.4.1
Full source at https://github.com/harvesthq/chosen
Copyright (c) 2011-2015 Harvest http://getharvest.com

MIT License, https://github.com/harvesthq/chosen/blob/master/LICENSE.md
This file is generated by `grunt build`, do not edit it by hand.
*/
/* @group Base */
.chosen-container {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  font-size: 13px;
  zoom: 1;
  *display: inline;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.chosen-container * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.chosen-container .chosen-drop {
  position: absolute;
  top: 100%;
  left: -9999px;
  z-index: 1010;
  width: 100%;
  border: 1px solid #e6e6e5;
  border-top: 0;
  background: #fff;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
}
.chosen-container.chosen-with-drop .chosen-drop {
  left: 0;
}
.chosen-container a {
  cursor: pointer;
}
.chosen-container .search-choice .group-name,
.chosen-container .chosen-single .group-name {
  margin-right: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: normal;
  color: #999999;
}
.chosen-container .search-choice .group-name:after,
.chosen-container .chosen-single .group-name:after {
  content: ":";
  padding-left: 2px;
  vertical-align: top;
}
/* @end */
/* @group Single Chosen */
.chosen-container-single .chosen-single {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0 0 0 8px;
  height: 32px;
  border: 1px solid #e6e6e5;
  /* border-radius: 5px; */
  background-color: #fff;
  /* background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #ffffff), color-stop(50%, #f6f6f6), color-stop(52%, #eeeeee), color-stop(100%, #f4f4f4));
  background: -webkit-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
  background: -moz-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
  background: -o-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
  background: linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%); */
  background-clip: padding-box;
  /* box-shadow: 0 0 3px white inset, 0 1px 1px rgba(0, 0, 0, 0.1); */
  color: #444;
  text-decoration: none;
  white-space: nowrap;
  line-height: 32px;
}
.chosen-container-single .chosen-default {
  color: #999;
}
.chosen-container-single .chosen-single span {
  display: block;
  overflow: hidden;
  margin-right: 26px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chosen-container-single .chosen-single-with-deselect span {
  margin-right: 38px;
}
.chosen-container-single .chosen-single abbr {
  position: absolute;
  top: 6px;
  right: 26px;
  display: block;
  width: 12px;
  height: 12px;
  background: url(../img/sprites/chosen-sprite.png) -42px 1px no-repeat;
  font-size: 1px;
}
.chosen-container-single .chosen-single abbr:hover {
  background-position: -42px -10px;
}
.chosen-container-single.chosen-disabled .chosen-single abbr:hover {
  background-position: -42px -10px;
}
.chosen-container-single .chosen-single div {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 18px;
  height: 100%;
}
.chosen-container-single .chosen-single div b {
  display: block;
  width: 100%;
  height: 100%;
  background: url(../img/sprites/chosen-sprite.png) no-repeat 0px 5px;
}
.chosen-container-single .chosen-search {
  position: relative;
  z-index: 1010;
  margin: 0;
  padding: 3px 4px;
  white-space: nowrap;
}
.chosen-container-single .chosen-search input[type="text"] {
  margin: 1px 0;
  padding: 4px 20px 4px 5px;
  width: 100%;
  height: auto;
  outline: 0;
  border: 1px solid #e6e6e5;
  background: white url(../img/sprites/chosen-sprite.png) no-repeat 100% -20px;
  background: url(../img/sprites/chosen-sprite.png) no-repeat 100% -20px;
  font-size: 1em;
  font-family: sans-serif;
  line-height: normal;
  border-radius: 0;
}
.chosen-container-single .chosen-drop {
  margin-top: -1px;
  /* border-radius: 0 0 4px 4px; */
  background-clip: padding-box;
}
.chosen-container-single.chosen-container-single-nosearch .chosen-search {
  position: absolute;
  left: -9999px;
}
/* @end */
/* @group Results */
.chosen-container .chosen-results {
  color: #444;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0 4px 4px 0;
  padding: 0 0 0 4px;
  max-height: 240px;
  -webkit-overflow-scrolling: touch;
}
.chosen-container .chosen-results li {
  display: none;
  margin: 0;
  padding: 5px 6px;
  list-style: none;
  line-height: 15px;
  word-wrap: break-word;
  -webkit-touch-callout: none;
}
.chosen-container .chosen-results li.active-result {
  display: list-item;
  cursor: pointer;
}
.chosen-container .chosen-results li.disabled-result {
  display: list-item;
  color: #ccc;
  cursor: default;
}
.chosen-container .chosen-results li.highlighted {
  background-color: #3875d7;
  /* background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #3875d7), color-stop(90%, #2a62bc));
  background-image: -webkit-linear-gradient(#3875d7 20%, #2a62bc 90%);
  background-image: -moz-linear-gradient(#3875d7 20%, #2a62bc 90%);
  background-image: -o-linear-gradient(#3875d7 20%, #2a62bc 90%);
  background-image: linear-gradient(#3875d7 20%, #2a62bc 90%); */
  color: #fff;
}
.chosen-container .chosen-results li.no-results {
  color: #777;
  display: list-item;
  background: #f4f4f4;
}
.chosen-container .chosen-results li.group-result {
  display: list-item;
  font-weight: bold;
  cursor: default;
}
.chosen-container .chosen-results li.group-option {
  padding-left: 15px;
}
.chosen-container .chosen-results li em {
  font-style: normal;
  text-decoration: underline;
}
/* @end */
/* @group Multi Chosen */
.chosen-container-multi .chosen-choices {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0 5px;
  width: 100%;
  height: auto !important;
  height: 1%;
  border: 1px solid #e6e6e5;
  background-color: #fff;
  /* background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
  background-image: -webkit-linear-gradient(#eeeeee 1%, #ffffff 15%);
  background-image: -moz-linear-gradient(#eeeeee 1%, #ffffff 15%);
  background-image: -o-linear-gradient(#eeeeee 1%, #ffffff 15%);
  background-image: linear-gradient(#eeeeee 1%, #ffffff 15%); */
  cursor: text;
}
.chosen-container-multi .chosen-choices li {
  float: left;
  list-style: none;
}
.chosen-container-multi .chosen-choices li.search-field {
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
  margin: 1px 0;
  padding: 0;
  height: 32px;
  outline: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none;
  color: #999;
  font-size: 100%;
  font-family: sans-serif;
  line-height: normal;
  border-radius: 0;
}
.chosen-container-multi .chosen-choices li.search-choice {
  position: relative;
  margin: 3px 5px 3px 0;
  padding: 3px 20px 3px 5px;
  border: 1px solid #e6e6e5;
  max-width: 100%;
  /* border-radius: 3px; */
  background-color: #eeeeee;
  /* background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
  background-image: -webkit-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
  background-image: -moz-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
  background-image: -o-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
  background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); */
  background-size: 100% 19px;
  background-repeat: repeat-x;
  background-clip: padding-box;
  box-shadow: 0 0 2px white inset, 0 1px 0 rgba(0, 0, 0, 0.05);
  color: #333;
  line-height: 13px;
  cursor: default;
}
.chosen-container-multi .chosen-choices li.search-choice span {
  word-wrap: break-word;
}
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
  position: absolute;
  top: 4px;
  right: 3px;
  display: block;
  width: 12px;
  height: 12px;
  background: url(../img/sprites/chosen-sprite.png) -42px 1px no-repeat;
  font-size: 1px;
}
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
  background-position: -42px -10px;
}
.chosen-container-multi .chosen-choices li.search-choice-disabled {
  padding-right: 5px;
  border: 1px solid #ccc;
  background-color: #e4e4e4;
  /* background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
  background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
  background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
  background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
  background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); */
  color: #666;
}
.chosen-container-multi .chosen-choices li.search-choice-focus {
  background: #d4d4d4;
}
.chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close {
  background-position: -42px -10px;
}
.chosen-container-multi .chosen-results {
  margin: 0;
  padding: 0;
}
.chosen-container-multi .chosen-drop .result-selected {
  display: list-item;
  color: #ccc;
  cursor: default;
}
/* @end */
/* @group Active  */
.chosen-container-active .chosen-single {
  border: 1px solid #5897fb;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.chosen-container-active.chosen-with-drop .chosen-single {
  border: 1px solid #e6e6e5;
  -moz-border-radius-bottomright: 0;
  border-bottom-right-radius: 0;
  -moz-border-radius-bottomleft: 0;
  border-bottom-left-radius: 0;
  /* background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #eeeeee), color-stop(80%, #ffffff));
  background-image: -webkit-linear-gradient(#eeeeee 20%, #ffffff 80%);
  background-image: -moz-linear-gradient(#eeeeee 20%, #ffffff 80%);
  background-image: -o-linear-gradient(#eeeeee 20%, #ffffff 80%);
  background-image: linear-gradient(#eeeeee 20%, #ffffff 80%); */
  box-shadow: 0 1px 0 #fff inset;
}
.chosen-container-active.chosen-with-drop .chosen-single div {
  border-left: none;
  background: transparent;
}
.chosen-container-active.chosen-with-drop .chosen-single div b {
  background-position: -18px 2px;
}
.chosen-container-active .chosen-choices {
  border: 1px solid #5897fb;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.chosen-container-active .chosen-choices li.search-field input[type="text"] {
  color: #222 !important;
}
/* @end */
/* @group Disabled Support */
.chosen-disabled {
  opacity: 0.5 !important;
  cursor: default;
}
.chosen-disabled .chosen-single {
  cursor: default;
}
.chosen-disabled .chosen-choices .search-choice .search-choice-close {
  cursor: default;
}
/* @end */
/* @group Right to Left */
.chosen-rtl {
  text-align: right;
}
.chosen-rtl .chosen-single {
  overflow: visible;
  padding: 0 8px 0 0;
}
.chosen-rtl .chosen-single span {
  margin-right: 0;
  margin-left: 26px;
  direction: rtl;
}
.chosen-rtl .chosen-single-with-deselect span {
  margin-left: 38px;
}
.chosen-rtl .chosen-single div {
  right: auto;
  left: 3px;
}
.chosen-rtl .chosen-single abbr {
  right: auto;
  left: 26px;
}
.chosen-rtl .chosen-choices li {
  float: right;
}
.chosen-rtl .chosen-choices li.search-field input[type="text"] {
  direction: rtl;
}
.chosen-rtl .chosen-choices li.search-choice {
  margin: 3px 5px 3px 0;
  padding: 3px 5px 3px 19px;
}
.chosen-rtl .chosen-choices li.search-choice .search-choice-close {
  right: auto;
  left: 4px;
}
.chosen-rtl.chosen-container-single-nosearch .chosen-search,
.chosen-rtl .chosen-drop {
  left: 9999px;
}
.chosen-rtl.chosen-container-single .chosen-results {
  margin: 0 0 4px 4px;
  padding: 0 4px 0 0;
}
.chosen-rtl .chosen-results li.group-option {
  padding-right: 15px;
  padding-left: 0;
}
.chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div {
  border-right: none;
}
.chosen-rtl .chosen-search input[type="text"] {
  padding: 4px 5px 4px 20px;
  background: white url(../img/sprites/chosen-sprite.png) no-repeat -30px -20px;
  background: url(../img/sprites/chosen-sprite.png) no-repeat -30px -20px;
  direction: rtl;
}
.chosen-rtl.chosen-container-single .chosen-single div b {
  background-position: 6px 2px;
}
.chosen-rtl.chosen-container-single.chosen-with-drop .chosen-single div b {
  background-position: -12px 2px;
}
/* @end */
/* @group Retina compatibility */
/* @end */
/**
  * @toc 3.4
  * @name jsTree
  * @slug jstree
  * @container true
  * @gridclass col-xs-12
  * @description jsTree is a UI library used to implement the tree view used in filtering. See http://www.jstree.com/ for documentation.
  */
/* jsTree default theme */
.jstree-node,
.jstree-children,
.jstree-container-ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style-type: none;
  list-style-image: none;
}
ul#category_0 {
  padding-top: 0;
  padding-bottom: 5px;
}
.jstree-children {
  padding-top: 10px;
}
.jstree-anchor {
  display: inline-block;
  color: black;
  padding: 0 4px 0 1px;
  margin: 0;
  vertical-align: top;
  padding-right: 55px;
}
@media (min-width: 768px) {
  .jstree-anchor {
    padding-right: 0;
    padding-top: 10px;
    font-weight: bold;
  }
  .jstree-anchor[data-parentid] {
    padding-top: 0;
    font-weight: normal;
  }
}
.jstree-anchor:focus {
  outline: 0;
}
.jstree-anchor,
.jstree-anchor:link,
.jstree-anchor:visited,
.jstree-anchor:hover,
.jstree-anchor:active {
  text-decoration: none;
  color: inherit;
}
.jstree-icon {
  display: inline-block;
  text-decoration: none;
  margin: 0;
  padding: 0;
  vertical-align: top;
  text-align: center;
}
.jstree-icon:empty {
  display: inline-block;
  text-decoration: none;
  margin: 0;
  padding: 0;
  vertical-align: top;
  text-align: center;
}
.jstree-ocl {
  cursor: pointer;
}
.jstree-leaf > .jstree-ocl {
  cursor: default;
}
.jstree .jstree-open > .jstree-children {
  display: block;
}
.jstree .jstree-closed > .jstree-children,
.jstree .jstree-leaf > .jstree-children {
  display: none;
}
.jstree-anchor > .jstree-themeicon {
  margin-right: 2px;
}
.jstree-no-icons .jstree-themeicon,
.jstree-anchor > .jstree-themeicon-hidden {
  display: none;
}
.jstree-rtl .jstree-anchor {
  padding: 0 1px 0 4px;
}
.jstree-rtl .jstree-anchor > .jstree-themeicon {
  margin-left: 2px;
  margin-right: 0;
}
.jstree-rtl .jstree-node {
  margin-left: 0;
}
.jstree-rtl .jstree-container-ul > .jstree-node {
  margin-right: 0;
}
.jstree-wholerow-ul {
  position: relative;
  display: inline-block;
  min-width: 100%;
}
.jstree-wholerow-ul .jstree-leaf > .jstree-ocl {
  cursor: pointer;
}
.jstree-wholerow-ul .jstree-anchor,
.jstree-wholerow-ul .jstree-icon {
  position: relative;
}
.jstree-wholerow-ul .jstree-wholerow {
  width: 100%;
  cursor: pointer;
  position: absolute;
  left: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.vakata-context {
  display: none;
}
.vakata-context,
.vakata-context ul {
  margin: 0;
  padding: 2px;
  position: absolute;
  background: #f5f5f5;
  border: 1px solid #979797;
  -moz-box-shadow: 5px 5px 4px -4px #666666;
  -webkit-box-shadow: 2px 2px 2px #999999;
  box-shadow: 2px 2px 2px #999999;
}
.vakata-context ul {
  list-style: none;
  left: 100%;
  margin-top: -2.7em;
  margin-left: -4px;
}
.vakata-context .vakata-context-right ul {
  left: auto;
  right: 100%;
  margin-left: auto;
  margin-right: -4px;
}
.vakata-context li {
  list-style: none;
  display: inline;
}
.vakata-context li > a {
  display: block;
  padding: 0 2em 0 2em;
  text-decoration: none;
  width: auto;
  color: black;
  white-space: nowrap;
  line-height: 2.4em;
  -moz-text-shadow: 1px 1px 0 white;
  -webkit-text-shadow: 1px 1px 0 white;
  text-shadow: 1px 1px 0 white;
  -moz-border-radius: 1px;
  -webkit-border-radius: 1px;
  border-radius: 1px;
}
.vakata-context li > a:hover {
  position: relative;
  background-color: #e8eff7;
  -moz-box-shadow: 0 0 2px #0a6aa1;
  -webkit-box-shadow: 0 0 2px #0a6aa1;
  box-shadow: 0 0 2px #0a6aa1;
}
.vakata-context li > a.vakata-context-parent {
  background-image: url("data:image/gif;base64,R0lGODlhCwAHAIAAACgoKP///yH5BAEAAAEALAAAAAALAAcAAAIORI4JlrqN1oMSnmmZDQUAOw==");
  background-position: right center;
  background-repeat: no-repeat;
}
.vakata-context li > a:focus {
  outline: 0;
}
.vakata-context .vakata-context-hover > a {
  position: relative;
  background-color: #e8eff7;
  -moz-box-shadow: 0 0 2px #0a6aa1;
  -webkit-box-shadow: 0 0 2px #0a6aa1;
  box-shadow: 0 0 2px #0a6aa1;
}
.vakata-context .vakata-context-separator a,
.vakata-context .vakata-context-separator a:hover {
  background: white;
  border: 0;
  border-top: 1px solid #e2e3e3;
  height: 1px;
  min-height: 1px;
  max-height: 1px;
  padding: 0;
  margin: 0 0 0 2.4em;
  border-left: 1px solid #e0e0e0;
  -moz-text-shadow: 0 0 0 transparent;
  -webkit-text-shadow: 0 0 0 transparent;
  text-shadow: 0 0 0 transparent;
  -moz-box-shadow: 0 0 0 transparent;
  -webkit-box-shadow: 0 0 0 transparent;
  box-shadow: 0 0 0 transparent;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
}
.vakata-context .vakata-contextmenu-disabled a,
.vakata-context .vakata-contextmenu-disabled a:hover {
  color: silver;
  background-color: transparent;
  border: 0;
  box-shadow: 0 0 0;
}
.vakata-context li > a > i {
  text-decoration: none;
  display: inline-block;
  width: 2.4em;
  height: 2.4em;
  background: transparent;
  margin: 0 0 0 -2em;
  vertical-align: top;
  text-align: center;
  line-height: 2.4em;
}
.vakata-context li > a > i:empty {
  width: 2.4em;
  line-height: 2.4em;
}
.vakata-context li > a .vakata-contextmenu-sep {
  display: inline-block;
  width: 1px;
  height: 2.4em;
  background: white;
  margin: 0 0.5em 0 0;
  border-left: 1px solid #e2e3e3;
}
.vakata-context .vakata-contextmenu-shortcut {
  font-size: 0.8em;
  color: silver;
  opacity: 0.5;
  display: none;
}
.vakata-context-rtl ul {
  left: auto;
  right: 100%;
  margin-left: auto;
  margin-right: -4px;
}
.vakata-context-rtl li > a.vakata-context-parent {
  background-image: url("data:image/gif;base64,R0lGODlhCwAHAIAAACgoKP///yH5BAEAAAEALAAAAAALAAcAAAINjI+AC7rWHIsPtmoxLAA7");
  background-position: left center;
  background-repeat: no-repeat;
}
.vakata-context-rtl .vakata-context-separator > a {
  margin: 0 2.4em 0 0;
  border-left: 0;
  border-right: 1px solid #e2e3e3;
}
.vakata-context-rtl .vakata-context-left ul {
  right: auto;
  left: 100%;
  margin-left: -4px;
  margin-right: auto;
}
.vakata-context-rtl li > a > i {
  margin: 0 -2em 0 0;
}
.vakata-context-rtl li > a .vakata-contextmenu-sep {
  margin: 0 0 0 0.5em;
  border-left-color: white;
  background: #e2e3e3;
}
#jstree-marker {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  border-right: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid;
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
}
#jstree-dnd {
  line-height: 16px;
  margin: 0;
  padding: 4px;
}
#jstree-dnd .jstree-icon,
#jstree-dnd .jstree-copy {
  display: inline-block;
  text-decoration: none;
  margin: 0 2px 0 0;
  padding: 0;
  width: 16px;
  height: 16px;
}
#jstree-dnd .jstree-ok {
  background: green;
}
#jstree-dnd .jstree-er {
  background: red;
}
#jstree-dnd .jstree-copy {
  margin: 0 2px 0 2px;
}
.jstree-default .jstree-node,
.jstree-default .jstree-icon {
  background-repeat: no-repeat;
  background-color: transparent;
}
.jstree-default .jstree-anchor,
.jstree-default .jstree-wholerow {
  transition: background-color 0.15s, box-shadow 0.15s;
}
.jstree-default .jstree-hovered {
  color: #183f6e;
  text-decoration: underline;
}
.jstree-default .jstree-hovered.jstree-anchor {
  color: #183f6e;
}
.jstree-default .jstree-clicked {
  font-weight: bold;
}
.jstree-default .jstree-no-icons .jstree-anchor > .jstree-themeicon {
  display: none;
}
.jstree-default .jstree-disabled {
  background: transparent;
  color: #666;
}
.jstree-default .jstree-anchor.jstree-disabled {
  cursor: default;
  color: #a8c3e1;
}
.jstree-default .jstree-disabled.jstree-hovered {
  background: transparent;
  box-shadow: none;
}
.jstree-default .jstree-disabled.jstree-clicked {
  background: #efefef;
}
.jstree-default .jstree-disabled > .jstree-icon {
  opacity: 0.8;
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'jstree-grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#jstree-grayscale");
  /* Firefox 10+ */
  filter: gray;
  /* IE6-9 */
  /*-webkit-filter: grayscale(100%);*/
  /* Chrome 19+ & Safari 6+ */
}
.jstree-default .jstree-search {
  font-style: italic;
  color: #8b0000;
  font-weight: bold;
}
.jstree-default .jstree-no-checkboxes .jstree-checkbox {
  display: none !important;
}
.jstree-default.jstree-checkbox-no-clicked .jstree-clicked {
  background: transparent;
  box-shadow: none;
}
.jstree-default.jstree-checkbox-no-clicked .jstree-clicked.jstree-hovered {
  background: #e7f4f9;
}
.jstree-default.jstree-checkbox-no-clicked > .jstree-wholerow-ul .jstree-wholerow-clicked {
  background: transparent;
}
.jstree-default.jstree-checkbox-no-clicked > .jstree-wholerow-ul .jstree-wholerow-clicked.jstree-wholerow-hovered {
  background: #e7f4f9;
}
#jstree-dnd.jstree-default .jstree-ok,
#jstree-dnd.jstree-default .jstree-er {
  background-repeat: no-repeat;
  background-color: transparent;
}
#jstree-dnd.jstree-default i {
  background: transparent;
  width: 16px;
  height: 16px;
}
#jstree-dnd.jstree-default .jstree-ok {
  background-position: -9px -71px;
}
#jstree-dnd.jstree-default .jstree-er {
  background-position: -39px -71px;
}
.jstree-default > .jstree-striped {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAMAAAB/qqA+AAAABlBMVEUAAAAAAAClZ7nPAAAAAnRSTlMNAMM9s3UAAAAXSURBVHjajcEBAQAAAIKg/H/aCQZ70AUBjAATb6YPDgAAAABJRU5ErkJggg==") left top repeat;
}
.jstree-default > .jstree-wholerow-ul .jstree-hovered,
.jstree-default > .jstree-wholerow-ul .jstree-clicked {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.jstree-default .jstree-wholerow {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.jstree-default .jstree-wholerow-hovered {
  background: #e7f4f9;
}
.jstree-default .jstree-wholerow-clicked {
  background: #beebff;
  background: -moz-linear-gradient(top, #beebff 0%, #a8e4ff 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #beebff), color-stop(100%, #a8e4ff));
  background: -webkit-linear-gradient(top, #beebff 0%, #a8e4ff 100%);
  background: -o-linear-gradient(top, #beebff 0%, #a8e4ff 100%);
  background: -ms-linear-gradient(top, #beebff 0%, #a8e4ff 100%);
  background: linear-gradient(to bottom, #beebff 0%, #a8e4ff 100%);
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@color1', endColorstr='@color2',GradientType=0 );*/
}
.jstree-default .jstree-node {
  min-height: 24px;
  line-height: 14px;
  margin-left: 24px;
  min-width: 24px;
}
@media (min-width: 768px) {
  .jstree-default .jstree-node {
    margin-left: 0;
  }
}
.jstree-default .jstree-anchor {
  line-height: 24px;
  color: #0067cd;
}
@media (min-width: 768px) {
  .jstree-default .jstree-anchor {
    line-height: 18px;
  }
}
.jstree-default .jstree-icon {
  width: 24px;
  height: 24px;
  line-height: 24px;
}
.jstree-default .jstree-icon:empty {
  width: 24px;
  height: 24px;
  line-height: 24px;
}
.jstree-default.jstree-rtl .jstree-node {
  margin-right: 24px;
}
.jstree-default .jstree-wholerow {
  height: 24px;
}
.jstree-default .jstree-node {
  background-position: -292px -4px;
  background-repeat: repeat-y;
}
.jstree-default .jstree-last {
  background: transparent;
}
.jstree-default .jstree-open > .jstree-ocl {
  background-position: -132px -4px;
}
.jstree-default .jstree-closed > .jstree-ocl {
  background-position: -100px -4px;
}
.jstree-default .jstree-leaf > .jstree-ocl {
  background-position: -68px -4px;
}
.jstree-default .jstree-themeicon {
  background-position: -260px -4px;
}
.jstree-default > .jstree-no-dots .jstree-node,
.jstree-default > .jstree-no-dots .jstree-leaf > .jstree-ocl {
  background: transparent;
}
.jstree-default > .jstree-no-dots .jstree-open > .jstree-ocl {
  background-position: -36px -4px;
}
.jstree-default > .jstree-no-dots .jstree-closed > .jstree-ocl {
  background-position: -4px -4px;
}
.jstree-default .jstree-disabled {
  background: transparent;
}
.jstree-default .jstree-disabled.jstree-hovered {
  background: transparent;
}
.jstree-default .jstree-disabled.jstree-clicked {
  background: #efefef;
}
.jstree-default .jstree-checkbox {
  background-position: -164px -4px;
}
.jstree-default .jstree-checkbox:hover {
  background-position: -164px -36px;
}
.jstree-default .jstree-clicked > .jstree-checkbox {
  background-position: -228px -4px;
}
.jstree-default .jstree-clicked > .jstree-checkbox:hover {
  background-position: -228px -36px;
}
.jstree-default .jstree-anchor > .jstree-undetermined {
  background-position: -196px -4px;
}
.jstree-default .jstree-anchor > .jstree-undetermined:hover {
  background-position: -196px -36px;
}
.jstree-default > .jstree-striped {
  background-size: auto 48px;
}
.jstree-default.jstree-rtl .jstree-node {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==");
  background-position: 100% 1px;
  background-repeat: repeat-y;
}
.jstree-default.jstree-rtl .jstree-last {
  background: transparent;
}
.jstree-default.jstree-rtl .jstree-open > .jstree-ocl {
  background-position: -132px -36px;
}
.jstree-default.jstree-rtl .jstree-closed > .jstree-ocl {
  background-position: -100px -36px;
}
.jstree-default.jstree-rtl .jstree-leaf > .jstree-ocl {
  background-position: -68px -36px;
}
.jstree-default.jstree-rtl > .jstree-no-dots .jstree-node,
.jstree-default.jstree-rtl > .jstree-no-dots .jstree-leaf > .jstree-ocl {
  background: transparent;
}
.jstree-default.jstree-rtl > .jstree-no-dots .jstree-open > .jstree-ocl {
  background-position: -36px -36px;
}
.jstree-default.jstree-rtl > .jstree-no-dots .jstree-closed > .jstree-ocl {
  background-position: -4px -36px;
}
.jstree-default .jstree-themeicon-custom {
  background-color: transparent;
  background-image: none;
  background-position: 0 0;
}
.jstree-default > .jstree-container-ul .jstree-loading > .jstree-ocl {
  background-position: center center;
  background-repeat: no-repeat;
}
.jstree-default .jstree-file {
  background-position: -100px -68px;
  background-repeat: no-repeat;
}
.jstree-default .jstree-folder {
  background-position: -260px -4px;
  background-repeat: no-repeat;
}
.jstree-default.jstree-rtl .jstree-node {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==");
}
.jstree-default.jstree-rtl .jstree-last {
  background: transparent;
}
.jstree-default-small .jstree-node {
  min-height: 18px;
  line-height: 18px;
  margin-left: 18px;
  min-width: 18px;
}
.jstree-default-small .jstree-anchor {
  line-height: 18px;
  height: 18px;
}
.jstree-default-small .jstree-icon {
  width: 18px;
  height: 18px;
  line-height: 18px;
}
.jstree-default-small .jstree-icon:empty {
  width: 18px;
  height: 18px;
  line-height: 18px;
}
.jstree-default-small.jstree-rtl .jstree-node {
  margin-right: 18px;
}
.jstree-default-small .jstree-wholerow {
  height: 18px;
}
.jstree-default-small .jstree-node {
  background-position: -295px -7px;
  background-repeat: repeat-y;
}
.jstree-default-small .jstree-last {
  background: transparent;
}
.jstree-default-small .jstree-open > .jstree-ocl {
  background-position: -135px -7px;
}
.jstree-default-small .jstree-closed > .jstree-ocl {
  background-position: -103px -7px;
}
.jstree-default-small .jstree-leaf > .jstree-ocl {
  background-position: -71px -7px;
}
.jstree-default-small .jstree-themeicon {
  background-position: -263px -7px;
}
.jstree-default-small > .jstree-no-dots .jstree-node,
.jstree-default-small > .jstree-no-dots .jstree-leaf > .jstree-ocl {
  background: transparent;
}
.jstree-default-small > .jstree-no-dots .jstree-open > .jstree-ocl {
  background-position: -39px -7px;
}
.jstree-default-small > .jstree-no-dots .jstree-closed > .jstree-ocl {
  background-position: -7px -7px;
}
.jstree-default-small .jstree-disabled {
  background: transparent;
}
.jstree-default-small .jstree-disabled.jstree-hovered {
  background: transparent;
}
.jstree-default-small .jstree-disabled.jstree-clicked {
  background: #efefef;
}
.jstree-default-small .jstree-checkbox {
  background-position: -167px -7px;
}
.jstree-default-small .jstree-checkbox:hover {
  background-position: -167px -39px;
}
.jstree-default-small .jstree-clicked > .jstree-checkbox {
  background-position: -231px -7px;
}
.jstree-default-small .jstree-clicked > .jstree-checkbox:hover {
  background-position: -231px -39px;
}
.jstree-default-small .jstree-anchor > .jstree-undetermined {
  background-position: -199px -7px;
}
.jstree-default-small .jstree-anchor > .jstree-undetermined:hover {
  background-position: -199px -39px;
}
.jstree-default-small > .jstree-striped {
  background-size: auto 36px;
}
.jstree-default-small.jstree-rtl .jstree-node {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==");
  background-position: 100% 1px;
  background-repeat: repeat-y;
}
.jstree-default-small.jstree-rtl .jstree-last {
  background: transparent;
}
.jstree-default-small.jstree-rtl .jstree-open > .jstree-ocl {
  background-position: -135px -39px;
}
.jstree-default-small.jstree-rtl .jstree-closed > .jstree-ocl {
  background-position: -103px -39px;
}
.jstree-default-small.jstree-rtl .jstree-leaf > .jstree-ocl {
  background-position: -71px -39px;
}
.jstree-default-small.jstree-rtl > .jstree-no-dots .jstree-node,
.jstree-default-small.jstree-rtl > .jstree-no-dots .jstree-leaf > .jstree-ocl {
  background: transparent;
}
.jstree-default-small.jstree-rtl > .jstree-no-dots .jstree-open > .jstree-ocl {
  background-position: -39px -39px;
}
.jstree-default-small.jstree-rtl > .jstree-no-dots .jstree-closed > .jstree-ocl {
  background-position: -7px -39px;
}
.jstree-default-small .jstree-themeicon-custom {
  background-color: transparent;
  background-image: none;
  background-position: 0 0;
}
.jstree-default-small > .jstree-container-ul .jstree-loading > .jstree-ocl {
  background-position: center center;
  background-repeat: no-repeat;
}
.jstree-default-small .jstree-file {
  background-position: -103px -71px;
  background-repeat: no-repeat;
}
.jstree-default-small .jstree-folder {
  background-position: -263px -7px;
  background-repeat: no-repeat;
}
.jstree-default-small.jstree-rtl .jstree-node {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAACAQMAAABv1h6PAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMHBgAAiABBI4gz9AAAAABJRU5ErkJggg==");
}
.jstree-default-small.jstree-rtl .jstree-last {
  background: transparent;
}
.jstree-default-large .jstree-node {
  min-height: 32px;
  line-height: 32px;
  margin-left: 32px;
  min-width: 32px;
}
.jstree-default-large .jstree-anchor {
  line-height: 32px;
  height: 32px;
}
.jstree-default-large .jstree-icon {
  width: 32px;
  height: 32px;
  line-height: 32px;
}
.jstree-default-large .jstree-icon:empty {
  width: 32px;
  height: 32px;
  line-height: 32px;
}
.jstree-default-large.jstree-rtl .jstree-node {
  margin-right: 32px;
}
.jstree-default-large .jstree-wholerow {
  height: 32px;
}
.jstree-default-large .jstree-node {
  background-position: -288px 0px;
  background-repeat: repeat-y;
}
.jstree-default-large .jstree-last {
  background: transparent;
}
.jstree-default-large .jstree-open > .jstree-ocl {
  background-position: -128px 0px;
}
.jstree-default-large .jstree-closed > .jstree-ocl {
  background-position: -96px 0px;
}
.jstree-default-large .jstree-leaf > .jstree-ocl {
  background-position: -64px 0px;
}
.jstree-default-large .jstree-themeicon {
  background-position: -256px 0px;
}
.jstree-default-large > .jstree-no-dots .jstree-node,
.jstree-default-large > .jstree-no-dots .jstree-leaf > .jstree-ocl {
  background: transparent;
}
.jstree-default-large > .jstree-no-dots .jstree-open > .jstree-ocl {
  background-position: -32px 0px;
}
.jstree-default-large > .jstree-no-dots .jstree-closed > .jstree-ocl {
  background-position: 0px 0px;
}
.jstree-default-large .jstree-disabled {
  background: transparent;
}
.jstree-default-large .jstree-disabled.jstree-hovered {
  background: transparent;
}
.jstree-default-large .jstree-disabled.jstree-clicked {
  background: #efefef;
}
.jstree-default-large .jstree-checkbox {
  background-position: -160px 0px;
}
.jstree-default-large .jstree-checkbox:hover {
  background-position: -160px -32px;
}
.jstree-default-large .jstree-clicked > .jstree-checkbox {
  background-position: -224px 0px;
}
.jstree-default-large .jstree-clicked > .jstree-checkbox:hover {
  background-position: -224px -32px;
}
.jstree-default-large .jstree-anchor > .jstree-undetermined {
  background-position: -192px 0px;
}
.jstree-default-large .jstree-anchor > .jstree-undetermined:hover {
  background-position: -192px -32px;
}
.jstree-default-large > .jstree-striped {
  background-size: auto 64px;
}
.jstree-default-large.jstree-rtl .jstree-node {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==");
  background-position: 100% 1px;
  background-repeat: repeat-y;
}
.jstree-default-large.jstree-rtl .jstree-last {
  background: transparent;
}
.jstree-default-large.jstree-rtl .jstree-open > .jstree-ocl {
  background-position: -128px -32px;
}
.jstree-default-large.jstree-rtl .jstree-closed > .jstree-ocl {
  background-position: -96px -32px;
}
.jstree-default-large.jstree-rtl .jstree-leaf > .jstree-ocl {
  background-position: -64px -32px;
}
.jstree-default-large.jstree-rtl > .jstree-no-dots .jstree-node,
.jstree-default-large.jstree-rtl > .jstree-no-dots .jstree-leaf > .jstree-ocl {
  background: transparent;
}
.jstree-default-large.jstree-rtl > .jstree-no-dots .jstree-open > .jstree-ocl {
  background-position: -32px -32px;
}
.jstree-default-large.jstree-rtl > .jstree-no-dots .jstree-closed > .jstree-ocl {
  background-position: 0px -32px;
}
.jstree-default-large .jstree-themeicon-custom {
  background-color: transparent;
  background-image: none;
  background-position: 0 0;
}
.jstree-default-large.jstree-rtl .jstree-node {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAACAQMAAAAD0EyKAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjgIIGBgABCgCBvVLXcAAAAABJRU5ErkJggg==");
}
.jstree-default-large.jstree-rtl .jstree-last {
  background: transparent;
}
/*
@media (max-width: 768px) {
	.jstree-default-responsive {
		.jstree-open > .jstree-ocl,
		.jstree-closed > .jstree-ocl { border-radius:20px; background-color:white; }
	}

	.jstree-default-responsive .jstree-icon {
		background-image: url("40px.png");
	}

	.jstree-default-responsive .jstree-node,
	.jstree-default-responsive .jstree-leaf > .jstree-ocl {
		background: transparent;
	}

	.jstree-default-responsive .jstree-node {
		min-height: 40px;
		line-height: 40px;
		margin-left: 40px;
		min-width: 40px;
		white-space: nowrap;
	}

	.jstree-default-responsive .jstree-anchor {
		line-height: 40px;
		height: 40px;
	}

	.jstree-default-responsive .jstree-icon,
	.jstree-default-responsive .jstree-icon:empty {
		width: 40px;
		height: 40px;
		line-height: 40px;
	}

	.jstree-default-responsive > .jstree-container-ul > .jstree-node {
		margin-left: 0;
	}

	.jstree-default-responsive.jstree-rtl .jstree-node {
		margin-left: 0;
		margin-right: 40px;
	}

	.jstree-default-responsive.jstree-rtl .jstree-container-ul > .jstree-node {
		margin-right: 0;
	}

	.jstree-default-responsive .jstree-ocl,
	.jstree-default-responsive .jstree-themeicon,
	.jstree-default-responsive .jstree-checkbox {
		background-size: 120px 200px;
	}

	.jstree-default-responsive .jstree-leaf > .jstree-ocl {
		background: transparent;
	}

	.jstree-default-responsive .jstree-open > .jstree-ocl {
		background-position: 0 0px !important;
	}

	.jstree-default-responsive .jstree-closed > .jstree-ocl {
		background-position: 0 -40px !important;
	}

	.jstree-default-responsive.jstree-rtl .jstree-closed > .jstree-ocl {
		background-position: -40px 0px !important;
	}

	.jstree-default-responsive .jstree-themeicon {
		background-position: -40px -40px;
	}

	.jstree-default-responsive .jstree-checkbox,
	.jstree-default-responsive .jstree-checkbox:hover {
		background-position: -40px -80px;
	}

	.jstree-default-responsive .jstree-clicked > .jstree-checkbox,
	.jstree-default-responsive .jstree-clicked > .jstree-checkbox:hover {
		background-position: 0 -80px;
	}

	.jstree-default-responsive .jstree-anchor > .jstree-undetermined,
	.jstree-default-responsive .jstree-anchor > .jstree-undetermined:hover {
		background-position: 0 -120px;
	}

	.jstree-default-responsive .jstree-anchor {
		font-weight: bold;
		font-size: 1.1em;
		text-shadow: 1px 1px white;
	}

	.jstree-default-responsive > .jstree-striped {
		background: transparent;
	}

	.jstree-default-responsive .jstree-wholerow {
		border-top: 1px solid rgba(255, 255, 255, 0.7);
		border-bottom: 1px solid rgba(64, 64, 64, 0.2);
		background: #ebebeb;
		height: 40px;
	}

	.jstree-default-responsive .jstree-wholerow-hovered {
		background: #e7f4f9;
	}

	.jstree-default-responsive .jstree-wholerow-clicked {
		background: #beebff;
	}

	.jstree-default-responsive .jstree-children .jstree-last > .jstree-wholerow {
		box-shadow: inset 0 -6px 3px -5px #666666;
	}

	.jstree-default-responsive .jstree-children .jstree-open > .jstree-wholerow {
		box-shadow: inset 0 6px 3px -5px #666666;
		border-top: 0;
	}

	.jstree-default-responsive .jstree-children .jstree-open + .jstree-open {
		box-shadow: none;
	}

	.jstree-default-responsive .jstree-node,
	.jstree-default-responsive .jstree-icon,
	.jstree-default-responsive .jstree-node > .jstree-ocl,
	.jstree-default-responsive .jstree-themeicon,
	.jstree-default-responsive .jstree-checkbox {
		background-image: url("40px.png");
		background-size: 120px 200px;
	}

	.jstree-default-responsive .jstree-node {
		background-position: -80px 0;
		background-repeat: repeat-y;
	}

	.jstree-default-responsive .jstree-last {
		background: transparent;
	}

	.jstree-default-responsive .jstree-leaf > .jstree-ocl {
		background-position: -40px -120px;
	}

	.jstree-default-responsive .jstree-last > .jstree-ocl {
		background-position: -40px -160px;
	}

	.jstree-default-responsive .jstree-themeicon-custom {
		background-color: transparent;
		background-image: none;
		background-position: 0 0;
	}

	.jstree-default-responsive .jstree-file {
		background: url("40px.png") 0 -160px no-repeat;
		background-size: 120px 200px;
	}

	.jstree-default-responsive .jstree-folder {
		background: url("40px.png") -40px -40px no-repeat;
		background-size: 120px 200px;
	}
}
*/
.jstree-default > .jstree-container-ul > .jstree-node {
  margin-left: 0;
  margin-right: 0;
}
.tree-root > ul {
  padding-left: 0;
  list-style: none;
  margin: 0;
}
.tree-root > ul > li {
  font-weight: bold;
  padding: 15px 0;
  border-bottom: 1px solid #b1b5b8;
}
.tree-root.jstree > ul {
  margin-left: 20px;
}
/*------------------------------------------------------------------
[4.0 Site modules]
*/
/**
  * @name Modules
  * @description This section contains modules &ndash; complex, styled UI elements.
  * @toc 4.0
  */
/*
 * Expandable-list structure:
 * div.expand-list
 *		div.expand-list-header
 *			h2.expand-list-header-name
 *			a.expand-list-header-icon
 *		ul.expand-list-list
 *			li.expand-list-item
 *				a.expand-list-item-link
 *					.expand-list-item-name
 *					.expand-list-item-icon
 *
 * Variations include:
 * expand-list-dark - dark gray background
 * expand-list-l1 - blue background, white text
 *		expand-list-l1-item
 * expand-list-l2 - gray background, white text, indented
 *		expand-list-l2-item - no box-shadow
 */
/**
  * @toc 4.15
  * @name Showcase
  * @slug showcase
  * @description The showcase module is used like a mini-hero to call attention to special features or related content. They should be used sparingly.
  * @container true
  * @gridclass col-sm-8
  * @markup
<div class="showcase">
	<img src="../img/graphics/showcase/oilrig.jpg"/>

	<div class="overlay">
		<div class="content-wrap">
			<h2>Virtual Oil Rig</h2>
			<p>Use the virtual oil rig to learn more about the wide range of products Eaton offers the oil and gas industry.</p>
			<a href="#" class="btn btn-primary">Learn more</a>
		</div>
	</div>
</div>
*/
.showcase {
  border: 1px solid #f4f4f4;
  overflow: hidden;
  position: relative;
}
.showcase img {
  position: relative;
  left: 50%;
  right: 50%;
  min-height: 285px;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
.lt-ie9 .showcase img {
  left: 0;
}
.showcase .content-wrap {
  height: 100%;
}
@media (min-width: 768px) {
  .showcase .centered-content {
    position: absolute;
    padding-right: 20px !important;
  }
}
.showcase .overlay {
  background: rgba(0, 103, 205, 0.8);
  position: absolute;
  vertical-align: middle;
  bottom: 0;
  left: 0;
  right: 0;
  top: auto;
  padding: 20px;
}
.lt-ie9 .showcase .overlay {
  background: #005ab4;
}
@media (min-width: 768px) {
  .showcase .overlay {
    right: 0;
    top: 0;
    bottom: 0;
    left: auto;
    width: 55%;
    padding: 20px;
  }
}
@media (min-width: 992px) {
  .showcase .overlay {
    width: 45%;
  }
}
.showcase .overlay h2,
.showcase .overlay h3,
.showcase .overlay h4,
.showcase .overlay h5,
.showcase .overlay h6,
.showcase .overlay .h2,
.showcase .overlay .h3,
.showcase .overlay .h4,
.showcase .overlay .h5,
.showcase .overlay .h6 {
  color: #ffffff;
  margin-top: 0 !important;
}
.showcase .overlay p {
  color: #ffffff;
}
.showcase .overlay a:not(.btn) {
  color: #ffffff;
  font-weight: bold;
  text-decoration: underline;
}
.showcase .overlay a:not(.btn):after {
  content: "\e622";
  font-familY: 'icomoon';
  font-size: 9px;
  padding-left: 3px;
  display: inline-block;
}
.showcase .overlay a.btn {
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.lt-ie9 .showcase .overlay a.btn {
  border: 1px solid #4ea7ff;
}
@media (min-width: 768px) {
  .showcase .overlay a.btn {
    display: inline-block;
  }
}
/**
  * @toc 4.15.1
  * @name Showcase wide
  * @slug showcase-wide
  * @description This wider showcase variant allows for more text, but less of the underlying image is visible.
  * @container true
  * @gridclass col-sm-8
  * @markup
<div class="showcase-wide">
	<img src="../img/graphics/showcase/showcase-wide/savingscalculator.jpg"/>

	<div class="overlay">
		<div class="content-wrap">
			<h2>LED Savings Calculator</h2>
			<p>Calculate your potential savings using Crouse-Hinds LED luminaries versus traditional lamp sources.</p>
			<a href="#">Learn more</a>

		</div>
	</div>
</div>
*/
.showcase-wide {
  border: 1px solid #f4f4f4;
  overflow: hidden;
  position: relative;
}
.showcase-wide img {
  position: relative;
  left: 50%;
  right: 50%;
  min-height: 222px;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
.lt-ie9 .showcase-wide img {
  left: 0;
}
.showcase-wide .content-wrap {
  height: 100%;
}
@media (min-width: 768px) {
  .showcase-wide .centered-content {
    position: absolute;
    padding-right: 20px !important;
  }
}
.showcase-wide .overlay {
  background: rgba(0, 103, 205, 0.8);
  position: absolute;
  vertical-align: middle;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  padding: 20px;
}
.lt-ie9 .showcase-wide .overlay {
  background: #005ab4;
}
@media (min-width: 768px) {
  .showcase-wide .overlay {
    right: 0;
    top: 0;
    bottom: 0;
    left: auto;
    width: 80%;
    padding: 20px;
  }
}
.showcase-wide .overlay h2,
.showcase-wide .overlay h3,
.showcase-wide .overlay h4,
.showcase-wide .overlay h5,
.showcase-wide .overlay h6,
.showcase-wide .overlay .h2,
.showcase-wide .overlay .h3,
.showcase-wide .overlay .h4,
.showcase-wide .overlay .h5,
.showcase-wide .overlay .h6 {
  color: #ffffff;
  margin-top: 0 !important;
}
.showcase-wide .overlay p {
  color: #ffffff;
}
.lt-ie9 .showcase-wide .overlay a {
  color: #ffffff;
  font-weight: bold;
  text-decoration: underline;
}
.showcase-wide .overlay a:not(.btn) {
  color: #ffffff;
  font-weight: bold;
  text-decoration: underline;
  border-bottom: 0;
}
.showcase-wide .overlay a:not(.btn):after {
  content: "\e622";
  font-familY: 'icomoon';
  font-size: 9px;
  padding-left: 3px;
  display: inline-block;
}
.showcase-wide .overlay a.btn {
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
@media (min-width: 768px) {
  .showcase-wide .overlay a.btn {
    display: inline-block;
  }
}
/**
  * @toc 4.1
  * @name Search box
  * @slug search-box
  * @container true
  * @gridclass col-sm-6
  * @description The search box is a form element used on the homepage and in the global header.
  * @markup
<div class="search-box">
	<div class="input-group">
		<input type="text" class="form-control has-feedback has-feedback-left" placeholder="Enter Search Criteria">
		<span class="icon-search form-control-feedback" aria-hidden="true"></span>
		<span class="input-group-btn">
			<button type="submit" class="btn btn-primary">
				<i class="icon-chevron-right"></i>
			</button>
		</span>
		<span class="input-group-addon advanced-search hidden-xs">
			<a href="#">Advanced search</a>
		</span>
	</div>

	<a href="#" class="mobile-advanced-search visible-xs-block">Advanced search</a>
</div>
*/
.search-box {
  margin: 10px 0 20px;
}
.search-box .form-control {
  /* input field */
  border-right: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.header-search-panel .search-box {
  margin-top: 20px;
}
.advanced-search {
  background: transparent;
  border: none;
  padding: 0 0 0 10px;
}
@media (max-width: 767px) {
  .advanced-search {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .advanced-search {
    display: none !important;
  }
}
.header-search-panel .advanced-search {
  display: none !important;
  visibility: hidden !important;
}
.mobile-advanced-search {
  display: none !important;
  margin-top: 10px;
  text-align: right;
}
@media (max-width: 767px) {
  .mobile-advanced-search {
    display: block !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .mobile-advanced-search {
    display: block !important;
  }
}
.header-search-panel .mobile-advanced-search {
  display: block !important;
  visibility: visible !important;
}
.advanced-search-careers {
  margin-top: 5px;
}
/*------------------------------------------------------------------
[4.2 Hero Unit]
*/
/**
* @toc 4.2
* @name Hero
* @slug hero
* @description Hero images are used to display powerful, impactful page header elements or in-page image violators. Several variants of hero and text overlay are available. Text on hero images should be a maximum of 125 characters in length (if using a headline) or 225 characters (if text only) for best display on smaller screens. Hero headlines should be no more than 6-8 words long. Hero elements may host a single image, or they may use the HTML5 <code>&lt;picture&gt;</code> element to provide multiple images for different screen sizes. If picture is used, the Picturefill polyfill (http://scottjehl.github.io/picturefill/) is provided to support older browsers.
* @hidemarkup true
* @markup
*/
.hero {
  background: #b1b5b8;
  position: relative;
  min-height: 245px;
  /**
	* @toc 4.2.3
	* @submodule true
	* @name Variant with video
	* @slug variant-with-video
	* @description Hero image variant with space for an embedded video.
	* @markup
<div class="hero with-video">
	<!--(bake /src/web-standards/includes/picture.html imgType="hero" imgName="investors" alt="Investors")-->

	<div class="hero-overlay hero-overlay-bottom">
		<div class="hero-text">
			<div class="container">
				<div class="row">
					<div class="col-sm-12 col-md-6 col-md-push-6 video-box" data-mh="block-content">
						<div><img src="../img/graphics/investors/video-graphic.jpg" class="video-thumb"/></div>
					</div>
					<div class="col-sm-12 col-md-6 col-md-pull-6" data-mh="block-content">
						<p>Eaton reports fourth quarter operating EPS $1.27, Up 18%, record quarterly operating cash flow, record 2014 sales
						</p>
					</div>
				</div>
			</div>
		</div>

		<!-- /.container .hero-text -->
	</div>
	<!-- /.hero-overlay -->
</div>
	*/
  /**
	* @toc 4.2.1
	* @submodule true
	* @name Hero tall
	* @slug hero-tall
	* @description Hero image tall variant.
	* @markup

	<div class="hero tall">
		<!--(bake /src/web-standards/includes/picture.html imgName="powering-business-worldwide" imgType="hero" alt="Eaton: Powering Business Worldwide")-->

		<div class="hero-overlay hero-overlay-center">
			<div class="hero-text">
				<h1 class="hero-header">Powering business worldwide</h1>

				<p>Eaton solutions make electrical, hydraulic and mechanical power operate more efficiently, reliably, safely and sustainably.</p>
			</div>
		</div>
	</div>
	*/
  /*------------------------------------------------------------------
	[Tall hero variant]
	*/
  /**
	* @toc 4.2.2
	* @submodule true
	* @name Mobile .extra-tall variant
	* @slug hero-extra-tall
	* @description Hero image extra tall variant for mobile only (default height on desktop). This variant can be used when there is so much text that it overflows the image.
	* @markup

<div class="hero dark xtall xs-img-left sm-img-left has-toggle">
	<!--(bake /src/web-standards/includes/picture.html imgType="hero" imgName="products-electrical" alt="Eaton electrical products")-->

	<div class="container align-default">
		<div class="hero-overlay hero-overlay-default col-sm-push-3">
			<div class="hero-text">
				<h1 class="hero-header">Products</h1>
				<p class="text-small">Reliable, efficient and safe power when it&rsquo;s needed most.</p>

				<p class="hero-cta"><a href="#" class="btn btn-primary btn-wide">See all</a></p>
			</div>
		</div>
	</div>
</div>
	*/
}
.androidbrowser .hero {
  overflow: hidden;
}
.no-object-fit .hero picture {
  display: block;
  position: relative;
}
.gt-ie9 .no-object-fit .hero picture {
  right: 50%;
}
.no-object-fit .hero picture img {
  display: block;
  position: relative;
}
.gt-ie9 .no-object-fit .hero picture img {
  width: auto;
  right: -50%;
}
@media (max-width: 767px) {
  .gt-ie9 .no-object-fit .hero picture img {
    right: 25%;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .gt-ie9 .no-object-fit .hero picture img {
    right: -50%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .gt-ie9 .no-object-fit .hero picture img {
    right: -50%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .gt-ie9 .no-object-fit .hero picture img {
    right: -15%;
  }
}
@media (max-width: 767px) {
  .no-object-fit .hero .eat-carousel picture img {
    right: -50%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .gt-ie9 .no-object-fit .hero .eat-carousel picture img {
    right: -50%;
  }
}
.hero img {
  min-height: 245px;
  max-height: 245px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.object-fit .hero img {
  width: 100%;
  object-fit: cover;
}
.ie9 .hero img,
.lt-ie9 .hero img {
  width: 1024px;
  position: static;
}
@media (min-width: 768px) {
  .hero img {
    min-height: 350px;
    max-height: 350px;
  }
}
@media (min-width: 992px) {
  .hero img {
    min-height: 355px;
    max-height: 355px;
  }
}
.hero.with-video .video-box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.hero.with-video .video-box > div {
  position: absolute;
  bottom: 20px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: 0 4px 12px -12px rgba(0, 0, 0, 0.8);
  box-shadow: 0 4px 12px -12px rgba(0, 0, 0, 0.8);
}
@media (min-width: 992px) {
  .hero.with-video .video-box > div {
    left: auto;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    max-width: 555px;
  }
}
.hero.with-video .video-thumb {
  width: 100%;
  min-height: 0;
  max-height: none;
  min-width: 310px;
  max-width: 320px;
}
@media (min-width: 768px) {
  .hero.with-video .video-thumb {
    min-width: 420px;
    max-width: 480px;
  }
}
@media (min-width: 992px) {
  .hero.with-video .video-thumb {
    max-width: none;
    width: 100%;
    max-width: 555px;
  }
}
.androidbrowser .hero.with-video picture,
.androidbrowser .hero.with-video img:not(.video-thumb) {
  margin: 0;
  padding: 0;
  right: 0;
  left: 0;
  position: relative;
}
.ie9 .hero .container,
.lt-ie9 .hero .container {
  bottom: 25px;
  display: block;
}
.hero .container.align-left,
.hero .container.align-default {
  padding: 0;
}
@media (min-width: 768px) {
  .hero .container.align-default {
    height: 100%;
    width: 750px;
  }
  .gt-ie9 .hero .container.align-default {
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%, -100%);
    -ms-transform: translate(-50%, -100%);
    -o-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
  }
  .ie9 .hero .container.align-default,
  .lt-ie9 .hero .container.align-default {
    position: relative;
    top: -280px;
    margin: 0 auto;
  }
}
@media (min-width: 992px) {
  .hero .container.align-default {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .hero .container.align-default {
    width: 1170px;
  }
}
.hero .container.align-left {
  width: 85%;
  -webkit-transform: translate(0, -100%);
  -ms-transform: translate(0, -100%);
  -o-transform: translate(0, -100%);
  transform: translate(0, -100%);
  position: absolute;
  height: 100%;
}
@media (min-width: 768px) {
  .hero .container.align-left {
    width: 750px;
    left: 50%;
  }
  .gt-ie9 .hero .container.align-left {
    -webkit-transform: translate(-50%, -100%);
    -ms-transform: translate(-50%, -100%);
    -o-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
  }
  .ie9 .hero .container.align-left,
  .lt-ie9 .hero .container.align-left {
    position: relative;
    top: -320px;
    left: 0;
  }
}
@media (min-width: 992px) {
  .hero .container.align-left {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .hero .container.align-left {
    width: 1170px;
  }
}
@media (min-width: 768px) {
  .hero.tall {
    min-height: 390px;
    max-height: 390px;
  }
}
@media (min-width: 992px) {
  .hero.tall {
    min-height: 400px;
    max-height: 400px;
  }
}
@media (min-width: 992px) and (min-height: 800px) {
  .hero.tall {
    max-height: 450px;
  }
}
@media (min-width: 992px) and (min-height: 850px) {
  .hero.tall {
    max-height: 500px;
  }
}
@media (min-width: 992px) and (min-height: 900px) {
  .hero.tall {
    max-height: 565px;
  }
}
@media (min-width: 768px) {
  .hero.tall img,
  .hero.tall picture {
    min-height: 390px;
    max-height: 390px;
  }
}
@media (min-width: 992px) {
  .hero.tall img,
  .hero.tall picture {
    min-height: 400px;
    max-height: 400px;
  }
}
@media (min-width: 992px) and (min-height: 800px) {
  .hero.tall img,
  .hero.tall picture {
    max-height: 450px;
  }
}
@media (min-width: 992px) and (min-height: 850px) {
  .hero.tall img,
  .hero.tall picture {
    max-height: 500px;
  }
}
@media (min-width: 992px) and (min-height: 900px) {
  .hero.tall img,
  .hero.tall picture {
    max-height: 565px;
  }
}
.androidbrowser .hero.tall picture,
.androidbrowser .hero.tall img {
  margin: 0;
  padding: 0;
  right: 0;
  left: 0;
  position: relative;
}
.hero.xtall {
  min-height: 375px;
  max-height: 375px;
}
.ie9 .hero.xtall,
.lt-ie9 .hero.xtall {
  max-height: 475px;
}
.ie9 .hero.xtall img,
.lt-ie9 .hero.xtall img {
  max-height: 475px;
}
.hero.xtall img {
  min-height: 375px;
  max-height: 375px;
}
/**
	* @toc 4.2.4
	* @submodule true
	* @name Variant with carousel
	* @slug variant-with-carousel
	* @description Hero image variant with image carousel as a background. See also <a href="#module-slick-carousel">3.2 Slick carousel</a>.
	* @markup

	<div class="hero has-carousel">
		<div class="carousel-wrap hero-carousel-wrap">
			<ul class="eat-carousel hero-carousel">
				<li>
					<!--(bake /src/web-standards/includes/picture.html imgType="hero" imgName="hero-news" alt="Eaton capabilities and solutions")-->
					<div class="container align-left">
						<div class="hero-overlay hero-overlay-left">
							<div class="hero-text">
								<h2 class="hero-header small">Eaton receives second contract</h2>
								<p>to support electrical system construction as Panama canal expansion continues</p>
								<a href="#" class="btn btn-primary">Read more</a>
							</div>
							<!-- /.container .hero-text -->
						</div>
					</div>
				</li>
				<li>
					<!--(bake /src/web-standards/includes/picture.html imgType="hero" imgName="capabilities-solutions" alt="Eaton capabilities and solutions")-->
					<div class="container align-left">
						<div class="hero-overlay hero-overlay-left">
							<div class="hero-text">
								<h2 class="hero-header">Sample news headline</h2>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae mattis lectus. Mauris maximus ultricies nulla.</p>
							</div>
							<!-- /.container .hero-text -->
						</div>
					</div>
				</li>
				<li>
					<!--(bake /src/web-standards/includes/picture.html imgType="hero" imgName="capabilities-solutions" alt="Eaton capabilities and solutions")-->
					<div class="container align-left">
						<div class="hero-overlay hero-overlay-left">
							<div class="hero-text">
								<h2 class="hero-header">Sample news headline</h2>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae mattis lectus. Mauris maximus ultricies nulla.</p>
							</div>
							<!-- /.container .hero-text -->
						</div>
					</div>
				</li>
				<li>
					<!--(bake /src/web-standards/includes/picture.html imgType="hero" imgName="capabilities-solutions" alt="Eaton capabilities and solutions")-->
					<div class="container align-left">
						<div class="hero-overlay hero-overlay-left">
							<div class="hero-text">
								<h2 class="hero-header">Sample news headline</h2>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae mattis lectus. Mauris maximus ultricies nulla.</p>
							</div>
							<!-- /.container .hero-text -->
						</div>
					</div>
				</li>
			</ul>
			<div class="container controls">

			</div>
		</div>
	</div>
	*/
/*------------------------------------------------------------------
[Hero variant with carousel]
*/
.hero.has-carousel {
  overflow: hidden;
}
.hero.has-carousel ul,
.hero.has-carousel ol {
  padding-left: 0;
  list-style: none;
}
/**
	* @toc 4.3.0
	* @name Hero overlay
	* @slug hero-overlay
	* @hidemarkup true
	* @markup
	*/
/**
	* @toc 4.3.5
	* @submodule true
	* @name Dark variant and tray table
	* @slug dark-variant-tray-table
	* @description Hero overlay - dark background variant.
	* @markup

	<div class="hero dark xtall has-toggle">
	<!--(bake /src/web-standards/includes/picture.html imgName="products-oil-and-gas" imgType="hero" alt="Eaton oil and gas products")-->

	<div class="container align-default">
		<div class="hero-overlay hero-overlay-default col-sm-push-1">
			<div class="hero-text">
				<h1 class="hero-header">Products</h1>
				<p class="text-small">We lead the industry in products designed to anticipate needs and maximize efficiency.</p>

				<p class="hero-cta"><a href="#" class="btn btn-primary btn-wide">See all</a></p>
			</div>
			<!-- /.container .hero-text -->
		</div>
		<!-- /.hero-overlay -->
	</div>

	<div class="hero-tray-toggle">
		<div class="container">
			<div class="row">
				<a class="hero-tray-toggle-header" data-toggle="collapse" data-target="#oilAndGasMarkets" aria-controls="oilAndGasMarkets" aria-expanded="false">
					Oil and gas sub-markets
					<i class="hero-tray-toggle-icon"><span class="icon-Add"></span></i>
				</a>
			</div>
		</div>
	</div>
</div>

<section class="tray collapse" id="oilAndGasMarkets">
	<div class="container pth">
		<div class="row">
			<div class="col-xs-12">
				<ul class="thumbnail-list">
					<li>
						<a href="#">
							<img src="../img/graphics/thumbs/market-upstream.jpg" class="thumbnail" alt=""/>
						</a>
						<p class="caption">
							<a href="#">Upstream</a><br/>
							<span>12,345 products</span>
						</p>
					</li>
					<li>
						<a href="#">
							<img src="../img/graphics/thumbs/market-midstream.jpg" class="thumbnail" alt=""/>
						</a>
						<p class="caption">
							<a href="#">Midstream</a><br/>
							<span>12,345 products</span>
						</p>
					</li>
					<li>
						<a href="#">
							<img src="../img/graphics/thumbs/market-downstream.jpg" class="thumbnail" alt=""/>
						</a>
						<p class="caption">
							<a href="#">Downstream</a><br/>
							<span>12,345 products</span>
						</p>
					</li>
				</ul>
			</div>
		</div>
	</div>
</section>
	*/
/**
	* @toc 4.4
	* @name Hero tray toggle
	* @slug hero-tray-toggle
	* @container true
	* @gridclass col-sm-12
	* @hidemarkup true
	* @description The Hero tray toggle is used to add a tray immediately beneath a hero image. This tray may contain more information about the contents of the hero overlay. See above, <a href="#module-dark-variant-tray-table">4.3.5 Dark variant and tray table</a>.
	*/
/*------------------------------------------------------------------
[Hero overlay]
*/
.hero-overlay {
/*  background: rgba(0, 103, 205, 0.8); */
  background: rgba(249, 214, 22, 0.8);
  position: absolute;
  width: 100%;
  padding: 20px;
}
.hero-overlay .gt-ie9 {
  bottom: 0;
}
.lt-ie9 .hero-overlay {
  background: rgba(249, 214, 22, 0.8);
}
.dark .hero-overlay {
  background: rgba(40, 40, 40, 0.9);
}
.lt-ie9 .dark .hero-overlay {
  background: #363636;
}
.hero-overlay.hero-overlay-orange {
  background: rgba(222, 135, 3, 0.9);
}
.has-toggle .hero-overlay {
  bottom: 56px;
}
/**
	* @toc 4.3.4
	* @submodule true
	* @name Center variant
	* @slug center-variant
	* @container true
	* @gridclass col-sm-12
	* @hidemarkup true
	* @description See above, <a href="#module-hero-tall">See 4.2.1 Hero tall</a>.
	*/
/*------------------------------------------------------------------
[Center variant]
*/
.gt-ie9 .hero-overlay-center,
.ie9 .hero-overlay-center {
  position: absolute;
  width: 66%;
  max-width: 750px;
  left: 50%;
  top: 50%;
  bottom: auto;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.lt-ie9 .hero-overlay-center {
  position: relative;
  width: 750px;
  margin: -300px auto 0;
}
/**
	* @toc 4.3.2
	* @submodule true
	* @name Left variant
	* @slug left-variant
	* @description Left variant
	* @markup

	<div class="hero">
	<!--(bake /src/web-standards/includes/picture.html imgName="hero-oil-and-gas" imgType="hero" alt="Eaton oil and gas products and solutions")-->

	<div class="container align-left">
		<div class="hero-overlay hero-overlay-left">
			<div class="hero-text">
				<h2 class="hero-header">De-risk by design</h2>
				<p>Partnering with Eaton enables you to optimize performance, increase operational predictability, and protect your people and profit to elevate your business operations.</p>
			</div>
			<!-- /.container .hero-text -->
		</div>
		<!-- /.hero-overlay -->
	</div>
</div>
	*/
/*------------------------------------------------------------------
[Left variant]
*/
.gt-ie9 .hero-overlay-left {
  bottom: 10%;
}
@media (min-width: 768px) {
  .hero-overlay-left {
    position: absolute;
    width: 50%;
    top: 10%;
    left: -5px;
    padding-left: 25px;
  }
  .hero-overlay-left .hero-text {
    position: absolute;
    top: 50%;
  }
  .gt-ie9 .hero-overlay-left .hero-text {
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%);
  }
  .ie9 .hero-overlay-left .hero-text,
  .lt-ie9 .hero-overlay-left .hero-text {
    position: static;
  }
}
.hero-overlay-left .hero-text,
.hero-overlay-left .hero-header {
  margin-right: 8%;
}
@media (min-width: 768px) {
  .hero-overlay-left .hero-text,
  .hero-overlay-left .hero-header {
    margin-right: 12%;
  }
}
@media (min-width: 1200px) {
  .hero-overlay-left .hero-text,
  .hero-overlay-left .hero-header {
    margin-right: 15%;
  }
}
.hero-overlay-left.compact {
  bottom: auto;
}
/**
	* @toc 4.3.1
	* @submodule true
	* @name Default variant
	* @slug default-variant
	* @description Default variant
	* @markup

	<div class="hero">
	<!--(bake /src/web-standards/includes/picture.html imgName="hero-oil-and-gas" imgType="hero" alt="Eaton oil and gas products and solutions")-->

	<div class="container align-left">
		<div class="hero-overlay hero-overlay-default">
			<div class="hero-text">
				<h2 class="hero-header">De-risk by design</h2>
				<p>Partnering with Eaton enables you to optimize performance, increase operational predictability, and protect your people and profit to elevate your business operations.</p>
			</div>
			<!-- /.container .hero-text -->
		</div>
		<!-- /.hero-overlay -->
	</div>
</div>
	*/
@media (max-width: 767px) {
  .hero-overlay-default .btn {
    display: block;
    width: 100%;
  }
}
@media (min-width: 768px) {
  .hero-overlay-default {
    position: relative;
    width: 50%;
    top: 10%;
    padding: 40px 20px;
  }
}
@media (min-width: 992px) {
  .hero-overlay-default {
    width: 40%;
  }
}
.hero-text {
  position: relative;
  color: #fff;
}
.hero-text p {
  font-size: 13.5px;
}
@media (min-width: 480px) {
  .hero-text p {
    font-size: 12px;
  }
}
@media (min-width: 768px) {
  .hero-text p {
    font-size: 13px;
  }
}
@media (min-width: 992px) {
  .hero-text p {
    font-size: 14px;
  }
}
.hero-text p.small {
  font-size: 11px;
}
@media (min-width: 768px) {
  .hero-text p.small {
    font-size: 12px;
  }
}
@media (min-width: 992px) {
  .hero-text p.small {
    font-size: 14px;
  }
}
.hero-text p:last-child {
  margin-bottom: 0;
}
.hero-text h1,
.hero-text .h1,
.hero-text h2,
.hero-text .h2,
.hero-text h3,
.hero-text .h3 {
  margin-top: 0;
}
.hero-header,
.hero-text.no-header p {
  margin-top: 0;
}
.hero-header {
  font-size: 34px;
}
@media (min-width: 768px) {
  .hero-header {
    font-size: 44px;
    font-family: 'Eaton Reg', Helvetica, Arial, sans-serif;
  }
}
@media (min-width: 992px) {
  .hero-header {
    font-size: 58px;
  }
}
.hero-header.small {
  font-size: 20.4px;
}
@media (min-width: 768px) {
  .hero-header.small {
    font-size: 26.4px;
    font-family: 'Eaton Reg', Helvetica, Arial, sans-serif;
  }
}
@media (min-width: 992px) {
  .hero-header.small {
    font-size: 28.8px;
  }
}
.hero-text.no-header p {
  font-weight: bold;
}
@media (min-width: 768px) {
  .hero-text.no-header p {
    line-height: 1.2;
    font-weight: normal;
    font-size: 28.5px;
    font-family: 'Eaton Reg', Helvetica, Arial, sans-serif;
  }
}
@media (min-width: 992px) {
  .hero-text.no-header p {
    font-size: 33px;
  }
}
.hero-cta,
.hero-cta:last-child {
  margin: 15px 0 -10px;
}
.hero-cta.extra-padded {
  margin-top: 30px;
}
/**
	* @toc 4.3.3
	* @submodule true
	* @name Bottom variant
	* @slug bottom-variant
	* @description Bottom variant
	* @markup

	<div class="hero tall hidden-xs">
	<!--(bake /src/web-standards/includes/picture.html imgType="hero" imgName="products-and-solutions" alt="Products and Solutions")-->

	<div class="hero-overlay hero-overlay-bottom">
		<div class="hero-text">
			<div class="container">
			<p>Eaton is a global technology leader in power management solutions that make electrical, hydraulic and mechanical power operate more efficiently, reliably, safely and sustainably.</p>
			</div>
		</div>
		<!-- /.container .hero-text -->
	</div>
	<!-- /.hero-overlay -->
</div>
	*/
/*------------------------------------------------------------------
	[4.3.2 BOTTOM VARIANT]
*/
.hero-overlay-bottom {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 20px 0;
}
.lt-ie9 .hero-overlay-bottom {
  padding: 10px 0;
}
@media (max-width: 767px) {
  .hero-overlay-bottom .hero-text .hero-header {
    margin-bottom: -5px;
  }
}
@media (min-width: 768px) {
  .hero-overlay-bottom .hero-text .hero-header {
    margin-top: 20px;
    margin-bottom: 0 !important;
  }
}
@media (min-width: 992px) {
  .hero-overlay-bottom .hero-text .hero-header {
    font-size: 48px;
    margin-bottom: 0 !important;
  }
}
.hero-overlay-bottom .hero-text p {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@media (min-width: 768px) {
  .hero-overlay-bottom .hero-text p {
    font-size: 17.5px;
    margin: 0 auto 20px;
  }
}
@media (min-width: 992px) {
  .hero-overlay-bottom .hero-text p {
    font-size: 17px;
    line-height: 1.5;
    margin: 30px auto;
  }
}
@media (min-width: 1200px) {
  .hero-overlay-bottom .hero-text p {
    font-size: 18px;
    line-height: 1.5;
    margin: 30px auto;
  }
}
.hero-overlay-bottom .hero-text .hero-header + p {
  margin-top: 10px;
}
.hero-cta-aside {
  margin-top: 10px !important;
}
@media (min-width: 768px) {
  .hero-cta-aside {
    margin-bottom: 30px !important;
  }
}
.lt-ie9 .hero-cta-aside {
  padding-top: 80px;
}
/*--------------- [4.3.2 BOTTOM VARIANT -- END] ------------------ */
/*------------------------------------------------------------------
[4.3.5 Hero tray toggle]
*/
.hero-tray-toggle {
  background-color: #0067cd;
  background-color: rgba(0, 103, 205, 0.8);
  position: absolute;
  width: 100%;
  bottom: 0;
}
.hero-tray-toggle ul,
.hero-tray-toggle ol {
  padding-left: 0;
  list-style: none;
  padding-bottom: 5px;
}
.hero-tray-toggle-header {
  font-size: 18px;
  border-bottom: 1px solid #183f6e;
  font-weight: bold;
  padding: 15px;
  -webkit-box-shadow: inset 0 -2px 2px 0 rgba(0, 61, 110, 0.2);
  box-shadow: inset 0 -2px 2px 0 rgba(0, 61, 110, 0.2);
  display: block;
  margin-right: 30px;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  position: relative;
  text-align: right;
  padding-right: 50px !important;
}
.hero-tray-toggle-header:hover,
.hero-tray-toggle-header:focus {
  text-decoration: none;
}
.hero-tray-toggle-header.selected a {
  cursor: default;
}
.hero-tray-toggle-header.selected:before {
  content: '';
  display: block;
  position: absolute;
  height: 100%;
  left: -15px;
  top: 0;
  border-left: 6px solid #0067cd;
}
@media (min-width: 768px) {
  .hero-tray-toggle-header {
    font-size: 15px;
  }
}
.hero-tray-toggle-header a {
  color: #fff;
}
.hero-tray-toggle-header a,
.hero-tray-toggle-header a:hover,
.hero-tray-toggle-header a:focus {
  text-decoration: none;
}
.hero-tray-toggle-header:hover,
.hero-tray-toggle-header:active,
.hero-tray-toggle-header:focus {
  color: #fff;
}
.hero-tray-toggle-icon {
  position: absolute;
  top: 50%;
  right: 15px;
  font-size: 1.5em;
  height: 40px;
  text-decoration: none;
  -webkit-transition: right 0.2s ease-in-out;
  -o-transition: right 0.2s ease-in-out;
  transition: right 0.2s ease-in-out;
  -webkit-transform: translate(0, -25%);
  -ms-transform: translate(0, -25%);
  -o-transform: translate(0, -25%);
  transform: translate(0, -25%);
  display: block;
  -webkit-transform: translate(0, -18px);
  -ms-transform: translate(0, -18px);
  -o-transform: translate(0, -18px);
  transform: translate(0, -18px);
}
.lt-ie9 .hero-tray-toggle-icon {
  top: 28%;
}
.lt-ie9 .hero-tray-toggle-icon {
  top: 25%;
}
@media (min-width: 768px) {
  .hero-tray-toggle-icon {
    -webkit-transform: translate(0, -14px);
    -ms-transform: translate(0, -14px);
    -o-transform: translate(0, -14px);
    transform: translate(0, -14px);
  }
}
[aria-expanded=true] .hero-tray-toggle-icon [class^=icon]:before {
  content: '\e601';
}
.hero-tray-toggle-icon,
.hero-tray-toggle-icon:hover,
.hero-tray-toggle-icon:active,
.hero-tray-toggle-icon:focus {
  color: #fff;
}
@media (min-width: 0) and (max-width: 479px) {
  .xs-img-left img,
  .xs-img-right img {
    width: auto;
  }
  .xs-img-left img {
    left: 0;
  }
  .xs-img-right img {
    right: 0;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .xsl-img-left img,
  .xsl-img-right img {
    width: auto;
  }
  .xsl-img-left img {
    left: 0;
  }
  .xsl-img-right img {
    right: 0;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .sm-img-left img,
  .sm-img-right img {
    width: auto;
  }
  .sm-img-left img {
    left: 0;
  }
  .sm-img-right img {
    right: 0;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .md-img-left img,
  .md-img-right img {
    width: auto;
  }
  .md-img-left img {
    left: 0;
  }
  .md-img-right img {
    right: 0;
  }
}
@media (min-width: 1200px) {
  .lg-img-left img,
  .lg-img-right img {
    width: auto;
  }
  .lg-img-left img {
    left: 0;
  }
  .lg-img-right img {
    right: 0;
  }
}
/*------------------------------------------------------------------
[4.20 Alternating Content List - Table Blocks]
*/
/**
  * @toc 4.20
  * @name Table blocks
  * @slug table-blocks
  * @description The table blocks module is used to tell a story about a product line or industry with alternating content blocks and images.
  * @markup
<section class="table-blocks in-grid-column">
		<section>
			<div class="container">
				<div class="row table-block-row">
					<div class="col-sm-4 col-sm-push-8 hidden-xs no-pad">
						<img src="../img/graphics/products/oil-derrick.jpg" alt="" class="img-responsive"/>
					</div>
					<div class="col-sm-8 col-sm-pull-4">
						<div class="centered-content no-margin">
							<h2 class="table-block-header">New recovery environments present new growth</h2>
							<p>As the oil and gas industry continues to evolve, you need an experienced, responsive partner capable of offering sharp insight and innovative solutions that anticipate your toughest challenges. Eaton's application-specific experts are experienced at solving the industry's most daunting challenges &ndash; and they're ready to tackle yours with a portfolio of leading electrical, hydraulic and filtration solutions designed for demanding recovery and refining operations.</p>
						</div>
					</div>
				</div>
			</div>
		</section>

		<section>
			<div class="container table-container">
				<div class="row table-block-row">
					<div class="col-sm-6 col-sm-push-6 no-pad">
						<img src="../img/graphics/products/optimize-performance.jpg" alt="" class="img-responsive"/>
					</div>
					<div class="col-sm-6 col-sm-pull-6">
						<div class="centered-content">
							<h2 class="table-block-header">Optimize performance</h2>
							<p>To lower your cost of ownership and reduce complexity, we deliver customized electrical, hydraulic and filtration solutions designed for tougher recovery and changing refining conditions. Our project management for design, retrofitting, construction and maintenance helps optimize your investment, increase energy efficiency and reduce risk.</p>
						</div>
					</div>
				</div>
			</div>
		</section>

		<section>
			<div class="container">
				<div class="row table-block-row">
					<div class="col-sm-6 no-pad">
						<img src="../img/graphics/products/increase-operational-predictability.jpg" alt="" class="img-responsive"/>
					</div>
					<div class="col-sm-6">
						<div class="centered-content">
							<h2 class="table-block-header">Increase operational predictability</h2>
							<p>Our local engineering and service professionals improve uptime and reduce costs. Preventive diagnostics and solutions that improve stability and control increase endurance and provide longer life cycles in harsh environments. Remote monitoring and trouble-shooting reduce the need for planned maintenance while optimizing equipment life cycles.</p>
						</div>
					</div>
				</div>
			</div>
		</section>

		<section>
			<div class="container">
				<div class="row table-block-row">
					<div class="col-sm-6 col-sm-push-6 no-pad">
						<img src="../img/graphics/products/protect-your-people-and-profit.jpg" alt="" class="img-responsive"/>
					</div>
					<div class="col-sm-6 col-sm-pull-6">
						<div class="centered-content">
							<h2 class="table-block-header">Protect your people and profit</h2>
							<p>Eaton&rsquo;s comprehensive and rugged product offering, including explosion proof enclosures and arc flash preventive motor control centers, mitigates the risk of personnel injury, downtime and damaged assets. Our solutions for reduced environmental footprint through wastewater reuse eliminate manual change-outs. We offer technology to absorb and dissipate loads to increase stability, as well as customized safety training.</p>
						</div>
					</div>
				</div>
			</div>
		</section>
	</section>
*/
/**
  * @toc 4.20.1
  * @name Table blocks alternating colors
  * @slug table-blocks-alternating-colors
  * @submodule true
  * @description This variant of the table blocks module adds an alternating background color to each row.
  * @markup
<section class="table-blocks alternating-colors in-grid-column">
		<section>
			<div class="container">
				<div class="row table-block-row">
					<div class="col-sm-4 col-sm-push-8 hidden-xs no-pad">
						<img src="../img/graphics/products/oil-derrick.jpg" alt="" class="img-responsive"/>
					</div>
					<div class="col-sm-8 col-sm-pull-4">
						<div class="centered-content no-margin">
							<h2 class="table-block-header">New recovery environments present new growth</h2>
							<p>As the oil and gas industry continues to evolve, you need an experienced, responsive partner capable of offering sharp insight and innovative solutions that anticipate your toughest challenges. Eaton's application-specific experts are experienced at solving the industry's most daunting challenges &ndash; and they're ready to tackle yours with a portfolio of leading electrical, hydraulic and filtration solutions designed for demanding recovery and refining operations.</p>
						</div>
					</div>
				</div>
			</div>
		</section>

		<section class="shaded">
			<div class="container table-container">
				<div class="row table-block-row">
					<div class="col-sm-6 col-sm-push-6 no-pad">
						<img src="../img/graphics/products/optimize-performance.jpg" alt="" class="img-responsive"/>
					</div>
					<div class="col-sm-6 col-sm-pull-6">
						<div class="centered-content">
							<h2 class="table-block-header">Optimize performance</h2>
							<p>To lower your cost of ownership and reduce complexity, we deliver customized electrical, hydraulic and filtration solutions designed for tougher recovery and changing refining conditions. Our project management for design, retrofitting, construction and maintenance helps optimize your investment, increase energy efficiency and reduce risk.</p>
						</div>
					</div>
				</div>
			</div>
		</section>

		<section>
			<div class="container">
				<div class="row table-block-row">
					<div class="col-sm-6 no-pad">
						<img src="../img/graphics/products/increase-operational-predictability.jpg" alt="" class="img-responsive"/>
					</div>
					<div class="col-sm-6">
						<div class="centered-content">
							<h2 class="table-block-header">Increase operational predictability</h2>
							<p>Our local engineering and service professionals improve uptime and reduce costs. Preventive diagnostics and solutions that improve stability and control increase endurance and provide longer life cycles in harsh environments. Remote monitoring and trouble-shooting reduce the need for planned maintenance while optimizing equipment life cycles.</p>
						</div>
					</div>
				</div>
			</div>
		</section>

		<section class="shaded">
			<div class="container">
				<div class="row table-block-row">
					<div class="col-sm-6 col-sm-push-6 no-pad">
						<img src="../img/graphics/products/protect-your-people-and-profit.jpg" alt="" class="img-responsive"/>
					</div>
					<div class="col-sm-6 col-sm-pull-6">
						<div class="centered-content">
							<h2 class="table-block-header">Protect your people and profit</h2>
							<p>Eaton&rsquo;s comprehensive and rugged product offering, including explosion proof enclosures and arc flash preventive motor control centers, mitigates the risk of personnel injury, downtime and damaged assets. Our solutions for reduced environmental footprint through wastewater reuse eliminate manual change-outs. We offer technology to absorb and dissipate loads to increase stability, as well as customized safety training.</p>
						</div>
					</div>
				</div>
			</div>
		</section>
	</section>
*/
/**
  * @toc 4.20.2
  * @name Table blocks - in grid column
  * @slug table-blocks-in-grid-column
  * @container true;
  * @submodule true;
  * @gridclass col-sm-12
  * @description This variant of the table blocks module adds internal padding when table blocks are used within a grid container.
  * @markup
<section class="table-blocks alternating-colors in-grid-column">
	<section>
		<div class="row table-block-row">
			<div class="col-sm-3">
				<img src="../img/graphics/products/rd-100.jpg" alt="" class="img-responsive"/>
			</div>
			<div class="col-sm-9">
				<div class="centered-content">
					<h2 class="table-block-header" >R&amp;D 100 award from R&amp;D magazine</h2>
					<p>Eaton LifeSense has received the prestigious R&D 100 Award from R&D Magazine. Selected by an independent panel of experts from a strong field of nominations Eaton LifeSense joins the ranks of other breakthrough technologies that have been recognized as the most technologically significant products within a given year.<a href="#">Learn more</a></p>
				</div>
			</div>
		</div>
	</section>

	<section class="shaded">
		<div class="row table-block-row">
			<div class="col-sm-4 col-sm-push-8">
				<img src="../img/graphics/products/gold-king.png" alt="" class="img-responsive prl"/>
			</div>
			<div class="col-sm-8 col-sm-pull-4">
				<div class="centered-content">
					<h2 class="table-block-header" >Gold King award</h2>
					<p>LifeSense hose continues to be recognized as a game-changing, new technology. The latest evidence is a Gold King Award as &quot;one of industry&rsquo;s best new products of the year&quot; in the fluid/pneumatic power category of the annual King Awards competition conducted by New Equipment Digest Magazine. The King Awards, named after the magazine&rsquo;s long-time chief editor Bob King, were established to recognize superior industrial product innovation. <a href="#">Learn more</a></p>
				</div>
			</div>
		</div>
	</section>

	<section>
		<div class="row table-block-row">
			<div class="col-sm-4">
				<img src="../img/graphics/products/lleap-award.jpg" alt="" class="img-responsive"/>
			</div>
			<div class="col-sm-8">
				<div class="centered-content">
					<h2 class="table-block-header" >Leadership in lifting equipment and aerial platforms</h2>
					<p>Eaton&rsquo;s LifeSense technology earned its first industry honor in 2011 by receiving one of only two platinum &quot;Leadership in Lifting Equipment and Aerial Platforms&quot; (LLEAP) awards issued by Lift and Access magazine. LifeSense was recognized as the &quot;best all-around innovation&quot; in the Award&rsquo;s &quot;OEM-developed features/essential components for OEMs&quot; support product category. Judging is based on four criteria: innovation, leadership, influence, and benefit. <a href="#">Learn more</a></p>
				</div>
			</div>
		</div>
	</section>
</section>
*/
.table-blocks.alternating-colors section:nth-child(2n) {
  background: #f4f4f4;
  margin-left: -15px;
  margin-right: -15px;
  padding: 15px;
}
@media (min-width: 768px) {
  .table-blocks.alternating-colors section:nth-child(2n) {
    margin-left: 0;
    margin-right: 0;
    padding: 15px 0;
  }
}
@media (min-width: 768px) {
  .table-blocks.in-grid-column section:nth-child(2n) {
    padding: 15px;
  }
}
.table-block-row {
  padding-top: 0 !important;
  padding-bottom: 20px !important;
}
@media (min-width: 480px) {
  .table-block-row {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
}
.table-block-row .no-pad {
  padding: 0;
  margin-top: -15px;
}
@media (min-width: 480px) {
  .table-block-row .no-pad {
    padding: 15px 0;
  }
}
.table-block-header {
  font-size: 21px;
}
@media (min-width: 768px) {
  .table-block-header {
    margin-top: 0;
  }
}
@media (min-width: 992px) {
  .table-block-header {
    font-size: 25.5px;
  }
}
@media (min-width: 1200px) {
  .table-block-header {
    font-size: 30px;
  }
}
.centered-content {
  position: relative;
}
@media (min-width: 992px) {
  .centered-content {
    display: inline-block;
    margin-right: 30px !important;
    margin-left: 30px !important;
  }
  .centered-content.no-margin {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}
/**
  * @toc 4.5
  * @name Toggle bar
  * @slug toggle-bar
  * @description This element toggles the visibility of multiple trays, as in <a href="/home.html">Home page</a> and <a href="/products-and-solutions.html">Products and solutions</a> pages.
  * @container true
  * @gridclass col-sm-8
  * @markup
<div class="btn-group toggle-group js-toggle-buttons" data-last-target="{{lastTarget}}" data-last-state="{{lastState}}" role="group" aria-label="Toggle products and solutions">
	<button type="button {{selectedstate}}" class="btn btn-primary {{selectedstate}}" data-target="all" aria-controls="all">All</button>
	<button type="button" class="btn btn-primary" data-target="#trayProducts" aria-controls="trayProducts">Products</button>
	<button type="button" class="btn btn-primary" data-target="#trayMarkets" aria-controls="trayProducts">Markets</button>
</div>
**/
.toggle-group {
  width: 100%;
}
.toggle-group .btn {
  width: 25%;
  position: relative;
  font-weight: bold;
  font-size: 13px;
  margin: 0 0.5px;
}
.toggle-group .btn.selected:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 7.5px 0 7.5px;
  border-color: #003d6e transparent transparent transparent;
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
.toggle-group-auto-size {
  width: auto;
}
.toggle-group-auto-size .btn {
  width: auto;
  margin: 0.5px 2.5px;
}
@media (min-width: 768px) {
  .toggle-group-auto-size.distributor-btn-group .btn {
    margin: 0.5px 1px;
  }
}
@media (min-width: 992px) {
  .toggle-group-auto-size.distributor-btn-group .btn {
    margin: 0.5px 2.5px;
  }
}
.toggle-group-right {
  float: right;
}
.toggle-group-right .btn:last-child {
  margin-right: 0;
}
/**
  * @toc 4.6
  * @name Or divider
  * @slug or-divider
  * @description This element is used to separate two columns in situations where a user should take one action or the other, but not both.
  * @container true
  * @gridclass col-sm-12
  * @markup
<div class="row">
	<div class="col-xs-12 col-sm-5" data-mh="search-area">
		<h2 class="subtle">Job search</h2>
		<!--(bake /src/web-standards/includes/search-box-careers.html placeholder="Enter search criteria")-->
	</div>
	<div class="col-xs-12 col-sm-2 text-center or-divider-wrapper" data-mh="search-area">
		<span class="or-divider vertical-centered">or</span>
	</div>
	<div class="col-xs-12 col-sm-5" data-mh="search-area">
		<!--(bake /src/web-standards/includes/select-box-careers.html)-->
	</div>
</div>

**/
.or-divider {
  padding: 9px 13px;
  font-size: 18px;
  border-radius: 50%;
  border: 1px solid #636c71;
  color: #636c71;
  display: inline-block;
  /**
	  * @toc 4.6.1
	  * @name OR divider - absolute positioned variant
	  * @slug or-position-variant
	  * @description Variant of or-divider used on the <a href="/home.html">Home page</a> where there is limited space between UI elements.
	  * @container true
	  * @submodule true
	  * @gridclass col-sm-12
	  * @markup
	    <div class="row relative">
			<div class="col-xs-12 col-sm-6 col-sm-push-6">
					<h2 class="subtle hidden-xs">Search all products</h2>
					<!--(bake /src/web-standards/includes/search-box-home.html placeholder="Enter product name or number")-->
				</div>
				<div class="col-xs-12 col-sm-6 col-sm-pull-6 hidden-xs">
					<h2 class="subtle hidden-xs">Browse our products and solutions</h2>
					<!--(bake /src/web-standards/includes/toggle-group-home.html)-->
				</div>
			<span class="or-divider absolute hidden-xs">or</span>
		</div>
		*/
  /* Variant used on homepage when two .col-xx-6s butt up against each other */
  /** Fix spacing at mobile breakpoint */
}
.lt-ie9 .or-divider {
  border: 0;
}
@media (min-width: 768px) {
  .or-divider-wrapper .or-divider.vertical-centered {
    position: absolute;
    top: 50%;
    margin-top: -23px;
    left: 50%;
    margin-left: -23px;
  }
}
.or-divider.absolute {
  position: absolute;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: -23px;
  left: 45%;
  z-index: 20;
  top: 35%;
  margin-top: -23px;
}
@media (min-width: 992px) {
  .or-divider.absolute {
    margin-left: -23px;
    left: 45%;
    top: 45%;
    margin-top: -23px;
  }
}
.or-divider-wrapper .or-divider {
  position: relative;
  margin-top: 5px;
}
@media (min-width: 768px) {
  .or-divider-wrapper .or-divider {
    margin-top: 0;
  }
}
/*------------------------------------------------------------------
[Block CTA]
*/
/**
* @toc 4.7
* @name Block calls to action
* @slug block-cta
* @description Block Calls To Action (CTAs) are used to highlight important links within a page. They can be a headline and text, an image and headline, or an image, headline and supporting text. See also: the <a href="#module-feature">feature</a> module.
* @hidemarkup true
*/
/**
* @toc 4.7.1
* @submodule true
* @name Headline + text block CTA
* @slug block-cta-headline-text
* @container true
* @gridclass col-xs-12
* @description Only the headline of a headline + text block CTA should be clickable.
* @markup
<div class="row mbl">
	<div class="col-xs-12 col-xsl-6 col-sm-4">
		<div class="block-cta-content">
			<h3 class="block-cta-title"><a href="#">News</a></h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in porta augue. </p>
		</div>
	</div>
	<div class="col-xs-12 col-xsl-6 col-sm-4">
		<div class="block-cta-content highlight-element">
			<div class="label label-default">.block-cta-content</div>
			<h3 class="block-cta-title">
			<a href="#">Investor</a></h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in porta augue. </p>
		</div>
	</div>
	<div class="col-xs-12 col-xsl-6 col-sm-4">
		<div class="block-cta-content">
			<h3 class="block-cta-title highlight-element">
				<div class="label label-default">.block-cta-title</div>
				<a href="#">Sustainability</a>
			</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in porta augue. </p>
		</div>
	</div>
</div>
*/
/**
* @toc 4.7.2
* @submodule true
* @name Image + headline block CTA
* @slug block-cta-image-headline
* @container true
* @gridclass col-xs-12
* @description Both the image and headline should be clickable in this variant. The image always appears before the headline.
* @markup
<div class="row">
	<div class="col-xs-12 col-xsl-6 col-sm-4">
		<div class="block-cta with-img">
			<a href="#" class="block-cta-content">
				<img src="../img/graphics/feature/ethics-and-compliance.jpg" alt="" class="block-cta-img"/>
				<h3 class="block-cta-title" data-mh="block-content">Ethics and compliance</h3>
			</a>
		</div>
	</div>
	<div class="col-xs-12 col-xsl-6 col-sm-4">
		<div class="block-cta with-img highlight-element">
			<div class="label label-default">.block-cta.with-img</div>
			<a href="#" class="block-cta-content">
				<img src="../img/graphics/feature/inclusion-and-diversity.jpg" alt="" class="block-cta-img"/>
				<h3 class="block-cta-title" data-mh="block-content">Inclusion and diversity</h3>
			</a>
		</div>
	</div>
	<div class="col-xs-12 col-xsl-6 col-sm-4">
		<div class="block-cta with-img">
			<a href="#" class="block-cta-content">
				<img src="../img/graphics/feature/office-of-ombuds.jpg" alt="" class="block-cta-img"/>
				<h3 class="block-cta-title" data-mh="block-content">Office of ombuds</h3>
			</a>
		</div>
	</div>
</div>
*/
/**
* @toc 4.7.3
* @submodule true
* @name Image + headline + supporting text block CTA
* @slug block-cta-image-headline-text
* @container true
* @gridclass col-xs-12
* @description Both the image and headline should be clickable in this variant. The image always appears before the headline.
* @markup
<div class="row">
	<div class="col-xs-12 col-xsl-6 col-sm-4 block-cta">
		<div class="block-cta-content">
			<a href="#">
				<img src="/img/graphics/block-cta/upstream.jpg" alt="" class="block-cta-img">
				<h3 class="block-cta-title">Upstream</h3>
			</a>
			<p class="block-cta-copy">The trend to reduce personnel in hazardous locations is driven by several factors, including physical risks, shortage of expertise and rising costs. Additionally, costs of offshore drilling platforms are heavily influenced by weight. These risks increase your reliance on proven partners who can help you grow your bottom line.</p>
		</div>
	</div>
	<div class="col-xs-12 col-xsl-6 col-sm-4 block-cta">
		<div class="block-cta-content">
			<a href="#">
				<img src="/img/graphics/block-cta/midstream.jpg" alt="" class="block-cta-img">
				<h3 class="block-cta-title">Midstream</h3>
			</a>
			<p class="block-cta-copy">An increased focus on midstream is fueling the use of ever larger vessels and the need to ensure asset integrity in aging pipelines. Tougher environmental scrutiny applied to pipeline certifications and increasing safety concerns with road and rail distribution call for comprehensive safety, control and monitoring solutions.</p>
		</div>
	</div>
	<div class="col-xs-12 col-xsl-6 col-sm-4 block-cta">
		<div class="block-cta-content">
			<a href="#">
				<img src="/img/graphics/block-cta/downstream.jpg" alt="" class="block-cta-img">
				<h3 class="block-cta-title">Downstream</h3>
			</a>
			<p class="block-cta-copy highlight-element">
				<span class="label label-default">.block-cta-copy</span>
			We understand your need to upgrade aging refineries and bring new technology on-line to process changing crudes, while decreasing downtime. We also know that upgrades are impacted by difficult approvals driven by ever changing regulatory environment.</p>
		</div>
	</div>
</div>
*/
.block-cta-wrap {
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .block-cta-wrap {
    padding: 0;
  }
}
.block-cta {
  margin-bottom: 30px !important;
}
@media (min-width: 768px) {
  .block-cta {
    margin-bottom: 30px !important;
  }
}
@media (min-width: 768px) {
  .block-cta.with-img .block-cta-title {
    margin-top: 0 !important;
  }
}
.block-cta-title {
  font-family: 'Eaton Reg', Helvetica, Arial, sans-serif;
  color: inherit;
  margin-top: 0 !important;
}
.block-cta-img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: 10px !important;
}
.block-cta-copy {
  font-size: 11px;
}
@media (min-width: 768px) {
  .block-cta-copy {
    font-size: 12px;
  }
}
@media (min-width: 992px) {
  .block-cta-copy {
    font-size: 13px;
  }
}
/** @deprecated */
.block-cta-cta {
  margin-top: 15px;
}
.block-cta-cta .btn {
  display: block;
  width: 100%;
}
/*------------------------------------------------------------------
[4.7 Features]
*/
/**
  * @toc 4.8
  * @name Features
  * @slug feature
  * @description Features are the most visible calls-to-action available. They can be used like in-page &ldquo;ads&rdquo; to draw attention to timely or featured content.
  * @markup
<div class="features divided">
	<div class="container">
		<div class="row">
			<div class="col-sm-6 col-md-4 feature">
				<div class="feature-content" data-mh="feature-content">
					<h2 class="feature-title" data-mh="feature-title">Why Eaton?</h2>
					<img src="../img/graphics/feature/why-eaton.jpg" alt="" class="feature-img"/>

					<p class="feature-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
				</div>
				<p class="feature-cta">
					<a href="#" class="btn btn-primary">Why Eaton?</a>
				</p>

				<a class="feature-mobile-cta" href="#">
					<span class="feature-mobile-cta-title">Why Eaton?</span>
					<span class="feature-mobile-cta-icon icon-chevron-right"></span>
				</a>
			</div>

			<div class="col-sm-6 col-md-4 feature">
				<div class="feature-content" data-mh="feature-content">
					<h2 class="feature-title" data-mh="feature-title">Career opportunities</h2>

					<img src="../img/graphics/feature/career-opportunities.jpg" alt="" class="feature-img"/>

					<p class="feature-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
				</div>

				<p class="feature-cta">
					<a href="#" class="btn btn-primary">Career opportunities</a>
				</p>

				<a class="feature-mobile-cta" href="#">
					<span class="feature-mobile-cta-title">Career opportunities</span>
					<span class="feature-mobile-cta-icon icon-chevron-right"></span>
				</a>
			</div>

			<div class="col-sm-6 col-md-4 feature">
				<div class="feature-content" data-mh="feature-content">
					<h2 class="feature-title" data-mh="feature-title">Check your application status</h2>
					<img src="../img/graphics/feature/check-application-status.jpg" alt="" class="feature-img"/>

					<p class="feature-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
				</div>

				<p class="feature-cta">
					<a href="#" class="btn btn-primary">Check your application status</a>
				</p>

				<a class="feature-mobile-cta" href="#">
					<span class="feature-mobile-cta-title">Application status</span>
					<span class="feature-mobile-cta-icon icon-chevron-right"></span>
				</a>
			</div>

		</div>
	</div>
</div>
**/
.features {
  background: #e6e6e5;
  border-bottom: 1px solid #e6e6e5;
}
@media (min-width: 768px) {
  .features {
    background: transparent;
  }
}
@media (min-width: 768px) {
  .feature {
    padding: 35px 15px;
    padding: 25px 15px;
    font-size: 13px;
    border-bottom: 1px solid #e6e6e5;
  }
  .feature:nth-child(2n-1) {
    border-right: 1px solid #e6e6e5;
  }
}
@media (min-width: 992px) {
  .feature {
    border-right: 1px solid #e6e6e5;
    border-bottom: none;
  }
  .feature:last-child {
    border-right: none;
  }
}
.feature-mobile-cta {
  display: none !important;
  border-bottom: 1px solid #b1b5b8;
  position: relative;
  margin: 0 -15px;
}
@media (max-width: 767px) {
  .feature-mobile-cta {
    display: block !important;
  }
  table.feature-mobile-cta {
    display: table;
  }
  tr.feature-mobile-cta {
    display: table-row !important;
  }
  th.feature-mobile-cta,
  td.feature-mobile-cta {
    display: table-cell !important;
  }
}
.feature-mobile-cta,
.feature-mobile-cta:focus,
.feature-mobile-cta:hover {
  text-decoration: none;
}
.feature-mobile-cta-title {
  display: none !important;
  display: block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  padding: 15px;
  margin: 0 auto;
  letter-spacing: 0;
  color: #0067cd;
}
@media (max-width: 767px) {
  .feature-mobile-cta-title {
    display: block !important;
  }
  table.feature-mobile-cta-title {
    display: table;
  }
  tr.feature-mobile-cta-title {
    display: table-row !important;
  }
  th.feature-mobile-cta-title,
  td.feature-mobile-cta-title {
    display: table-cell !important;
  }
}
@media (min-width: 768px) {
  .feature-mobile-cta-title {
    font-size: 15px;
  }
}
.feature-mobile-cta-icon {
  display: none !important;
  position: absolute;
  top: 14px;
  right: 15px;
  font-size: 1.5em;
  height: 40px;
  text-decoration: none;
  -webkit-transition: right 0.2s ease-in-out;
  -o-transition: right 0.2s ease-in-out;
  transition: right 0.2s ease-in-out;
  display: block;
}
@media (max-width: 767px) {
  .feature-mobile-cta-icon {
    display: block !important;
  }
  table.feature-mobile-cta-icon {
    display: table;
  }
  tr.feature-mobile-cta-icon {
    display: table-row !important;
  }
  th.feature-mobile-cta-icon,
  td.feature-mobile-cta-icon {
    display: table-cell !important;
  }
}
.feature-mobile-cta-icon.icon-chevron-right {
  font-weight: bold;
  font-size: 1.9em;
}
@media (max-width: 767px) {
  .feature-title {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .feature-title {
    font-size: 23px;
  }
}
@media (min-width: 1200px) {
  .feature-title {
    font-size: 28px;
  }
}
@media (max-width: 767px) {
  .feature-desc {
    display: none !important;
  }
}
.feature-img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 15px auto;
}
@media (max-width: 767px) {
  .feature-img {
    display: none !important;
  }
}
.feature-cta {
  margin-top: 15px;
}
@media (max-width: 767px) {
  .feature-cta {
    display: none !important;
  }
}
.feature-cta .btn {
  font-size: 13px;
  display: block;
  width: 100%;
}
@media (min-width: 1200px) {
  .feature-cta .btn {
    font-size: 14px;
  }
}
/** Allows .features to be used inside a grid column */
.column-features {
  margin-left: -15px;
  margin-right: -15px;
}
.column-features .feature:nth-child(2n) {
  border-right: none;
}
/*------------------------------------------------------------------
[4.8 Tray]
*/
/**
  * @toc 4.9
  * @name Tray (with toggle)
  * @slug tray
  * @description Trays are used to hide away extra information about a topic. Trays contain menus, lists of links, or other content that may or may not be of immediate use. Trays can be open or closed by default, but they always contain a toggle that allows the user to change their visibility.
  * @markup
  <div class="hero has-toggle">
		<div class="hero-tray-toggle">
			<div class="container">
				<div class="row">
					<a class="hero-tray-toggle-header" data-toggle="collapse" data-target="#electricalMarkets" aria-controls="electricalMarkets" aria-expanded="true">
						Toggle tray visibility
						<i class="hero-tray-toggle-icon"><span class="icon-Add"></span></i>
					</a>
				</div>
			</div>
		</div>
	</div>

  <section class="tray collapse in" id="electricalMarkets">
		<div class="container pth">
			<div class="row">
				<div class="col-xs-12 col-sm-4 list-divided-container">
					<ul class="list-divided mbn small">
						<li><a href="#">Automation and control</a></li>
						<li><a href="#">Circuit protection - breakers</a></li>
						<li><a href="#">Circuit protection - fuses</a></li>
						<li><a href="#">Electrical distribution</a></li>
						<li><a href="#">Electrical components</a></li>
						<li><a href="#">Harsh and hazardous solutions</a></li>
					</ul>
				</div>
				<div class="col-xs-12 col-sm-4 list-divided-container">
					<ul class="list-divided mbn small">
						<li><a href="#">Life safety and mass notification</a></li>
						<li><a href="#">Lighting solutions and controls</a></li>
						<li><a href="#">Metering, monitoring and protection</a></li>
						<li><a href="#">Military, aerospace and subsea connectors</a></li>
						<li><a href="#">Rack infrastructure</a></li>
						<li><a href="#">Residential</a></li>
					</ul>
				</div>
				<div class="col-xs-12 col-sm-4 list-divided-container">
					<ul class="list-divided mbn small">
						<li><a href="#">Services</a></li>
						<li><a href="#">Structural support and safety grating</a></li>
						<li><a href="#">Transformers, regulators and grid automation</a></li>
						<li><a href="#">Transportation solutions</a></li>
						<li><a href="#">UPS backup power and monitoring</a></li>
						<li><a href="#">Wiring devices</a></li>
					</ul>
				</div>
			</div>
		</div>
	</section>
  */
/**
  * @toc 4.9.1
  * @name Tray - bold variant
  * @slug tray-bold
  * @submodule true
  * @description The bold tray variant contains large, impactful headers. It is used on the <a href="/home.html">Home page</a> and <a href="/products-and-solutions.html">Products and solutions</a> pages to contain the grid of markets and product lines.
  * @markup
  <section class="tray bold" id="productsSolutionsTray">
	<div class="tray-section collapse in" id="trayProducts" data-collapsed="false">
		<div class="section-header">
			<h2 class="container">Products <a class="header-icon icon-Add visible-xs" data-toggle="collapse" href="#" data-target="#ProductsCollapse" aria-controls="ProductsCollapse"></a></h2>
		</div>
		<ul id="ProductsCollapse" class="eaton-expand-grid collapse">
			<li>
				<div class="grid-container">
					<a class="grid-header" href="#">
						<img src="../img/graphics/homepage/productcategories/aerospace.jpg">
						<div class="header-label">
							<div class="label-wrap">
								<div class="label-contents">
									<span class="header-name">Aerospace</span>
									<span class="header-icon icon-Add"></span>
								</div>
							</div>
						</div>
					</a>
					<div class="grid-body with-feature-block">
						<div class="tile-copy">
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, nisi, suscipit! Assumenda harum nihil totam? Accusantium, qui ratione!</p>
						</div>
						<div class="primary-cta">
							<ul class="mobile-link-list">
								<li><a href="#"><span>Lorem ipsum.</span>&nbsp;&gt;</a></li>
								<li><a href="#"><span>Lorem ipsum.</span>&nbsp;&gt;</a></li>
								<li><a href="#"><span>Lorem ipsum.</span>&nbsp;&gt;</a></li>
								<li><a href="#"><span>Lorem ipsum.</span>&nbsp;&gt;</a></li>
								<li><a href="#"><span>Lorem ipsum.</span>&nbsp;&gt;</a></li>
							</ul>
						</div>

						<div class="secondary-cta">
							<a href="#">Browse All <span>Aerospace</span>&nbsp;&gt;</a>
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="grid-container">
					<a class="grid-header" href="#">
						<img src="../img/graphics/homepage/productcategories/electrical.jpg">
						<div class="header-label">
							<div class="label-wrap">
								<div class="label-contents">
									<span class="header-name">Electrical</span>
									<span class="header-icon icon-Add"></span>
								</div>
							</div>
						</div>
					</a>
					<div class="grid-body with-feature-block">
						<div class="tile-copy">
							<p>Eaton is dedicated to ensuring that reliable, efficient and safe power is available when it&rsquo;s needed most.</p>
						</div>
						<div class="primary-cta">
							<ul class="mobile-link-list">
								<li><a href="#"><span>Automation and control</span>&nbsp;&gt;</a></li>
								<li><a href="#"><span>Circuit protection - breakers</span>&nbsp;&gt;</a></li>
								<li><a href="#"><span>Circuit protection - fuses</span>&nbsp;&gt;</a></li>
								<li><a href="#"><span>Electrical distribution</span>&nbsp;&gt;</a></li>
								<li><a href="#"><span>Electronics components</span>&nbsp;&gt;</a></li>
								<li><a href="#"><span>Harsh and hazardous solutions</span>&nbsp;&gt;</a></li>
								<li><a href="#"><span>Life safety and mass notification</span>&nbsp;&gt;</a></li>
								<li><a href="#"><span>Lighting solutions and controls</span>&nbsp;&gt;</a></li>
								<li><a href="#"><span>Metering, monitoring and protection</span>&nbsp;&gt;</a></li>
								<li><a href="#"><span>Military, aerospace and subsea connectors</span>&nbsp;&gt;</a></li>
								<li><a href="#"><span>Rack infrastructure</span>&nbsp;&gt;</a></li>
								<li><a href="#"><span>Residential</span>&nbsp;&gt;</a></li>
								<li><a href="#"><span>Structural support and safety grating</span>&nbsp;&gt;</a></li>
								<li><a href="#"><span>Transformers, regulators and grid automation</span>&nbsp;&gt;</a></li>
								<li><a href="#"><span>Transportation solutions</span>&nbsp;&gt;</a></li>
								<li><a href="#"><span>UPS backup power and monitoring</span>&nbsp;&gt;</a></li>
								<li><a href="#"><span>Wiring devices</span>&nbsp;&gt;</a></li>
							</ul>
						</div>

						<div class="secondary-cta">
							<a href="#">Browse All <span>Electrical</span>&nbsp;&gt;</a>
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="grid-container">
					<a class="grid-header" href="#">
						<img src="../img/graphics/homepage/productcategories/filtration.jpg">
						<div class="header-label">
							<div class="label-wrap">
								<div class="label-contents">
									<span class="header-name">Filtration</span>
									<span class="header-icon icon-Add"></span>
								</div>
							</div>
						</div>
					</a>
					<div class="grid-body with-feature-block">
						<div class="tile-copy">
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus dicta distinctio excepturi laboriosam quis rerum sed! Consequuntur, expedita!</p>
						</div>
						<div class="primary-cta">
							<ul class="mobile-link-list">
								<li><a href="#"><span>Lorem ipsum dolor sit.</span>&nbsp;&gt;</a></li>
							</ul>
						</div>

						<div class="secondary-cta">
							<a href="#">Browse All <span>Filtration</span>&nbsp;&gt;</a>
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="grid-container">
					<a class="grid-header" href="#">
						<img src="../img/graphics/homepage/productcategories/hydraulic-hose.jpg">
						<div class="header-label">
							<div class="label-wrap">
								<div class="label-contents">
									<span class="header-name">Hydraulics</span>
									<span class="header-icon icon-Add"></span>
								</div>
							</div>
						</div>
					</a>
					<div class="grid-body with-feature-block">
						<div class="tile-copy">
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda dolore dolores enim eveniet facere facilis tenetur?</p>
						</div>
						<div class="primary-cta">
							<ul class="mobile-link-list">
								<li><a href="#">Browse All <span>Hydraulics</span>&nbsp;&gt;</a></li>
							</ul>
						</div>
						<div class="feature-block-cta">
							<img src="../img/graphics/homepage/featureblock/hose-assembly.jpg" alt="">
							<a href="#">Lorem ipsum dolor&nbsp;&gt;</a>
						</div>

					</div>
				</div>
			</li>
			<li>
				<div class="grid-container">
					<a class="grid-header" href="#">
						<img src="../img/graphics/homepage/productcategories/industrial-clutches-and-brakes.jpg">
						<div class="header-label">
							<div class="label-wrap">
								<div class="label-contents">
									<span class="header-name">Industrial, clutches and brakes</span>
									<span class="header-icon icon-Add"></span>
								</div>
							</div>
						</div>
					</a>
					<div class="grid-body with-feature-block">
						<div class="tile-copy">
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet inventore minus mollitia voluptate. Animi in officiis quae soluta.</p>
						</div>
						<div class="primary-cta">
							<ul class="mobile-link-list">
								<li><a href="#">Browse All <span>Industrial, clutches and brakes</span>&nbsp;&gt;</a></li>
							</ul>
						</div>
						<div class="feature-block-cta">
							<img src="../img/graphics/homepage/featureblock/hose-assembly.jpg" alt="">
							<a href="#">Lorem ipsum dolor&nbsp;&gt;</a>
						</div>

					</div>
				</div>
			</li>
			<li>
				<div class="grid-container">
					<a class="grid-header" href="#">
						<img src="../img/graphics/homepage/productcategories/plastic-extrusions.jpg">
						<div class="header-label">
							<div class="label-wrap">
								<div class="label-contents">
									<span class="header-name">Plastic extrusions</span>
									<span class="header-icon icon-Add"></span>
								</div>
							</div>
						</div>
					</a>
					<div class="grid-body with-feature-block">
						<div class="tile-copy">
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolorem est harum, necessitatibus omnis velit vitae.</p>
						</div>
						<div class="primary-cta two-col">
							<ul class="mobile-link-list">
								<li><a href="#"><span>Lorem ipsum dolor.</span>&nbsp;&gt;</a></li>
								<li><a href="#"><span>Lorem ipsum dolor.</span>&nbsp;&gt;</a></li>
								<li><a href="#"><span>Lorem ipsum dolor.</span>&nbsp;&gt;</a></li>
								<li><a href="#"><span>Lorem ipsum dolor.</span>&nbsp;&gt;</a></li>
								<li><a href="#"><span>Lorem ipsum dolor.</span>&nbsp;&gt;</a></li>
								<li><a href="#"><span>Lorem ipsum dolor.</span>&nbsp;&gt;</a></li>
								<li><a href="#"><span>Lorem ipsum dolor.</span>&nbsp;&gt;</a></li>
								<li><a href="#"><span>Lorem ipsum dolor.</span>&nbsp;&gt;</a></li>
							</ul>
						</div>

						<div class="secondary-cta">
							<a href="#">Browse All <span>Plastic extrusions</span>&nbsp;&gt;</a>
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="grid-container last-row">
					<a class="grid-header" href="#">
						<img src="../img/graphics/homepage/productcategories/vehicles.jpg">
						<div class="header-label">
							<div class="label-wrap">
								<div class="label-contents">
									<span class="header-name">Vehicle</span>
									<span class="header-icon icon-Add"></span>
								</div>
							</div>
						</div>
					</a>
					<div class="grid-body with-feature-block">
						<div class="tile-copy">
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam eaque, eligendi error hic porro quibusdam ratione.</p>
						</div>
						<div class="primary-cta">
							<ul class="mobile-link-list">
								<li><a href="#">Browse All <span>Vehicle</span>&nbsp;&gt;</a></li>
							</ul>
						</div>

					</div>
				</div>
			</li>

		</ul>
	</div>
</section>
  */
.tray {
  position: relative;
}
/*------------------------------------------------------------------
[4.8.1 Bold tray variant]
*/
@media (min-width: 768px) {
  .tray.bold {
    margin-top: 19px;
  }
  .tray.bold:before {
    content: '';
    display: block;
    	background-repeat: repeat-x;
	position: absolute;
	top: -19px;
	left: 0;
	width: 100%;
	height: 19px;
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 100%);
}
}
/*------------------------------------------------------------------
[4.9 Expand grid (Navigation tiles)]
*/
/**
  * @toc 4.10
  * @name Expand grid
  * @slug expand-grid
  * @container true
  * @gridclass col-xs-12
  * @description See <a href="#module-tray-bold-variant">4.9.1 Tray - bold variant</a> or the <a href="/products-and-solutions.html">Products and solutions page</a>.
  */
.tray-section {
  background: #e6e6e5;
}
@media (min-width: 768px) {
  .tray-section {
    background-color: #b1b5b8;
  }
}
@media (max-width: 767px) {
  .tray-section .section-header h2 .header-icon {
    top: 0;
    right: 0;
    width: 100%;
    height: 49px;
  }
  .tray-section .section-header h2 .header-icon:before {
    position: absolute;
    top: 12px;
    right: 14px;
  }
}
.tray-section .section-header,
.tray-section .header-label {
  border-bottom: 1px solid #b1b5b8;
  position: relative;
}
@media (min-width: 768px) {
  .tray-section .section-header,
  .tray-section .header-label {
    background-color: #363636;
    border-bottom: 1px solid #fff;
    border-top: 1px solid #fff;
  }
}
.tray-section .section-header h2,
.tray-section .header-label h2 {
  display: block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  padding: 15px;
  margin: 0 auto;
  letter-spacing: 0;
  color: #0067cd;
}
@media (min-width: 768px) {
  .tray-section .section-header h2,
  .tray-section .header-label h2 {
    font-size: 15px;
  }
}
@media (min-width: 768px) {
  .tray-section .section-header h2,
  .tray-section .header-label h2 {
    background: #363636;
    color: #fff;
    text-transform: uppercase;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18.06px;
    font-weight: normal;
  }
}
@media (min-width: 992px) {
  .tray-section .section-header h2,
  .tray-section .header-label h2 {
    padding: 25px 20px;
    font-size: 28px;
  }
}
.tray-section .section-header .header-icon,
.tray-section .header-label .header-icon {
  position: absolute;
  top: 14px;
  right: 15px;
  font-size: 1.5em;
  height: 40px;
  text-decoration: none;
  -webkit-transition: right 0.2s ease-in-out;
  -o-transition: right 0.2s ease-in-out;
  transition: right 0.2s ease-in-out;
  display: block;
}
.tray-section .section-header .header-icon[aria-expanded="true"]:before,
.tray-section .header-label .header-icon[aria-expanded="true"]:before {
  content: '\e601';
}
.tray-section .eaton-expand-grid {
  padding-left: 0;
  list-style: none;
  padding-bottom: 5px;
  margin-bottom: 0;
  padding-bottom: 0;
}
.tray-section .grid-container {
  background-color: #0067cd;
}
.tray-section .grid-container ul,
.tray-section .grid-container ol {
  padding-left: 0;
  list-style: none;
  padding-bottom: 5px;
}
.tray-section .grid-container .icon-chevron-right {
  font-size: 11px;
  font-weight: bold;
}
.tray-section .grid-container.expanded .grid-body {
  display: block;
}
.tray-section .grid-container.expanded .header-icon:before {
  content: "\e601";
}
@media (min-width: 768px) {
  .tray-section .grid-container.last-row .grid-body {
    padding-bottom: 20px;
  }
}
.tray-section .grid-header {
  text-decoration: none;
}
.tray-section .grid-header:hover,
.tray-section .grid-header:focus {
  text-decoration: none;
}
.tray-section .grid-header > img {
  display: none;
}
.tray-section .grid-header > .header-label {
  color: #fff;
  font-size: 18px;
  border-bottom: 1px solid #183f6e;
  font-weight: bold;
  padding: 15px;
  display: block;
  text-decoration: none;
  position: relative;
  -webkit-box-shadow: inset 0 -2px 2px 0 rgba(0, 61, 110, 0.2);
  box-shadow: inset 0 -2px 2px 0 rgba(0, 61, 110, 0.2);
  padding: 15px 45px 15px 15px;
}
.tray-section .grid-header > .header-label:hover,
.tray-section .grid-header > .header-label:focus {
  text-decoration: none;
}
.tray-section .grid-header > .header-label.selected a {
  cursor: default;
}
.tray-section .grid-header > .header-label.selected:before {
  content: '';
  display: block;
  position: absolute;
  height: 100%;
  left: -15px;
  top: 0;
  border-left: 6px solid #0067cd;
}
@media (min-width: 768px) {
  .tray-section .grid-header > .header-label {
    font-size: 15px;
  }
}
.tray-section .grid-header > .header-label a {
  color: #fff;
}
.tray-section .grid-header > .header-label a,
.tray-section .grid-header > .header-label a:hover,
.tray-section .grid-header > .header-label a:focus {
  text-decoration: none;
}
@media (min-width: 768px) {
  .tray-section .grid-header > .header-label {
    padding: 0;
  }
}
.tray-section .grid-header > .header-label:before {
  content: ' ';
  display: block;
  height: 27px;
  width: 27px;
  position: absolute;
  top: 6.5px;
  right: 9px;
}
.tray-section .grid-header > .header-label .header-icon {
  color: #4dc3f6;
}
@media (min-width: 768px) {
  .tray-section .grid-header > .header-label .header-icon {
    color: #fff;
  }
}
.tray-section .grid-body {
  display: none;
  background: #363636;
  color: #fff;
  /*
		.feature-block-cta {
			margin-top: 9px;
			img {
				width: 100%;
			}
			a {
				.btn;
				.btn-primary;
				display: block;
				text-align: center;
				font-size: 14px;
				line-height: 32px;
				font-weight: bold;
				margin-top: 9px;
			}
		}*/
}
.tray-section .grid-body ul,
.tray-section .grid-body ol {
  padding-left: 0;
  list-style: none;
  padding-bottom: 5px;
  margin: 0 15px;
}
.tray-section .grid-body li:last-child a {
  border-bottom: none;
}
@media (min-width: 768px) {
  .tray-section .grid-body {
    background: #fff;
    color: #333333;
  }
}
@media (min-width: 768px) {
  .tray-section .grid-body .mobile-link-list {
    max-height: 180px;
    overflow-y: auto;
    border: none;
  }
}
.tray-section .grid-body .mobile-link-list li > a {
  font-size: 18px;
  border-bottom: 1px solid #183f6e;
  padding: 15px;
  display: block;
  text-decoration: none;
  position: relative;
  -webkit-box-shadow: inset 0 -2px 2px 0 rgba(0, 61, 110, 0.2);
  box-shadow: inset 0 -2px 2px 0 rgba(0, 61, 110, 0.2);
  padding: 15px 0;
  border-color: #636c71;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-weight: bold;
  color: #fff;
}
.tray-section .grid-body .mobile-link-list li > a:hover,
.tray-section .grid-body .mobile-link-list li > a:focus {
  text-decoration: none;
}
.tray-section .grid-body .mobile-link-list li > a.selected a {
  cursor: default;
}
.tray-section .grid-body .mobile-link-list li > a.selected:before {
  content: '';
  display: block;
  position: absolute;
  height: 100%;
  left: -15px;
  top: 0;
  border-left: 6px solid #0067cd;
}
@media (min-width: 768px) {
  .tray-section .grid-body .mobile-link-list li > a {
    font-size: 15px;
  }
}
.tray-section .grid-body .mobile-link-list li > a a {
  color: #fff;
}
.tray-section .grid-body .mobile-link-list li > a a,
.tray-section .grid-body .mobile-link-list li > a a:hover,
.tray-section .grid-body .mobile-link-list li > a a:focus {
  text-decoration: none;
}
@media (min-width: 768px) {
  .tray-section .grid-body .mobile-link-list li > a {
    color: #0067cd;
    padding: 5px 0;
    border: none;
  }
}
.tray-section .grid-body .mobile-link-list li > a:hover {
  text-decoration: underline;
}
.tray-section .grid-body a.btn-primary {
  width: 100%;
  padding: 13px;
  text-align: center;
}
.tray-section .grid-body p {
  font-size: 13px;
}
@media (max-width: 767px) {
  .tray-section .grid-body p {
    display: none !important;
  }
}
.tray-section .grid-body p a.btn-primary {
  margin-top: 9px;
}
.tray-section .grid-body .or {
  padding: 9px;
  display: block;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
}
.tray-section .grid-body .secondary-cta a {
  color: #ffffff;
  width: 100%;
  text-align: center;
  display: block;
  padding-top: 14px;
  padding-bottom: 14px;
  font-size: 13px;
  font-weight: bold;
  margin-bottom: -7px;
}
@media (min-width: 768px) {
  .tray-section .grid-body .secondary-cta a {
    color: #0067cd;
  }
}
@media (min-width: 768px) {
  .eaton-expand-grid {
    display: block;
    visibility: visible;
    width: 1113px;
    height: auto !important;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    margin-top: -1px;
    background: transparent url(../img/graphics/homepage/bg-grid.png) 0 0;
    font-size: 0;
  }
  .eaton-expand-grid.expanded > li > .grid-container {
    opacity: 0.1;
    filter: alpha(opacity=10);
  }
  .cssfilters .eaton-expand-grid.expanded > li > .grid-container {
    -webkit-filter: grayscale(90%) contrast(50%);
    -moz-filter: grayscale(90%) contrast(50%);
    -ms-filter: grayscale(90%) contrast(50%);
    -o-filter: grayscale(90%) contrast(50%);
    filter: grayscale(90%) contrast(50%);
    opacity: 1;
    filter: alpha(opacity=100);
  }
  .eaton-expand-grid.expanded > li > .grid-container.expanded {
    opacity: 1;
    filter: alpha(opacity=100);
  }
  .cssfilters .eaton-expand-grid.expanded > li > .grid-container.expanded {
    -webkit-filter: grayscale(0%) contrast(100%);
    -moz-filter: grayscale(0%) contrast(100%);
    -ms-filter: grayscale(0%) contrast(100%);
    -o-filter: grayscale(0%) contrast(100%);
    filter: grayscale(0%) contrast(100%);
  }
  .eaton-expand-grid > li {
    display: inline-block;
    margin: 1px 0 0 1px;
    vertical-align: top;
    height: 277px;
    width: 277px;
    position: relative;
    background: #b1b5b8;
  }
  .eaton-expand-grid > li > .grid-container {
    border: none;
    outline: none;
    display: block;
    position: relative;
    width: 277px;
    height: 277px;
    overflow: hidden;
    transform: translateZ(0);
    -webkit-transition: opacity 0.2s ease-in-out, width 0.2s ease-in-out, height 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out, width 0.2s ease-in-out, height 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out, width 0.2s ease-in-out, height 0.2s ease-in-out;
    background: #fff;
    font-size: 14px;
  }
  .cssfilters .eaton-expand-grid > li > .grid-container {
    -webkit-transition: width 0.2s ease-in-out, height 0.2s ease-in-out, -webkit-filter 0.2s ease-in-out, -moz-filter 0.2s ease-in-out, -ms-filter 0.2s ease-in-out, filter 0.2s ease-in-out;
    -o-transition: width 0.2s ease-in-out, height 0.2s ease-in-out, -webkit-filter 0.2s ease-in-out, -moz-filter 0.2s ease-in-out, -ms-filter 0.2s ease-in-out, filter 0.2s ease-in-out;
    transition: width 0.2s ease-in-out, height 0.2s ease-in-out, -webkit-filter 0.2s ease-in-out, -moz-filter 0.2s ease-in-out, -ms-filter 0.2s ease-in-out, filter 0.2s ease-in-out;
  }
  .eaton-expand-grid > li > .grid-container.expanded {
    width: 555px;
    height: 555px;
  }
  .eaton-expand-grid > li > .grid-container.expanded .header-label .header-icon {
    right: 15px;
  }
  .eaton-expand-grid > li > .grid-container.expanded .header-label .label-wrap .label-contents .header-name {
    width: 500px;
  }
  .eaton-expand-grid > li > .grid-container.expanded:hover .header-label .label-wrap {
    height: 66px;
  }
  .eaton-expand-grid > li > .grid-container.last-in-row {
    position: absolute;
    right: 0;
  }
  .eaton-expand-grid > li > .grid-container.last-row {
    position: absolute;
    bottom: 0;
  }
  .eaton-expand-grid > li > .grid-container .grid-header {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-tap-highlight-color: transparent;
  }
  .eaton-expand-grid > li > .grid-container .grid-header img {
    border: none;
    outline: none;
    display: block;
    position: relative;
    height: 277px;
    width: 555px;
    max-width: none;
    margin-left: -138px;
    -webkit-transition: margin-left 0.2s ease-in-out;
    -o-transition: margin-left 0.2s ease-in-out;
    transition: margin-left 0.2s ease-in-out;
  }
  .eaton-expand-grid > li > .grid-container.expanded .grid-header img {
    margin-left: 0;
  }
  .eaton-expand-grid > li > .grid-container.expanded .label-wrap {
    z-index: 500;
  }
  .eaton-expand-grid > li > .grid-container .header-label {
    display: block;
    height: 0;
    position: absolute;
    width: 555px;
    top: 277px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-align: left;
    text-decoration: none;
  }
  .eaton-expand-grid > li > .grid-container .header-label .label-wrap {
    width: 100%;
    position: absolute;
    height: 66px;
    bottom: 0;
    background-color: rgba(0, 103, 205, 0.85);
    -webkit-transition: height 0.2s ease-in-out;
    -o-transition: height 0.2s ease-in-out;
    transition: height 0.2s ease-in-out;
  }
  .lt-ie9 .eaton-expand-grid > li > .grid-container .header-label .label-wrap {
    background-color: #0067c6;
    opacity: 0.85;
    filter: alpha(opacity=85);
  }
  .eaton-expand-grid > li > .grid-container .header-label .label-wrap .label-contents {
    position: absolute;
    bottom: 0;
    width: 100%;
  }
  .eaton-expand-grid > li > .grid-container .header-label .label-wrap .label-contents .header-name {
    width: 230px;
    display: table-cell;
    vertical-align: middle;
    height: 66px;
    padding-left: 15px;
    -webkit-transition: width 0.2s ease-in-out;
    -o-transition: width 0.2s ease-in-out;
    transition: width 0.2s ease-in-out;
  }
  .eaton-expand-grid > li > .grid-container .header-label .header-icon {
    position: absolute;
    right: 292px;
    -webkit-transition: right 0.2s ease-in-out;
    -o-transition: right 0.2s ease-in-out;
    transition: right 0.2s ease-in-out;
    top: 19px;
  }
  .eaton-expand-grid > li > .grid-container .grid-body {
    width: 555px;
    height: 277px;
    position: relative;
    padding: 15px;
    /*ul {
						margin: 0;
						padding: 0;
						list-style: none;
						font-weight: bold;
						li {
							margin-bottom: 9px;
						}
					}*/
  }
  .eaton-expand-grid > li > .grid-container .grid-body p a.btn-primary {
    margin-top: 9px;
  }
  .eaton-expand-grid > li > .grid-container .grid-body .tile-copy {
    font-size: 13px;
    margin-bottom: 13px;
    min-height: 40px;
    overflow: hidden;
    font-weight: normal;
  }
  .eaton-expand-grid > li > .grid-container .grid-body .btn-primary {
    vertical-align: top;
  }
  .eaton-expand-grid > li > .grid-container .grid-body .button-and-input {
    font-size: 0;
  }
  .eaton-expand-grid > li > .grid-container .grid-body .button-and-input > a.btn {
    width: 220px;
  }
  .eaton-expand-grid > li > .grid-container .grid-body .button-and-input .or {
    width: 55px;
    display: inline-block;
    text-transform: uppercase;
    vertical-align: top;
    padding: 10px 0;
    text-align: center;
    font-size: 11px;
    font-weight: bold;
  }
  .eaton-expand-grid > li > .grid-container .grid-body form {
    font-size: 0;
    display: inline-block;
    width: 250px;
  }
  .eaton-expand-grid > li > .grid-container .grid-body form input {
    height: 40px;
    margin-bottom: 0;
  }
  .eaton-expand-grid > li > .grid-container .grid-body form button {
    height: 40px;
  }
  .eaton-expand-grid > li > .grid-container .grid-body form button.inputbutton {
    width: 30px;
    min-width: 0;
    height: 40px;
    vertical-align: top;
    margin-left: -1px;
    border: 1px solid #183f6e;
    margin-bottom: 0;
  }
  .eaton-expand-grid > li > .grid-container .grid-body form .icon-location-input {
    position: absolute;
    left: 15px;
    top: 11px;
  }
  .eaton-expand-grid > li > .grid-container .grid-body .primary-cta {
    float: left;
    width: 50%;
    padding-right: 15px;
    min-height: 1px;
  }
  .eaton-expand-grid > li > .grid-container .grid-body .primary-cta li {
    line-height: 1.2;
  }
  .eaton-expand-grid > li > .grid-container .grid-body .primary-cta.two-col {
    width: 100%;
  }
  .eaton-expand-grid > li > .grid-container .grid-body .primary-cta.two-col ul {
    float: left;
    width: 50%;
  }
  .eaton-expand-grid > li > .grid-container .grid-body .primary-cta.two-col .second-col {
    padding-left: 15px;
    margin-left: -1px;
    border-left: 2px solid #F4F4F4;
    height: 170px;
  }
  .eaton-expand-grid > li > .grid-container .grid-body .feature-block-cta {
    float: left;
    width: 50%;
    padding-left: 15px;
    margin-left: -1px;
    border-left: 2px solid #F4F4F4;
    height: 170px;
  }
  .eaton-expand-grid > li > .grid-container .grid-body .feature-block-cta a {
    font-size: 18px;
    font-weight: bold;
    display: block;
  }
  .eaton-expand-grid > li > .grid-container .grid-body .feature-block-cta img {
    width: 262px;
    height: 100px;
    margin-bottom: 10px;
    max-width: 100%;
  }
  .eaton-expand-grid > li > .grid-container .grid-body .secondary-cta {
    position: absolute;
    bottom: 15px;
    right: 15px;
    font-size: 13px;
    font-weight: bold;
  }
  .no-touch .eaton-expand-grid > li > .grid-container:hover {
    opacity: 1;
    filter: alpha(opacity=100);
  }
  .no-touch .eaton-expand-grid > li > .grid-container:hover .header-label .label-wrap {
    height: 277px;
  }
  .cssfilters .no-touch .eaton-expand-grid > li > .grid-container:hover {
    -webkit-filter: grayscale(0%) contrast(100%);
    -moz-filter: grayscale(0%) contrast(100%);
    -ms-filter: grayscale(0%) contrast(100%);
    -o-filter: grayscale(0%) contrast(100%);
    filter: grayscale(0%) contrast(100%);
  }
  .no-touch .eaton-expand-grid > li > .grid-container.expanded:hover .header-label .label-wrap {
    height: 66px;
  }
}
@media (min-width: 768px) and (max-width: 1130px) and (min-width: 850px) {
  .eaton-expand-grid {
    width: 835px;
  }
}
@media (min-width: 768px) and (max-width: 849px) and (min-width: 480px) {
  .eaton-expand-grid {
    width: 557px;
  }
}
.eaton-expand-grid .feature-block-cta img {
  max-width: 100%;
}
.eaton-expand-grid .feature-block-cta a {
  display: block;
  background: #ffffff;
  padding: 5px 15px;
}
@media (min-width: 768px) {
  .eaton-expand-grid .feature-block-cta a {
    padding: 5px 0px;
  }
}
/*
.last-in-row {
	outline: 3px solid red !important;
}

.last-row {
	outline: 3px solid blue !important;
}

.last-row.last-in-row {
	outline: 3px solid purple !important;
}
*/
/*------------------------------------------------------------------
[4.10 Violators]
	@deprecated
	Use Hero module instead
*/
/*------------------------------------------------------------------
[4.13 Highlights]
*/
/**
	  * @toc 4.11
	  * @name Highlight
	  * @slug highlight
	  * @description Highlights are a subtler variant of the <a href="#module-block-cta">Block CTA module</a> that should only be used in page sidebars.
	  * @container true
	  * @gridclass col-sm-4
	  * @markup
<ul class="highlight-list clearfix">
	<li class="highlight col-xsl-6 col-sm-12" data-mh="highlight">
		<img class="highlight-img" src="../img/knowledgecenter.jpg" alt="Knowledge Center">

		<h2 class="highlight-title"><a href="#">Knowledge center</a></h2>

		<p class="highlight-desc">Compare efficiency data and see how Eaton UPSs with Energy Saver System perform with your load
			profile.</p>

	</li>
</ul>
*/
.highlight-list {
  padding-left: 0;
  list-style: none;
}
.highlight {
  margin-bottom: 20px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid #e6e6e5;
}
.highlight:last-child {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  border-bottom: none;
}
.in-page .highlight {
  border-bottom: 0;
}
.highlight-title {
  font-size: 18px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin-top: 20px !important;
  margin-bottom: 10px !important;
}
.highlight-noborder {
  border-bottom: 1px solid #e6e6e5;
}
@media (min-width: 480px) and (max-width: 767px) {
  .highlight-noborder {
    border-bottom: 0;
  }
}
@media (min-width: 768px) {
  .highlight-noborder {
    border-bottom: 1px solid #e6e6e5;
  }
}
.highlight-desc {
  font-size: 12px;
  margin-bottom: 0 !important;
}
.highlight-img {
  display: block;
  max-width: 100%;
  height: auto;
}
/*------------------------------------------------------------------
[4.14 Product Filtering]
*/
/**
  * @toc 4.12
  * @name Faceted left filtering
  * @slug filtering
  * @description The following form elements are specific to filtering.
**/
/**
  * @toc 4.12.1
  * @name Toggle switches
  * @slug toggle-switches
  * @description Toggle switches are used to activate or deactivate options that affect filtering as a whole.
  * @submodule true
  * @container true
  * @gridclass col-md-4
  * @markup
<div class="filter-section switches">
	<div class="fieldset-wrap ptm pbs" id="availability">
		<fieldset>
			<legend>Availability</legend>
			<label class="availability switch-row clearfix">
				<span class="switch-label">Only show products with pricing</span>
				<input data-size="mini" class="switch-box no-proxy hash-field checkbox-exclusion" data-value="true" name="Criteria.ShowProductsWithPricing" data-id="Only show products with pricing" type="checkbox" value="true" data-hashalias="dp">
			</label>
			<label class="availability switch-row clearfix">
				<span class="switch-label">Only show products with lead time</span>
				<input data-size="mini" class="switch-box no-proxy hash-field checkbox-exclusion" data-value="true" name="Criteria.ShowProductsWithLeadTime" data-id="Only show products with lead time" type="checkbox" value="true" data-hashalias="dlt">
			</label>
			<label class="availability switch-row clearfix">
				<span class="switch-label">Only show products with segment code</span>
				<input data-size="mini" class="switch-box no-proxy hash-field checkbox-exclusion" data-value="true" name="Criteria.ShowProductsWithSegmentCode" data-id="Only show products with segment code" type="checkbox" value="true" data-hashalias="dsc">
			</label>
			<label class="availability switch-row clearfix">
				<span class="switch-label">Only show products with express shipments</span>
				<input data-size="mini" class="switch-box no-proxy hash-field checkbox-exclusion" data-value="true" name="Criteria.ShowProductsWithExpressShipments" data-id="Only show products with express shipping" type="checkbox" value="true" data-hashalias="dxs">
			</label>
		</fieldset>
	</div>
</div>
**/
/**
  * @toc 4.12.2
  * @name Filter option checkboxes
  * @slug filter-option-checkboxes
  * @description Checkboxes are used to enable and disable individual filter options. In this example a 2-up layout for filtering options is used because the option label are very short. This can be enabled by adding a class of "filter-2up" to div.fieldsetwrap.
  * @submodule true
  * @container true
  * @gridclass col-md-12
  * @markup
  <aside class="col-sm-4 filtering-sidebar" id="sidebar">
					<form class="filtering-form" id="fSearchCriteria" data-category="product" data-subcategory="@Model.Category.ProductCategoryKey" data-productname="Search Results">
						<div class="form-group mvs filter-search mbh">
							<label for="SearchTerm">Search Clutch and Brake:</label>
							<div class="queryrow input-group">
								<input type="text" data-val="true" placeholder="Enter Part Number" class="form-control hash-field hose-assembly-search js-exclude-from-reset" id="SearchTerm" data-hashalias="st"/>
								<span class="input-group-btn">
									<button id="hoseAssemblySearch" class="btn btn-primary btn-filtering-search" type="button">Search</button>
								</span>
							</div>
						</div>


						<div class="filter-container">
							<div class="mobile-filter-head visible-xs"><i class="icon-filter"></i> Filters</div>
							<header class="filtering-head">
								<div class="row">
									<div class="col-sm-8 hidden-xs">
										<h2><i class="icon-filter"></i> Filters</h2>
									</div>
									<div class="col-sm-4 text-right xs-text-center">
										<span data-dismiss="reset" class="resetFilters"><i class="icon-refresh"></i>Reset</span>
									</div>
								</div>
							</header>

							<input type="hidden" id="LanguagePrefix" name="LanguagePrefix" value="en" class="hide"/>
							<input type="hidden" name="Criteria.ProductCategoryKey" value="@Model.Category.ProductCategoryKey" id="Criteria_ProductCategoryKey" class="hidden-criteria hide"/>
							<input type="hidden" name="Criteria.Subcategory" value="@(Model.Subcategory != null ? Model.Subcategory.BizName : null)" id="Criteria_Subcategory" class="hidden-criteria hide" />
							<input type="hidden" name="Criteria.HoseAssemblyProductCategory" value="@(Model.Criteria.HoseAssemblyProductCategory.HasValue ? Model.Criteria.HoseAssemblyProductCategory.ToString() : "")" id="Criteria_HoseAssemblyProductCategory" class="hidden-criteria hide" />
							<input type="hidden" name="HideFilters" id="HideFilters" class="hash-field" data-hashalias="hf" value="false" />

							<!-- product filter segmenet availability partial -->

							<div class="filter-section first">
								<h3 class="set-toggle closed">
									<span>Segment Code</span>
									<b class="caret hidden-xs"></b>
									<i class="icon-chevron-right visible-xs"></i>
								</h3>
								<div class="fieldsetwrap slide filter-SegmentCode filter-2up" id="segment_code">
									<fieldset data-fieldset="Segment Code">
										<legend>Segment Code</legend>
										<div class="option-wrapper go-back visible-xs">
											<span class="input-label"><i class="icon-chevron-left"></i> Segment Code</span>
										</div>
										<div class="option-wrapper">
											<label><input type="checkbox" value="A" name="Criteria.Segment" data-id="A" class="hash-field" data-hashalias="sc"><span class="input-label">A</span></label>
										</div>
										<div class="option-wrapper">
											<label><input type="checkbox" value="B" name="Criteria.Segment" data-id="B" class="hash-field" data-hashalias="sc"><span class="input-label">B</span></label>
										</div>
										<div class="option-wrapper">
											<label><input type="checkbox" value="C" name="Criteria.Segment" data-id="C" class="hash-field" data-hashalias="sc"><span class="input-label">C</span></label>
										</div>
										<div class="option-wrapper">
											<label><input type="checkbox" value="D" name="Criteria.Segment" data-id="D" class="hash-field" data-hashalias="sc"><span class="input-label">D</span></label>
										</div>
										<div class="option-wrapper">
											<label><input type="checkbox" value="E" name="Criteria.Segment" data-id="E" class="hash-field" data-hashalias="sc"><span class="input-label">E</span></label>
										</div>
										<div class="option-wrapper">
											<label><input type="checkbox" value="F" name="Criteria.Segment" data-id="F" class="hash-field" data-hashalias="sc"><span class="input-label">F</span></label>
										</div>
										<div class="option-wrapper">
											<label><input type="checkbox" value="G" name="Criteria.Segment" data-id="G" class="hash-field" data-hashalias="sc"><span class="input-label">G</span></label>
										</div>
										<div class="option-wrapper">
											<label><input type="checkbox" value="H" name="Criteria.Segment" data-id="H" class="hash-field" data-hashalias="sc"><span class="input-label">H</span></label>
										</div>
										<div class="option-wrapper">
											<label><input type="checkbox" value="I" name="Criteria.Segment" data-id="I" class="hash-field" data-hashalias="sc"><span class="input-label">I</span></label>
										</div>
										<div class="option-wrapper">
											<label><input type="checkbox" value="J" name="Criteria.Segment" data-id="J" class="hash-field" data-hashalias="sc"><span class="input-label">J</span></label>
										</div>
										<div class="option-wrapper">
											<label><input type="checkbox" value="K" name="Criteria.Segment" data-id="K" class="hash-field" data-hashalias="sc"><span class="input-label">K</span></label>
										</div>
										<div class="option-wrapper">
											<label><input type="checkbox" value="L" name="Criteria.Segment" data-id="L" class="hash-field" data-hashalias="sc"><span class="input-label">L</span></label>
										</div>
										<div class="option-wrapper">
											<label><input type="checkbox" value="M" name="Criteria.Segment" data-id="M" class="hash-field" data-hashalias="sc"><span class="input-label">M</span></label>
										</div>
										<div class="option-wrapper">
											<label><span class="input-label">&nbsp;</span></label>
										</div>

									</fieldset>
								</div>
							</div>
						</div>
					</form>
				</aside>
**/
/**
  * @toc 4.12.3
  * @name Filter tree view
  * @slug filter-tree-view
  * @description Tree views are used for hierarchical "drill-down" selection.
  * @submodule true
  * @container true
  * @gridclass col-md-12
  * @markup
  <aside class="col-sm-4 filtering-sidebar" id="sidebar">
					<div class="exp-col-filtering filter-container tree-filters">
						<div class="filter-section">
							<h3><a href="#" class="js-category tree-bold" data-name="@Model.CategoryHierarchy.Name">Clutch and Brake<!--@Model.CategoryHierarchy.Name--> <span class="cat-count">(15228)<!--(@Model.CategoryHierarchy.ProductCount)--></span></a></h3>
							<ul id="tree" class="jstree jstree-1 jstree-default jstree-default-responsive">
								<ul class="jstree-container-ul jstree-children jstree-no-icons">
									<li id="node_@Model.Id" class="jstree-node">
										<a data-id="@Model.Id" data-parentid="@Model.ParentId" data-name="@Model.Name" data-imageurl="@EntityPathHelper.GetCategoryImage(Model)" data-subcategorycount="@Model.Children.Count" class="js-node" id="category_@Model.Id">Combination <span class="cat-count">(15)</span></a>
										<ul class="jstree-children" role="group">
											<li aria-selected="false" class="jstree-node  jstree-open" id="node_81063" aria-expanded="true" role="treeitem">
												<i class="jstree-icon jstree-ocl"></i>
												<a data-id="81063" data-parentid="81371" data-name="MA Series" data-imageurl="http://www.eaton.com/ecm/groups/public/@pub/@eaton/@hyd/documents/content/pws_tier-gear-ma.png" data-subcategorycount="1" id="category_81063" href="#" class="jstree-anchor  js-node">
													<i class="jstree-icon jstree-themeicon"></i>MA Series
													<span class="cat-count">(12)</span>
												</a>
												<ul class="jstree-children" role="group">
													<li aria-selected="true" class="jstree-node jstree-last" id="node_81227"
														role="treeitem">
														<i class="jstree-icon jstree-ocl"></i>
														<a data-id="81227" data-parentid="81063" data-name="MA"
														   data-imageurl="http://www.eaton.com/ecm/groups/public/@pub/@eaton/@hyd/documents/content/pws_tier-gear-ma.png"
														   data-subcategorycount="0" data-url="/products/configure/configurator/motors/ma/"
														   id="category_81227" href="#" class="jstree-anchor  jstree-clicked js-node leaf">
															<i class="jstree-icon jstree-themeicon"></i>MA <span class="cat-count">(12)</span>
														</a>
														<a id="81227" href="#" class="configit hash-url"><i class="icon-cog"></i>Configure it</a>
													</li>
												</ul>
											</li>
											<li aria-selected="false" class="jstree-node" id="node_81064"
												aria-expanded="false" role="treeitem"><i class="jstree-icon jstree-ocl"></i><a
													data-id="81064" data-parentid="81371" data-name="MB Series"
													data-imageurl="http://www.eaton.com/ecm/groups/public/@pub/@eaton/@hyd/documents/content/pws_tier-gear-mb.png"
													data-subcategorycount="1" id="category_81064" href="#" class="jstree-anchor  js-node"><i
													class="jstree-icon jstree-themeicon"></i>MB Series <span
													class="cat-count">(8)</span></a></li>
											<li aria-selected="false" class="jstree-node jstree-last" id="node_81065"
												aria-expanded="false" role="treeitem"><i class="jstree-icon jstree-ocl"></i><a
													data-id="81065" data-parentid="81371" data-name="S26 Series"
													data-imageurl="http://www.eaton.com/ecm/groups/public/@pub/@eaton/@hyd/documents/content/pws_tier-s26motor.png"
													data-subcategorycount="1" id="category_81065" href="#" class="jstree-anchor  js-node"><i
													class="jstree-icon jstree-themeicon"></i>S26 Series <span class="cat-count">(190)</span></a>
											</li>
										</ul>
									</li>
									<li id="node_@Model.Id"  class="jstree-node  jstree-leaf">
										<a data-id="@Model.Id" data-parentid="@Model.ParentId" data-name="@Model.Name" data-imageurl="@EntityPathHelper.GetCategoryImage(Model)" data-subcategorycount="@Model.Children.Count" class="js-node" id="category_@Model.Id">Disc Style <span class="cat-count">(109)</span></a>
									</li>
									<li id="node_@Model.Id"  class="jstree-node  jstree-leaf">
										<a data-id="@Model.Id" data-parentid="@Model.ParentId" data-name="@Model.Name" data-imageurl="@EntityPathHelper.GetCategoryImage(Model)" data-subcategorycount="@Model.Children.Count" class="js-node" id="category_@Model.Id">Drum Style <span class="cat-count">(5113)</span></a>
									</li>
									<li id="node_@Model.Id"  class="jstree-node  jstree-leaf">
										<a data-id="@Model.Id" data-parentid="@Model.ParentId" data-name="@Model.Name" data-imageurl="@EntityPathHelper.GetCategoryImage(Model)" data-subcategorycount="@Model.Children.Count" class="js-node" id="category_@Model.Id">Inching <span class="cat-count">(2)</span></a>
									</li>
									<li id="node_@Model.Id"  class="jstree-node  jstree-leaf">
										<a data-id="@Model.Id" data-parentid="@Model.ParentId" data-name="@Model.Name" data-imageurl="@EntityPathHelper.GetCategoryImage(Model)" data-subcategorycount="@Model.Children.Count" class="js-node" id="category_@Model.Id">Parts <span class="cat-count">(5312)</span></a>
									</li>
									<!-- ORIGINAL
									<li id="node_@Model.Id">
										<a data-id="@Model.Id" data-parentid="@Model.ParentId" data-name="@Model.Name" data-imageurl="@EntityPathHelper.GetCategoryImage(Model)" data-subcategorycount="@Model.Children.Count" class="js-node" id="category_@Model.Id">@Model.Name <span class="cat-count">(@Model.ProductCount)</span></a>
										- <a href="@url" class="configit hash-url" data-id="@Model.Id"><i class="icon settings"></i>Configure</a>
									</li>-->

								</ul>
							</ul>
						</div>
					</div>
				</aside>
**/
.filter-quicklinks {
  display: none;
  position: relative;
}
@media (min-width: 768px) {
  .filter-quicklinks {
    display: block;
  }
}
.filter-quicklinks.cat {
  padding-top: 25px;
  margin-bottom: 20px;
}
.filter-quicklinks a.backTo {
  text-transform: uppercase;
  clear: both;
  display: block;
}
.filter-quicklinks a.backTo:active {
  top: 0px;
}
.filter-quicklinks .h3 {
  display: block;
  font-size: 20px;
  line-height: 20px;
  position: relative;
  width: inherit;
  margin: 0;
  margin-bottom: 10px;
  border-bottom: 0;
  padding-bottom: 0;
}
.filter-quicklinks .h3 a {
  background: #fff;
  padding-right: 10px;
}
.filter-quicklinks .h3 a:hover {
  text-decoration: none;
  color: #0067cd;
}
.filter-quicklinks .h3 b.caret {
  background-color: #FAFDFF;
  position: absolute;
  right: -20px;
  opacity: 1;
  filter: alpha(opacity=100);
  display: block;
  top: 10px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 7px solid #006EC7;
}
.lt-ie9 .filter-quicklinks .h3 b.caret {
  border: 0;
  top: 2px;
  width: auto;
  height: auto;
}
.lt-ie9 .filter-quicklinks .h3 b.caret:before {
  display: inline-block;
  content: "\e620";
  font-family: 'icomoon';
  font-size: 8px;
  color: #0067cd;
}
.filter-quicklinks .h3 b.caret.down {
  top: 14px;
  border-top: 7px solid #006EC7;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
}
.lt-ie9 .filter-quicklinks .h3 b.caret.down {
  border: 0;
  top: 6px;
  width: auto;
  height: auto;
}
.lt-ie9 .filter-quicklinks .h3 b.caret.down:before {
  display: inline-block;
  content: "\e621";
  font-family: 'icomoon';
  font-size: 8px;
  color: #0067cd;
}
.filter-quicklinks #filter_quicklinks ul.quicklinks li {
  font-weight: bold;
  margin-bottom: 4px;
}
/* ================= */
/* = ASIDE#SIDEBAR = */
/* ================= */
#sidebar {
  display: block;
}
@media (max-width: 767px) {
  .no-filter #sidebar.filtering {
    display: none;
  }
  .no-filter .show-filter-results {
    display: none;
  }
}
.snapjs-open #sidebar {
  display: none;
}
.fieldset-wrap {
  overflow: hidden;
  display: block;
}
.filtering aside.search label.control-label {
  font-size: 14px;
  padding: 0;
  margin-bottom: 5px;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}
.filtering aside.search form {
  margin-bottom: 0;
}
.filtering aside.search.padding {
  padding: 1.42857143;
}
.sort-filter {
  display: inline-block;
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 10px 10px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #ffffff;
  background-color: #0067cd;
  border-color: transparent;
  margin: 0 9px;
  padding: 9px 12px 6px;
}
.sort-filter:focus,
.sort-filter:active:focus,
.sort-filter.active:focus,
.sort-filter.focus,
.sort-filter:active.focus,
.sort-filter.active.focus {
  outline: none;
}
.sort-filter:hover,
.sort-filter:focus,
.sort-filter.focus {
  color: #ffffff;
  text-decoration: none;
}
.sort-filter:visited {
  color: #ffffff;
}
.sort-filter:active,
.sort-filter.active {
  outline: 0;
  background-image: none;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.sort-filter.disabled,
.sort-filter[disabled],
fieldset[disabled] .sort-filter {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;
}
.hero-overlay .sort-filter {
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.lt-ie9 .hero-overlay .sort-filter {
  border: 1px solid #4ea7ff;
}
.hero-overlay .sort-filter:hover {
  border: 1px solid rgba(255, 255, 255, 0.35);
}
@media (max-width: 991px) {
  .hero-overlay .sort-filter {
    padding: 5px 10px;
    font-size: 13px;
    line-height: 1.5;
    border-radius: 0;
  }
  .hero-overlay .sort-filter.btn-wide {
    padding: 5px 25px;
  }
}
.sort-filter:hover,
.sort-filter:focus,
.sort-filter.focus,
.sort-filter:active,
.sort-filter.active,
.open > .dropdown-toggle.sort-filter,
.sort-filter .selected {
  color: #ffffff;
  background-color: #004d9a;
  border-color: rgba(0, 0, 0, 0);
}
.sort-filter:active,
.sort-filter.active,
.open > .dropdown-toggle.sort-filter {
  background-image: none;
}
.sort-filter.disabled,
.sort-filter[disabled],
fieldset[disabled] .sort-filter,
.sort-filter.disabled:hover,
.sort-filter[disabled]:hover,
fieldset[disabled] .sort-filter:hover,
.sort-filter.disabled:focus,
.sort-filter[disabled]:focus,
fieldset[disabled] .sort-filter:focus,
.sort-filter.disabled.focus,
.sort-filter[disabled].focus,
fieldset[disabled] .sort-filter.focus,
.sort-filter.disabled:active,
.sort-filter[disabled]:active,
fieldset[disabled] .sort-filter:active,
.sort-filter.disabled.active,
.sort-filter[disabled].active,
fieldset[disabled] .sort-filter.active {
  background-color: #0067cd;
  border-color: transparent;
}
.sort-filter .badge {
  color: #0067cd;
  background-color: #ffffff;
}
.sort-filter.selected {
  background-color: #003d6e;
}
.sort-filter.visible-xs {
  margin-bottom: 13px;
}
.mobile-filter-head {
  background: #b1b5b8;
  padding: 10px;
  z-index: 200;
  text-align: center;
  color: #ffffff;
  font-size: 14px;
}
.mobile-filter-head .icon-filters {
  font-size: 16px;
  position: relative;
  top: 1px;
}
.show-filter-results {
  display: inline-block;
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 10px 10px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #ffffff;
  background-color: #0067cd;
  border-color: transparent;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 200;
  width: 100%;
  padding: 12px 12px 10px;
  border: 9px solid #ffffff;
  border-top: 5px solid #ffffff;
}
.show-filter-results:focus,
.show-filter-results:active:focus,
.show-filter-results.active:focus,
.show-filter-results.focus,
.show-filter-results:active.focus,
.show-filter-results.active.focus {
  outline: none;
}
.show-filter-results:hover,
.show-filter-results:focus,
.show-filter-results.focus {
  color: #ffffff;
  text-decoration: none;
}
.show-filter-results:visited {
  color: #ffffff;
}
.show-filter-results:active,
.show-filter-results.active {
  outline: 0;
  background-image: none;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.show-filter-results.disabled,
.show-filter-results[disabled],
fieldset[disabled] .show-filter-results {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;
}
.hero-overlay .show-filter-results {
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.lt-ie9 .hero-overlay .show-filter-results {
  border: 1px solid #4ea7ff;
}
.hero-overlay .show-filter-results:hover {
  border: 1px solid rgba(255, 255, 255, 0.35);
}
@media (max-width: 991px) {
  .hero-overlay .show-filter-results {
    padding: 5px 10px;
    font-size: 13px;
    line-height: 1.5;
    border-radius: 0;
  }
  .hero-overlay .show-filter-results.btn-wide {
    padding: 5px 25px;
  }
}
.show-filter-results:hover,
.show-filter-results:focus,
.show-filter-results.focus,
.show-filter-results:active,
.show-filter-results.active,
.open > .dropdown-toggle.show-filter-results,
.show-filter-results .selected {
  color: #ffffff;
  background-color: #004d9a;
  border-color: rgba(0, 0, 0, 0);
}
.show-filter-results:active,
.show-filter-results.active,
.open > .dropdown-toggle.show-filter-results {
  background-image: none;
}
.show-filter-results.disabled,
.show-filter-results[disabled],
fieldset[disabled] .show-filter-results,
.show-filter-results.disabled:hover,
.show-filter-results[disabled]:hover,
fieldset[disabled] .show-filter-results:hover,
.show-filter-results.disabled:focus,
.show-filter-results[disabled]:focus,
fieldset[disabled] .show-filter-results:focus,
.show-filter-results.disabled.focus,
.show-filter-results[disabled].focus,
fieldset[disabled] .show-filter-results.focus,
.show-filter-results.disabled:active,
.show-filter-results[disabled]:active,
fieldset[disabled] .show-filter-results:active,
.show-filter-results.disabled.active,
.show-filter-results[disabled].active,
fieldset[disabled] .show-filter-results.active {
  background-color: #0067cd;
  border-color: transparent;
}
.show-filter-results .badge {
  color: #0067cd;
  background-color: #ffffff;
}
.show-filter-results.selected {
  background-color: #003d6e;
}
.show-filter-results:hover {
  border: 9px solid #ffffff;
  border-top: 5px solid #ffffff;
}
@media (min-width: 768px) {
  .filter-section h3 {
    font-weight: bold;
    padding: 7px 10px;
  }
}
@media (min-width: 768px) {
  .filter-section h3.open {
    color: #333333;
    border-bottom: none;
  }
}
.snapjs-open .show-filter-results {
  display: none !important;
}
@media (max-width: 767px) {
  aside.filtering {
    background: white;
  }
  .filter-sortby {
    padding: 15px 10px;
  }
  .filter-sortby .sort-by-label {
    font-size: 14px;
  }
}
.hide-me {
  height: 1px;
  overflow: hidden;
}
.jstree {
  margin: 0;
  padding: 0;
}
.filter-section h3,
.jstree-node {
  position: relative;
  padding: 10px;
  margin-top: -2px;
  cursor: pointer;
  color: #0067cd;
  font-weight: normal;
  font-size: 14px;
}
@media (min-width: 768px) {
  .filter-section h3,
  .jstree-node {
    font-size: 13px;
  }
}
.filter-section h3 .jstree-node,
.jstree-node .jstree-node {
  padding-right: 0;
  padding-bottom: 0;
  padding-top: 0;
  margin-top: 10px;
}
.filter-section h3 .jstree-node:first-of-type,
.jstree-node .jstree-node:first-of-type {
  margin-top: 0;
}
.filter-section h3 .jstree-node .jstree-anchor,
.jstree-node .jstree-node .jstree-anchor {
  line-height: 30px;
}
@media (min-width: 768px) {
  .filter-section h3 .jstree-node .jstree-anchor,
  .jstree-node .jstree-node .jstree-anchor {
    line-height: 18px;
  }
}
.filter-section h3 .jstree-icon,
.jstree-node .jstree-icon {
  display: none;
}
.filter-section h3 a,
.jstree-node a {
  display: block;
  position: relative;
}
@media (min-width: 768px) {
  .filter-section h3 a,
  .jstree-node a {
    display: inline-block;
  }
}
.filter-section h3 a.jstree-clicked,
.jstree-node a.jstree-clicked {
  color: black;
  cursor: default;
}
@media (min-width: 768px) {
  .filter-section h3 a.jstree-clicked:before,
  .jstree-node a.jstree-clicked:before {
    content: '\25aa';
    position: absolute;
    top: 0;
    right: 100%;
  }
}
.filter-section h3 a.jstree-clicked:hover,
.jstree-node a.jstree-clicked:hover {
  text-decoration: none;
}
.filter-section h3 a .cat-count,
.jstree-node a .cat-count {
  position: absolute;
  top: 0;
  right: 0;
  color: #636c71;
  font-weight: normal;
}
@media (min-width: 768px) {
  .filter-section h3 a .cat-count,
  .jstree-node a .cat-count {
    position: static;
  }
}
.fieldsetwrap > .filter-section > h3:first-child {
  margin-top: 0 !important;
}
@media (min-width: 768px) {
  .jstree-default {
    border-bottom: 1px solid #e6e6e5;
  }
}
@media (min-width: 768px) {
  .jstree-container-ul {
    background: #ffffff;
  }
  .jstree-container-ul > .jstree-open > a {
    display: inline-block;
    margin-bottom: 10px;
  }
  .jstree-container-ul .jstree-open .jstree-children {
    padding-bottom: 0;
  }
  .jstree-container-ul > .jstree-open > .jstree-children {
    padding-bottom: 10px;
  }
}
@media (min-width: 768px) {
  .jstree-container-ul > li > .jstree-children {
    margin: 0 -10px;
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media (min-width: 768px) {
  .jstree-container-ul > .jstree-node ul li {
    padding-left: 10px;
  }
}
.jstree-container-ul > .jstree-node ul li a.configit {
  padding-left: 10px;
  padding-bottom: 10px;
}
.jstree-container-ul > .jstree-node ul li a.configit .icon-cog {
  position: relative;
  top: 1px;
  color: #b1b5b8;
  margin-right: 3px;
}
@media (min-width: 768px) {
  .jstree-container-ul > .jstree-node ul li a.configit {
    display: inline-block;
    padding-bottom: 0;
    line-height: 18px;
    font-weight: bold;
  }
  .jstree-container-ul > .jstree-node ul li a.configit .icon-cog {
    color: #0067cd;
    font-size: 13px;
  }
  .jstree-container-ul > .jstree-node ul li a.configit:hover {
    text-decoration: none;
  }
  .jstree-container-ul > .jstree-node ul li a.configit:hover span {
    text-decoration: underline;
  }
}
@media (min-width: 768px) {
  .jstree-container-ul .jstree-children {
    background: #f4f4f4;
    padding-bottom: 10px;
  }
}
@media (max-width: 767px) {
  .filtering-sidebar {
    background: #f4f4f4;
    position: fixed;
    top: 0px;
    left: 0;
    width: 100%;
    bottom: 56px;
    padding-left: 9px;
    padding-right: 9px;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    z-index: 100;
    margin-bottom: 0 !important;
  }
  .filtering-sidebar:before {
    content: "";
    display: block;
    height: 70px;
    background: rgba(0, 0, 0, 0.5);
    margin: 0 -15px;
  }
}
.filtering-sidebar .filtering-form header.filtering-head .resetFilters {
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  color: #0067cd;
}
@media (max-width: 767px) {
  .filtering-sidebar .filtering-form header.filtering-head .resetFilters {
    display: block;
    padding: 15px 10px 10px;
    text-align: center;
  }
}
.filtering-sidebar .filtering-form header.filtering-head .resetFilters .icon-refresh {
  position: relative;
  top: 1px;
  font-size: 15px;
  margin-right: 4px;
}
.filtering-sidebar .filtering-form fieldset label {
  display: block;
  position: relative;
}
.filtering-sidebar .filtering-form fieldset label.availability {
  min-width: auto;
  float: none;
  display: block;
}
.filtering-sidebar .filtering-form fieldset label.availability span {
  width: auto;
}
.filtering-sidebar .filtering-form fieldset label i {
  position: absolute;
  top: 12px;
  left: 15px;
}
@media (min-width: 768px) {
  .filtering-sidebar .filtering-form fieldset label i {
    top: 9px;
    left: 10px;
    padding-top: 2px;
  }
}
.filtering-sidebar .filtering-form fieldset label span {
  padding-left: 25px;
  top: 0;
  height: auto;
  display: block;
}
.filtering-sidebar .filtering-form fieldset label span.input-label {
  top: 3px;
}
.filtering-sidebar .filtering-form fieldset label span.input-label.disabled {
  cursor: not-allowed;
}
.filtering-sidebar .filtering-form fieldset legend {
  display: none;
}
.filtering-sidebar .filtering-form.disabled {
  opacity: 0.25;
}
#filter_results {
  display: block;
  padding: 5px 10px;
}
@media (min-width: 768px) {
  #filter_results {
    padding: 5px 0;
  }
}
#filter_results .criterion {
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 5px;
  padding-right: 5px;
  cursor: pointer;
  color: #0067cd;
}
#filter_results .criterion button.close {
  color: #0067cd;
  float: left;
  margin-right: 4px;
  font-size: 26px;
}
#filter_results .criterion strong {
  cursor: pointer;
  font-weight: normal;
}
#filter_results .criterion:hover {
  color: #003d6e;
}
#filter_results .criterion:hover .icon.remove {
  background-position: -217px -39px;
}
#filter_results:before,
#filter_results:after {
  content: " ";
  display: table;
}
#filter_results:after {
  clear: both;
}
#filter_results:before,
#filter_results:after {
  content: " ";
  display: table;
}
#filter_results:after {
  clear: both;
}
.filtering form.form-horizontal:before,
.filtering form.form-horizontal:after {
  content: " ";
  display: table;
}
.filtering form.form-horizontal:after {
  clear: both;
}
.filtering form.form-horizontal:before,
.filtering form.form-horizontal:after {
  content: " ";
  display: table;
}
.filtering form.form-horizontal:after {
  clear: both;
}
.filtering form.form-horizontal a.see_moreLink {
  font-weight: bold;
}
.filtering form.form-horizontal a.see_moreLink:focus,
.filtering form.form-horizontal a.see_moreLink:active {
  top: 0;
  color: #004181;
}
.filtering form.form-horizontal.no-padding {
  padding: 0;
}
.filtering form.form-horizontal .form-options {
  padding: 0 1.42857143 1.42857143;
}
/* =============================== */
/* = filtered_content-literature = */
/* =============================== */
.filtered_content-literature {
  float: left;
}
.filtered_content-literature h1 {
  text-indent: 0;
}
.filtered_content-literature header.page-header {
  height: 162px;
  position: relative;
}
.filtered_content-literature .row {
  position: relative;
}
.filtered_content-literature .no-results-found {
  padding: 20px 0;
  margin-right: 30px;
  font-weight: bold;
}
.filtered_content-literature p.view_options {
  float: left;
  display: block;
  position: absolute;
  top: 0;
  left: 220px;
  line-height: 1.42857143;
  height: 1.42857143;
  vertical-align: text-top;
}
.filtered_content-literature p.view_options a {
  float: left;
  display: inline-block;
  margin: 0;
  padding: 0;
}
.filtered_content-literature p.view_options a .icon.list-view:hover {
  background-position: -58px -14px;
}
.filtered_content-literature p.view_options a .icon.grid-view:hover {
  background-position: -75px -18px;
}
.filtered_content-literature p.view_options a.active i.icon.list-view {
  background-position: -58px -14px;
}
.filtered_content-literature p.view_options a.active i.icon.grid-view {
  background-position: -75px -18px;
}
.filtered_content-literature p.view_options b.seperator {
  float: left;
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  color: #b1b5b8;
  margin-left: 0.71428571;
  margin-right: 0.71428571;
}
.filtered_content-literature a.action-send_email_list {
  display: block;
  height: 1.42857143;
  line-height: 1.42857143;
  vertical-align: middle;
  position: absolute;
  top: 118px;
  right: 0;
  color: #e6e6e5;
}
.filtered_content-literature a.action-send_email_list strong {
  margin-right: 0.35714286;
}
.filtered_content-literature a.action-send_email_list.disabled {
  cursor: not-allowed;
}
.filtered_content-literature a.action-send_email_list.disabled:hover {
  color: #bac1c6;
}
.filtered_content-literature a.action-send_email_list.disabled i.icon.email {
  background-position: -167px 0;
}
.filtered_content-literature a.action-send_email_list:hover {
  color: #0067cd;
  text-decoration: none;
}
.filtered_content-literature a.action-send_email_list:active {
  color: #004181;
  text-decoration: none;
}
.filtered_content-literature a.action-clear_email_list {
  display: block;
  height: 1.42857143;
  line-height: 1.42857143;
  vertical-align: middle;
  position: absolute;
  top: 118px;
  right: 0;
  color: #bac1c6;
}
.filtered_content-literature a.action-clear_email_list strong {
  margin-right: 0.35714286;
}
.filtered_content-literature a.action-clear_email_list.disabled {
  display: none;
  cursor: not-allowed;
}
.filtered_content-literature a.action-clear_email_list.disabled:hover {
  color: #bac1c6;
}
.filtered_content-literature a.action-clear_email_list:hover {
  color: #0067cd;
  text-decoration: none;
}
.filtered_content-literature a.action-clear_email_list:active {
  color: #004181;
  text-decoration: none;
}
.filtered_content-literature a#main_queue i.icon.send-email-list {
  margin-right: 10px;
}
.filtered_content-literature a#main_queue.active {
  color: #004181;
  text-decoration: none;
  right: 85px;
  /*span.send-email-list-count { color:@link-hover-color; }*/
}
.filtered_content-literature a#main_queue.active i.icon.send-email-list {
  background-position: -92px -17px;
}
.filtered_content-literature a#clear_queue i.icon.clear {
  margin-right: 6px;
}
.filtered_content-literature a#clear_queue.active {
  display: block;
  color: #004181;
  text-decoration: none;
  /*span.send-email-list-count { color:@link-hover-color; }*/
  cursor: pointer;
}
.ie9 a#clear_queue {
  margin-top: 2px;
}
em.lang {
  color: #e6e6e5;
  display: block;
  font-size: 11px;
  font-style: normal;
  text-decoration: none;
}
ul.email_dropdown-menu.dropdown-menu.languages li a[class*="action-"] {
  color: #0067cd;
  /*	color:#BAC1C6;*/
  position: relative;
  top: 0;
  left: 0;
}
ul.email_dropdown-menu.dropdown-menu.languages li a[class*="action-"]:hover {
  text-decoration: underline;
  -webkit-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}
ul.email_dropdown-menu.dropdown-menu.languages li a[class*="action-"].action-send_email_list.active,
ul.email_dropdown-menu.dropdown-menu.languages li a[class*="action-"].action-send_email_list.email_colorbox_attempted {
  color: #004181;
}
ul.email_dropdown-menu.dropdown-menu.languages li a[class*="action-"].action-send_email_list.active i.icon.email-blue,
ul.email_dropdown-menu.dropdown-menu.languages li a[class*="action-"].action-send_email_list.email_colorbox_attempted i.icon.email-blue {
  background-position: -167px -16px;
}
ul.email_dropdown-menu.dropdown-menu.languages li a[class*="action-"].action-add_to_email_list.active {
  color: #004181;
}
ul.email_dropdown-menu.dropdown-menu.languages li a[class*="action-"].action-add_to_email_list.active i.icon.send-email-list {
  background-position: -92px -17px;
}
p.email_growl {
  display: none;
  position: absolute;
  width: 120px;
  height: 25px;
  color: #BAC1C6;
  font-size: 11px;
  line-height: 12px;
  font-weight: normal;
  text-align: left;
  white-space: normal;
  padding: 0;
  margin: 0;
}
.list_view p.email_growl {
  text-align: right;
}
li.prod_detail_lit_item span.lit-action_icons {
  position: relative;
  height: 24px;
  margin-left: 48px;
}
li.prod_detail_lit_item span.lit-action_icons a {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
  float: left;
}
ul.filtering-list {
  list-style-type: none;
  margin: 0 0 15px 0;
  padding: 0;
}
ul.filtering-list li.disabled a {
  cursor: default;
  color: #BFDBF1;
  text-decoration: none;
}
ul.filtering-list li.disabled span {
  color: #BFDBF1;
}
ul.filtering-list li a {
  font-weight: normal;
}
ul.filtering-list li a.bold {
  font-weight: bold;
}
ul.filtering-list ul {
  margin-left: 10px;
  list-style-type: none;
}
.search-results-list .datawrap {
  display: block;
  position: relative;
  width: 564px;
  float: left;
  margin: 10px 20px 20px 0;
}
.search-results-list .datawrap .action_favorite {
  position: absolute;
  right: 0;
  top: 0;
  margin: 0;
  font-size: 16px;
  font-weight: normal;
}
.search-results-list .datawrap .action_favorite:hover {
  text-decoration: none;
}
.search-results-list .datawrap .prodname {
  display: inline-block;
  vertical-align: middle;
  font-size: 26px;
}
.search-results-list .datawrap .modelnum {
  padding-left: 20px;
  display: inline-block;
  vertical-align: middle;
  color: #636c71;
}
.search-results-list .datawrap .prodtype {
  font-weight: bold;
}
.search-results-list .datawrap .detailrow {
  border-bottom: 1px solid #b1b5b8;
  margin-bottom: 10px;
  padding: 5px 0 10px;
}
.search-results-list .datawrap .pricerow {
  display: block;
  margin-bottom: 10px;
}
.search-results-list .datawrap .pricerow .price {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  color: #d12421;
  font-weight: bold;
  padding: 10px 0 0 0;
  vertical-align: top;
  width: 130px;
}
.search-results-list .datawrap .pricemeta {
  padding-left: 0;
  display: inline-block;
}
.search-results-list .datawrap .segment-code {
  margin-top: 0;
  vertical-align: top;
}
.search-results-list .datawrap .pricedetails {
  display: inline-block;
  float: right;
  margin-top: 5px;
}
.search-results-list .datawrap .no-border {
  border: none;
  margin-bottom: 15px;
  padding-bottom: 0;
}
.search-results-list .datawrap .nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-results-list .datawrap .price-meta-wrapper {
  display: inline-block;
  width: 218px;
  margin-top: -1px;
}
.search-results-list .datawrap .product-price-wrapper {
  border-top: 1px solid #CCCCCC;
  margin-bottom: 0;
  margin-top: 0;
  padding-top: 10px;
}
.search-results-list .datawrap .details-wrap {
  width: 564px;
  float: left;
}
div.erpwrap {
  float: left;
  width: 100%;
}
div.erpwrap table {
  background: transparent;
  width: 100%;
  font-size: 11px;
}
div.erpwrap table tr th {
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
}
div.erpwrap table tr th:first-child {
  width: 115px;
  max-width: 115px;
}
div.erpwrap table tr th:nth-child(2) {
  width: 120px;
  max-width: 120px;
}
div.erpwrap table tr th.priceval {
  vertical-align: top;
}
div.erpwrap table tr th.currencyval {
  vertical-align: top;
}
div.erpwrap table tr th.segcodeval {
  vertical-align: top;
}
div.erpwrap table tr th.esttimeval {
  vertical-align: top;
}
div.erpwrap table tr td {
  padding: 6px 10px;
  vertical-align: middle;
}
div.erpwrap table tr td:first-child {
  width: 115px;
  max-width: 115px;
}
div.erpwrap table tr td:nth-child(2) {
  width: 120px;
  max-width: 120px;
}
div.erpwrap table tr td.priceval {
  min-width: 65px;
}
div.erpwrap table tr td.priceval .cont-csr {
  color: #d12421;
}
@media (max-width: 767px) {
  div.erpwrap table.tablesaw tr td:first-child {
    width: auto;
    max-width: none;
  }
}
@media (max-width: 767px) {
  div.erpwrap table.tablesaw tr td:nth-child(2) {
    width: auto;
    max-width: none;
  }
}
div.erpwrap table .select-part {
  max-width: 100px;
}
div.erpwrap.details table {
  border: 1px solid #e6e6e5;
}
div.erpwrap.details table tbody tr th {
  vertical-align: top;
}
div.erpwrap.details table tbody tr:nth-child(odd) {
  background: white;
}
div.erpwrap.details table tbody tr:nth-child(odd) td {
  background: white;
  vertical-align: top;
}
div.contcsr {
  display: inline-block;
  width: 100%;
  background: #f4f4f4;
  padding: 6px 10px;
  font-size: 11px;
}
div.contcsr.w-cta {
  padding: 6px 10px;
}
div.contcsr.w-cta .select-part {
  width: 100px;
  max-width: 100px;
  margin-right: 13px;
  float: left;
}
.search-controls {
  margin: 0 0 30px 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #e6e6e5;
}
.search-controls .inputlabel {
  padding: 0 10px 0 20px;
}
.search-controls .btn {
  font-weight: bold;
}
.search-controls .sortbyselect {
  width: 125px;
}
.sort-by-label {
  color: #b1b5b8;
  padding: 5px 5px 0 0;
}
.pagination-header {
  padding-top: 5px;
  color: #b1b5b8;
}
.filterresults .filteritem {
  margin-right: 10px;
}
.filterresults .criterion {
  display: inline-block;
  cursor: pointer;
}
.filtered_content-literature header.page-header .row div.btn-group,
.product-list-wrap .page-header div.btn-group,
.crossreference .filter-controls div.btn-group,
.crimp-specs .filter-controls div.btn-group,
.news .filter-controls div.btn-group,
.search-controls div.btn-group {
  margin-left: 0.35714286;
  margin-right: 1.42857143;
}
.filtered_content-literature header.page-header .row div.btn-group .btn-primary.btn-xs,
.product-list-wrap .page-header div.btn-group .btn-primary.btn-xs,
.crossreference .filter-controls div.btn-group .btn-primary.btn-xs,
.crimp-specs .filter-controls div.btn-group .btn-primary.btn-xs,
.news .filter-controls div.btn-group .btn-primary.btn-xs,
.search-controls div.btn-group .btn-primary.btn-xs {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  text-shadow: 0 1px 2px #e6e6e5;
}
.filtered_content-literature header.page-header .row div.btn-group#sort_by,
.product-list-wrap .page-header div.btn-group#sort_by,
.crossreference .filter-controls div.btn-group#sort_by,
.crimp-specs .filter-controls div.btn-group#sort_by,
.news .filter-controls div.btn-group#sort_by,
.search-controls div.btn-group#sort_by {
  margin-right: 0;
}
.filtered_content-literature header.page-header .row div.btn-group .dropdown-menu li a:hover,
.product-list-wrap .page-header div.btn-group .dropdown-menu li a:hover,
.crossreference .filter-controls div.btn-group .dropdown-menu li a:hover,
.crimp-specs .filter-controls div.btn-group .dropdown-menu li a:hover,
.news .filter-controls div.btn-group .dropdown-menu li a:hover,
.search-controls div.btn-group .dropdown-menu li a:hover,
.filtered_content-literature header.page-header .row div.btn-group .dropdown-menu li a:active,
.product-list-wrap .page-header div.btn-group .dropdown-menu li a:active,
.crossreference .filter-controls div.btn-group .dropdown-menu li a:active,
.crimp-specs .filter-controls div.btn-group .dropdown-menu li a:active,
.news .filter-controls div.btn-group .dropdown-menu li a:active,
.search-controls div.btn-group .dropdown-menu li a:active,
.filtered_content-literature header.page-header .row div.btn-group .dropdown-menu li a:focus,
.product-list-wrap .page-header div.btn-group .dropdown-menu li a:focus,
.crossreference .filter-controls div.btn-group .dropdown-menu li a:focus,
.crimp-specs .filter-controls div.btn-group .dropdown-menu li a:focus,
.news .filter-controls div.btn-group .dropdown-menu li a:focus,
.search-controls div.btn-group .dropdown-menu li a:focus {
  top: 0;
}
@media (max-width: 767px) {
  .product-list-wrap .page-header div.btn-group {
    margin-right: 0;
  }
}
div.btn-group.last {
  margin-right: 0 !important;
}
/* =========================== */
/* = AJAX REQUEST PROCESSING = */
/* =========================== */
#processing-request {
  position: fixed;
  z-index: 2000;
  width: 250px;
  height: 200px;
  background: white url(../img/ajax-logo.png) center 50px no-repeat;
  border: 1px solid #b1b5b8;
  left: 50%;
  top: 50%;
  margin-left: -125px;
  margin-top: -125px;
  text-align: center;
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}
#processing-request span.processing {
  margin-top: 110px;
  display: block;
}
#processing-request span.loading {
  display: block;
  margin: auto;
  width: 32px;
  height: 32px;
  background: url(../img/ajaxloading.gif) no-repeat;
  margin-top: 10px;
}
#processing-request img {
  width: 200px;
}
/* ==================
/* SEARCH
/* ==================
*/
#fProductSearch label.input-validation-error,
#fSearch label.input-validation-error {
  display: none !important;
}
.filter-quicklinks.cat {
  padding: 0 9px;
}
@media (min-width: 768px) {
  .filter-quicklinks.cat {
    padding: 0;
  }
}
@media (max-width: 767px) {
  .filter-quicklinks.cat {
    margin-bottom: 0;
  }
}
.filter-sortby {
  padding: 10px;
}
.filter-container {
  border: 1px solid #b1b5b8;
}
@media (min-width: 768px) {
  .filter-container {
    border-width: 0;
  }
}
.filter-container .filtering-head {
  background: #f4f4f4;
  padding: 10px;
}
@media (max-width: 767px) {
  .filter-container .filtering-head {
    padding: 0;
  }
}
@media (min-width: 768px) {
  .filter-container .filtering-head {
    border-top: 1px solid #b1b5b8;
  }
}
.filter-container .filtering-head h2 {
  font-size: 14px;
  line-height: 14px;
  color: #636c71;
}
.filter-container .filtering-head h2 .icon-filter {
  position: relative;
  top: 1px;
  font-size: 16px;
  margin-right: 4px;
}
.filter-container .option-wrapper {
  border-bottom: 1px solid #b1b5b8;
  cursor: pointer;
  color: #0067cd;
}
@media (min-width: 768px) {
  .filter-container .option-wrapper {
    border: none;
  }
}
.filter-container .option-wrapper.disabled {
  color: #e6e6e5;
  cursor: not-allowed;
}
.filter-container .option-wrapper.disabled label {
  cursor: not-allowed;
}
.filter-container .option-wrapper.blank-option {
  cursor: default;
  border-bottom: 1px solid #b1b5b8;
}
.filter-container .option-wrapper.go-back {
  position: relative;
  text-align: center;
  font-size: 15px;
  padding: 12px 0;
  font-weight: bold;
  background: white;
}
@media (min-width: 768px) {
  .filter-container .option-wrapper.go-back {
    margin-top: -1px;
    border-top: 1px solid #b1b5b8;
  }
  .filter-container .option-wrapper.go-back:before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    display: block;
    width: 100%;
  }
}
.filter-container .option-wrapper.go-back > a {
  padding: 0 20px 0 40px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
}
.filter-container .option-wrapper.go-back i {
  position: absolute;
  top: 12px;
  left: 18px;
  font-size: 20px;
}
.filter-container .option-wrapper label {
  margin-bottom: 0 !important;
  padding: 16px 0 0;
  cursor: pointer;
}
@media (min-width: 768px) {
  .filter-container .option-wrapper label {
    padding: 9px 0;
  }
}
.filter-container .option-wrapper label.checked {
  color: #000000;
  font-weight: bold;
}
.filter-container .option-wrapper span.input-label {
  height: auto;
  margin-left: 59px;
  padding-left: 0;
  padding-right: 10px;
}
@media (min-width: 768px) {
  .filter-container .option-wrapper span.input-label {
    margin-left: 41px;
    position: relative;
  }
}
.filter-container .option-wrapper.go-back span.input-label {
  margin-left: 0 !important;
  padding-right: 0 !important;
}
@media (min-width: 768px) {
  .filter-container .filter-2up .option-wrapper,
  .filter-container .filter-SegmentCode .option-wrapper,
  .filter-container .filter-DashSize .option-wrapper,
  .filter-container .filter-MinTemperatureF .option-wrapper,
  .filter-container .filter-MaxTemperatureF .option-wrapper,
  .filter-container .filter-MinTemperatureC .option-wrapper,
  .filter-container .filter-MaxTemperatureC .option-wrapper,
  .filter-container .filter-OperatingPressurePSI .option-wrapper,
  .filter-container .filter-OperatingPressurebar .option-wrapper,
  .filter-container .filter-EndSize .option-wrapper,
  .filter-container .filter-HoseSize .option-wrapper {
    width: 50%;
    float: left;
    border: none;
    /*&:nth-of-type(even) {
					border-right: 1px solid @eaton-med-gray;
				}*/
  }
  .filter-container .filter-2up .option-wrapper:first-of-type,
  .filter-container .filter-SegmentCode .option-wrapper:first-of-type,
  .filter-container .filter-DashSize .option-wrapper:first-of-type,
  .filter-container .filter-MinTemperatureF .option-wrapper:first-of-type,
  .filter-container .filter-MaxTemperatureF .option-wrapper:first-of-type,
  .filter-container .filter-MinTemperatureC .option-wrapper:first-of-type,
  .filter-container .filter-MaxTemperatureC .option-wrapper:first-of-type,
  .filter-container .filter-OperatingPressurePSI .option-wrapper:first-of-type,
  .filter-container .filter-OperatingPressurebar .option-wrapper:first-of-type,
  .filter-container .filter-EndSize .option-wrapper:first-of-type,
  .filter-container .filter-HoseSize .option-wrapper:first-of-type {
    border-top: 0;
  }
  .filter-container .filter-2up .additional-filters .option-wrapper:nth-of-type(even),
  .filter-container .filter-SegmentCode .additional-filters .option-wrapper:nth-of-type(even),
  .filter-container .filter-DashSize .additional-filters .option-wrapper:nth-of-type(even),
  .filter-container .filter-MinTemperatureF .additional-filters .option-wrapper:nth-of-type(even),
  .filter-container .filter-MaxTemperatureF .additional-filters .option-wrapper:nth-of-type(even),
  .filter-container .filter-MinTemperatureC .additional-filters .option-wrapper:nth-of-type(even),
  .filter-container .filter-MaxTemperatureC .additional-filters .option-wrapper:nth-of-type(even),
  .filter-container .filter-OperatingPressurePSI .additional-filters .option-wrapper:nth-of-type(even),
  .filter-container .filter-OperatingPressurebar .additional-filters .option-wrapper:nth-of-type(even),
  .filter-container .filter-EndSize .additional-filters .option-wrapper:nth-of-type(even),
  .filter-container .filter-HoseSize .additional-filters .option-wrapper:nth-of-type(even) {
    border-right: 0;
  }
  .filter-container .filter-2up .additional-filters .option-wrapper:nth-of-type(odd),
  .filter-container .filter-SegmentCode .additional-filters .option-wrapper:nth-of-type(odd),
  .filter-container .filter-DashSize .additional-filters .option-wrapper:nth-of-type(odd),
  .filter-container .filter-MinTemperatureF .additional-filters .option-wrapper:nth-of-type(odd),
  .filter-container .filter-MaxTemperatureF .additional-filters .option-wrapper:nth-of-type(odd),
  .filter-container .filter-MinTemperatureC .additional-filters .option-wrapper:nth-of-type(odd),
  .filter-container .filter-MaxTemperatureC .additional-filters .option-wrapper:nth-of-type(odd),
  .filter-container .filter-OperatingPressurePSI .additional-filters .option-wrapper:nth-of-type(odd),
  .filter-container .filter-OperatingPressurebar .additional-filters .option-wrapper:nth-of-type(odd),
  .filter-container .filter-EndSize .additional-filters .option-wrapper:nth-of-type(odd),
  .filter-container .filter-HoseSize .additional-filters .option-wrapper:nth-of-type(odd) {
    border-right: 1px solid #b1b5b8;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .filter-container .filter-2up .additional-filters .option-wrapper:nth-of-type(odd),
  .filter-container .filter-SegmentCode .additional-filters .option-wrapper:nth-of-type(odd),
  .filter-container .filter-DashSize .additional-filters .option-wrapper:nth-of-type(odd),
  .filter-container .filter-MinTemperatureF .additional-filters .option-wrapper:nth-of-type(odd),
  .filter-container .filter-MaxTemperatureF .additional-filters .option-wrapper:nth-of-type(odd),
  .filter-container .filter-MinTemperatureC .additional-filters .option-wrapper:nth-of-type(odd),
  .filter-container .filter-MaxTemperatureC .additional-filters .option-wrapper:nth-of-type(odd),
  .filter-container .filter-OperatingPressurePSI .additional-filters .option-wrapper:nth-of-type(odd),
  .filter-container .filter-OperatingPressurebar .additional-filters .option-wrapper:nth-of-type(odd),
  .filter-container .filter-EndSize .additional-filters .option-wrapper:nth-of-type(odd),
  .filter-container .filter-HoseSize .additional-filters .option-wrapper:nth-of-type(odd) {
    border: none;
  }
}
.filter-container .additional-filters {
  clear: both;
}
.filter-container .additional-filters .option-wrapper {
  margin: 0;
}
@media (max-width: 767px) {
  .filter-container {
    border: 0;
    border-top: 1px solid #b1b5b8;
    border-bottom: 1px solid #b1b5b8;
    margin-left: -9px;
    margin-right: -9px;
  }
  .filter-container .filter-section {
    position: relative;
    overflow: hidden;
  }
  .filter-container .filter-section:last-child:after {
    height: 1px;
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    display: block;
    border-top: 1px solid #b1b5b8;
  }
  .filter-container .filter-section.filter-sortby {
    overflow: visible;
    border-bottom: 1px solid #b1b5b8;
  }
  .filter-container .filter-section.filter-sortby .chosen-container,
  .filter-container .filter-section.filter-sortby select {
    margin-bottom: 0;
  }
  .filter-container .filter-section .fieldsetwrap.slide {
    position: fixed;
    top: 0px;
    bottom: 44px;
    left: 100%;
    width: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    background: white;
    z-index: 2;
    background: #e6e6e5;
  }
  .filter-container .filter-section .fieldsetwrap.slide fieldset {
    background: #ffffff;
  }
}
@media (max-width: 767px) {
  .filtering-sidebar {
    display: none;
  }
  .filtering-sidebar#sidebar {
    display: none;
  }
}
.exp-col-filtering {
  border-bottom: 1px solid #b1b5b8;
  margin-top: -1px;
  border-top: 0;
}
.filter-search {
  display: none;
}
.filter-section {
  background: #f4f4f4;
}
@media (min-width: 768px) {
  .filter-section {
    background: transparent;
  }
}
.filter-section.switches {
  background: #ffffff;
  border-bottom: 1px solid #e6e6e5;
}
.filter-section.switches + .filter-section {
  margin-top: -1px;
  border-top: 1px solid #b1b5b8;
}
.filter-section:last-of-type h3 {
  margin-bottom: -1px;
}
@media (max-width: 767px) {
  .filter-section:last-of-type h3 {
    margin-bottom: 0px;
  }
}
.filter-section:first-of-type h3 {
  border-bottom: 1px solid #b1b5b8;
}
.filter-section.first h3 {
  border-top: 0;
}
.filter-section h3 {
  background: white;
  font-size: 14px;
  font-weight: normal;
  border-top: 1px solid #b1b5b8;
  border-bottom: 1px solid #b1b5b8;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin-bottom: 0;
  line-height: 30px;
}
@media (min-width: 768px) {
  .filter-section h3 {
    font-weight: bold;
    padding: 7px 10px;
  }
  .filter-section h3.no-bottom-border {
    border-bottom: 0;
    margin-bottom: -10px;
  }
  .tree-filters .filter-section h3 {
    border-bottom: 0;
    margin-bottom: 0;
  }
}
.filter-section h3.alpha {
  padding-left: 50px;
}
@media (min-width: 768px) {
  .filter-section h3.alpha {
    padding-left: 20px;
  }
}
.filter-section h3.alpha i {
  top: 14px;
  color: #b1b5b8;
}
.filter-section h3 a.set-toggle {
  display: inline-block;
  width: auto;
  background-color: white;
  margin: 0;
  margin-bottom: 0.71428571;
  border: 0;
  padding-right: 0.71428571;
  font-size: 14px;
  letter-spacing: normal;
  color: #0067cd;
}
.filter-section h3 a.set-toggle:hover {
  text-decoration: none;
}
.filter-section h3 a.set-toggle:focus,
.filter-section h3 a.set-toggle:active {
  position: static;
  top: 0;
}
@media (min-width: 768px) {
  .filter-section h3 a.set-toggle.open {
    color: #333333;
  }
}
.filter-section h3.included {
  color: #636c71;
  font-weight: bold;
  border-bottom: 0;
  cursor: default;
}
.filter-section h3.closed {
  margin-bottom: -1px;
}
.filter-section h3 b.caret {
  display: block;
  background-color: transparent;
  position: absolute;
  top: 18px;
  right: 10px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid #0067cd;
  transform-origin: 8px 6px;
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transition: all 0.1s;
  -o-transition: all 0.1s;
  transition: all 0.1s;
}
.lt-ie9 .filter-section h3 b.caret {
  border: 0;
  top: 6px;
  width: auto;
  height: auto;
}
.lt-ie9 .filter-section h3 b.caret:before {
  display: inline-block;
  content: "\e620";
  font-family: 'icomoon';
  font-size: 8px;
  color: #0067cd;
}
.lt-ie9 .filter-section h3 b.caret.down {
  border: 0;
}
.lt-ie9 .filter-section h3 b.caret.down:before {
  display: inline-block;
  content: "\e621";
  font-family: 'icomoon';
  font-size: 8px;
}
.filter-section h3 b.caret.down {
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.filter-section h3 b.caret:hover {
  opacity: 1;
  filter: alpha(opacity=100);
}
.filter-section h3 i {
  position: absolute;
  top: 15px;
  right: 10px;
  font-size: 20px;
}
.filter-section.first h3 {
  margin-top: 0;
}
.filter-section .icon-check,
.filter-section .icon-uncheck {
  font-size: 16px;
  padding-top: 2px;
}
@media (max-width: 767px) {
  .filter-section .icon-check,
  .filter-section .icon-uncheck {
    padding: 7px 5px 5px 10px;
  }
}
.filter-section label {
  font-size: 11px;
  font-weight: normal;
}
@media (max-width: 767px) {
  .filter-section label {
    font-size: 15px;
    min-height: 54px;
    font-weight: normal;
  }
}
@media (min-width: 768px) {
  .filter-section label {
    font-size: 14px;
    font-weight: bold;
  }
  .filter-section label .input-label.disabled {
    font-weight: normal;
  }
}
@media (min-width: 768px) {
  .filter-section label .checkbox-proxy:before {
    border: 1px solid #b1b5b8;
    border-radius: 3px;
    background: #fff;
    box-shadow: inset 1.5px 2.598px 3px 0px rgba(0, 1, 1, 0.24);
    padding: 6px;
    content: '';
    color: #333333;
    font-size: 15px;
    display: inline-block;
    width: 25px;
    height: 25px;
    line-height: 13px;
    text-indent: -1px;
    margin-right: 6px;
  }
  .filter-section label .checkbox-proxy.disabled {
    border-color: #b1b5b8;
  }
  .filter-section label .checkbox-proxy.icon-check:before {
    box-shadow: inset 1.5px 2.598px 3px 0px rgba(0, 1, 1, 0.24);
    background: #0067cd;
    content: '\ea10';
    color: #fff;
    border: none;
  }
}
.filter-section .more-less {
  background: #f4f4f4;
  border-top: 1px solid #e6e6e5;
  border-bottom: 1px solid #e6e6e5;
  padding: 12px 0;
  margin-top: -1px;
  font-size: 11px;
  text-align: center;
  color: #0067cd;
  cursor: pointer;
}
@media (min-width: 768px) {
  .filter-section .more-less {
    background: transparent;
    border-top: none;
  }
}
.filter-section.switches fieldset span.switch-label {
  padding-left: 10px;
  font-weight: normal;
  line-height: 16px;
}
.filter-section .switch-row {
  display: block;
  position: relative;
  margin-right: 10px;
  margin-bottom: 10px;
}
.filter-section .switch-row .switch-label {
  float: left;
  float: left !important;
}
@media (max-width: 767px) {
  .filter-section .switch-row .switch-label {
    max-width: 183px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .filter-section .switch-row .switch-label {
    max-width: 134px;
  }
}
@media (min-width: 992px) {
  .filter-section .switch-row .switch-label {
    max-width: 215px;
  }
  .ie9 .filter-section .switch-row .switch-label,
  .lt-ie9 .filter-section .switch-row .switch-label {
    max-width: 205px;
  }
}
.filter-section .switch-row .bootstrap-switch {
  float: right;
  float: right !important;
  width: 82px;
  border-radius: 3px;
}
@media (min-width: 768px) {
  .filter-section fieldset {
    padding-bottom: 15px;
  }
}
@media (min-width: 768px) {
  .filter-section .action_favorite {
    line-height: 21px;
    height: 21px;
  }
  .filter-section .action_favorite .icon-favorite {
    font-size: 21px;
  }
}
@media (min-width: 768px) {
  .no-touch .filter-section label .checkbox-proxy:before {
    width: 20px;
    height: 20px;
    padding: 4px;
  }
}
@media (min-width: 768px) {
  .no-touch .filter-section label .input-label {
    margin-left: 37px;
  }
}
.selected-criteria {
  position: relative;
  display: block;
  font-size: 14px;
  color: #dadbdc;
  font-weight: normal;
  line-height: 15px;
  max-height: 35px;
  overflow: hidden;
}
.selected-criteria:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 5px;
  left: 0;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAeCAQAAAA7+qCVAAABUklEQVR4Ae2V0WoDMQwEx0UPDeRo8v8f60KgWZaB9KF9aOEGrmcrliztyS4nJye/xNrvbNbzAZ5vapY3kLFGmcX/8TeeoeMPFzBJrx5oC2SLTfBvKUjr8h6uqnFBV6WA4DSzDuIV4gfxL4Yj8nXmsbpi1Y5G+VWrUkRHH44sU0LL1lbCZWSu3qHXKA7DB0F1SSl/LlFeGsdLIjDcvK0pZ6E0NPfGJsn4eeCTo2DqnvIM37c2w53Gn8q18yMNU56UuUcHY9ycRgfZGKLM9oGTGgncM7Pl0Tu4mddXzxjTAYyudqX2UsUc7QTwneuQtaEsqVOU7r4+YQ+3mLWhNCln3afSp/yks47+cMSQUyD6yHpsq/U0fUMzHGrUkECv/3+VBirMVCvkGa7QYUpkVZ+30IGWjz5dJzVcMoEayyKqDWNTjJeKxXftzZ/hDc5kzmT+bzKfO0b6RA/ASM0AAAAASUVORK5CYII=);
  background-position: center 2px;
  background-repeat: repeat-x;
  pointer-events: none;
}
.active-criteria:before {
  content: ", ";
}
.active-criteria:first-child:before {
  content: "";
}
.search-tree-wrapper {
  border-bottom: 1px solid #e6e6e5;
}
.plus-minus {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 100%;
}
.filter-locator {
  background: white;
  font-size: 14px;
  font-weight: normal;
  border-top: 1px solid #e6e6e5;
  border-bottom: 1px solid #e6e6e5;
  padding: 10px;
  font-weight: bold;
  text-align: center;
  background: #f4f4f4;
}
.tree-bold {
  font-weight: bold;
  color: #000000;
}
.filtering-form {
  background: #ffffff;
}
.filtering-form header.filtering-head {
  margin-top: 0.71428571;
}
.filtering-form header.filtering-head h2 {
  width: auto;
  font-size: 16px;
  font-weight: normal;
  margin-top: 11.42857143;
  margin: 0;
  padding: 0;
}
.filtering-form header.filtering-head h2 .resetFilters {
  margin-right: 20px;
}
.filtering-form fieldset label {
  display: block;
  margin-right: 5px;
  margin-bottom: 10px;
  position: relative;
  min-width: 127px;
}
.filtering-form fieldset label.availability {
  min-width: auto;
  float: none;
  display: block;
}
.filtering-form fieldset label.availability span {
  width: auto;
}
.filtering-form fieldset label i {
  position: absolute;
  top: 0;
  left: 0;
}
.filtering-form fieldset label span {
  padding-left: 25px;
  top: 0;
  height: auto;
  display: block;
}
.filtering-form fieldset label span.input-label {
  top: 4px;
}
.filtering-form fieldset label span.input-label.disabled {
  cursor: not-allowed;
}
.filtering-form fieldset legend {
  display: none;
}
.filtering-form.disabled {
  opacity: 0.25;
}
.filtering h3 {
  position: relative;
  background: transparent url(../img/bg-line.gif) 50% 17px repeat-x;
  margin: 0;
  margin-top: 0.71428571;
  width: inherit;
  border: 0;
  border-right: 40px solid #FAFDFF;
}
.filtering h3 a.set-toggle {
  display: inline-block;
  width: auto;
  background-color: white;
  margin: 0;
  margin-bottom: 0.71428571;
  border: 0;
  padding-right: 0.71428571;
  font-size: 14px;
  letter-spacing: normal;
  color: #0067cd;
}
.filtering h3 a.set-toggle:hover {
  text-decoration: none;
}
.filtering h3 a.set-toggle:focus,
.filtering h3 a.set-toggle:active {
  position: static;
  top: 0;
}
.filtering h3 b.caret {
  display: block;
  background-color: white;
  position: absolute;
  /*		right:-20px;*/
  top: 13px;
  right: -22px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid #e6e6e5;
  opacity: 1;
  filter: alpha(opacity=100);
}
.filtering h3 b.caret .lt-ie9 {
  border: 0;
  top: 5px;
  height: auto;
  width: auto;
}
.filtering h3 b.caret .lt-ie9:before {
  display: inline-block;
  content: "\e620";
  font-family: 'icomoon';
  font-size: 8px;
  color: #0067cd;
}
.filtering h3 b.caret .lt-ie9.down {
  border: 0;
}
.filtering h3 b.caret .lt-ie9.down:before {
  display: inline-block;
  content: "\e621";
  font-family: 'icomoon';
  font-size: 8px;
}
.filtering h3 b.caret.down {
  right: -20px;
  top: 16px;
  border-top: 4px solid #e6e6e5;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}
.filtering h3 b.caret:hover {
  opacity: 1;
  filter: alpha(opacity=100);
}
.filter-quicklinks .chosen-container,
.filter-quicklinks select {
  margin-bottom: 18px;
}
@media (min-width: 768px) {
  .filter-quicklinks .chosen-container,
  .filter-quicklinks select {
    margin-bottom: 0;
  }
}
@media (min-width: 768px) {
  h3 a.bold {
    color: #000000 !important;
  }
}
.not-really-jstree .jstree-node a:first-child {
  padding-right: 55px;
}
@media (min-width: 768px) {
  .not-really-jstree {
    padding-top: 0;
  }
  .not-really-jstree a.bold {
    color: black;
  }
  .not-really-jstree ul {
    margin-left: 0;
  }
  .not-really-jstree > .jstree-node:first-child {
    padding-top: 0 !important;
  }
  .not-really-jstree .jstree-node:first-of-type {
    margin-top: 10px;
  }
  .not-really-jstree .jstree-node a {
    line-height: 18px;
  }
  .not-really-jstree .jstree-node a:first-child {
    padding-right: 0;
  }
}
/**
  * @toc 3.5
  * @name Bootstrap switch
  * @slug bootstrap-switch
  * @container true
  * @gridclass col-xs-12
  * @description Bootstrap-switch is a Bootstrap plugin used to implement the switch controls used in filtering. See http://www.bootstrap-switch.org/ for documentation.
  */
.bootstrap-switch {
  display: inline-block;
  direction: ltr;
  cursor: pointer;
  border-radius: 0;
  border: 1px solid #b1b5b8;
  position: relative;
  text-align: left;
  overflow: hidden;
  line-height: 8px;
  z-index: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  vertical-align: middle;
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.bootstrap-switch .bootstrap-switch-container {
  display: inline-block;
  top: 0;
  border-radius: 0;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.bootstrap-switch .bootstrap-switch-label {
  position: relative;
  z-index: 25;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.3);
}
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-label {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block !important;
  height: 100%;
  padding: 10px 10px;
  font-size: 14px;
  line-height: 20px;
}
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off {
  text-align: center;
  z-index: 1;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
  color: #fff;
  background: #0067cd;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info {
  color: #fff;
  background: #4ea7ff;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success {
  color: #fff;
  background: #338c26;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning {
  background: #de8703;
  color: #fff;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger {
  color: #fff;
  background: #9c1f2e;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
  color: #fff;
  background: #0067cd;
}
.bootstrap-switch .bootstrap-switch-label {
  text-align: center;
  margin-top: -1px;
  margin-bottom: -1px;
  z-index: 100;
  color: #ffffff;
  background: #fff;
  -webkit-transition: color 0.25s ease-in-out;
  -o-transition: color 0.25s ease-in-out;
  transition: color 0.25s ease-in-out;
}
.bootstrap-switch .bootstrap-switch-handle-on {
  border-bottom-left-radius: -1;
  border-top-left-radius: -1;
}
.bootstrap-switch .bootstrap-switch-handle-off {
  border-bottom-right-radius: -1;
  border-top-right-radius: -1;
}
.bootstrap-switch input[type='radio'],
.bootstrap-switch input[type='checkbox'] {
  position: absolute !important;
  top: 0;
  left: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  z-index: -1;
}
.bootstrap-switch input[type='radio'].form-control,
.bootstrap-switch input[type='checkbox'].form-control {
  height: auto;
}
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label {
  height: 40px;
  padding: 12px 5px 13px 7px;
  font-size: 11px;
  line-height: 1.5;
  width: 40px;
  font-weight: normal;
}
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label {
  padding: 5px 10px;
  font-size: 13px;
  line-height: 1.5;
}
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
}
.bootstrap-switch.bootstrap-switch-disabled,
.bootstrap-switch.bootstrap-switch-readonly,
.bootstrap-switch.bootstrap-switch-indeterminate {
  cursor: default !important;
}
.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label,
.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label,
.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label {
  opacity: 0.5;
  filter: alpha(opacity=50);
  cursor: default !important;
}
.bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container {
  -webkit-transition: margin-left 0.1s;
  -o-transition: margin-left 0.1s;
  transition: margin-left 0.1s;
}
.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: -1;
  border-top-right-radius: -1;
}
.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-off {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: -1;
  border-top-left-radius: -1;
}
.bootstrap-switch.bootstrap-switch-focused {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label,
.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label {
  border-bottom-right-radius: -1;
  border-top-right-radius: -1;
}
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label,
.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label {
  border-bottom-left-radius: -1;
  border-top-left-radius: -1;
  background: #eeeeee;
}
/*------------------------------------------------------------------
[Lists]
*/
/**
  * @toc 4.14
  * @name Lists
  * @slug Lists
  * @container true
  * @gridclass col-sm-12
  * @hidemarkup true
  * @description For information about basic lists on Eaton.com, see <a href="/responsive-web-experience/design-styles.html#lists">Design styles</a>. Below are several special-purpose list modules.
*/
/**
  * @toc 4.14.5
  * @name Document list
  * @slug document-list
  * @submodule true
  * @description Document lists are used on product detail pages, news articles, and anywhere that downloadable or requestable literature or supplemental materials are available. The file type and size should always be specified (if available).
  * @container true
  * @gridclass col-sm-8
  * @markup
<h3>Brochures</h3>
<ul class="document-list">
	<li>
		<div class="document-body">
			<a href="#" class="document-title">Complete technical specs and order info</a>
			<span class="document-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
		</div>
		<ul class="document-details">
			<li class="document-type pdf">PDF</li>
			<li class="document-size">10MB</li>
		</ul>
		<a href="#" class="document-actions"><span class="icon-download-alt"></span></a>
	</li>
	<li>
		<div class="document-body">
			<a href="#" class="document-title">ACE VFD color brochure</a>
			<span class="document-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
		</div>
		<ul class="document-details">
			<li class="document-type pdf">PDF</li>
			<li class="document-size">10KB</li>
		</ul>
		<a href="#" class="document-actions"><span class="icon-download-alt"></span></a>
	</li>
</ul>
*/
.document-list {
  padding-left: 0;
  list-style: none;
  margin: 0 -15px 20px;
  margin-bottom: 20px !important;
  font-size: 13px;
}
@media (min-width: 768px) {
  .document-list {
    margin: 5px 0 20px;
  }
}
.document-list > li {
  padding: 10px 15px;
}
.document-list > li:nth-child(2n-1) {
  background: #f4f4f4;
}
.document-list > li {
  position: relative;
  /* padding-right: 50px;*/
}
.document-list > li:before,
.document-list > li:after {
  content: " ";
  display: table;
}
.document-list > li:after {
  clear: both;
}
.document-list > li:before,
.document-list > li:after {
  content: " ";
  display: table;
}
.document-list > li:after {
  clear: both;
}
@media (min-width: 768px) {
  .document-list > li {
    min-height: 45px;
  }
}
@media (min-width: 768px) {
  .document-body {
    width: 55%;
    float: left;
  }
}
.document-title {
  font-weight: bold;
  display: inline;
}
.document-details {
  padding-left: 0;
  list-style: none;
  display: inline;
}
@media (min-width: 768px) {
  .document-details {
    display: block;
    float: left;
    width: 45%;
  }
}
.document-details li {
  display: inline;
}
@media (min-width: 768px) {
  .document-details li {
    display: block;
    float: left;
    margin: 0 10px;
  }
}
@media (min-width: 768px) {
  .document-desc {
    display: block;
    margin-top: 5px !important;
  }
}
.document-actions {
  position: absolute;
  right: 15px;
  top: 15px;
  font-size: 20px;
  font-weight: bold;
}
@media (min-width: 768px) {
  .document-actions {
    top: 10px;
    top: 9px;
    line-height: 20px;
  }
}
/**
  * @toc 4.14.3
  * @name Thumbnail list
  * @slug thumbnail-list
  * @submodule true
  * @description List of floated thumbnails.
  * @container true
  * @gridclass col-sm-8
  * @markup
<ul class="thumbnail-list">
	<li>
		<a href="#">
			<img src="../img/graphics/thumbs/market-upstream.jpg" class="thumbnail" alt=""/>
		</a>
		<p class="caption">
			<a href="#">Upstream</a><br/>
			<span>12,345 products</span>
		</p>
	</li>
	<li>
		<a href="#">
			<img src="../img/graphics/thumbs/market-midstream.jpg" class="thumbnail" alt=""/>
		</a>
		<p class="caption">
			<a href="#">Midstream</a><br/>
			<span>12,345 products</span>
		</p>
	</li>
	<li>
		<a href="#">
			<img src="../img/graphics/thumbs/market-downstream.jpg" class="thumbnail" alt=""/>
		</a>
		<p class="caption">
			<a href="#">Downstream</a><br/>
			<span>12,345 products</span>
		</p>
	</li>
</ul>
*/
.thumbnail-list {
  padding-left: 0;
  list-style: none;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.thumbnail-list li {
  display: block;
  float: left;
  margin: 0 10px 20px 0;
  font-size: 12px;
  max-width: calc(50% - 15px);
}
.thumbnail-list li img {
  display: block;
  max-width: 100%;
  height: auto;
}
.thumbnail-list li .caption a {
  font-size: 14px;
}
/**
  * @toc 4.14.4
  * @name Thumbnail List - mini variation
  * @slug thumbnail-list-mini-variation
  * @submodule true
  * @description Smaller version of 4.14.3 Thumbnail list.
  * @container true
  * @gridclass col-sm-8
  * @markup
<ul class="thumbnail-list mini-thumbnails">
	<li>
		<a href="#">
			<img src="../img/graphics/thumbs/market-upstream.jpg" class="thumbnail" alt=""/>
		</a>
		<p class="caption">
			<a href="#">Upstream</a><br/>
			<span>12,345 products</span>
		</p>
	</li>
	<li>
		<a href="#">
			<img src="../img/graphics/thumbs/market-midstream.jpg" class="thumbnail" alt=""/>
		</a>
		<p class="caption">
			<a href="#">Midstream</a><br/>
			<span>12,345 products</span>
		</p>
	</li>
	<li>
		<a href="#">
			<img src="../img/graphics/thumbs/market-downstream.jpg" class="thumbnail" alt=""/>
		</a>
		<p class="caption">
			<a href="#">Downstream</a><br/>
			<span>12,345 products</span>
		</p>
	</li>
</ul>
**/
.mini-thumbnails li {
  max-width: 75px;
}
/**
  * @toc 4.14.1
  * @name Divided list
  * @slug list-divided
  * @description Divided lists contain rules between list items.
  * @container true
  * @submodule true
  * @gridclass col-sm-12
  * @markup
 <div class="row">
<div class="col-xs-12 col-sm-4 list-divided-container">
	<ul class="list-divided mbn small">
		<li><a href="#">Life safety and mass notification</a></li>
		<li><a href="#">Lighting solutions and controls</a></li>
		<li><a href="#">Metering, monitoring and protection</a></li>
		<li><a href="#">Military, aerospace and subsea connectors</a></li>
		<li><a href="#">Rack infrastructure</a></li>
		<li><a href="#">Residential</a></li>
	</ul>
</div>
</div>
*/
/**
  * @toc 4.14.2
  * @name Multi column list divided
  * @slug multi-column-list-divided
  * @container true
  * @submodule true
  * @description When a divided list spans across columns, use the multi column list divided variant to ensure that list items display correctly at all breakpoints.
  * @markup
 <div class="col-xs-12 col-sm-4 list-divided-container">
	<ul class="list-divided mbn small">
	<li><a href="#">Automation and control</a></li>
	<li><a href="#">Circuit protection - breakers</a></li>
	<li><a href="#">Circuit protection - fuses</a></li>
	<li><a href="#">Electrical distribution</a></li>
	<li><a href="#">Electrical components</a></li>
	<li><a href="#">Harsh and hazardous solutions</a></li>
	</ul>
	</div>
	<div class="col-xs-12 col-sm-4 list-divided-container">
	<ul class="list-divided mbn small">
	<li><a href="#">Life safety and mass notification</a></li>
	<li><a href="#">Lighting solutions and controls</a></li>
	<li><a href="#">Metering, monitoring and protection</a></li>
	<li><a href="#">Military, aerospace and subsea connectors</a></li>
	<li><a href="#">Rack infrastructure</a></li>
	<li><a href="#">Residential</a></li>
	</ul>
	</div>
	<div class="col-xs-12 col-sm-4 list-divided-container">
	<ul class="list-divided mbn small">
	<li><a href="#">Services</a></li>
	<li><a href="#">Structural support and safety grating</a></li>
	<li><a href="#">Transformers, regulators and grid automation</a></li>
	<li><a href="#">Transportation solutions</a></li>
	<li><a href="#">UPS backup power and monitoring</a></li>
	<li><a href="#">Wiring devices</a></li>
	</ul>
</div>
*/
.list-divided {
  padding-left: 0;
  list-style: none;
}
.list-divided li a,
.list-divided li b {
  display: block;
  padding: 10px 15px;
  border-top: 1px solid #b1b5b8;
}
.list-divided li:first-child a,
.list-divided li:first-child b {
  border-top: none;
}
@media (max-width: 767px) {
  .list-divided-container + .list-divided-container > .list-divided {
    border-top: 1px solid #b1b5b8;
  }
}
/**
  * @toc 4.25
  * @name Social share list
  * @slug social-share-list
  * @description This module is used to list various social sharing outlets. Clicking the social icons should open the appropriate sharing controls.
  * @container true
  * @gridclass col-sm-8
  * @markup
<ul class="social-share">
	<li class="share">Share</li>
	<li><a href="#" target="_blank"><img src="../img/logo/mail-logo.png" alt="Email logo"></a></li>
	<li><a href="#" target="_blank"><img src="../img/logo/linkedin-logo.png" alt="LinkedIn logo"></a></li>
	<li><a href="#" target="_blank"><img src="../img/logo/twitter-logo.png" alt="Twitter logo"></a></li>
	<li><a href="#" target="_blank"><img src="../img/logo/facebook-logo.png" alt="Facebook logo"></a></li>
</ul>
*/
.social-share {
  padding-left: 0;
  	margin: 20px 0;
	list-style: none;
	border-top: 1px solid #b1b5b8;
	border-bottom: 1px solid #b1b5b8;
	padding: 8px;
	height: 49px;
  	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
  	background: #f4f4f4;
}
.social-share li {
  display: inline-block;
  font-size: 33px;
  line-height: 28px;
  height: 33px;
  padding: 0;
  overflow: hidden;
  margin-right: 4px;
}
.lt-ie9 .social-share li {
  width: 33px;
}
.social-share li.share {
  font-size: 11px;
  line-height: 33px;
  font-weight: bold;
}
.social-share img {
  max-width: 30px;
}
/**
  * @toc 4.14.7
  * @name Specs list
  * @slug spec-list
  * @submodule true
  * @description This special variant of the definition / description list (see <a href="/responsive-web-experience/design-styles.html#lists">Design styles</a>) is used to display product specifications on a product detail page.
  * @container true
  * @gridclass col-sm-8
  * @markup
<dl class="spec-list">
	<dl>
		<dt>UL classified:</dt>
		<dd>Class I, divisions 1 and 2, groups B, C, D</dd>

		<dt>cUL classified:</dt>
		<dd>Class I, divisions 1 and 2, groups B*, C, D</dd>

		<dt>Standards:</dt>
		<dd>UL1203</dd>

		<dt>Environmental ratings:</dt>
		<dd>NEMA 3, 4X, 7BCD</dd>
		<dd>NEMA 4X rating with PB23 or RR3 options added (contact local sales
			representative)
		</dd>
		<dd>Raintight</dd>
		<dd>Wet locations</dd>
		<dd class="footnote">*5HP and below listed for Group B.</dd>
	</dl>
</dl>
*/
.spec-list {
  margin-bottom: 20px !important;
}
.spec-list dd + dt {
  margin-top: 20px !important;
}
/**
  * @toc 4.14.6
  * @name Alternating list
  * @slug alternating-list
  * @submodule true
  * @description Alternating list is an alternative to the divided list that alternates background colors rather than adding a divider between items. It is useful for lists of FAQs and other repeating blocks of text.
  * @container true
  * @gridclass col-sm-6
  * @markup
	<ul class="alternating-list">
		<li>
			<p class="faq-title">Who is Eaton?</p>
			<p>Eaton (NYSE:ETN) is a  power management company. We help customers worldwide manage the power they need for buildings, aircraft, trucks, cars, machinery and businesses. And we do it in a way that consumes fewer resources</p>
		</li>
		<li>
			<p class="faq-title">What is Eaton's mission?</p>
			<p>To provide safe, reliable, efficient and sustainable power management solutions for our global customers.</p>
		</li>
		<li>
			<p class="faq-title">Where is Eaton located?</p>
			<div class="row">
				<div class="col-sm-6">
					<address>
						Corporate Headquarters<br/>
						Eaton Corporation plc<br/>
						Eaton House, 30 Pembroke Road<br/>
						Dublin 4, Ireland
					</address>
				</div>
				<div class="col-sm-6">
					<address>
						Eaton Center<br/>
						1000 Eaton Boulevard<br/>
						Cleveland, Ohio 44122
					</address>
				</div>
			</div>
		</li>
		<li><p class="faq-title">How many employees does Eaton have?</p>
			<p>Eaton has approximately 102,000 employees around the world and sells products to customers in more than 175 countries</p>
		</li>
		<li><p class="faq-title">What is Eaton's annual revenue?</p>
			<p>Eaton had a 2014 annual revenue of $22.6 billion, and more than half of our revenues are generated outside the U.S.</p>
		</li>
	</ul>
*/
.alternating-list {
  padding-left: 0;
  list-style: none;
  margin: 0 -15px 20px;
}
@media (min-width: 768px) {
  .alternating-list {
    margin: 0 0 20px;
  }
}
.alternating-list > li {
  padding: 10px 15px;
}
.alternating-list > li:nth-child(2n-1) {
  background: #f4f4f4;
}
.lt-ie9 .alternating-list li {
  border-bottom: 1px solid #b1b5b8;
}
@media (min-width: 480px) {
  .two-cols {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    column-gap: 30px;
  }
  .two-cols li {
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    -o-column-break-inside: avoid;
    -ms-column-break-inside: avoid;
    column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
  }
}
@media (min-width: 480px) {
  .three-cols {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    column-gap: 30px;
  }
  .three-cols li {
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    -o-column-break-inside: avoid;
    -ms-column-break-inside: avoid;
    column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
  }
}
@media (min-width: 992px) {
  .three-cols {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    column-gap: 30px;
  }
  .three-cols li {
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    -o-column-break-inside: avoid;
    -ms-column-break-inside: avoid;
    column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
  }
}
.faq-title {
  font-weight: bold;
}
.shaded {
  background: #ededec;
}
/**
  * @toc 4.14.8
  * @name Related markets list
  * @slug related-markets-list
  * @submodule true
  * @container true
  * @description This variant of the media list is used to display related markets. Its display changes between mobile and larger screens.
  * @markup
<div class="col-xs-12 col-sm-3">
	<div class="related-markets">
		<h2 class="related-markets-header">Related markets</h2>
		<ul class="related-markets-list thumbnail-list mini-thumbnails">
			<li>
				<a href="#"><img src="../img/graphics/thumbs/related-markets-utilities.jpg" alt="" /></a>
				<span class="caption"><a href="#">Utilities</a></span>
			</li>
			<li>
				<a href="#"><img src="../img/graphics/thumbs/related-markets-buildings.jpg" alt="" /></a>
				<span class="caption"><a href="#">Buildings</a></span>
			</li>
			<li>
				<a href="#"><img src="../img/graphics/thumbs/related-markets-hydraulics.jpg" alt="" /></a>
				<span class="caption"><a href="#">Hydraulics</a></span>
			</li>
		</ul>
	</div>
</div>
*/
.related-markets-list li {
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .related-markets-list li {
    float: none;
    max-width: 999em;
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #e6e6e5;
    display: table;
    width: 100%;
    table-layout: fixed;
  }
}
@media (min-width: 768px) {
  .related-markets-list li > a {
    display: table-cell;
    width: 55px;
    vertical-align: middle;
  }
}
@media (min-width: 992px) {
  .related-markets-list li > a {
    width: 75px;
  }
}
@media (min-width: 768px) {
  .related-markets-list li .caption {
    display: table-cell;
    vertical-align: middle;
    padding-left: 10px !important;
  }
}
/**
  * @toc 4.14.9
  * @name Related products List
  * @slug related-products-list
  * @submodule true
  * @container true
  * @description This variant of the media list is used to display related products. It may become a carousel at smaller screen sizes.
  * @markup

<div class="col-xs-12 col-md-6 sidebar plain last-row">
	<div class="carousel-wrap related-products">
		<div class="related-products-heading">
			<h3 class="mtn">Related products</h3>
		</div>

		<div class="related-products-body">
			<ul class="eat-carousel related-products-list" id="related-products">
				<li>
					<div class="related-product-img">
						<a href="#"><img src="../img/graphics/carousel/featuredproducts.jpg" alt="Featured Products"/></a>
					</div>
					<div class="related-product-body">
						<a class="title" href="#">Product name here with second line</a>
						<div class="description">2834745383748</div>
					</div>
				</li>
				<li>
					<div class="related-product-img">
						<a href="#"><img src="../img/graphics/products/related-product-4.jpg" alt="Featured Products"/></a>
					</div>
					<div class="related-product-body">
						<a class="title" href="#">Product name here with second line</a>
						<div class="description">2834745383748</div>
					</div>
				</li>
				<li>
					<div class="related-product-img">
						<a href="#"><img src="../img/graphics/products/related-product-2.jpg" alt="Featured Products"/></a>
					</div>

					<div class="related-product-body">
						<a class="title" href="#">Product name here with second line</a>
						<div class="description">2834745383748</div>
					</div>
				</li>
				<li>
					<div class="related-product-img">
						<a href="#"><img src="../img/graphics/products/related-product-1.jpg" alt="Featured Products"/></a>
					</div>

					<div class="related-product-body">
						<a class="title" href="#">Product name here with second line</a>
						<div class="description">2834745383748</div>
					</div>
				</li>
				<li>
					<div class="related-product-img">
						<a href="#"><img src="../img/graphics/products/related-product-4.jpg" alt="Featured Products"/></a>
					</div>

					<div class="related-product-body">
						<a class="title" href="#">Product name here with second line</a>
						<div class="description">2834745383748</div>
					</div>
				</li>
				<li>
					<div class="related-product-img">
						<a href="#"><img src="../img/graphics/products/related-product-3.jpg" alt="Featured Products"/></a>
					</div>

					<div class="related-product-body">
						<a class="title" href="#">Product name here with second line</a>
						<div class="description">2834745383748</div>
					</div>
				</li>
				<li>
					<div class="related-product-img">
						<a href="#"><img src="../img/graphics/products/related-product-2.jpg" alt="Featured Products"/></a>
					</div>

					<div class="related-product-body">
						<a class="title" href="#">Product name here with second line</a>
						<div class="description">2834745383748</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</div>
*/
/*------------------------------------------------------------------
[4.14.9 - Related Products Listing]
*/
.related-products {
  margin-top: 30px !important;
  margin-bottom: 30px !important;
}
@media (min-width: 992px) {
  .related-products {
    padding: 0;
	box-shadow: none;
    	margin-top: 0 !important;
    	border-color: #b1b5b8;
  }
  .related-products > .panel-heading {
    color: #333333;
    border-color: #b1b5b8;
  }
  .related-products > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #b1b5b8;
  }
  .related-products > .panel-heading .badge {
    color: #f5f5f5;
    background-color: #333333;
  }
  .related-products > .panel-footer + .panel-collapse > .panel-body {
    border-bottom-color: #b1b5b8;
  }
}
@media (min-width: 992px) {
  .related-products-heading {
    border-top: 1px solid #b1b5b8;
    border-bottom: 1px solid #e6e6e5;
    padding: 15px 10px;
  }
  .related-products-heading h2 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    color: inherit;
  }
  .related-products-heading h2 > a,
  .related-products-heading h2 > small,
  .related-products-heading h2 > .small,
  .related-products-heading h2 > small > a,
  .related-products-heading h2 > .small > a {
    color: inherit;
  }
}
@media (min-width: 992px) {
  .related-products-list {
    padding-left: 0;
    list-style: none;
  }
  .related-products-list li a {
    display: block;
  }
  .related-products-list li {
    padding: 10px 0;
    border-bottom: 1px solid #dadbdc;
    zoom: 1;
    overflow: hidden;
  }
  .related-products-list li:first-child {
    margin-top: 0;
  }
}
@media (min-width: 992px) {
  .related-product-img {
    padding-right: 10px;
    display: table-cell;
    vertical-align: middle;
  }
  .related-product-img.align-top {
    vertical-align: top;
  }
  .related-product-img a {
    width: 100px;
  }
  .related-product-img img {
    display: block;
  }
}
@media (min-width: 992px) {
  .related-product-body {
    zoom: 1;
    overflow: hidden;
    width: 10000px;
    display: table-cell;
    vertical-align: middle;
    color: #898989;
    font-size: 13px;
  }
  .related-product-body.align-top {
    vertical-align: top;
  }
  .related-product-body .title {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 14px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 13px;
  }
}
/**
	  * @toc 4.14.10
	  * @name News list
	  * @slug news-list
	  * @description
	  * @submodule true
	  * @container true
	  * @gridclass col-sm-8
	  * @description This variant of the media list is used to display a list of news article summaries.
	  * @markup
<ul class="media-list news-list clearfix">
	<li class="col-xsl-6 col-sm-12" data-mh="news-item">
		<div class="news-item">
			<div class="news-img">
				<a href="#">
					<img src="../img/graphics/thumbs/news1.jpg" alt="News image 1">
				</a>
			</div>
			<div class="news-body">
				<p class="news-date">September 1, 2015</p>

				<h3 class="news-title"><a href="#">Eaton increases uptime for oil, gas and mining
					applications with new Airflex&reg; water-cooled brake</a></h3>

				<p class="news-summary"><strong>EDEN PRAIRIE, MINN</strong> &mdash; Power management company
					Eaton today announced the launch of Eaton's Airflex&reg; WCBD3 and WCSB3 Water-Cooled
					Third Generation Brake, a disc type, water-cooled dynamic tensioning brake designed to
					keep oil, gas and mining operations up and running&hellip; <a href="#"><strong>Read more</strong></a></p>
			</div>
		</div>
	</li>
	<li class="col-xsl-6 col-sm-12" data-mh="news-item">
		<div class="news-item">
			<div class="news-img">
				<a href="#">
					<img src="../img/graphics/thumbs/news2.jpg" alt="News image 2">
				</a>
			</div>
			<div class="news-body">
				<p class="news-date">September 1, 2015</p>

				<h3 class="news-title"><a href="#">New cable ladder reduces weight and increases load
					capacity offshore</a></h3>

				<p class="news-summary"><strong>Highland, Ill</strong> &mdash; Diversified industrial
					manufacturer Eaton today announced that its B-Line division has introduced its new High
					Performance Ladder (HPL) Series. Designed to literally save tons in overall weight for
					offshore projects, this patent-pending cable ladder&hellip; <a href="#"><strong>Read more</strong></a></p>
			</div>
		</div>
	</li>
	<li class="col-xsl-6 col-sm-12" data-mh="news-item">
		<div class="news-item">
			<div class="news-img">
				<a href="#">
					<img src="../img/graphics/thumbs/news3.jpg" alt="News image 3">
				</a>
			</div>
			<div class="news-body">
				<p class="news-date">September 1, 2015</p>

				<h3 class="news-title"><a href="#">Eaton to supply the Sadara chemical complex with
					electrical equipment</a></h3>

				<p class="news-summary"><strong>PITTSBURGH</strong> &mdash; Diversified industrial
					manufacturer Eaton has entered into an agreement with Sadara Chemical Company (Sadara),
					a joint venture between Saudi Aramco and The Dow Chemical Company, to supply motor
					control, power distribution solutions and engineering services&hellip; <a href="#"><strong>Read more</strong></a></p>
			</div>
		</div>
	</li>
</ul>
	  */
.news-list {
  padding-left: 0;
  list-style: none;
  /**
	  * @toc 4.14.12
	  * @name News list variant w/alternate date treatment
	  * @slug news-list-variant
	  * @description
	  * @submodule true
	  * @container true
	  * @gridclass col-sm-4
	  * @markup
<ul class="media-list news-list varying-column-width">
	<li>
		<div class="news-item">
			<div class="vertical-align">
				<div class="news-date-alt">
					New York, <span class="nobr">September 1, 2015</span>
				</div>
				<div class="news-body">
					<h3 class="news-title"><a href="#">Lorem ipsum dolor sit amet,
						consectetur adipisicing elit.</a></h3>
				</div>
			</div>
		</div>
	</li>
	<li>
		<div class="news-item">
			<div class="vertical-align">
				<div class="news-date-alt">
					New York, <span class="nobr">September 1, 2015</span>
				</div>
				<div class="news-body">
					<h3 class="news-title"><a href="#">Lorem ipsum dolor sit amet,
						consectetur adipisicing elit.</a></h3>
				</div>
			</div>
		</div>
	</li>
</ul>
	  */
}
@media (max-width: 767px) {
  .news-list {
    margin-left: -15px;
    margin-right: -15px;
  }
}
.panel-body .news-list {
  margin-bottom: -20px;
}
.news-list li {
  margin-bottom: 20px !important;
 /* padding-bottom: 20px !important;
  border-bottom: 1px solid #e6e6e5;*/
}
.news-list li.has-attachment {
  padding-bottom: 0 !important;
}
.news-list li:last-child {
  border-bottom: none;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
@media (max-width: 767px) {
  .news-list.varying-column-width {
    margin: 0;
  }
}
.news-list.varying-column-width .news-item:before,
.news-list.varying-column-width .news-item:after {
  content: " ";
  display: table;
}
.news-list.varying-column-width .news-item:after {
  clear: both;
}
.news-list.varying-column-width .news-item:before,
.news-list.varying-column-width .news-item:after {
  content: " ";
  display: table;
}
.news-list.varying-column-width .news-item:after {
  clear: both;
}
.news-list.varying-column-width .news-date-alt {
  padding: 10px;
	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
}
@media (min-width: 768px) {
  .news-list.varying-column-width .news-date-alt {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .news-list.varying-column-width .news-date-alt {
    float: left;
    width: 41.66666667%;
  }
}
@media (min-width: 992px) {
  .news-list.varying-column-width .news-date-alt {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (min-width: 992px) and (min-width: 992px) {
  .news-list.varying-column-width .news-date-alt {
    float: left;
    width: 50%;
  }
}
@media (min-width: 1200px) {
  .news-list.varying-column-width .news-date-alt {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (min-width: 1200px) and (min-width: 1200px) {
  .news-list.varying-column-width .news-date-alt {
    float: left;
    width: 41.66666667%;
  }
}
.news-list.varying-column-width .news-body {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .news-list.varying-column-width .news-body {
    position: relative;
    min-height: 1px;
    /* padding-left: 15px;
    padding-right: 15px; */
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .news-list.varying-column-width .news-body {
    float: left;
    width: 58.33333333%;
  }
}
@media (min-width: 992px) {
  .news-list.varying-column-width .news-body {
    position: relative;
    min-height: 1px;
    /* padding-left: 15px;
    padding-right: 15px; */
  }
}
@media (min-width: 992px) and (min-width: 992px) {
  .news-list.varying-column-width .news-body {
    float: left;
    width: 50%;
  }
}
@media (min-width: 1200px) {
  .news-list.varying-column-width .news-body {
    position: relative;
    min-height: 1px;
    /* padding-left: 15px;
    padding-right: 15px; */
  }
}
@media (min-width: 1200px) and (min-width: 1200px) {
  .news-list.varying-column-width .news-body {
    float: left;
    width: 58.33333333%;
  }
}
/**
	  * @toc 4.14.11
	  * @name News list item
	  * @slug news-list-item
	  * @description
	  * @submodule true
	  * @container true
	  * @gridclass col-sm-8
	  * @markup

<ul class="media-list news-list clearfix">
	<li class="col-xsl-6 col-sm-12" data-mh="news-item">
		<div class="news-item">
			<div class="news-img">
				<a href="#">
					<img src="../img/graphics/thumbs/news1.jpg" alt="News image 1">
				</a>
			</div>
			<div class="news-body">
				<p class="news-date">September 1, 2015</p>
				<h3 class="news-title"><a href="#"><span class="news-source">Cleveland &ndash; </span> Lorem ipsum dolor sit amet,
					consectetur adipisicing elit.</a></h3>
			</div>
		</div>
	</li>
</ul>

*/
.news-item:before,
.news-item:after {
  content: " ";
  display: table;
}
.news-item:after {
  clear: both;
}
.news-item:before,
.news-item:after {
  content: " ";
  display: table;
}
.news-item:after {
  clear: both;
}
@media (min-width: 768px) {
  .news-list-compact .news-item {
    margin-left: -15px;
    margin-right: -15px;
  }
}
@media (min-width: 768px) {
  [class^=col-] > .news-item {
    margin-left: -15px;
    margin-right: -15px;
  }
}
.news-img,
.news-date-alt {
  margin-bottom: 10px !important;
}
@media (min-width: 768px) {
  .news-img,
  .news-date-alt {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .news-img,
  .news-date-alt {
    float: left;
    width: 33.33333333%;
  }
}
@media (min-width: 768px) {
  .news-list-compact .news-img,
  .news-list-compact .news-date-alt {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .news-list-compact .news-img,
  .news-list-compact .news-date-alt {
    float: left;
    width: 100%;
  }
}
@media (min-width: 1200px) {
  .news-list-compact .news-img,
  .news-list-compact .news-date-alt {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}
@media (min-width: 1200px) and (min-width: 1200px) {
  .news-list-compact .news-img,
  .news-list-compact .news-date-alt {
    float: left;
    width: 33.33333333%;
  }
}
.news-img img {
  display: block;
  max-width: 100%;
  height: auto;
}
.news-list-compact .news-img {
  display: none;
}
.news-date-alt {
  padding: 10px;
	font-family: 'Eaton Med', Helvetica, Arial, sans-serif;
  	color: #0067cd;
  	font-size: 15px;
  	line-height: 1.2;
  	margin-bottom: 0 !important;
  }
@media (min-width: 768px) {
  .news-date-alt {
    background: #0067cd;
    color: #fff;
    margin-bottom: 10px !important;
  }
}
.news-date-alt.large {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-top: 10px !important;
}
@media (min-width: 768px) {
  .news-date-alt.large {
    float: left;
    width: 100%;
  }
}
@media (min-width: 768px) {
  .news-date-alt.large {
    padding: 10px;
}
}
@media (min-width: 1200px) {
  .news-date-alt.large {
    margin-top: 5px !important;
  }
}
.news-date-alt.in-card {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 12px;
  background: #0067cd;
  color: #ffffff;
}
@media (min-width: 768px) {
  .news-date-alt.in-card {
    float: left;
    width: 100%;
  }
}
@media (min-width: 768px) {
  .news-date-alt.in-card {
    font-size: 15px;
  }
}
@media (min-width: 768px) {
  .news-body {
    position: relative;
    min-height: 1px;
    /* padding-left: 15px;
    padding-right: 15px; */
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .news-body {
    /*  float: left;
   width: 66.66666667%;*/
  }
}
@media (min-width: 768px) {
  .news-list-compact .news-body {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .news-list-compact .news-body {
    float: left;
    width: 100%;
  }
}
@media (min-width: 1200px) {
  .news-list-compact .news-body {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (min-width: 1200px) and (min-width: 1200px) {
  .news-list-compact .news-body {
    float: left;
    width: 66.66666667%;
  }
}
.news-list-compact .news-body {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  padding: 0;
}
@media (min-width: 768px) {
  .news-list-compact .news-body {
    float: left;
    width: 100%;
  }
}
.news-date {
  color: #636c71;
  font-size: 11px;
  font-weight: bold;
  margin-bottom: 5px !important;
}
.news-title {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  margin-top: 0 !important;
}
.news-date-alt + .news-body .news-title {
  padding: 10px;
	margin-bottom: 0 !important;
  }
@media (min-width: 768px) {
  .news-date-alt + .news-body .news-title {
    padding: 0;
	margin-bottom: 10px !important;
    }
}
.news-summary {
  font-size: 12px;
  margin-bottom: 0 !important;
}
.news-source {
  font-weight: bold;
}
.refine-news {
  padding-top: 10px !important;
}
@media (min-width: 768px) {
  .refine-news {
    padding-top: 0 !important;
    text-align: right;
  }
}
/**
	  * @toc 4.14.13
	  * @name News list with downloadable attachment
	  * @slug news-list-with-attachment
	  * @description
	  * @submodule true
	  * @container true
	  * @gridclass col-sm-4
	  * @markup
<ul class="media-list news-list varying-column-width">
	<li class="has-attachment">
		<div class="news-item">
			<div class="vertical-align">
				<div class="news-date-alt">
					New York, <span class="nobr">September 1, 2015</span>
				</div>
				<div class="news-body">
					<h3 class="news-title"><a href="#">Lorem ipsum dolor sit amet,
						consectetur adipisicing elit.</a></h3>
				</div>
			</div>
			<a href="#" class="news-attachment">
				<i class="news-attachment-icon fa fa-file-audio-o"></i>
				<span class="news-attachment-title">Recording title lorem ipsum</span>
				<span class="news-attachment-action icon-download-alt"></span>
			</a>
		</div>
	</li>
	<li class="has-attachment">
		<div class="news-item">
			<div class="vertical-align">
				<div class="news-date-alt">
					New York, <span class="nobr">September 1, 2015</span>
				</div>
				<div class="news-body">
					<h3 class="news-title"><a href="#">Lorem ipsum dolor sit amet,
						consectetur adipisicing elit.</a></h3>
				</div>
			</div>
			<a href="#" class="news-attachment">
				<i class="news-attachment-icon fa fa-file-audio-o"></i>
				<span class="news-attachment-title">Recording title lorem ipsum</span>
				<span class="news-attachment-action icon-download-alt"></span>
			</a>
		</div>
	</li>
</ul>
*/
.news-attachment {
  padding: 10px;
	display: block;
  	clear: both;
  	position: relative;
  	font-weight: bold;
  	background: #f4f4f4;
  }
@media (min-width: 768px) {
  .flexbox .news-attachment {
    display: flex;
    align-items: center;
  }
}
.news-attachment,
.news-attachment:focus,
.news-attachment:active,
.news-attachment:hover {
  text-decoration: none;
}
.news-attachment-icon {
  font-size: 18px;
  padding-right: 5px !important;
}
.news-attachment-title {
  font-size: 13px;
}
.flexbox .news-attachment-title {
  flex-grow: 1;
}
.news-attachment-action {
  font-size: 18px;
  float: right;
  float: right !important;
}
/*------------------------------------------------------------------
[3.2 Carousel]
*/
/**
* @toc 3.2
* @name Slick carousel
* @slug slick-carousel
* @container true
* @gridclass col-sm-12
* @description Slick Carousel, used for hero rotators as well as smaller product carousels. See http://kenwheeler.github.io/slick/ for full documentation.
* @markup
<div class="carousel-wrap">
	<h2 class="mtn">Featured products</h2>
	<ul class="eat-carousel" id="featured-products">
		<li>
			<img src="../img/graphics/carousel/featuredproducts.jpg" alt="Featured Products"/>
			<a class="title" href="#">Product name here with second line</a>

			<div class="description">2834745383748</div>
		</li>
		<li>
			<img src="../img/graphics/carousel/featuredproducts.jpg" alt="Featured Products"/>
			<a class="title" href="#">Product name here with second line</a>

			<div class="description">2834745383748</div>
		</li>
		<li>
			<img src="../img/graphics/carousel/featuredproducts.jpg" alt="Featured Products"/>
			<a class="title" href="#">Product name here with second line</a>

			<div class="description">2834745383748</div>
		</li>
		<li>
			<img src="../img/graphics/carousel/featuredproducts.jpg" alt="Featured Products"/>
			<a class="title" href="#">Product name here with second line</a>

			<div class="description">2834745383748</div>
		</li>
		<li>
			<img src="../img/graphics/carousel/featuredproducts.jpg" alt="Featured Products"/>
			<a class="title" href="#">Product name here with second line</a>

			<div class="description">2834745383748</div>
		</li>
		<li>
			<img src="../img/graphics/carousel/featuredproducts.jpg" alt="Featured Products"/>
			<a class="title" href="#">Product name here with second line</a>

			<div class="description">2834745383748</div>
		</li>
		<li>
			<img src="../img/graphics/carousel/featuredproducts.jpg" alt="Featured Products"/>
			<a class="title" href="#">Product name here with second line</a>

			<div class="description">2834745383748</div>
		</li>
	</ul>
</div>
*/
.carousel-wrap {
  position: relative;
  padding: 30px 15px 50px 15px;
  -webkit-box-shadow: inset 0 40px 40px -40px #e6e6e5, inset 0 -40px 40px -40px #e6e6e5;
  box-shadow: inset 0 40px 40px -40px #e6e6e5, inset 0 -40px 40px -40px #e6e6e5;
  margin-left: -15px;
  margin-right: -15px;
  /*------------------------------------------------------------------
	[custom per carousel]
	*/
}
.carousel-wrap img {
  display: block;
  max-width: 100%;
  height: auto;
}
.no-object-fit .carousel-wrap img {
  max-width: auto;
}
.carousel-wrap .title {
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
  letter-spacing: 0.025em;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 18px;
  font-family: 'Eaton Reg', Helvetica, Arial, sans-serif;
  font-weight: bold;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  color: #0067cd;
}
.carousel-wrap .title small,
.carousel-wrap .title .small {
  font-weight: normal;
  line-height: 1;
  color: #777777;
}
.carousel-wrap .title.subtle {
  color: #636c71;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
}
.carousel-wrap .title small,
.carousel-wrap .title .small {
  font-size: 75%;
}
.carousel-wrap .description {
  margin-bottom: 10px !important;
}
.carousel-wrap .learn-more {
  text-decoration: underline;
}
.carousel-wrap .learn-more .icon-chevron-right {
  font-size: 10px;
  display: inline-block;
}
.carousel-wrap #product-feautres .title {
  font-size: 16px;
  font-weight: bold;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  color: #0067cd;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.carousel-wrap.hero-carousel-wrap {
  background: #f4f4f4;
  margin: 0;
  padding: 0;
}
.carousel-wrap.compact {
  padding: 10px 30px 20px 30px;
}
.hero-carousel-wrap {
  max-height: 245px;
}
@media (min-width: 768px) {
  .hero-carousel-wrap {
    max-height: 350px;
    overflow: hidden;
  }
}
@media (min-width: 992px) {
  .hero-carousel-wrap {
    max-height: 355px;
    overflow: hidden;
  }
}
/*------------------------------------------------------------------
[4.20 Product Card]
*/
/**
	  * @toc 4.16
	  * @name Card
	  * @slug card
	  * @description Cards are a module that display information about a single item (e.g. a product, case study, whitepaper or video). Cards are generally used along with <a href="#module-faceted-filtering">faceted filtering</a controls as they are likely to be filtered or sorted.
	  * @container true
	  * @gridclass col-sm-8
	  * @hidemarkup true
	  * @markup
*/
/* Generic Card Styles Shared for all Cards  */
.card {
  border: 1px solid #dadbdc;
  min-height: 100px;
  position: relative;
  padding: 20px 15px 20px 15px;
  margin-bottom: 30px !important;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(145, 145, 145, 0.2);
  box-shadow: 0px 0px 5px 0px rgba(145, 145, 145, 0.2);
}
.card p {
  color: #636c71;
  font-size: 13px;
}
@media (min-width: 768px) {
  .card p {
    font-size: 14px;
  }
}
.card:before {
  content: "";
  height: 3px;
  background: #0067cd;
  display: block;
  margin: -1px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
.card .table-responsive {
  border: 0;
  margin: 0;
}
.card .table {
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 -1px 0 0;
  padding: 0;
}
.card .table.table-bordered {
  border: 0;
}
.card .table.table-bordered thead > tr > td:first-child,
.card .table.table-bordered thead > tr > th:first-child,
.card .table.table-bordered tbody > tr > td:first-child,
.card .table.table-bordered tbody > tr > th:first-child {
  border-left: 0;
  padding-left: 20px;
}
.card .table.table-bordered thead > tr > td:last-child,
.card .table.table-bordered thead > tr > th:last-child,
.card .table.table-bordered tbody > tr > td:last-child,
.card .table.table-bordered tbody > tr > th:last-child {
  border-right: 0;
}
.card .table-responsive-wrap {
  margin: -10px -15px 0 -15px;
}
.card-thumb {
  padding-right: 0;
  padding-bottom: 20px;
}
.card-thumb img {
  -webkit-box-shadow: 0px 0px 4px 0px rgba(145, 145, 145, 0.5);
  box-shadow: 0px 0px 4px 0px rgba(145, 145, 145, 0.5);
  display: block;
  max-width: 100%;
  height: auto;
}
.card-title {
  color: #636c71;
  font-size: 16.8px;
  text-decoration: none;
  line-height: 21px;
  margin-bottom: 10px;
  display: block;
}
@media (min-width: 768px) {
  .card-title {
    font-size: 20.4px;
    line-height: 23px;
  }
}
@media (min-width: 992px) {
  .card-title {
    font-size: 21.6px;
    line-height: 26px;
  }
}
@media (min-width: 1200px) {
  .card-title {
    font-size: 24px;
    line-height: 28px;
  }
}
a.card-title {
  color: #0067cd;
}
.card-sidebar {
  text-align: right;
}
@media (max-width: 991px) {
  .card-sidebar {
    text-align: left;
  }
}
/**
	  * @toc 4.16.1
	  * @name Product card
	  * @slug product-card
	  * @description
	  * @submodule true
	  * @container true
	  * @gridclass col-sm-8
	  * @markup

<div class="card product-card">
	<!-- Product Info Portion -->
		<div class="row">
			<div class="col-xs-3 col-xsl-3 col-md-2 card-thumb">
				<a href="#"><img src="../img/graphics/products/product-card-thumb.jpg" alt="" class="card-image"/></a>
				<img src="../img/graphics/products/product-brand.jpg" alt="" class="mts"/>
			</div>
			<div class="col-xs-9 col-xsl-9 col-md-10 card-body">
				<div class="row">
					<div class="col-xs-12 col-sm-7">
						<a href="#" class="card-title">Radial piston motors</a>
						<p class="product-number">3LA12FJ12BD</p>
						<p>Hydre-MAC is a low-speed, high torque (LSHT) direct drive radial piston motor &dash; featuring a cam lobe design &dash; for variable speed industrial applications.</p>
					</div>
					<div class="col-xs-12 col-sm-5 card-sidebar">
						<div>
							<form>
								<div class="ico-wrap">
									<label class="ico-box">
										<span><input type="checkbox" class="no-proxy"/></span>
										<span>Compare</span>
									</label>
								</div>
							</form>
						</div>
						<div class="mtm"><a class="btn btn-primary" href="#">View details</a></div>
					</div>
				</div>
			</div>
		</div>
</div>

*/
/**
	  * @toc 4.16.2
	  * @name Product card w/ data table
	  * @slug product-card-with-table
	  * @description
	  * @submodule true
	  * @container true
	  * @gridclass col-sm-8
	  * @markup

<div class="card product-card">
	<!-- Product Info Portion -->
		<div class="row">
			<div class="col-xs-3 col-xsl-3 col-md-2 card-thumb">
				<a href="#"><img src="../img/graphics/products/product-card-thumb.jpg" alt="" class="card-image"/></a>
				<img src="../img/graphics/products/product-brand.jpg" alt="" class="mts"/>
			</div>
			<div class="col-xs-9 col-xsl-9 col-md-10 card-body">
				<div class="row">
					<div class="col-xs-12 col-sm-7">
						<a href="#" class="card-title">Radial piston motors</a>
						<p class="product-number">3LA12FJ12BD</p>
						<p>Hydre-MAC is a low-speed, high torque (LSHT) direct drive radial piston motor &dash; featuring a cam lobe design &dash; for variable speed industrial applications.</p>
					</div>
					<div class="col-xs-12 col-sm-5 card-sidebar">
						<div>
							<form>
								<div class="ico-wrap">
									<label class="ico-box">
										<span><input type="checkbox" class="no-proxy"/></span>
										<span>Compare</span>
									</label>
								</div>
							</form>
						</div>
						<div class="mtm"><a class="btn btn-primary" href="#">View details</a></div>
					</div>
				</div>
			</div>
		</div>


	<!-- Responsive Table Portion -->
	<div class="table-responsive-wrap">
		<div class="table-responsive">
			<table class="table table-bordered table-striped">
				<thead>
				<tr>
					<th>Displacement</th>
					<th>Power</th>
					<th>Efficiency</th>
					<th>Rated torque</th>
					<th>Max. pressure</th>
					<th>Frequency</th>
					<th>Configuration</th>
				</tr>
				</thead>
				<tbody>
				<tr>
					<td>50K cc/rev</td>
					<td>up to 900/kw</td>
					<td>120 Vac</td>
					<td>280,000Nm</td>
					<td>350 bar</td>
					<td>50/60 Hz</td>
					<td>Desktop</td>
				</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>
*/
/* Specific styles for product card*/
.product-card .product-number {
  color: #282828;
  font-size: 16px;
  font-weight: bold;
}
/* Styles for Event Card*/
.event-date {
  color: #636c71;
  font-size: 11px;
  font-weight: bold;
  margin-bottom: 5px !important;
  /* Sometimes event date goes under title bar - Ex. News article detail pages*/
}
.page-header .event-date,
.page-title .event-date {
  font-size: 18px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin-top: 10px !important;
}
/* Specific Styles for Photo Cards */
.photo-card {
  margin-bottom: 20px;
}
.photo-card .card-thumb {
  margin: -18px -15px 0 -15px;
}
.photo-card .card-thumb img {
  -webkit-box-shadow: none;
  box-shadow: none;
}
.photo-card .btn-link {
  border-top: 1px solid #dadbdc;
  margin-bottom: -20px;
  margin-top: 10px;
}
.photo-card .btn-link span.filesize {
  display: inline-block;
  color: #b1b5b8;
  text-decoration: none;
}
.photo-card .btn-link:hover span.filesize {
  color: #b1b5b8;
  text-decoration: none;
}
/**
	  * @toc 4.16.3
	  * @name News cards
	  * @slug news-cards
	  * @description FreeWall (https://github.com/kombai/freewall) is provided for cases where a dynamic grid of cards is desired.
	  * @submodule true
	  * @container true
	  * @gridclass col-sm-9
	  * @markup
<div class="news-cards">
	<div class="news-card">
		<div class="news-card-wrap">
			<h3 class="news-title"><a href="#">Eaton Named by EPA as a 2015 ENERGY STAR Partner of the Year</a></h3>
			<p class="news-date">September 1, 2015</p>
			<p class="news-summary">PEACHTREE CITY, GA &ndash; Power management company Eaton today announced that it is being honored by the U.S. Environmental Protection Agency (EPA) as a 2015 ENERGY STAR Partner of the Year award winner. The honor focuses on the company&rsquo;s leadership in manufacturing ENERGY STAR-certified lighting products and educating customers about the environmental benefits when using energy-efficient products. Eaton will be recognized for its accomplishments at an awards ceremony in Washington, D.C. on April 20, 2015.</p>
			<a href="#" class="btn btn-block btn-link">Read more</a>
		</div>
	</div>
	<div class="news-card">
		<img src="../img/graphics/thumbs/safety-training.jpg" />
		<div class="news-card-wrap">
			<h3 class="news-title"><a href="#">Eaton mobile tour brings interactive, hands-on safety training directly to electrical contractors</a></h3>
			<p class="news-date">September 1, 2015</p>
			<p class="news-summary"><strong>Focuses on Code Compliance for Installations in Harsh and Hazardous Environments.</strong> SYRACUSE, N.Y. &ndash; Power management company Eaton is taking a 40-foot, fully interactive trailer on a nationwide tour of major industrial centers to meet increasing demand for electrical safety training. The trailer, which is filled with a comprehensive array of end-to-end electrical systems, will provide training for electrical contractors who work in harsh and hazardous environments, including oil and gas installations. The 2015 mobile training tour began Feb. 23 in Houston and is moving across the country throughout the year. </p>
			<a href="#" class="btn btn-block btn-link">Read more</a>
		</div>
	</div>
	<div class="news-card gallery-short">
		<img src="../img/graphics/thumbs/transmission.jpg" />
		<div class="news-card-wrap">
			<h3 class="news-title"><a href="#">Lorem ipsum dolor</a></h3>
			<p class="news-date pull-left">September 1, 2015</p>
			<div class="news-img-count pull-right text-right"><a href="#"><i class="icon-camera"></i> 5</a></div>
		</div>
	</div>
	<div class="news-card">
		<img src="../img/graphics/thumbs/transmission.jpg" />
		<div class="news-card-wrap">
			<h3 class="news-title"><a href="#">Eaton widens reach of fuller advantage&reg; series transmissions</a></h3>
			<p class="news-date">September 1, 2015</p>
			<p class="news-summary">GALESBURG, Michigan &ndash; To better meet the specification preferences for trucking fleets throughout North America, power management company Eaton has expanded its lineup of Fuller Advantage&reg; Series transmissions to deliver weight savings and fuel efficiency improvements available on nine new models. They include:</p>
			<a href="#" class="btn btn-block btn-link">Read more</a>
		</div>
	</div>
	<div class="news-card">
		<div class="news-card-wrap">
			<h3 class="news-title"><a href="#">Eaton&rsquo;s Blackout Tracker Annual Report shows 14.2 million people affected by power outages in 2014</a></h3>
			<p class="news-date">September 1, 2015</p>
			<p class="news-summary">RALEIGH, NC &ndash; Power management company Eaton today announced the release of its Blackout Tracker Annual Report for 2014. For the sixth consecutive year, California topped the list of states with the most power outages, followed by Texas and Michigan. On average, 3,996 people were affected for over 40 minutes per outage in 2014 and power failures created difficulties for people and businesses in all 50 states.</p>
			<a href="#" class="btn btn-block btn-link">Read more</a>
		</div>
	</div>
	<div class="news-card">
		<div class="news-card-wrap">
			<h3 class="news-title"><a href="#">Eaton&rsquo;s Mississauga Ontario Electrical Distribution Centre honored for reducing waste, GHG emissions through Zero Waste-to-Landfill program</a></h3>
			<p class="news-date">September 1, 2015</p>
			<p class="news-summary">Mississauga, Ontario &ndash; Power management company Eaton is honoring its Mississauga Distribution Centre facility in Ontario, Canada, for achieving &quot;zero waste-to-landfill&quot; by nearly eliminating all wastes sent to landfills through recycling, re-use, new work processes and other means. </p>
			<a href="#" class="btn btn-block btn-link">Read more</a>
		</div>
	</div>
	<div class="news-card">
		<div class="responsive-video news-tile">
			<iframe src="http://link.brightcove.com/services/player/bcpid1303123052001?bckey=AQ~~,AAABLy8iWZk~,GDmWjYLiJj6jzTEIyvJAICAn24Sl5qnD&bctid=3861603828001&autoStart=false" frameborder="0"></iframe>
		</div>
		<div class="video-caption news-card-wrap">
			<p class="video-title"><a href="#">Eaton reports fourth quarter operating earnings per share of $1.27, up 18 percent</a></p>
			<p class="video-desc">Operating Cash Flow in the Fourth Quarter a Record $944 Million; Full Year 2014 Operating Cash Flow Excluding Legal Settlements a Record $2.53 Billion. 2015 Operating Earnings Per Share Expected To Be Between $4.75 and $5.05 Inclusive of $0.20 Negative Impact From Foreign Exchange.</p>
			<a href="#" class="btn btn-block btn-link">Read more</a>
		</div>
	</div>
	<div class="news-card gallery-short">
		<img src="../img/graphics/thumbs/transmission.jpg" />
		<div class="news-card-wrap">
			<h3 class="news-title"><a href="#">Lorem ipsum dolor</a></h3>
			<p class="news-date pull-left">September 1, 2015</p>
			<div class="news-img-count pull-right text-right"><a href="#"><i class="icon-camera"></i> 5</a></div>
		</div>
	</div>
</div>

*/
/* Specific Styles for Newslist Cards on the News list page */
.newslist-card {
  /* Styles for cards with photogallery */
}
.newslist-card .news-date {
  margin-top: -8px;
}
.newslist-card .nlc_photogallery .nlc-photogallery-wrap {
  position: relative;
}
.newslist-card .nlc_photogallery .nlc-photogallery-imagecount {
  background: rgba(0, 103, 205, 0.7);
  position: absolute;
  bottom: 20px;
  left: 15px;
  right: 15px;
  padding: 0px 5px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #ffffff;
  font-weight: bold;
  height: 20px;
  overflow: hidden;
  text-align: right;
}
.newslist-card .nlc_photogallery .nlc-photogallery-imagecount a {
  color: #ffffff;
}
@media (min-width: 480px) {
  .newslist-card .nlc_photogallery .nlc-photogallery-imagecount {
    right: 0;
  }
}
.newslist-card .card-thumb {
  padding-right: 15px;
}
@media (min-width: 480px) {
  .newslist-card .card-thumb {
    padding-right: 0;
  }
}
/* Specific Styles for Video Cards */
.video-card .card-thumb {
  padding-right: 15px;
}
@media (min-width: 480px) {
  .video-card .card-thumb {
    padding-right: 0;
  }
}
/* Specific Styles for Casestudy Cards */
.casestudy-card .card-thumb {
  padding-bottom: 0;
}
/* Specific Styles for Event Cards */
.event-card .card-thumb {
  padding-bottom: 0;
}
/* These are the styles for the free wall news cards. */
.news-cards:before,
.news-cards:after {
  content: " ";
  display: table;
}
.news-cards:after {
  clear: both;
}
.news-cards:before,
.news-cards:after {
  content: " ";
  display: table;
}
.news-cards:after {
  clear: both;
}
.news-cards .news-card-wrap {
  padding: 20px 20px 0 20px;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
.news-cards .news-card-wrap.video-caption {
  margin-top: 0 !important;
}
.news-cards .news-card-wrap.video-caption .video-desc {
  font-size: 12px;
  margin-bottom: 70px !important;
}
.news-cards .news-card-wrap.video-caption .video-title {
  font-size: 13px;
  line-height: 1.1;
  font-weight: normal;
}
.news-cards .news-card-wrap .news-summary {
  margin-bottom: 70px !important;
}
.news-cards .news-card {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 100%;
  background: #ffffff;
  border: 1px solid #dadbdc;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(145, 145, 145, 0.2);
  box-shadow: 0px 0px 5px 0px rgba(145, 145, 145, 0.2);
  position: relative;
  margin-bottom: 25px;
}
@media (min-width: 481px) {
  .news-cards .news-card {
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: opacity 0.25s ease;
    -o-transition: opacity 0.25s ease;
    transition: opacity 0.25s ease;
    width: 50%;
  }
}
@media (min-width: 992px) {
  .news-cards .news-card {
    width: 33%;
  }
}
.news-cards .news-card img {
  display: block;
  max-width: 100%;
  height: auto;
}
.news-cards .news-card .btn.btn-link {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px solid #e6e6e5;
}
.news-cards .news-card:before {
  content: "";
  height: 6px;
  background: #0067cd;
  display: block;
}
.news-cards .news-card.gallery-short .news-card-wrap {
  background: rgba(0, 103, 205, 0.7);
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  padding: 10px 20px;
  color: #ffffff;
  font-weight: bold;
}
.news-cards .news-card.gallery-short .news-card-wrap:before,
.news-cards .news-card.gallery-short .news-card-wrap:after {
  content: " ";
  display: table;
}
.news-cards .news-card.gallery-short .news-card-wrap:after {
  clear: both;
}
.news-cards .news-card.gallery-short .news-card-wrap:before,
.news-cards .news-card.gallery-short .news-card-wrap:after {
  content: " ";
  display: table;
}
.news-cards .news-card.gallery-short .news-card-wrap:after {
  clear: both;
}
.news-cards .news-card.gallery-short .news-card-wrap a {
  color: #ffffff;
}
.news-cards .news-card.gallery-short .news-card-wrap .news-date {
  color: #ffffff;
  float: left;
  float: left !important;
}
.news-cards .news-card.gallery-short .news-card-wrap .news-img-count {
  float: right;
  float: right !important;
}
/**
	  * @toc 4.16.4
	  * @name Reseller cards
	  * @slug reseller-cards
	  * @description This card variant is used on the <a href="/distributors.html">How to buy</a> page to display lists of Eaton distributors.
	  * @submodule true
	  * @container true
	  * @gridclass col-sm-5
	  * @markup

<ul class="reseller-cards">
	<li class="reseller-card">
		<div class="reseller-card-header">
			<a href="#" data-target="#address1">
				<div class="reseller-name">
					<div class="reseller-icon">A</div>
					Lorem ipsum corp
				</div>
			</a>
		</div>
		<address class="reseller-address">
			123 Address St Units 4 &amp; 5<br />
			123 Any Boulevard<br />
			Anytown, US 12345<br />
			<a href="tel:800.555.5555" class="reseller-phone">800.555.5555</a>
		</address>
		<ul class="reseller-actions">
			<li><a href="#" class="reseller-url"><i class="icon-external-link"></i> Website</a></li>
			<li><a href="#"><i class="icon-share"></i> Share</a></li>
			<li><a href="#"><i class="fa fa-map-marker"></i> Directions</a></li>
		</ul>
		<dl class="reseller-description">
			<dt>Products carried:</dt>
			<dd>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
			</dd>
		</dl>
	</li>
	<li class="reseller-card">
		<div class="reseller-card-header">
			<a href="#" data-target="#address1">
				<div class="reseller-name">
					<div class="reseller-icon">B</div>
					Lorem ipsum corp
				</div>
			</a>
		</div>
		<address class="reseller-address">
			123 Address St Units 4 &amp; 5<br />
			123 Any Boulevard<br />
			Anytown, US 12345<br />
			<a href="tel:800.555.5555" class="reseller-phone">800.555.5555</a>
		</address>
		<ul class="reseller-actions">
			<li><a href="#" class="reseller-url"><i class="icon-external-link"></i> Website</a></li>
			<li><a href="#"><i class="icon-share"></i> Share</a></li>
			<li><a href="#"><i class="fa fa-map-marker"></i> Directions</a></li>
		</ul>
		<dl class="reseller-description">
			<dt>Products carried:</dt>
			<dd>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
			</dd>
		</dl>
	</li>
	<li class="reseller-card">
		<div class="reseller-card-header">
			<a href="#" data-target="#address1">
				<div class="reseller-name">
					<div class="reseller-icon">C</div>
					Lorem ipsum corp
				</div>
			</a>
		</div>
		<address class="reseller-address">
			123 Address St Units 4 &amp; 5<br />
			123 Any Boulevard<br />
			Anytown, US 12345<br />
			<a href="tel:800.555.5555" class="reseller-phone">800.555.5555</a>
		</address>
		<ul class="reseller-actions">
			<li><a href="#" class="reseller-url"><i class="icon-external-link"></i> Website</a></li>
			<li><a href="#"><i class="icon-share"></i> Share</a></li>
			<li><a href="#"><i class="fa fa-map-marker"></i> Directions</a></li>
		</ul>
		<dl class="reseller-description">
			<dt>Products carried:</dt>
			<dd>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
			</dd>
		</dl>
	</li>
</ul>
*/
.reseller-cards {
  padding-left: 0;
  list-style: none;
  margin-bottom: 20px !important;
}
.reseller-card {
  display: block;
  padding-top: 20px !important;
  margin-top: 20px !important;
  border-top: 1px solid #b1b5b8;
}
.reseller-card:first-child {
  padding-top: 0 !important;
  margin-top: 0 !important;
  border: none;
}
.reseller-icon {
  background: url(../img/graphics/map-marker.png) no-repeat;
  color: #ffffff;
  font-size: 18px;
  text-align: center;
  padding: 4px 8px;
  display: inline-block;
  margin-right: 5px !important;
  min-width: 32px;
  min-height: 45px;
}
@media (max-width: 767px) {
  .reseller-icon {
    display: none !important;
  }
}
.lt-ie9 .reseller-icon {
  padding-left: 0;
  padding-right: 0;
}
.reseller-name {
  font-weight: bold;
  margin-bottom: 10px !important;
}
.reseller-actions {
  padding-left: 0;
  list-style: none;
  margin-left: -5px;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}
.reseller-actions > li {
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
}
.reseller-description {
  margin-bottom: 0 !important;
}
.results-map-view,
.results-list-view {
  -webkit-transition: width 0.5s ease;
  -o-transition: width 0.5s ease;
  transition: width 0.5s ease;
}
.sticky-row {
  position: relative;
}
.results-map-view.bottomed-out {
  position: static;
}
.results-map-view img {
  display: block;
  width: 100%;
}
.results-map-view.expanded {
  width: 100%;
}
.bottomed-out .is_stuck {
  right: 15px;
}
.results-list-view.collapsed {
  width: 0;
}
/**
	  * @toc 4.16.5
	  * @name Reseller mini cards
	  * @slug reseller-mini-cards
	  * @description This variant of the reseller card displays less information. It is used on the mini distributor locator on <a href="/product-detail.html">Product detail pages</a>.
	  * @submodule true
	  * @container true
	  * @gridclass col-sm-6
	  * @markup

<ul class="reseller-mini-cards">
	<li class="reseller-mini-card">
		<div class="reseller-mini-card-header">
			<a href="#" data-target="#address1">
				<div class="reseller-mini-card-name">
					Lorem ipsum Corp
					<div class="reseller-mini-card-icon"><i class="icon-Add"></i></div>
				</div>
			</a>
		</div>
		<address class="reseller-mini-card-address collapse" id="address1">
			123 Any Boulevard<br />
			Anytown, US 12345<br />
			<a href="tel:800.555.5555" class="reseller-mini-card-phone">800.555.5555</a><br />
			<a href="#" class="reseller-mini-card-url">loremipsumcorp.com</a>
		</address>
	</li>
	<li class="reseller-mini-card">
		<div class="reseller-mini-card-header">
			<a href="#"  data-target="#address2">
				<div class="reseller-mini-card-name">Lorem ipsum Corp
					<div class="reseller-mini-card-icon"><i class="icon-Add"></i></div>
				</div>
			</a>

		</div>
		<address class="reseller-mini-card-address collapse" id="address2">
			123 Any Boulevard<br />
			Anytown, US 12345<br />
			<a href="tel:800.555.5555" class="reseller-phone">800.555.5555</a><br />
			<a href="#" class="reseller-url">loremipsumcorp.com</a>
		</address>
	</li>
	<li class="reseller-mini-card last-in-row">
		<div class="reseller-mini-card-header">
			<a href="#" data-target="#address3">
				<div class="reseller-mini-card-name">Lorem ipsum Corp
					<div class="reseller-mini-card-icon"><i class="icon-Add"></i></div>
				</div>
			</a>
		</div>
		<address class="reseller-mini-card-address collapse" id="address3">
			123 Any Boulevard<br />
			Anytown, US 12345<br />
			<a href="tel:800.555.5555" class="reseller-mini-card-phone">800.555.5555</a><br />
			<a href="#" class="reseller-mini-card-url">loremipsumcorp.com</a>
		</address>
	</li>
</ul>
*/
.reseller-mini-cards {
  padding-left: 0;
  list-style: none;
  background: #e6e6e5;
  margin: 0 -15px 30px;
}
@media (min-width: 768px) {
  .reseller-mini-cards {
    margin: 10px 0 30px;
    background: transparent;
  }
  .reseller-mini-cards:before,
  .reseller-mini-cards:after {
    content: " ";
    display: table;
  }
  .reseller-mini-cards:after {
    clear: both;
  }
  .reseller-mini-cards:before,
  .reseller-mini-cards:after {
    content: " ";
    display: table;
  }
  .reseller-mini-cards:after {
    clear: both;
  }
}
.reseller-mini-card {
  border-bottom: 1px solid #b1b5b8;
  position: relative;
}
@media (min-width: 768px) {
  .reseller-mini-card {
    background: #f4f4f4;
    float: left;
    width: 32%;
    margin: 0 1%;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-size: 11px;
    color: #000;
  }
  .reseller-mini-card:first-child {
    margin-left: 0;
  }
  .reseller-mini-card.last-in-row {
    margin-right: 0;
  }
}
.reseller-mini-card-header a {
  text-decoration: none;
}
.reseller-mini-card-name {
  display: block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  padding: 15px;
  margin: 0 auto;
  letter-spacing: 0;
  color: #0067cd;
}
@media (min-width: 768px) {
  .reseller-mini-card-name {
    font-size: 15px;
  }
}
@media (min-width: 768px) {
  .reseller-mini-card-name {
    font-weight: bold;
    font-size: 11px;
    color: #000;
    margin: 0 0 2px 45px;
    padding: 15px 0 0 0;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .reseller-mini-card-name {
    margin-left: 35px;
  }
}
.reseller-mini-card-icon {
  position: absolute;
  top: 14px;
  right: 15px;
  font-size: 1.5em;
  height: 40px;
  text-decoration: none;
  -webkit-transition: right 0.2s ease-in-out;
  -o-transition: right 0.2s ease-in-out;
  transition: right 0.2s ease-in-out;
  display: block;
}
@media (min-width: 768px) {
  .reseller-mini-card-icon {
    color: #000;
    position: absolute;
    left: 8px;
    top: 20px;
    font-size: 22px;
  }
  .reseller-mini-card-icon .icon-Add:before {
    content: "\e62b";
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .reseller-mini-card-icon {
    font-size: 20px;
  }
}
.reseller-mini-card-address {
  background-color: #0067cd;
  display: none;
  visibility: hidden;
  padding: 15px;
  color: #fff;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.reseller-mini-card-address ul,
.reseller-mini-card-address ol {
  padding-left: 0;
  list-style: none;
  padding-bottom: 5px;
}
.reseller-mini-card-address.in {
  display: block;
  visibility: visible;
}
tr.reseller-mini-card-address.in {
  display: table-row;
}
tbody.reseller-mini-card-address.in {
  display: table-row-group;
}
@media (min-width: 768px) {
  .reseller-mini-card-address {
    padding: 0 0 15px 45px;
    display: block;
    visibility: visible;
    background: transparent;
    color: #000;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .reseller-mini-card-address {
    padding-left: 35px;
  }
}
.reseller-mini-card-address a {
  color: #fff;
  text-decoration: underline;
}
@media (min-width: 768px) {
  .reseller-mini-card-address a {
    color: #0067cd;
  }
}
/*------------------------------------------------------------------
[4.22 Read more toggle]
*/
.read-more-content {
  max-height: 85px;
  overflow: hidden;
  position: relative;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.read-more-content:after {
  content: '';
  display: block;
  height: 40px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  	background-repeat: repeat-x;
	border-bottom: 1px solid #e6e6e5;
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #ffffff 100%);
}
.expanded .read-more-content {
  max-height: 9999em;
}
.expanded .read-more-content:after {
  background: transparent;
}
.read-more-toggle {
  display: block;
  position: absolute;
  bottom: -50px;
  left: 0;
  width: 100%;
  height: 40px;
  z-index: 1;
  cursor: pointer;
  text-align: center;
  color: #0067cd;
  font-weight: bold;
}
/**
	  * @toc 4.18
	  * @name Specs table
	  * @slug specs-table
	  * @description This variant of the global table module displays product or other specifications.
	  * @container true
	  * @gridclass col-sm-12
	  * @markup
	   <table class="table spec-table">
			<tbody>
				<tr>
					<th>Disconnect rating</th>
					<td>30; 60; 100; 200A</td>
				</tr>
				<tr>
					<th>Disconnect fuse type</th>
					<td>J</td>
				</tr>
				<tr>
					<th>Operating temperature range</th>
					<td>-10ºC to 50ºC (14ºF to 122ºF)</td>
				</tr>
				<tr>
					<th>Nominal horsepower</th>
					<td>1.5; 2.0; 3.0; 5.0; 7.5; 10; 15; 20; 25; 30; 40; 50</td>
				</tr>
				<tr>
					<th>Body and cover material</th>
					<td>Copper-free aluminum, epoxy powder coated</td>
				</tr>
				<tr>
					<th>Operating handle material</th>
					<td>Copper-free aluminum, epoxy painted</td>
				</tr>
				<tr>
					<th>Blower material</th>
					<td>Aluminum, natural</td>
				</tr>
				<tr>
					<th>Filters, pre-filters, cover hinges, bolts, washers and springs material</th>
					<td>Stainless steel, natural</td>
				</tr>
			</tbody>
		</table>
		*/
/*------------------------------------------------------------------
[4.18 Specs table]
*/
.spec-table > tbody > tr:nth-of-type(even) {
  background-color: #f4f4f4;
}
.spec-table th {
  background-color: #f4f4f4;
}
@media (min-width: 768px) {
  .spec-table {
    border: 1px solid #e6e6e5;
  }
}
.spec-table th {
  border-right: 1px solid #b1b5b8;
  background: inherit;
}
/**
	  * @toc 4.19
	  * @name Responsive video
	  * @slug responsive-video
	  * @description The responsive video module uses the FitVids plugin (http://fitvidsjs.com/) to ensure that video players don't overflow their container. FitVids has been customized slightly to add support for Brightcove video.
	  * @container true
	  * @gridclass col-sm-6
	  * @markup
	    <div>
			<div class="responsive-video">
				<iframe src="http://link.brightcove.com/services/player/bcpid1303123052001?bckey=AQ~~,AAABLy8iWZk~,GDmWjYLiJj6jzTEIyvJAICAn24Sl5qnD&bctid=3861603828001&autoStart=false" frameborder="0"></iframe>
			</div>
			<div class="video-caption">
				<p class="video-title"><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a></p>
				<p class="video-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dignissimos ducimus ex, nihil nisi
					nobis quibusdam reprehenderit similique suscipit tempore.</p>
			</div>
		</div>
		*/
/*------------------------------------------------------------------
[4.19 Responsive video]
*/
.responsive-video {
  min-height: 160px;
}
.responsive-video.news-tile {
  min-height: 110px;
}
.responsive-video.in-sidebar {
  min-height: 110px;
}
.video-caption {
  font-size: 13px;
  margin-top: 10px !important;
}
.video-title {
  font-weight: bold;
  margin-top: 10px !important;
  margin-bottom: 5px !important;
}
/**
  * @toc 4.24
  * @name Video modal
  * @slug video-modal
  * @description The video modal window is used for video playback within cards or other areas where a video cannot be embedded at full size. Clicking the video thumbnail will launch a lightbox with the video player and optional related videos.
  * @container true
  * @gridclass col-sm-8
  * @markup
  <div class="card newslist-card">
		<div class="row nlc_video">
			<div class="col-xsl-3 col-md-3 card-thumb">
				<a class="video-modal" href="#videomodal" data-toggle="modal"><img src="../img/graphics/thumbs/video-thumb.jpg"/></a>
			</div>
			<div class="col-xsl-9 col-md-9 card-body">
				<div class="row">
					<div class="col-sm-12 col-md-9">
						<a href="#" class="card-title">Eaton reports fourth quarter operating earnings per share of $1.27, up 18 percent</a>
						<div class="news-date">September 1, 2015</div>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget feugiat purus. Nullam congue dictum tortor, in consequat nulla gravida,</p>
					</div>
					<div class="col-sm-12 col-md-3 card-sidebar">
							<a href="#" class="btn btn-primary btn-sm">Read more <span ciass="icon-chevron-right"></span></a>
					</div>
				</div>
			</div>
		</div>
	</div>

<div id="videomodal" class="modal fade">
	<div class="modal-dialog">
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			<h4 class="modal-title" id="gridSystemModalLabel">Video Colorbox</h4>
		</div>
		<div class="modal-body">
			<div class="container-fluid">
				<div class="row">
					<div class="col-sm-12">
						<div class="responsive-video">
							<iframe src="http://link.brightcove.com/services/player/bcpid1303123052001?bckey=AQ~~,AAABLy8iWZk~,GDmWjYLiJj6jzTEIyvJAICAn24Sl5qnD&bctid=3861603828001&autoStart=false" frameborder="0"></iframe>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-12">
						<div class="carousel-wrap compact hide mtl">
							<h4 class="mvn">Related Videos</h4>
							<ul class="eat-carousel" id="related-videos">
								<li>
									<a class="video-modal" href="#"><img src="../img/graphics/thumbs/video-thumb.jpg" class="img-responsive"/></a>
								</li>
								<li>
									<a class="video-modal" href="#"><img src="../img/graphics/thumbs/video-thumb.jpg" class="img-responsive"/></a>
								</li>
								<li>
									<a class="video-modal" href="#"><img src="../img/graphics/thumbs/video-thumb.jpg" class="img-responsive"/></a>
								</li>
								<li>
									<a class="video-modal" href="#"><img src="../img/graphics/thumbs/video-thumb.jpg" class="img-responsive"/></a>
								</li>
								<li>
									<a class="video-modal" href="#"><img src="../img/graphics/thumbs/video-thumb.jpg" class="img-responsive"/></a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
*/
.video-modal {
  position: relative;
  display: block;
}
.video-modal:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: block;
  height: 45px;
  width: 45px;
  margin-left: -22px;
  margin-top: -22px;
  -webkit-transition: background 0.5s;
  -o-transition: background 0.5s;
  transition: background 0.5s;
  background-image: url(../img/sprites/playbutton.png);
  background-repeat: no-repeat;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .video-modal:before {
    /* on retina, use image that's scaled by 2 */
    background-image: url(../img/sprites/playbutton@2x.png);
    background-size: 45px 45px;
  }
}
.video-modal:hover:before {
  -webkit-transition: background 0.5s;
  -o-transition: background 0.5s;
  transition: background 0.5s;
  background-image: url(../img/sprites/playbuttonhovered.png);
  background-repeat: no-repeat;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .video-modal:hover:before {
    /* on retina, use image that's scaled by 2 */
    background-image: url(../img/sprites/playbuttonhovered@2x.png);
    background-size: 45px 45px;
  }
}
.video-modal.large:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: block;
  height: 90px;
  width: 90px;
  margin-left: -45px;
  margin-top: -45px;
  -webkit-transition: background 0.5s;
  -o-transition: background 0.5s;
  transition: background 0.5s;
  background-image: url(../img/sprites/playbuttonlarge.png);
  background-repeat: no-repeat;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .video-modal.large:before {
    /* on retina, use image that's scaled by 2 */
    background-image: url(../img/sprites/playbuttonlarge@2x.png);
    background-size: 90px 90px;
  }
}
.video-modal.large:hover:before {
  -webkit-transition: background 0.5s;
  -o-transition: background 0.5s;
  transition: background 0.5s;
  background-image: url(../img/sprites/playbuttonlargehovered.png);
  background-repeat: no-repeat;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .video-modal.large:hover:before {
    /* on retina, use image that's scaled by 2 */
    background-image: url(../img/sprites/playbuttonlargehovered@2x.png);
    background-size: 90px 90px;
  }
}
/*------------------------------------------------------------------
[4.32 Striped list]
*/
.list-striped {
  padding-left: 0;
  list-style: none;
  margin: 0 -15px 20px;
}
@media (min-width: 768px) {
  .list-striped {
    margin: 0 0 20px;
  }
}
.list-striped > li {
  padding: 10px 15px;
}
.list-striped > li:nth-child(2n-1) {
  background: #f4f4f4;
}
/*------------------------------------------------------------------
[4.33 Ico box]
*/
.ico-box {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.ico-box > span {
  white-space: nowrap;
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-size: 17px;
  display: inline-block;
  color: #0067cd;
}
.ico-box > span:first-child {
  padding-right: 2px;
  vertical-align: middle;
}
.ico-box > span:first-child [class^="icon-"] {
  font-size: 14px;
  vertical-align: middle;
  position: relative;
  top: -2px;
}
.ico-box > span:first-child .icon-check,
.ico-box > span:first-child .icon-uncheck {
  color: #000000;
  top: -2px;
}
/**
	  * @toc 4.22
	  * @name Paging bar
	  * @slug paging-bar
	  * @description This module is used at the top and bottom of sorting and filtering lists.
	  * @container true
	  * @gridclass col-sm-8
	  * @markup
	    <div class="paging-bar">
			<div class="first">
				<a href="#" class="disabled"><i class="icon-first prs"></i>First</a>
			</div>
			<div class="previous">
				<a href="#" class="disabled"><i class="icon-previous prs"></i>Prev</a>
			</div>
			<div class="pages">Page <a href="#">1</a> <a href="#">2</a>
			</div>
			<div class="next">
				<a href="#">Next<i class="icon-next pls"></i></a>
			</div>
			<div class="last">
				<a href="#">Last<i class="icon-last pls"></i></a>
			</div>
		</div>
		*/
/*------------------------------------------------------------------
[4.22 Paging Bar]
*/
.paging-bar {
  position: relative;
  display: table;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  width: 100%;
}
.paging-bar > div {
  display: table-cell;
  vertical-align: middle;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 12px;
}
.paging-bar > div [class^="icon-"] {
  font-size: 10px;
  display: inline-block;
  color: #363636;
}
.paging-bar > div.pages {
  width: 44%;
  text-align: center;
}
.paging-bar > div.pages a {
  padding-right: 5px !important;
  padding-left: 5px !important;
  display: inline-block;
}
.paging-bar > div.pages a:first-child {
  padding-left: 10px !important;
  padding-right: 5px !important;
}
@media (min-width: 768px) {
  .paging-bar > div.pages {
    width: 36%;
  }
}
.paging-bar > div.next {
  width: 14%;
  text-align: right;
}
@media (min-width: 768px) {
  .paging-bar > div.next {
    width: 16%;
  }
}
.paging-bar > div.last {
  width: 14%;
  text-align: right;
}
@media (min-width: 768px) {
  .paging-bar > div.last {
    width: 16%;
  }
}
.paging-bar > div.previous {
  width: 14%;
  text-align: left;
}
@media (min-width: 768px) {
  .paging-bar > div.previous {
    width: 16%;
  }
}
.paging-bar > div.first {
  width: 14%;
  text-align: left;
}
@media (min-width: 768px) {
  .paging-bar > div.first {
    width: 16%;
  }
}
@media (min-width: 768px) {
  .paging-bar > div {
    font-size: 14px;
  }
  .paging-bar > div [class^="icon-"] {
    font-size: 11px;
    display: inline-block;
  }
}
/**
	  * @toc 4.23
	  * @name Results bar
	  * @slug results-bar
	  * @description This module allows the user to control the display options of sorting and filtering results.
	  * @container true
	  * @gridclass col-sm-8
	  * @markup
	  <div class="results-bar row">
	<form class="form-inline">
		<div class="col-sm-8 col-sm-push-4 col-md-7 col-md-push-5 results-options">
			<div class="row">
				<div class="col-xs-6 col-sm-7 col-md-8">
					<div class="form-group nowrap">
						<label>Sort By:</label>
						<select name="" id="" class="form-control form-control-small">
							<option value="Part Number">Option 1</option>
							<option value="Option 2">Option 2</option>
							<option value="Option 3">Option 3</option>
						</select>
					</div>
				</div>
				<div class="col-xs-6 col-sm-5 col-md-4">
					<div class="form-group nowrap">
						<label>View</label>
						<select name="" id="" class="form-control form-control-small">
							<option value="">24</option>
							<option value="">36</option>
							<option value="">48</option>
						</select>
					</div>
				</div>
				<!-- this goes away at mobile -->
			</div>
		</div>
		<div class="col-sm-4 col-sm-pull-8 col-md-5 col-md-pull-7">
			<div class="row">
				<div class="col-xs-12 results-count">Showing 1-24 <span class="nowrap">of 500 Results</span></div>
			</div>
		</div>

	</form>
</div>
		*/
/*------------------------------------------------------------------
[4.23 Results Bar]
*/
.results-bar {
  padding-top: 10px !important;
}
.results-bar .results-count {
  text-align: center;
}
@media (min-width: 768px) {
  .results-bar .results-count {
    text-align: left;
    margin-top: -4px;
  }
}
@media (min-width: 992px) {
  .results-bar .results-count {
    font-size: inherit;
    margin-top: 5px !important;
  }
}
@media (min-width: 768px) {
  .results-bar .results-options {
    text-align: right;
  }
}
.results-bar .results-partnumber {
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 55px;
}
.results-bar .results-partnumber > span {
  position: absolute;
  left: 0;
  top: 5px;
}
.results-bar .results-partnumber select {
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.distributors-results-count:before,
.distributors-results-count:after {
  content: " ";
  display: table;
}
.distributors-results-count:after {
  clear: both;
}
.distributors-results-count:before,
.distributors-results-count:after {
  content: " ";
  display: table;
}
.distributors-results-count:after {
  clear: both;
}
@media (max-width: 767px) {
  .distributors-results-count .drc-showing {
    position: relative;
    float: left;
    width: 58.33333333%;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    padding-left: 0;
  }
}
@media (min-width: 768px) {
  .distributors-results-count .drc-showing {
    padding-right: 50px !important;
    padding-left: 0 !important;
  }
}
.distributors-results-count .drc-wrap {
  position: relative;
  text-align: right;
}
@media (max-width: 767px) {
  .distributors-results-count .drc-wrap {
    position: relative;
    float: left;
    width: 41.66666667%;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    padding-right: 0;
  }
}
@media (min-width: 768px) {
  .distributors-results-count .drc-wrap {
    padding-left: 0 !important;
  }
}
@media (max-width: 767px) {
  .distributors-results-count .drc-wrap span {
    display: inline-block;
    width: auto;
    padding-top: 5px !important;
  }
}
@media (max-width: 767px) {
  .distributors-results-count .drc-wrap select {
    display: inline-block;
    width: auto;
  }
}
@media (max-width: 767px) {
  .map-container {
    display: none !important;
  }
}
.map-container img {
  width: 100%;
}
.num-results {
  margin-top: 10px !important;
  margin-bottom: 20px !important;
  font-weight: bold;
}
@media (min-width: 768px) {
  .num-results {
    font-size: 18px;
    margin-bottom: 10px !important;
  }
}
/*
[4.36 Skip to navigation link]
*/
.skip-to-nav {
  font-size: 13px;
  display: none !important;
  margin-bottom: 10px !important;
}
@media (max-width: 767px) {
  .skip-to-nav {
    display: block !important;
  }
  table.skip-to-nav {
    display: table;
  }
  tr.skip-to-nav {
    display: table-row !important;
  }
  th.skip-to-nav,
  td.skip-to-nav {
    display: table-cell !important;
  }
}
h1 + .skip-to-nav {
  margin-top: -15px;
}
/*
[4.37 Ombuds Logo]
*/
.ombuds-logo {
  display: inline-block;
  white-space: nowrap;
}
.ombuds-logo .icon-left-ring {
  color: #A9C398;
  float: left;
  white-space: nowrap;
  font-size: 2em;
  margin-right: -0.69em;
}
@media (min-width: 480px) {
  .ombuds-logo .icon-left-ring {
    font-size: 3.0em;
  }
}
@media (min-width: 768px) {
  .ombuds-logo .icon-left-ring {
    font-size: 3.0em;
  }
}
@media (min-width: 992px) {
  .ombuds-logo .icon-left-ring {
    font-size: 4.5em;
  }
}
.ombuds-logo .icon-right-ring {
  color: #589fcf;
  float: right;
  font-size: 2em;
  white-space: nowrap;
}
@media (min-width: 480px) {
  .ombuds-logo .icon-right-ring {
    font-size: 3.0em;
  }
}
@media (min-width: 768px) {
  .ombuds-logo .icon-right-ring {
    font-size: 3.0em;
  }
}
@media (min-width: 992px) {
  .ombuds-logo .icon-right-ring {
    font-size: 4.5em;
  }
}
/*
[4.38 Stock Ticker]
*/
.stockticker {
  border: 1px solid #dadbdc;
  margin-bottom: 20px !important;
  position: relative;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(145, 145, 145, 0.2);
  box-shadow: 0px 0px 5px 0px rgba(145, 145, 145, 0.2);
  padding: 20px 20px 20px 20px;
}
.stockticker:before {
  content: "";
  height: 3px;
  background: #0067cd;
  display: block;
  margin: -1px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0px;
}
.stockticker .icon-arrowup {
  color: #338c26;
}
.stockticker .icon-arrowdown {
  color: #9c1f2e;
}
.st-disclaimer {
  padding: 5px;
	font-size: 11px;
  	margin: 0 -20px -20px -20px;
  	background: #f4f4f4;
  	text-align: center;
  	z-index: 2;
}
.st-headline {
  margin: 0;
	padding-bottom: 5px !important;
  	color: #636c71;
  	font-weight: bold;
  	font-size: 16px;
  	border-bottom: 1px solid #dadbdc;
}
.st-red {
  color: #9c1f2e;
}
.st-green {
  color: #338c26;
}
.st-row {
  display: table;
  width: 100%;
  margin-bottom: 10px !important;
}
.st-current {
  font-size: 35px;
  white-space: nowrap;
  display: table-cell;
  background: #f4f4f4;
  text-align: center;
}
@media (min-width: 768px) {
  .st-current {
    font-size: 21px;
  }
}
@media (min-width: 992px) {
  .st-current {
    font-size: 35px;
  }
}
@media (min-width: 1200px) {
  .st-current {
    font-size: 45px;
  }
}
.st-difference {
  display: table-cell;
  vertical-align: middle;
  background: rgba(177, 181, 184, 0.2);
  font-size: 11px;
}
.lt-ie9 .st-difference {
  background: #e6e6e5;
}
.st-difference.negative {
  color: #9c1f2e;
  text-align: center;
  padding-right: 10px !important;
  padding-left: 10px !important;
  font-weight: bold;
}
.st-difference.positive {
  color: #338c26;
  text-align: center;
  padding-right: 10px !important;
  padding-left: 10px !important;
  font-weight: bold;
}
.st-difference.neutral {
  color: #b1b5b8;
  text-align: center;
  padding-right: 10px !important;
  padding-left: 10px !important;
  font-weight: bold;
}
.st-low-high {
  font-size: 18px;
  margin-bottom: 20px !important;
  background: #f4f4f4;
  text-align: center;
}
@media (min-width: 768px) {
  .st-low-high {
    font-size: 16px;
  }
}
@media (min-width: 992px) {
  .st-low-high {
    font-size: 21px;
  }
}
.st-sidebar {
  margin-top: 10px !important;
}
@media (min-width: 768px) {
  .st-sidebar {
    margin-top: 0 !important;
    border-left: 1px solid #dadbdc;
  }
}
/**
  * @toc 4.26
  * @name Article feature image
  * @slug article-feature-img
  * @description This extension of the <code>.img-responsive</code> class sets a maximum height on feature images to prevent them from overwhelming smaller screens. It is used on <a href="/news-article.html">news articles</a>.
  * @container true
  * @gridclass col-sm-6
  * @markup
<img src="../img/graphics/thumbs/eatonreceivescontract.jpg" alt="" class="img-responsive article-feature-img">
*/
.article-feature-img {
  max-height: 300px;
}
@media (min-width: 768px) {
  .article-feature-img {
    max-height: none;
  }
}
/**
  * @toc 4.28
  * @name Tag cloud
  * @slug tag-cloud
  * @container true
  * @gridclass col-xs-12
  * @description This module displays a list of tags related to an article.
  */
.tag-cloud {
  padding-left: 0;
  list-style: none;
  margin-left: -5px;
}
.tag-cloud > li {
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
}
.tag-cloud li a:after {
  content: ',';
  display: inline-block;
}
.tag-cloud li:last-child a:after {
  content: '';
}
.tag-headline {
  font-weight: bold;
}
/**
  * @toc 4.27.0
  * @name Iframe scroll overlay
  * @slug iframe-scroll-overlay
  * @description This module fixes a bug where iframes disable a user's ability to scroll the page on a mobile device. On small touch screens, the user may be unable to scroll past iframed content. This module adds a hidden overlay to all iframes that requires the user to tap once to interact with the iframe. Scrolling the window causes the hidden overlay to be re-added, enabling scrolling again.<br><br> The corresponding JavaScript module is <code>EAT/modules/iframeScrollOverlay.js</code>.To initialize this module, include the JS file on your page and run the following method: <pre><code>new EAT.modules.iframeScrollOverlay();</code></pre>
  * @container true
  * @gridclass col-xs-12
  * @markup
  * <iframe src="http://eaton.com" style="width: 100%; height: 300px; overflow: hidden;"></iframe>
  */
.iframe-scroll-wrapper {
  position: relative;
}
.iframe-scroll-overlay {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: transparent;
  display: none;
}
.disable-touches .iframe-scroll-overlay {
  display: block;
}
/*------------------------------------------------------------------
[5.0 Site views]
*/
/*------------------------------------------------------------------
[Product basic info]
*/
.product-detail-card {
  position: relative;
}
@media (min-width: 768px) {
  .product-basic-info {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    float: right;
    float: right !important;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .product-basic-info {
    float: left;
    width: 66.66666667%;
  }
}
@media (min-width: 992px) {
  .product-basic-info {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (min-width: 992px) and (min-width: 992px) {
  .product-basic-info {
    float: left;
    width: 66.66666667%;
  }
}
@media (min-width: 1200px) {
  .product-basic-info {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (min-width: 1200px) and (min-width: 1200px) {
  .product-basic-info {
    float: left;
    width: 66.66666667%;
  }
}
/*------------------------------------------------------------------
[Brand logo]
*/
.brand-logo {
  top: 0;
  float: right;
  float: right !important;
  max-width: 105px;
  max-height: 105px;
  margin: 0 0 10px 10px;
}
.brand-logo img {
  display: block;
  max-width: 100%;
  height: auto;
}
.product-title {
  margin-top: 0 !important;
}
.product-sku {
  color: #636c71;
  font-weight: bold;
}
/*------------------------------------------------------------------
[Product image viewer]
*/
/**
  * @toc 4.21
  * @name Product Image Viewer
  * @slug product-img-viewer
  * @description
  * @container true
  * @gridclass col-sm-12
  * @description This module provides for a large image with several related image thumbnails. It is used on <a href="/product-detail">Product detail</a> pages.
  * @markup
<div class="product-img-viewer">
<div class="product-img-lg">
<img src="../img/graphics/products/product-lg-1.jpg" alt="">
</div>
<ul class="product-thumbs">
<li><a href="#" class="thumbnail selected"><img src="../img/graphics/products/product-thumb-1.jpg" alt=""></a></li>
<li><a href="#" class="thumbnail"><img src="../img/graphics/products/product-thumb-2.jpg" alt=""></a></li>
</ul>
</div>
*/
.product-img-viewer {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}
@media (min-width: 768px) {
  .product-img-viewer {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .product-img-viewer {
    float: left;
    width: 33.33333333%;
  }
}
@media (min-width: 992px) {
  .product-img-viewer {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (min-width: 992px) and (min-width: 992px) {
  .product-img-viewer {
    float: left;
    width: 33.33333333%;
  }
}
@media (min-width: 1200px) {
  .product-img-viewer {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (min-width: 1200px) and (min-width: 1200px) {
  .product-img-viewer {
    float: left;
    width: 33.33333333%;
  }
}
.product-img-lg {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px !important;
}
.product-img-lg img {
  display: block;
  max-width: 100%;
  height: auto;
}
.product-thumbs {
  padding-left: 0;
  list-style: none;
  margin-left: -5px;
}
.product-thumbs > li {
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
}
.lt-ie9 .product-thumbs li {
  width: 80px;
}
.product-thumbs .thumbnail {
  max-width: 60px;
  max-height: 60px;
  display: block;
  border: 2px solid #e6e6e5;
}
.product-thumbs .thumbnail.selected {
  border-color: #0067cd;
}
@media (min-width: 992px) {
  .product-thumbs .thumbnail {
    max-width: 70px;
    max-height: 70px;
  }
}
.product-thumbs img {
  display: block;
  max-width: 100%;
  height: auto;
}
.product-description {
  font-size: 13px;
  margin-bottom: 30px !important;
}
@media (min-width: 768px) {
  .product-description {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    float: right;
    float: right !important;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .product-description {
    float: left;
    width: 66.66666667%;
  }
}
@media (min-width: 992px) {
  .product-description {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (min-width: 992px) and (min-width: 992px) {
  .product-description {
    float: left;
    width: 66.66666667%;
  }
}
@media (min-width: 1200px) {
  .product-description {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (min-width: 1200px) and (min-width: 1200px) {
  .product-description {
    float: left;
    width: 66.66666667%;
  }
}
/*------------------------------------------------------------------
[Related markets]
*/
.related-markets {
  min-height: 20px;
  padding: 15px 10px;
  margin-bottom: 20px;
  -webkit-box-shadow: inset 0 40px 40px -40px #e6e6e5, inset 0 -40px 40px -40px #e6e6e5;
  box-shadow: inset 0 40px 40px -40px #e6e6e5, inset 0 -40px 40px -40px #e6e6e5;
}
.related-markets blockquote {
  border-color: #ddd;
  border-color: rgba(0, 0, 0, 0.15);
}
.related-markets:before,
.related-markets:after {
  content: " ";
  display: table;
}
.related-markets:after {
  clear: both;
}
.related-markets:before,
.related-markets:after {
  content: " ";
  display: table;
}
.related-markets:after {
  clear: both;
}
@media (min-width: 768px) {
  .related-markets {
    margin: 0;
    padding: 0;
    box-shadow: none;
    min-height: 0;
  }
}
.related-markets-header {
  font-family: 'Eaton Reg', Helvetica, Arial, sans-serif;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
  letter-spacing: 0.025em;
  margin-top: 20px;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
  font-size: 24px;
  font-family: 'Eaton Med', Helvetica, Arial, sans-serif;
  color: #82b8c9;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}
.related-markets-header small,
.related-markets-header .small {
  font-weight: normal;
  line-height: 1;
  color: #777777;
}
.related-markets-header.subtle {
  color: #636c71;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
}
.related-markets-header small,
.related-markets-header .small {
  font-size: 65%;
}
.related-markets-header.subtle {
  font-size: 16px;
}
.sidebar .related-markets-header.panel-heading {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
* + .related-markets-header {
  margin-top: 36px;
}
@media (min-width: 768px) {
  .related-markets-header {
    padding-bottom: 5px !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid #e6e6e5;
  }
}
/*------------------------------------------------------------------
[Extended content section]
*/
.product-detail-extended {
  margin-top: 30px !important;
}
@media (min-width: 768px) {
  .product-detail-extended {
    margin-top: 0 !important;
    border-top: 1px solid #b1b5b8;
    padding-top: 30px !important;
  }
}
.product-detail-extended h1:first-child,
.product-detail-extended h2:first-child,
.product-detail-extended h3:first-child,
.product-detail-extended h4:first-child,
.product-detail-extended h5:first-child,
.product-detail-extended h6:first-child {
  margin-top: 0 !important;
}
.product-detail-extended section + section {
  margin-top: 30px !important;
  padding-top: 30px !important;
  border-top: 1px solid #b1b5b8;
}
/*------------------------------------------------------------------
[Customer support]
*/
.customer-support {
  position: relative;
}
.customer-support-body {
  padding-left: 4em;
  padding-top: 10px;
  margin-bottom: 20px !important;
}
@media (min-width: 768px) {
  .customer-support-body {
    padding-left: 5em;
  }
}
.customer-support-body:before {
  content: "\e628";
  font-family: 'Icomoon';
  color: #0067cd;
  font-size: 2.75em;
  position: absolute;
  left: 0;
  margin-top: -5px;
}
@media (min-width: 768px) {
  .customer-support-body:before {
    left: 8px;
    margin-top: -10px;
    font-size: 49px;
  }
}
#sustainability-graph .graph {
  margin-bottom: 20px !important;
}
#sustainability-graph .graph img {
  margin: 0 auto;
}
.feature-card {
  border: 1px solid #dadbdc;
  min-height: 100px;
  margin-bottom: 30px !important;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(145, 145, 145, 0.2);
  box-shadow: 0px 0px 5px 0px rgba(145, 145, 145, 0.2);
}
.feature-card:before {
  content: "";
  height: 6px;
  background: #0067cd;
  display: block;
  margin: -1px;
}
.feature-card img {
  display: block;
  max-width: 100%;
  height: auto;
}
.feature-card .content-block {
  padding-right: 20px !important;
  padding-left: 20px !important;
}
.feature-card .btn.btn-link {
  border-top: 1px solid #e6e6e5;
}
.expand-row {
  margin-top: 20px !important;
  padding-top: 20px !important;
  border-top: 1px solid #e6e6e5;
  display: none;
}
.charts-region img {
  margin: 0 auto;
  display: block;
  max-height: 250px;
}
.stock-historical label {
  line-height: 11px;
  font-size: 11px;
  margin: 0 0 5px 0;
  padding-bottom: 0 !important;
  display: block;
}
.stock-historical select {
  margin-bottom: 5px !important;
}
@media (min-width: 480px) {
  .stock-historical .compare,
  .stock-historical .options,
  .stock-historical .time,
  .stock-historical .update {
    padding-right: 0 !important;
  }
}
label.minify {
  line-height: 1.1em;
}
label.minify span {
  font-size: 9px;
  line-height: 10px;
}
.photo-gallery-row .section-nav {
  border: 0;
}
.photo-gallery-row select.form-control {
  margin-bottom: 30px !important;
}
.filter-section.daterange {
  background: #ffffff;
}
@media (max-width: 767px) {
  .filter-section.daterange label {
    margin: 0;
	padding: 0;
	min-height: 0;
    	min-width: 0;
  }
}
@media (max-width: 767px) {
  #ui-datepicker-div {
    z-index: 400 !important;
  }
}
.datepicker-parent .icon-calendar {
  cursor: pointer;
}
/*# sourceMappingURL=app.css.map */

@media print {
    body {
        -webkit-print-color-adjust: exact;
    }
}