* {
    box-sizing: border-box;
}

body {
    background-color: #efefef;
    font-size: 100%;
    font-family: Arial;
    color: #000088;
}

/* masthead and menu colors */
.title-center, .title-langselect, .masthead {
    background-color: #2a3778;
}

.menu-left-1, .menu-left-1-active, .menu-top-1, .menu-top-1-img {
    background-color: #202864;
}

.menu-left-1:hover {
    background-color: #0a1a52;
}

.menu-left-2, .menu-left-2-active {
    background-color: #2a4a8a; /*#2a4a8f;*/
    color: #ffffff;
}

.menu-left-2:hover {
    background-color: #202864;
}

/* masthead including logo, title, and language selection */
.masthead {
    width: 100%;
    display: block;
    text-align: center;
}

.logo {
    /*border: 5px solid #2a3778;*/
    height: 50px;
    background-color: #ffffff;
    color: #0000ff;
    margin: auto;
    padding: 5px;
    width: 20%;
    max-width: 240px;
    min-width: 120px !important;
    text-align: center;
    display: block;
    float: left;
}

.logo img {
    width: 100%;
}

.title-langselect {
    height: 50px;
    float: none;
    overflow: hidden;
    width: auto;
    display: block;
}

.title, .title-center {
    height: 100%;
    color: #ffffff;
    width: 80%;
    font-weight: bold;
    font-size: 2.0em;
    text-align: center;
    display: block;
    float: left;
}

.title {
    width: 100%;
}

.title-left, .title-right {
    height: 100%;
    width: 10%;
    font-size: 1.4em;
    text-align: left;
    display: block;
    float: left;
}

.title-right a {
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
}

/* vertical centering classes */
.outer-vc {
    height: 100%;
    width: 100%;
    text-align: center;
    display: table;
}

.inner-vc {
    vertical-align: middle;
    display: table-cell;
}

/* menu classes */
.menu-left {
    float: left;
    width: 20%;
    max-width: 240px;
    font-weight: bold;
    text-align: center;
    display: inline;
}

.menu-left-1, .menu-left-1-active {
    margin-top: 5px;
    padding: 5px;
    display: block;
    width: 100%;
    color: #ffffff;
}

.menu-left-2, .menu-left-2-active {
    margin-top: 0px;
    padding: 5px;
    display: block;
    width: 100%;
    font-size: 0.9em;
}

.menu-left-1 {
    text-decoration: none;
}

.menu-left-1-active {
    text-decoration: "underline";
}
  
.menu-left-2 {
    text-decoration: none;
}

.menu-left-2-active {
    text-decoration: "underline";
}

.menu-top {
    float: left;
    width: 100%;
    font-weight: bold;
    text-align: center;
    display: none
}

.menu-top-1, .menu-top-1-active, .menu-top-1-img, .menu-top-1-img-active {
    margin-top: 5px;
    padding: 5px;
    width: 15%;
    height: 3.2em;
    font-size: 0.72em;
    text-decoration: none;
    display: block;
    float: left;
}

.menu-top-1-img, .menu-top-1-img-active {
    width: 10%;
    /*height: 33px;*/
}

.menu-top-1-img img, .menu-top-1-img-active img {
    height: 100%;
}

.menu-top-1 {
    color: #ffffff;
}

.menu-top-1-active, .menu-top-1-img-active {
    background-color: #f0f0f0;
    color: #4a4a4a;
}

.menu-top-1:hover, .menu-top-1-img:hover {
    background-color: #181648;
    cursor: pointer;
}

#submenu {
    background-color: #f0f0f0;
    float: left;
    width: 100%;
    font-weight: bold;
    text-align: left;
    display: none;
}

.submenu-1, .submenu-1-active {
    background-color: #f0f0f0;
    margin-top: 0;
    padding: 10px;
    min-width: 12.5%;
    width: auto;
    color: #323232;
    font-size: 0.8em;
    text-align: center;
    display: inline-block;
}

.submenu-1 {
    text-decoration: none;
}

.submenu-1-active {
    text-decoration: "underline";
}

.submenu-1:hover {
    background-color: #e0e0e0;
}

/* main */
.main {
    float: none;
    overflow: hidden;
    width: auto;
    text-align: center;
}

.main-data {
    float: none;
    overflow: hidden;
    padding: 0 20px;
    width: auto;
    text-align: center;
}

.filterbox {
    background-color: #ffffff;
    width: 100%;
    margin-top: 10px;
    text-align: left;
}

.filter {
    color: #000000;
    background-color: #ffffff;
    margin: 10px;
    padding: 5px;
    vertical-align: top;
    text-align: left;
    display: inline-block;
}

.filter div {
    color: #000000;
    background-color: #f0f0f0;
    margin-top: 5px;
    padding: 0px;
    vertical-align: top;
    font-size: 0.8em;
    text-align: left;
    display: inline-block;
}

.appendix {
    background-color: #e5e5e5;
    color: #000000;
    text-align: center;
    margin-top: 7px;
    padding: 10px;
}

/* the main-titleblock contains, e.g., subtypes and brief */
.main-titleblock {
    background-color: #ffffff;
    padding: 10px;
    width: 100%;
    text-align: center;
    display: block;
}

.main-titleblock p {
    text-align: center;
    margin: 0px;
    color: #000000;
}

.main-image-block {
    display: block;
    margin: auto;
}

.main-image-block > div {
    padding: 3px;
    vertical-align: middle;
    display: inline-block;
}

.main-image-block > div > div {
    padding: 0px 3px 0px 3px;
    vertical-align: top;
    display: inline-block;
}

.main-image-block div img {
    max-width: 100%;
    height: auto;
}

.datasheet {
    font-size: 1.6em;
    color: #000088;
    margin-left: 10px;
    text-decoration: underline;
}

.main-drawing {
    background-color: #ffffff;
    color: #000000;
    width: 100%;
    text-align: center;
    display: block;
}

.main-drawing img {
    width: 100%;
}

.main-drawing-caption {
    color: #000000;
    margin-top: 10px;
    font-weight: bold;
    text-align: left;
}

.image {
    width: 100%;
    overflow: auto;
    display: block;
}

.image img {
    padding: 3px;
    vertical-align: middle;
    max-width: 100%;
}

.products img {
    text-align: center;
}

/* distributor link on the index page */
a.index-distributors {
    text-shadow: 1px 1px #c0c0c0;
    color: #0000ee;
    font-weight: bold;
    text-decoration: underline;
}

a.index-distributors div {
    text-align: center;
    width: 100%;
}

/* distributor page classes */
.distributor {
    /*background-color: #ffffff;*/
    background-image: linear-gradient(90deg, #c8c8c8, #f0f0f0);
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
    text-align: left;
}

.distributor-left {
    width: 25%;
    max-width: 300px;
    text-align: left;
    display: inline-block;
    vertical-align: top;
}

.distributor-left img {
    margin-bottom: 5px;
    display: inline-block;
}

.distributor-left div {
    margin-left: 5px;
    padding-bottom: 20px;
    display: inline-block;
    vertical-align: middle;
}

.distributor-right {
    width: 75%;
    text-align: left;
    display: inline-block;
}

.distributor-address {
    padding: 5px;
    display: inline-block;
    vertical-align: top;
}

.distributor-address-inner {
    display: table-row;
}

.distributor-address-marker {
    background-color: #2a3778;
    height: 100%;
    width: 2px;
    display: table-cell;
}

.distributor-address-text {
    padding-left: 5px;
    display: table-cell;
}

/* highlight box, e.g. for added information */
.highlight-block {
    background-color: #ffffff;
    margin-top: 10px;
    padding: 10px;
    width: 100%;
    text-align: left;
    display: block;
}

/* certificate / test report placement */
div.certificates {
    max-width: 100%;
    margin: 1em;
    display: block;
    float: left;
}

/* content boxes with shadow outline, e.g. for the impressum and index pages */
.content-block {
    /*background-color: #c2ceff;*/
    background-image: linear-gradient(60deg, #c2ceff, #e8edff);
    margin-top: 10px;
    padding: 10px;
    width: 100%;
    text-align: center;
    display: block;
    box-shadow: 2px 2px #a0acda;
}

.content-block p {
    text-align: left;
    margin: 0px;
}

.content-block-inline {
    background-image: linear-gradient(60deg, #c2ceff, #e8edff);
    margin-top: 10px;
    margin-left: 0.1%;
    margin-right: 0.1%;
    padding: 10px;
    width: 24.5%;
    min-width: 280px;
    max-width: 100%;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    box-shadow: 2px 2px #a0acda;
}

.content-block-inline p {
    text-align: left;
    margin: 0px;
}

.content-block-inline a {
    color: #0000ee;
}

.content-block-inline a:visited {
    color: #0000ee;
}

.content-block-inline img {
    text-align: left;
    max-width: 100%;
    margin: 0px;
}

/* centering */
.center {
    text-align: center;
}

/* impressum li */
.impressum li {
    margin: 20px 0;
}

/* general tag definitions */
span.red {
    color: #ff0000;
}

span.green {
    color: #00a000;
}

span.blue {
    color: #0000e0;
}

span.pre {
    font-family: monospace;
    font-size: 1.4em;
    font-weight: bold;
}

li {
    text-align: left;
}

h1, h2, h3, h4 {
    color: #000000;
}

h1 {
    text-align: center;
}
          
h2 {
    text-align: left;
}

h3 {
    text-align: left;
}

h4 {
    text-align: left;
}

h4.notes {
    margin: 0 0.5em;
}

p {
    text-align: left;
}

ul, ul.features, ul.applications, ul.notes {
    text-align: left;
}

ul.notes {
    color: #000000;
    font-size: 0.9em;
    padding-left: 0;
    list-style-type:none;
}

ul.notes li {
    margin-bottom: 5px;
}

/* products elements */
a.hidden {
    display: none;
}

span.hidden {
    display: none;
}

h4.products {
    color: #ffffff;
    margin: 0px;
}

h4.hidden {
    display: none;
}

img.hidden {
    display: none;
}

div.products-section {
    background-color: #2a3778;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 5px;
    padding: 5px;
}

div.products-separator {
    /*border-top: 1px solid #808080;*/
    /*border-bottom: 1px solid #808080;*/
    background-color: #2a3778;
    width: 100%;
    margin: auto;
    margin-top: 15px;
    margin-bottom: 0px;
    padding: 3px;
}

div.products-image {
    width: 100%;
    margin-top: 1em;
    border-style: solid;
    border-width: 1px 1px 0px 1px;
    border-color: #d0d0d0;
    background-color: #fafafa;
}

div.products-image img {
    vertical-align: top;
}

div.hidden {
    display: none;
}

table.products {
    width: 100%;
    text-align: left;
    margin-bottom: 10px;
}

table.hidden {
    display: none;
}

table.products th {
    background-color: #ffffff;
    color: #000000;
}

tr.products {
    background-color: #f8f8f8;
}
  
tr.products:nth-child(even) {
    background-color: #e8e8e8;
}

tr.hidden {
    display: none;
}

.products-2-col td:nth-child(1) {
    width: 20%;
}

.products-2-col td:nth-child(2) {
    width: 80%;
}

.products-3-col td:nth-child(1) {
    width: 33.4%;
}

.products-3-col td:nth-child(2) {
    width: 33.3%;
}

.products-3-col td:nth-child(3) {
    width: 33.3%;
}

/* regular and wide tables */
table {
    border-collapse: collapse;
    margin: auto;
}

table.wide {
    width: 100%;
    text-align: left;
}

tr {
    background-color: #f8f8f8;
}
  
tr:nth-child(even) {
    background-color: #e8e8e8;
}

th {
    background-color: #2a3778;
    text-align: center;
    color: #ffffff;
}

td {
    color: #000000;
}

th, td {
    border: 1px solid #d0d0d0;
    padding: 8px;
}

/* responsive table class (for product specifications) */
table.specs {
    width: 100%;
    border-collapse: collapse;
}

table.specs th {
    background-color: #2a3778;
    color: #ffffff;
}

table.specs tr {
    background-color: #f2f2f2;
}
  
table.specs tr:nth-child(even){
    background-color: #d6d6d6;
}

table.specs td.singlecol {
    background-color: #6abda7;
}

table.specs th {
    padding: 8px;
    text-align: center;
}

table.specs td, table.specs th {
    border: 1px solid #d0d0d0;
    padding: 8px;
}

table.specs td {
    text-align: left;
    color: #000000;
}

table.specs td.singlecol {
    text-align: center;
}

.stepfile {
    margin: 1.5em 0;
    text-align: left;
}

.stepfile img {
    height: 2.0em;
    margin-right: 1.0em;
}

.stepfile a {
    font-weight: normal;
}

/*----------------------------------------------*/
/* image carousel / slideshow classes           */
/* based on https://www.w3schools.com example   */
.slides-block {
  background-color: #e5e5e5;
  max-width: 1000px;
  position: relative;
  text-align: left;
  margin: auto;
  overflow: hidden;
  border-radius: 0 0 10px 10px;
}

.slides-canvas {
    background-size: 300%;
    background-repeat: no-repeat;
    display: block;
    white-space: nowrap;
    font-size: 0; /* remove the gap between inline blocks */
}

.slides-canvas img {
    width: 100%;
    display: inline-block;
    vertical-align: top;
}

.slides-placeholder {
    display: block;
}

.slides-placeholder img {
    width: 100%;
    visibility: hidden;
}

.slides {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  display: block;
}

.slides-dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.slides-active, .slides-dot:hover {
  background-color: #717171;
}

.slides-prev, .slides-next {
  cursor: pointer;
  position: absolute;
  box-sizing: border-box;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.slides-next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.slides-prev:hover, .slides-next:hover {
  background-color: rgba(0,0,0,0.8);
}

.slides-caption {
  background-color: #e0e0e0;
  color: #000000;
  font-size: 1em;
  padding: 4px 4px;
  margin-bottom: 2px;
  position: static;
  box-sizing: border-box;
  width: 100%;
  height: 3.2em;
  text-align: center;
  display: none;
}

.slides-index {
  color: #000000;
  font-size: 1em;
  padding: 8px 12px;
  position: absolute;
  box-sizing: border-box;
  top: 0;
}

/* animation classes */
.slides-fade {
  animation-name: slides-fade;
  animation-duration: 0.8s;
}

.slides-moveleft {
    animation-name: slides-moveleft;
    animation-duration: 0.6s;
}

.slides-moveright {
    animation-name: slides-moveright;
    animation-duration: 0.6s;
}

@keyframes slides-fade {
  from {opacity: 0}
  to {opacity: 1}
}

@keyframes slides-moveleft {
  0% {left: 0}
  100% {left: -100%}
}

@keyframes slides-moveright {
  0% {left: -200%}
  100% {left: -100%}
}
  
/*---------------------------------------------------*/

/*
    background-image: linear-gradient(60deg, #c2ceff, #e8edff);
    margin-top: 10px;
    padding: 10px;
    width: 100%;
    text-align: center;
    display: block;
    box-shadow: 2px 2px #a0acda;
*/

/* responsive index image */
.index-image {
    width: 100%;
    display: block;
}
.index-image.wide {
    display: block;
}
.index-image.narrow {
    display: none;
}
.index-image img {
    vertical-align: middle;
    max-width: 100%;
}


/* use narrow rather than wide image for narrow layouts */
@media only screen and (max-width: 920px) {
    .index-image.wide {
        display: none;
    }
    .index-image.narrow {
        display: block;
    }
}

/* responsive 2-column / 2-row text element; used inside .content-block */
.content-block .left {
    width: 50%;
    height: 100%;
    padding-right: 1em;
    text-align: left;
    display: inline-block;
}

.content-block .right {
    width: 50%;
    height: 100%;
    border-left: 2px inset;
    padding-left: 1em;
    text-align: left;
    display: inline-block;
}

/* transform 2-column element to 2 rows for narrow layouts */
@media only screen and (max-width: 512px) {
    .content-block .left {
        width: 100%;
        padding: 10px;
        display: block;
    }
    .content-block .right {
        border-left: none;
        border-top: 2px inset;
        width: 100%;
        padding: 10px;
        display: block;
    }
}

/* responsive 3-column / 3-row caption element */
.captionblock-3columns {
    width: 33.333%;
    padding-right: 1em;
    margin-top: 1em;
    margin-bottom: 1em;
    display: block;
    float: left;
}

.captionblock-3columns img {
    width: 100%;
    max-width: 320px;
}

/* transform 3-column caption element to 3 rows for narrow layouts */
@media only screen and (max-width: 512px) {
    .captionblock-3columns {
        width: 100%;
        padding-right: 0em;
    }
    .captionblock-3columns img {
        width: 30%;
        float: left;
    }
    .captionblock-3columns div {
        width: 70%;
        padding-left: 1em;
        float: left;
    }
}

/* for mobile phones: move left-side menu to the top */
@media only screen and (max-width: 768px) {
    body {
      font-size: 80%;
    }
    .main {
      width: 100%;
    }
    .logo img {
      min-width: 100px !important;
    }
    .title-left {
      width: 0;
    }
    .title, .title-center {
      font-size: 1.2em;
    }
    .title-left, .title-right {
      font-size: 1.2em;
    }
    .menu-left {
      display: none;
    }
    .menu-top {
      display: block;
    }
    #submenu {
      display: inline;
    }
    .menu-lev1 {
      margin: 0px;
      padding: 0px;
      width: 20%;
      display: inline-block;
    }
    .menu-left-2 {
      display: none;
    }
}

/* responsive table management */
table.col2max {
    display: none;
}
table.col4max {
    display: none;
}
table.colx {
    display: table;
    overflow-x:auto;
}
p.col2max {
    display: none;
}
p.col4max {
    display: none;
}
p.colx {
    display: block;
}

@media only screen and (max-width: 920px) {
    table.col4max {
        display: none;
    }
    table.colx {
        display: none;
    }
    table.col2max {
        display: table;
    }
    p.col4max {
        display: none;
    }
    p.colx {
        display: none;
    }
    p.col2max {
        display: block;
    }
}

@media only screen and (min-width: 920px) and (max-width: 1400px) {
    table.col2max {
        display: none;
    }
    table.colx {
        display: none;
    }
    table.col4max {
        display: table;
    }    
    p.col2max {
        display: none;
    }
    p.colx {
        display: none;
    }
    p.col4max {
        display: block;
    }
}