@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Ubuntu:400,400i,700,700i");
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: outside none none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0; }

/*end CSS reset*/
::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.7; }

::-moz-placeholder {
  color: inherit;
  opacity: 0.7; }

:-moz-placeholder {
  color: inherit;
  opacity: 0.7; }

:-ms-input-placeholder {
  color: inherit;
  opacity: 0.7; }

::placeholder {
  color: inherit;
  opacity: 0.7; }

body {
  font-family: 'Ubuntu', sans-serif;
  font-size: 15px;
  color: #333;
  background: white; }

body, html {
  height: 100%;
  overflow-y: hidden; }

a {
  color: #333;
  text-decoration: none;
  outline: none; }

/*a:hover {*/
/*text-decoration: underline;}*/
a[name] {
  position: relative;
  display: block; }

img {
  max-width: 100%;
  height: auto; }

input {
  font-size: inherit; }

button {
  cursor: pointer;
  font-size: inherit; }

strong, .bold {
  font-weight: bold; }

em, .italic {
  font-style: italic; }

.upperCase {
  text-transform: uppercase;
  letter-spacing: 0.055em; }

.dspl-None {
  display: none !important; }

.d-block {
  display: block; }

.d-table {
  display: table;
  width: 100%; }

.d-tfixed {
  table-layout: fixed; }

.d-trow {
  display: table-row; }

.d-tcell {
  display: table-cell;
  vertical-align: top; }

.d-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; }

.clear-lr {
  clear: both; }

.burger-menu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 35px;
  height: 28px; }
  .burger-menu .burger-bar {
    height: 5px;
    will-change: transform;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    background-color: #ff6633; }
  .burger-menu .center {
    position: relative; }
    .burger-menu .center .burger-bar:nth-child(2) {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0; }
  .burger-menu.open .burger-bar.outer {
    -webkit-transform: scaleX(0);
    transform: scaleX(0); }
  .burger-menu.open .center .burger-bar:nth-child(1) {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg); }
  .burger-menu.open .center .burger-bar:nth-child(2) {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg); }

.link-button {
  display: inline-block;
  padding: 10px;
  border: none;
  color: white !important;
  background-color: #ff6633; }

header {
  border-bottom: 6px solid #aaa; }
  header .wrapper {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px; }
    @media (min-width: 1001px) {
      header .wrapper {
        align-items: flex-end; } }
    @media (max-width: 1000px) {
      header .wrapper {
        padding-top: 20px; } }
    header .wrapper .left {
      flex: 0 0 auto;
      margin-left: 30px; }
      @media (max-width: 850px) {
        header .wrapper .left {
          margin-left: 10px; } }
    header .wrapper .right {
      display: flex; }
      @media (min-width: 1001px) {
        header .wrapper .right {
          flex-direction: column;
          align-items: stretch; } }
      @media (max-width: 1000px) {
        header .wrapper .right {
          justify-content: flex-end;
          align-items: flex-end;
          flex: 1 0 auto;
          margin-left: 30px;
          margin-right: 30px;
          margin-bottom: 5px; } }
      @media (max-width: 850px) {
        header .wrapper .right {
          margin-left: 10px;
          margin-right: 10px; } }
  header .logo {
    display: block;
    margin-top: 10px;
    font-size: 36px;
    font-weight: bold; }
    @media (max-width: 500px) {
      header .logo {
        margin-top: 3px;
        font-size: 20px; } }
    header .logo img {
      height: calc(1em + 6px);
      vertical-align: middle;
      box-shadow: 5px 5px 5px 0px #aaa; }
    header .logo span {
      display: inline-block;
      border-bottom: 5px solid #ff6633;
      vertical-align: bottom; }
  header .phone {
    display: flex; }
    header .phone > *:first-child {
      margin-right: 1em; }
    header .phone.position-right {
      margin-top: 10px;
      margin-bottom: 10px;
      padding-right: 20px;
      text-align: right; }
      @media (max-width: 1000px) {
        header .phone.position-right {
          display: none; } }
      header .phone.position-right, header .phone.position-right * {
        color: #ff6633; }
    header .phone.position-top {
      flex: 0 0 100%;
      flex-wrap: wrap;
      box-sizing: border-box;
      padding: 5px 10px;
      background-color: #ff6633; }
      @media (min-width: 1001px) {
        header .phone.position-top {
          display: none; } }
      header .phone.position-top, header .phone.position-top * {
        color: white; }
  header .search .search-icon {
    position: relative;
    z-index: 100;
    width: 29px;
    height: 29px;
    cursor: pointer;
    background: url("img/search-icon.png") center center no-repeat;
    background-size: contain; }
    @media (min-width: 1001px) {
      header .search .search-icon {
        display: none; } }
  header .search fieldset {
    position: relative; }
    @media (max-width: 1000px) {
      header .search fieldset {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: #ff6633; } }
  @media (max-width: 1000px) {
    header .search:not(.open) fieldset {
      display: none; }
    header .search.open .search-icon {
      background-image: url("img/search-icon-close.png"); } }
  header .search input.text {
    box-sizing: border-box;
    width: 100%;
    height: 29px;
    line-height: 29px;
    padding: 3px 10px;
    border: none; }
    @media (min-width: 1001px) {
      header .search input.text {
        color: white;
        background: #ff6633; } }
    @media (max-width: 1000px) {
      header .search input.text {
        width: calc(100% - 89px);
        margin-left: 30px;
        margin-top: 39px; } }
    @media (max-width: 850px) {
      header .search input.text {
        width: calc(100% - 49px);
        margin-left: 10px; } }
    @media (max-width: 500px) {
      header .search input.text {
        margin-top: 19px; } }
  header .search input.action {
    display: none; }
  header .burger-menu {
    margin-right: 10px; }
    @media (min-width: 1001px) {
      header .burger-menu {
        display: none; } }
.nav.sub {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 100%; }

.nav.sub > .nav-header {
  flex: 0 0 auto; }

.nav.sub > ul, #main .content > #layout {
  flex: 1 1 auto;
  overflow-y: auto; }

#main {
  position: relative;
  height: calc(100% - 95px);
  align-items: stretch; }

#main > * {
  flex: 0 0 auto;
  overflow-y: auto; }

#main > .content {
  flex: 1 1 auto; }

#main > .nav.sub,
#main > .content {
  border-bottom: 30px solid #aaa; }

#main .content {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 100%; }

#main .content > .nav-header {
  flex: 0 0 auto; }

.nav a {
  display: table;
  color: #666; }

.nav.main {
  padding: 20px 35px 20px 25px;
  background-color: #ff6633; }
  @media (max-width: 1000px) {
    .nav.main {
      position: absolute;
      z-index: 10000;
      box-sizing: border-box;
      height: 100%;
      box-shadow: 3px 0px 9px #666;
      -webkit-transform-origin: left center;
      transform-origin: left center;
      -webkit-transition: webkit-transform 0.5s;
      transition: transform 0.5s; }
      .nav.main:not(.open) {
        -webkit-transform: scaleX(0);
        transform: scaleX(0); } }
  .nav.main a {
    color: white;
    margin-top: 1em;
    margin-bottom: 1em; }
    .nav.main a.lvl1 {
      font-size: 20px;
      font-weight: bold; }
    .nav.main a.lvl1.section {
      padding-left: 7px;
      border-left: 4px solid white; }
    .nav.main a.lvl2.section::before {
      content: '';
      display: inline-block;
      width: 12px;
      margin-right: 7px;
      border-top: 3px solid white;
      vertical-align: middle; }
  @media (min-width: 1001px) {
    .nav.main .mobile {
      display: none; } }
  .nav.main .mobile .hidden {
    display: none; }
  .nav.main .mobile.lvl3 {
    margin-right: -35px;
    margin-bottom: 1em;
    /*padding-top: 15px;*/
    /*padding-bottom: 25px;*/
    overflow: hidden;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eeeeee+0,dddddd+100 */
    background: #eeeeee;
    /* Old browsers */
    background: -webkit-linear-gradient(left, #eeeeee 0%, #dddddd 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #eeeeee 0%, #dddddd 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ }
    .nav.main .mobile.lvl3 a,
    .nav.main .mobile.lvl3 .scroll {
      margin-top: 1em;
      margin-bottom: 1em;
      margin-left: 22px;
      margin-right: 35px;
      cursor: pointer;
      color: #666; }
    .nav.main .mobile.lvl3 .scroll {
      color: #ff6633; }
    .nav.main .mobile.lvl3 .scroll.prev::before {
      content: '« '; }
    .nav.main .mobile.lvl3 .scroll.next::before {
      content: '» '; }
    .nav.main .mobile.lvl3 a.section {
      color: #333;
      font-weight: bold; }
  .nav.main .mobile.lvl4 {
    overflow: hidden;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    background-color: white; }
    .nav.main .mobile.lvl4 a {
      color: #333; }
  .nav.main .extra {
    padding-top: 25px;
    border-top: 1px solid white;
    font-size: 15px; }

@media (max-width: 1000px) {
  .nav.sub {
    display: none; } }

.nav.sub li {
  padding: 10px; }

.nav.sub.lvl3 ul {
  background-color: #eee; }

.nav.sub.lvl3 li.section {
  background-color: white; }

.nav.sub.lvl4 ul {
  border-right: 1px solid #ccc; }

.nav.sub.lvl4 li.section a {
  font-weight: bold; }

.nav-header {
  box-sizing: border-box;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  color: #ccc;
  border-bottom: 1px solid #ccc; }

.nav.collapsable.collapsed {
  box-sizing: border-box;
  width: 50px; }

.nav.collapsable .collapse-marker {
  height: 100%;
  cursor: pointer;
  background: url("img/arrow-double-grey.png") center center no-repeat;
  background-size: 14px auto; }

.nav.collapsable.main .collapse-marker {
  position: relative;
  top: -20px;
  left: -10px;
  width: 30px;
  height: 30px;
  background-image: url("img/arrow-double-white.png"); }

.nav.collapsable.collapsed .nav-header span, .nav.collapsable:not(.collapsed) .collapse-marker {
  display: none; }

.nav.collapsable.main.collapsed .tree, .nav.collapsable.sub.collapsed li {
  display: none; }

#main .inquiry-form {
  position: absolute;
  right: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  max-height: 100%; }

#main .inquiry-form.open {
  width: 420px;
  max-width: 100%;
  box-shadow: 1px 1px 5px #666;
  background-color: white; }

.inquiry-form .nav-header,
.inquiry-form .send-inquiry {
  flex: 0 0 auto; }

.inquiry-form .list {
  display: flex;
  /* thanks Chrome! */
  flex-direction: column;
  position: relative;
  flex: 0 1 auto;
  overflow: hidden; }

.inquiry-form .list .scroll {
  /*height: 100%; doesn't work because Chrome*/
  overflow-y: auto; }

.inquiry-form .list::before,
.inquiry-form .list::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  box-shadow: 0 0 12px 1px #666; }

.inquiry-form .list::after {
  top: auto;
  bottom: 0; }

.inquiry-form .nav-header {
  /*padding-top: 15px;*/
  cursor: pointer;
  font-size: 20px;
  color: #ff6633;
  white-space: nowrap; }

.inquiry-form .nav-header::before,
.inquiry-form .nav-header::after {
  content: '';
  display: none;
  width: 14px;
  height: 100%;
  vertical-align: bottom;
  background: url("img/arrow-double-reverse-orange.png") center center no-repeat;
  background-size: 100% auto; }

.inquiry-form:not(.open) .nav-header::before {
  display: inline-block; }

.inquiry-form.open .nav-header::after {
  display: inline-block;
  background-image: url("img/arrow-double-orange.png"); }

.inquiry-form:not(.open) .list, .inquiry-form:not(.open) .send-inquiry {
  display: none; }

.inquiry-form .nav-header,
.inquiry-form .list-item,
.inquiry-form .send-inquiry {
  padding-left: 20px;
  padding-right: 20px; }

.inquiry-form .list-item {
  color: white;
  background: #ff6633; }

.inquiry-form .list-item,
.inquiry-form .empty-text {
  padding-top: 20px;
  padding-bottom: 20px; }

.inquiry-form .list-item + .empty-text {
  display: none; }

.inquiry-form .list-item input,
.inquiry-form .list-item textarea,
.inquiry-form .list-item select,
.inquiry-form .list-item button,
.inquiry-form .send-inquiry input.text {
  padding: 3px;
  border: none; }

.inquiry-form .list-item button {
  color: white;
  background: none; }

.inquiry-form .list-item button.delete::after {
  content: 'x';
  padding: 0 0.3em 2px;
  color: #ff6633;
  background: white; }

.inquiry-form .list-item button.change::before {
  content: '>';
  padding: 0 0.2em;
  color: #ff6633;
  background: white; }

.inquiry-form .list-item button.change.revert::before {
  content: '<'; }

.inquiry-form .list-item.changed {
  background-color: rgba(255, 102, 51, 0.5); }

.inquiry-form .list-item:not(.changed) button.change {
  display: none; }

.inquiry-form .list-item:not(:first-child) {
  border-top: 1px solid white; }

.inquiry-form .list-item .title {
  font-size: 18px;
  margin-bottom: 15px; }

.inquiry-form .list-item .field.dropdown,
.inquiry-form .list-item .field.textarea,
.inquiry-form .list-item button.update {
  margin-top: 15px; }

.inquiry-form .list-item select.dropdown {
  width: 100%;
  background: white; }

.inquiry-form .list-item label.left {
  display: none; }

.inquiry-form .list-item .d-flex {
  align-items: center; }

.inquiry-form .list-item input.amount {
  width: 2em;
  margin-right: 10px;
  text-align: right; }

.inquiry-form .list-item textarea {
  box-sizing: border-box;
  width: 100%;
  font-family: inherit;
  font-size: inherit; }

.inquiry-form .send-inquiry {
  padding-bottom: 20px; }
  .inquiry-form .send-inquiry .message {
    margin-top: 10px;
    font-weight: bold; }
  .inquiry-form .send-inquiry input.text {
    width: 100%;
    margin-top: 10px;
    border: none;
    color: white;
    background: #ff6633; }
  .inquiry-form .send-inquiry label.left {
    display: none; }
  .inquiry-form .send-inquiry .checkbox-privacy {
    margin-top: 15px; }
  .inquiry-form .send-inquiry .checkbox-privacy a {
    color: #ff6633; }
  .inquiry-form .send-inquiry input.checkbox {
    float: left;
    display: block;
    margin: 0 10px 10px 0; }
  .inquiry-form .send-inquiry button {
    margin-top: 10px; }
  .inquiry-form .send-inquiry .form-result {
    padding-top: 20px; }

#layout {
  padding-left: 30px;
  padding-right: 30px; }
  @media (max-width: 850px) {
    #layout {
      padding-left: 10px;
      padding-right: 10px; } }
#layout .maxWidth-wrapper {
  max-width: 1200px; }

.el {
  padding-top: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #ccc; }
  @media (max-width: 850px) {
    .el {
      padding-top: 10px;
      padding-bottom: 10px; } }
  .el.no-border, .el:last-child {
    border-bottom: none; }
  .el.mBottom-none {
    padding-bottom: 0;
    border-bottom: none; }
  .el.mBottom-none + .el, .el.mTop-none {
    padding-top: 0; }
  .el .title {
    font-size: 30px;
    font-weight: bold; }
  .el .background-grey {
    padding: 20px 40px;
    background-color: #ccc; }
  .el .background-orange {
    padding: 30px 20px;
    background-color: #ff6633; }
  .el .spec-list p {
    color: white;
    font-size: 22px;
    font-weight: bold; }
  .el .spec-list .children {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-right: -15px; }
  .el .spec-list a {
    flex-grow: 1;
    display: block;
    box-sizing: border-box;
    width: calc(100% / 4 - 15px);
    min-width: 200px;
    margin-right: 15px;
    margin-bottom: 15px;
    padding: 10px;
    text-align: center;
    color: #ff6633;
    background: #ccc; }

.el.headline h1 {
  padding: 20px 30px;
  color: white;
  font-size: 30px;
  line-height: 1.2; }
  @media (max-width: 850px) {
    .el.headline h1 {
      padding: 10px;
      font-size: 22px;
      -webkit-hyphens: auto;
      -ms-hyphens: auto;
      hyphens: auto; } }
.el.text .outer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end; }

.el.text .image {
  flex: 0 0 200px;
  margin-right: 30px; }

.el.text .text {
  flex-grow: 1; }

.el.text .typography {
  margin-top: 25px; }
  @media (max-width: 850px) {
    .el.text .typography {
      margin-top: 10px; } }
.el.text .link-button {
  margin-top: 20px; }
  .el.text .link-button.bottom {
    width: 100%;
    text-align: center; }
    @media (min-width: 851px) {
      .el.text .link-button.bottom {
        display: none; } }
.el.text.style-multiple-columns .typography {
  columns: 300px 2;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto; }

@media (max-width: 850px) {
  .el.text .outer {
    flex-wrap: wrap;
    align-items: flex-start; }
  .el.text .image {
    margin-right: 10px; }
  .el.text .text {
    flex-basis: calc(100% - 210px);
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto; }
    .el.text .text .link-button {
      display: none; } }

@media (max-width: 450px) {
  .el.text .image {
    flex-basis: 125px; }
  .el.text .text {
    min-width: 200px; } }

.el.slider .slick:not(.slick-initialized) .slide:not(:first-child) {
  display: none; }

.el.slider .image-part .slick-arrow {
  position: absolute;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 7%;
  min-width: 50px;
  height: 100%;
  cursor: pointer;
  font-size: 40px;
  text-align: center;
  vertical-align: middle;
  color: #ff6633;
  background: url("img/arrow-left.png") center center no-repeat; }
  .el.slider .image-part .slick-arrow:hover {
    background-color: #ffffff26; }
  .el.slider .image-part .slick-arrow.slick-next {
    left: auto;
    right: 0;
    background-image: url("img/arrow-right.png"); }

.el.slider .image-part img {
  vertical-align: bottom; }

.el.slider .text-part .text {
  padding: 10px;
  background-color: #ff6633; }

.el.slider .text-part * {
  color: white; }

.el.logos .list {
  margin-left: -5px;
  margin-right: -5px;
  flex-wrap: wrap;
  justify-content: flex-start; }
  .el.logos .list a {
    display: block;
    box-sizing: border-box;
    width: calc(100% / 3 - 10px);
    margin: 5px;
    padding: 40px 10px;
    line-height: 40px;
    text-align: center;
    background-color: #ccc; }
  .el.logos .list a img {
    vertical-align: middle; }
  .el.logos .list[max-width~="600px"] a {
    width: calc(50% - 10px); }
  .el.logos .list[max-width~="300px"] a {
    width: 100%; }

.el.cta .typography {
  font-size: 24px; }
  .el.cta .typography * {
    color: #ff6633; }
  .el.cta .typography a {
    color: #333; }

@media (max-width: 450px) {
  .el.page-specific.SpecificationgroupPage a {
    display: block;
    text-align: center; }
  .el.page-specific.SpecificationgroupPage a:not(:first-child) {
    margin-top: 10px; } }

.product-detail .typography:not(:first-child),
.product-detail .image:not(:first-child) {
  margin-top: 20px; }

.product-detail .inquiry,
.product-detail .inquiry .add-list {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch; }

.product-detail .inquiry .link-button {
  margin-right: 20px; }

.product-detail .inquiry .link-button.list-count {
  margin-right: 0;
  background: #ccc; }

.product-detail .inquiry [name="action_update"] {
  display: none; }

.search-results .query {
  display: inline-block;
  padding-bottom: 10px;
  border-bottom: 1px solid black; }

.search-results .type {
  margin-top: 20px;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.5em; }

.search-results .result {
  padding-top: 15px;
  padding-bottom: 20px; }
  .search-results .result:not(:first-child) {
    border-top: 1px solid black; }
  .search-results .result .title {
    margin-bottom: 10px;
    font-weight: bold;
    font-size: inherit; }
  .search-results .result .typography br + br {
    display: none; }

.search-results .results-hint {
  margin-left: -10px;
  margin-right: -10px;
  margin-top: 10px;
  padding: 10px;
  background: #ccc no-repeat;
  background-size: auto 17px; }
  .search-results .results-hint.show-more {
    padding-right: 35px;
    background-image: url("img/arrow-double-orange.png");
    background-position: right 10px center; }
  .search-results .results-hint.show-all {
    padding-left: 35px;
    background-image: url("img/arrow-double-reverse-orange.png");
    background-position: left 10px center; }

.search-results .pagination {
  margin-bottom: 10px;
  word-spacing: 2px; }
  .search-results .pagination a {
    color: #ff6633; }

/*# sourceMappingURL=layout.css.map */