@charset "UTF-8";
 
/* 
  (c) 2018
  Ruess Consulting & Software
  Steffen Ruess
  Göppingen
*/

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(fonts/materialicons/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(fonts/materialicons/MaterialIcons-Regular.woff2) format('woff2'),
       url(fonts/materialicons/MaterialIcons-Regular.woff) format('woff'),
       url(fonts/materialicons/MaterialIcons-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  src: local('Rubik'),
       local('Rubik-Regular'),
       url(fonts/rubik/Rubik-Regular.woff2) format('woff2'),
       url(fonts/rubik/Rubik-Regular.woff) format('woff'),
       url(fonts/rubik/Rubik-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

.review-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 18px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  color: orange;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}


/********************* GLOBAL ********************************************/

html {
   box-sizing: border-box;
   overflow-y: scroll;
   font-size: 16px; 
}
*{
  margin: 0;
  padding: 0; 
}
*, ::before, ::after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; 
}
.clearfix:after {
    content: "";
    clear: both;
    display: table;
}

body {
  font-family: Rubik, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.625;
  color: #0B418C; 
  background-color: #FFFFFF; 
}


a {
  color:  #0B418C;
  text-decoration: underline;
}
a:hover {
  text-decoration: underline;
}

img {
  border:none;
}

ul, ol {
  list-style-type: square;
  list-style-position: outside;
  padding-left: 1em;
}

h1 { font-size: 40px; font-size: 2.5rem;   }
h2,h3 { color: #D55200; font-size: 20px; font-size: 1.25rem; font-weight: normal;  margin-bottom: 13px;  margin-top: 0; line-height: 26px;}
h3 { font-size: 24px; font-size: 1.5rem;  }
h4 { font-size: 16px; font-size: 1.0rem;  }
h5 { font-size: 14px; font-size: 0.875rem; }
h6 { font-size: 12px; font-size: 0.75rem; }

p {
  
  margin-top: 0;
  margin-bottom: 1.625em;
  line-height: 1.625;
}

select,input {
  font-family: Rubik,Roboto, sans-serif;
  font-size: 16px;
  font-size: 1rem;
  padding: 4px;
}
button {
  font-family: Rubik, Roboto, sans-serif;
  font-size: 16px;
  font-size: 1rem;
}
textarea {
  font-family: Rubik, Roboto, sans-serif;
  font-size: 16px;
  font-size: 1rem;
}



.txtRight {
  text-align: right;
}
.txtCenter {
  text-align: center;
}
.txtLeft {
  text-align: left;
}
.txtBold {
  font-weight: bold;
}
.txtSmall {
  font-size: 0.75rem;
}
.txtMiddle {
  vertical-align: middle;
}
.nowrap {
  white-space: nowrap;
}

::placeholder { 
    color: #83ABE2;
    opacity: 0.75; 
}

.pa0 {
  padding: 0 !important;
}
.ma0 {
  margin: 0 !important;
}
.mb1 {
  margin-bottom: 13px !important;
}
.mb2 {
  margin-bottom: 26px !important;
}
.mb3 {
  margin-bottom: 39px !important;
}
.mb4 {
  margin-bottom: 52px !important;
}
.mt0 {
  margin-top: 6px !important;
}
.mt1 {
  margin-top: 13px !important;
}
.mt2 {
  margin-top: 26px !important;
}
.mt3 {
  margin-top: 39px !important;
}
.mt4 {
  margin-top: 52px !important;
}

/********************* GRID ********************************************/


.wrapper {
  padding: 0 20px 0 20px; 
  max-width: 1300px;
  margin: 0 auto 0 auto; 
  
}
.fwrapper {
  padding: 0; 
  max-width: 1300px;
  margin: 0 auto 0 auto; 
}

.grow {
  margin-left: -10px;
  margin-right: -10px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.grow:after {
    content: "";
    clear: both;
    display: table;
}

.grow-center {
  -ms-flex-align: center !important;
  align-items: center !important;
}


.gc,  .gcauto, .gc1, .gc2, .gc3, .gc4, .gc5, .gc6, .gc7, .gc8, .gc9, .gc10, .gc11,  .gc12,
.gcs, .gcautos, .gc1s, .gc2s, .gc3s, .gc4s, .gc5s, .gc6s, .gc7s, .gc8s, .gc9s, .gc10s, .gc11s,  .gc12s,
.gcm, .gcautom, .gc1m, .gc2m, .gc3m, .gc4m, .gc5m, .gc6m, .gc7m, .gc8m, .gc9m, .gc10m, .gc11m,  .gc12m,
.gcl, .gcautol, .gc1l, .gc2l, .gc3l, .gc4l, .gc5l, .gc6l, .gc7l, .gc8l, .gc9l, .gc10l, .gc11l,  .gc12l,
.gcx, .gcautox, .gc1x, .gc2x, .gc3x, .gc4x, .gc5x, .gc6x, .gc7x, .gc8x, .gc9x, .gc10x, .gc11x,  .gc12x 
{
  position: relative;
  padding-left: 10px;
  padding-right: 10px;
  width: 100%;
  min-height: 1px;
}

.disp-none { display: none!important;}
.disp-block { display: block !important;}
.disp-inline { display: inline !important;}
.disp-inline-block { display: inline-block !important;}
.disp-flex { display: flex !important;}
.disp-inline-flex { display: inline-flex !important;}

.gc { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; }
.gcauto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none; }
.gc1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; }
.gc2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; }
.gc3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
.gc4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; }
.gc5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; }
.gc6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
.gc7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; }
.gc8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; }
.gc9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; }
.gc10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%;  }
.gc11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%;  }
.gc12 {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;  }

@media (min-width: 576px) {

.disp-none-s { display: none !important;}
.disp-block-s { display: block !important;}
.disp-inline-s { display: inline !important;}
.disp-inline-block-s { display: inline-block !important;}
.disp-flex-s { display: flex !important;}
.disp-inline-flex-s { display: inline-flex !important;}

.gcs { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; }
.gcautos { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none; }
.gc1s { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; }
.gc2s { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; }
.gc3s { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
.gc4s { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; }
.gc5s { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; }
.gc6s { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
.gc7s { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; }
.gc8s { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; }
.gc9s { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; }
.gc10s { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%;  }
.gc11s { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%;  }
.gc12s {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;  }
}
@media (min-width: 768px) {

.disp-none-m { display: none !important;}
.disp-block-m { display: block !important;}
.disp-inline-m { display: inline !important;}
.disp-inline-block-m { display: inline-block !important;}
.disp-flex-m { display: flex !important;}
.disp-inline-flex-m { display: inline-flex !important;}

.gcm { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; }
.gcautom { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none; }
.gc1m { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; }
.gc2m { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; }
.gc3m { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
.gc4m { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; }
.gc5m { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; }
.gc6m { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
.gc7m { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; }
.gc8m { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; }
.gc9m { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; }
.gc10m { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%;  }
.gc11m { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%;  }
.gc12m {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;  }
 }
 @media (min-width: 992px) {
 
.disp-none-l { display: none !important;}
.disp-block-l { display: block !important;}
.disp-inline-l { display: inline !important;}
.disp-inline-block-l { display: inline-block !important;}
.disp-flex-l { display: flex !important;}
.disp-inline-flex-l { display: inline-flex !important;}

 
.gcl { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; }
.gcautol { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none; }
.gc1l { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; }
.gc2l { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; }
.gc3l { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
.gc4l { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; }
.gc5l { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; }
.gc6l { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
.gc7l { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; }
.gc8l { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; }
.gc9l { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; }
.gc10l { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%;  }
.gc11l { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%;  }
.gc12l {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;  }
}
@media (min-width: 1200px) {

.disp-none-x { display: none !important;}
.disp-block-x { display: block !important;}
.disp-inline-x { display: inline !important;}
.disp-inline-block-x { display: inline-block !important;}
.disp-flex-x { display: flex !important;}
.disp-inline-flex-x { display: inline-flex !important;}


.gcx { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; }
.gcautox { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none; }
.gc1x { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; }
.gc2x { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; }
.gc3x { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
.gc4x { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; }
.gc5x { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; }
.gc6x { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
.gc7x { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; }
.gc8x { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; }
.gc9x { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; }
.gc10x { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%;  }
.gc11x { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%;  }
.gc12x {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;  }
}

/********************* HEADER ********************************************/

#hd_toprow {
  height: 26px;
  color: #3872C2; 
}
#hd_toprow a {
  color: #3872C2;
  text-decoration: none;
}
#hd_toprow > div {
  height: 100%;
  font-size: 0.875rem; 
  padding-top: 0;
  line-height: 26px;
}
#hd_metanavbar > ul {
  list-style-type: none;
  line-height: 26px;
  padding: 0;
  margin: 0;
}
#hd_metanavbar > ul > li {
  display: inline;
  margin: 0 0 0 16px;
  line-height: 26px;
}
#hd_toprow  i {
  font-size: 1rem;
  margin-right: 4px;
  margin-bottom: 2px;
  vertical-align: middle;
  color: #83ABE2;
}

#hd_mainrow {
  height: 91px;
}

#hd_burger > a > i {
  height: 32px;
  line-height: 32px;
  font-size: 32px;
  vertical-align: middle; 
}

#hd_logo > a {
  display: inline-block;
  width: 100%;
}
#hd_logo > a > img {
  min-width: 180px;
  max-width: 220px; 
  width: 100%;
  display: inline-block;
  vertical-align: middle;
}


@media (min-width: 768px) {

  #hd_logo > a > img {
   min-width: 210px;
   max-width: 290px; 
   width: 100%;
  }
  
}

@media (min-width: 992px) {

  #hd_logo > img {
   max-width: 305px;
   width: 100%; 
  }
}

#hd_search  {
  white-space: nowrap;
  height: 30px;
}
#hd_search >  input {
  vertical-align: middle; 
  width: 90%; 
  padding: 5px; 
  margin: 6px 0 0 0;
  font-size: 1rem; 
  height: 30px; 
  border: 1px solid rgba(131,171,226,0.2); 
  border-radius: 9px;
  color: #3872C2;
}

@media (min-width: 768px) {

  #hd_search >  input {
    width: 70%;
    margin: 0;
  } 
  #hd_search >  i {
    margin: 0 0 0 3px !important; 
  }
}


#hd_search >  i {
  width: 40px;
  line-height: 30px; 
  height: 30px;
  margin: 6px 0 0 3px; 
  padding: 0;
  vertical-align: middle; 
  border: 1px solid rgba(131,171,226,0.5); 
  border-radius: 4px;
  background-color: rgba(131,171,226,0.75); 
  color: white;
  cursor: pointer;
}
#hd_search >  i:hover {
  background-color: rgba(131,171,226,1); 
}
.hd_basket a {
  font-size: 0.875rem;
  color: #3872C2;
  text-decoration: none;
}
.hd_basket {
  overflow: hidden;
}
.hd_basket > div {
  display: inline-block;
  margin: 0 0 0 12px;
}

.hd_basket > div > a {
  line-height: 32px; 
}
.hd_basket > div > a > i {
  font-size: 32px;
  margin: 0 -3px 0 0; 
  padding: 0;
  vertical-align: middle; 
  color: #3872C2;
}

/********************* AUTORESULTS ********************************************/


#autoresults {
      display:none;
      position: relative;
      left: 0;
      top: 0;
      width: 100%;
      margin: 0 auto 0 auto;
      text-align: left;
      font-size: 0.8em; 
      padding: 5px; 
      border: 1px solid #EEEEEE;
      border-radius: 9px;
      z-index:10;
      background-color: #FAFAFA;;
      max-height:300px;
      overflow-y:auto;
      overflow-x:hidden;
}
#autoresults > ul {
 list-style-type: none;

}
#autoresults > ul > li {
  margin: 3px;
  padding: 3px;

}

.autolink {
  text-decoration:none;
  color: rgb(90,60,40);
}
.autocategory {
  font-weight:bold;
  text-transform: uppercase;   
}
.autoartnr {
  color: rgb(90,60,40);
}
.autoprice {
  color: rgb(90,60,40);
  font-weight: 600;
}
.autoitem.autonav .autoartnr { color: rgb(255,40,40); } 


/********************* MAIN NAVBAR ********************************************/
/* see navbar.css */



/********************* CONTENT ********************************************/
#ct_breadcrumb {
  font-size: 0.8rem; 
  color: #3872C2;
  line-height: 26px;
}
#ct_breadcrumb a {
  text-decoration: none; 
}
#ct_breadcrumb > span {
  margin: 0 5px 0 5px; 
}


#ct_row {
  min-height: 800px;
}

#ct_left {
  min-height: 800px;
}
#ct_main {
  min-height: 800px;
}

/********************* START ********************************************/

.head_pic {
  width: 100%; 
  height: auto;
  max-width: 1300px; 
  max-height: 500px; 
  display: block;
}
.head_pic_teaser {
  position: absolute; 
  left: 0%; 
  top: 66.6%; 
  width: 100%; 
  height: 33.4%;
  background-color: rgb(255,255,255,0.4);
}  

.info_box {
  border: 1px dashed #E4E4F0; 
  padding: 10px; 
  width: 100%;
  height: 100%; 
}
.info_box_img {
    width: 100%;
    height: auto; 
    max-width: 400px;
}


.info_trailer {
  padding: 10px; 
  width: 100%;
  height: 100%;
  background-color: rgba(220,220,220,0.3); 
  font-size: 1.25rem;
}


/********************* PRODUCT ********************************************/
.prod_item {
  margin-bottom: 20px;
  border: 1px dashed #E4E4F0;
  min-height: 240px;
  text-align: center;
}
.prod_item_img > a > img {
  width: 90%;
}
.prod_item_img_smaller > a > img {
  width: 66%;
}
.prod_item_title {
  font-size: 0.75rem;
}
.prod_item_title > a {
  text-decoration: none;
}
.prod_item_price  {
  color: green;
  font-weight: bold;
  display: inline-block;
}
.prod_item_baseprice  {
  color: #999999;
  font-size: 0.75em;
  display: inline-block;
}

.prod_section_bgnd {
  background-color: rgba(220,220,220,0.3); 
  font-weight:bold; 
}

.pager {
  margin: 0 1% 0 0;
  width: 100%;
  font-size: 0.9em;
  font-weight: 500;
  color: #999999;
}
.pager_arrow {
  margin: 5px;
}
.pager_arrow> a {
  text-decoration: none;
  color: #AAAAAA;
}

/********************* REVIEW ********************************************/
.review_item {
  margin-bottom: 20px;
  bborder: 1px dashed #E4E4F0;
  border-radius: 6px;
  padding: 5px 10px 10px 10px;
  min-height: 120px;
  text-align: left;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.22);
  overflow: hidden; 
  
}
.review_item_title {
  font-size: 1rem;
  color: #444444;
  font-weight: bold;
}
.review_item_icons {
  display: inline-block;
}
.review_item_author {
  font-size: 0.75rem;
  display: inline-block;
  color: #333333;
  float: right;
}
.review_item_date {
  margin-top: 10px;
  font-size: 0.75rem;
  color: #333333;
}
.review_item_description {
  font-size: 0.9rem;
  color: #333333;
}
.review_item_response {
  font-size: 0.9rem;
  color: #666666;
  font-style: italic;
}
.review_item_response:not(:empty):before {
  font-size: 0.9rem;
  font-weight: bold;
  color: #666666;
  font-style: italic;
  content: 'Antwort: ';
}

.review_add_item {
  margin-bottom: 20px;
  border-radius: 6px;
  padding: 10px;
  min-height: 60px;
  text-align: left;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.22);
  overflow: hidden; 
}
#review_new {
  display: none;
  padding: 0 20px 20px 20px;
   
}

/********************* PRODUCT PAGE ************************************/

#product_right { background-color: rgba(220,220,220,0.3); }
#product_desc_head { background-color: rgba(220,220,220,0.3); line-height: 32px; } 

#product_manufacturer  { font-size:0.8em; color: #999999;}
#product_rating {font-size:0.8em;}
#product_title  { font-size:1.2em; margin-bottom: 10px; max-width: 500px;}
#product_info  {  font-size:0.8em; margin-bottom: 10px; max-width: 500px;}
#product_price  { font-size:1.5em; color:#009900;}
#product_baseprice  { font-size:0.75em; color:#999999;}
#product_price_hint  { font-size:0.75em; color:#999999;}
#product_number_hint { font-size: 0.9em; margin: 5px 0 0 0; display: inline-block; }
#product_number { font-size: 0.9em; margin: 5px 0 0 5px; display:inline-block;}
#product_variant { font-size: 0.9em; margin-top: 5px;}
#product_avail { font-size: 0.9em; margin-top: 5px;}
#product_quantity {font-size: 0.9em; margin: 10px 0 10px 5px; width:5em; display:inline-block; padding: 3px;}
#product_quantity_hint { font-size: 0.9em; margin-top: 10px; display: inline-block; } 
#product_wkbutton { cursor:pointer; max-width: 270px; width:90%; margin: 8px; padding: 8px; border-radius: 8px; border: none; color:#FFFFFF; background-color: #62C55F; font-size: 1em;}
#product_wkbutton_message {font-size: 0.9em; margin: 5px 0 0 10px; font-weight:bold; color: #669966;}
#product_wkbutton_hint    {font-size: 0.8em; margin: 5px 0 0 10px; font-weight:normal; display: none; }
#product_wkbutton_hint > a { color: rgba(100, 130, 100, 1); }
#product_wk_count, #product_wk_count2 { 
  display: none;
  text-align: center;
  position: absolute; 
  padding: 0; 
  margin: 0 0 0 -12px;
  color: rgba(255,255,255,1);  
  background-color: rgba(255,0,0,0.85); 
  width:18px; 
  height:18px; 
  border-radius:9px; 
  font-size: 0.7rem;
  font-weight: bold;
}

/********************* Video ********************************************/

.yt_box{
  position: relative;
  max-width: 560px; /* wie breit soll das Video maximal sein */
  margin: auto;
}
.yt_box:before{
  content: "";
  display: block;
  padding-top: 56%; /* 16:9 Format */
}
.yt_box iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;;
  left: 0;
  right: 0;
  bottom: 0;
}


/********************* CATEGORY ********************************************/
.cat_item {
  margin-bottom: 20px;
  border: 1px dashed #E4E4F0;
  min-height: 130px;
  text-align: center;
}
.cat_item_img > a > img {
  width: 90%;
  max-width: 100px;
}
.cat_item_title {
  font-size: 0.75rem;
  font-weight: bold;
}
.cat_item_title > a {
  text-decoration: none;
}
.cat_item_price  {
  color: green;
  font-weight: bold;
}


/********************* FILTER     ********************************************/

.filter_head {
  white-space: nowrap;
  overflow: hidden;
}
.filter_title {
  display: inline-block;
  margin: 0 0 8px 4px;
  font-size: 0.875em;
}
.filter_title > a {
  color: #666666;
  text-decoration: none;
  font-weight: 600 !important;
}
.filter_arrow {
  display:inline-block;
  color: #444444;
  font-size: 0.875em;
  font-weight: 600;
  margin-left:3px;
  cursor: pointer;
  transform: matrix(0,1,-1,0,0,0);
}
.filter_arrow_closed {
 transform: none;
}

.filter_div {
  display: block;
  width: 100%;
  padding: 4px;
  margin-bottom: 14px;
  color:  #666666;
}

.filter_price_inp {
  font-size: 0.8em;
  margin: 0 0 0 10px;
  display: inline-block;
  width: 50px;
  border: 1px solid #CCCCCC;
  color:#666666;
}
.filter_price {

}
.filter_price > ul {
  list-style-position:inside;
  list-style:none;
  font-size: 0.875rem;
  margin-bottom:8px;  
}
.filter_price > ul > li {
  display:inline-block;
  padding: 0 5px 0 5px;
  border-left: 1px solid #CCCCCC;
  
}
.filter_price > ul > li:first-child {
  display:inline-block;
  padding: 0 3px 0 0;
  border-left: none;
}

.price_bt {
  margin: 0;
  cursor: pointer;
  background-color: transparent;
  border: none;
  color: #666666;
  font-size: 0.8rem;  
}

.filter_supplier {

  max-height: 230px;
  overflow-y: auto;

}
.filter_supplier > ul {
  list-style-position:inside;
  list-style:none;
  font-size: 0.875em;
  line-height: 1.45em;
}
.filter_checkbox {
  cursor: pointer;
}
.filter_checkbox_all {
  cursor: pointer;
}
.filter_ck_label {
  margin-left: 5px;
  cursor: pointer;

}

#filter_btn {
  display: none;
  margin: 10px 0 0 10px;
  height: 15px;  
}
.filter_open {
  display: block;
}
.filter_close {
  display: none;
}

#subnavi {

}

#subnavi > ul {
  list-style-type: none;
  margin-top: 0px;
  font-size: 0.875em;
  line-height: 1.45em;
}
#subnavi > ul >li {

}
#subnavi > ul > li > a {
  text-decoration: none;
  color: #666666;
}
.subnavi_sel > a {
  color: #3872C2 !important;
  font-weight: bold;
}

/********************** AUTORESULTS *********************************************/


/********************* CHECKOUT     ********************************************/

.checkout-error {color: #FF6666; font-weight: bold;}


/* Forms */
.frm_frm { font-size: 16px; font-size: 1rem;}
.frm_div { margin: 4px 0 4px 0; }
.frm_lbl { margin: 4px 0 4px 0; display: inline-block; width: 9rem;}
.frm_inp { margin: 4px 0 4px 0; display: inline-block; width: 15rem; border: 1px solid #CCCCCC; color: #666666; background-color: #F0F0F0;}
.frm_inp::placeholder { color: #999999; opacity: 0.75; }
.frm_inp[disabled] { background-color: #DDDDDD; color: #999999}


.frm_txa {margin: 4px 0 4px 0; display: inline-block; width: 90%; height: 8rem; border:1px solid #CCCCCC; color: #666666;}
.frm_btn  { margin: 4px 0 4px 0; display: inline-block; min-width: 9rem; padding: 5px 10px 5px 10px; cursor: pointer; background-color: #62C55F; color: #FFFFFF; border: none; font-weight: normal; border-radius:0.5rem;}
.frm_alt_btn { margin: 4px 0 4px 0; display: inline-block; min-width: 9rem; padding: 5px 10px 5px 10px; cursor: pointer; background-color: #3872C2; color: #FFFFFF; border: none; font-weight: normal; border-radius:0.5rem;}
.frm_ico_btn { margin: 0 0 0 3px; border: none; background-color:#FFFFFF; color: #666666;cursor: pointer; }
.frm_lnk:link {color: #62C55F; font-size:0.75rem; font-weight:bold; text-decoration:underline;}
.frm_lnk:visited {color:#62C55F; font-size:0.75rem; font-weight:bold; text-decoration:underline;}
.frm_lnk:hover {color: #359832; font-size:0.75rem; font-weight:bold; text-decoration:underline;}
 

.frm_sel { margin: 4px 0 4px 0; display: inline-block; border: 1px solid #CCCCCC; background-color: #F0F0F0; color: #666666;}
.frm_ckb { margin: 4px 0 4px 0; display: inline-block; cursor: pointer; border: 1px solid #CCCCCC;}
.frm_ckb_lbl { margin: 4px 0 4px 8px; display: inline; cursor: pointer;}
.frm_rad { margin: 4px 0 4px 0; display: inline-block; cursor: pointer; border: 1px solid #CCCCCC;}
.frm_rad_lbl { margin: 4px 0 4px 8px; display: inline; cursor: pointer;}
.frm_txt_terms  { margin: 4px 0 4px 0; padding: 4px; border:1px solid #CCCCCC; width:100%; font-size: 0.8em; height: 20em; background-color:#F0F0F0; color: #666666;}
.frm_opt { }
.frm_bold { font-weight: bold;}
.frm_txt {margin: 4px 0 4px 0; display: inline-block;}
.frm_divline { border-top: 1px solid #CCCCCC; margin: 5px 0 5px 0;}


.smalllnk:link {color:#4554AD; font-size:8pt; font-weight:bold; text-decoration:underline;}
.smalllnk:visited {color:#4554AD; font-size:8pt; font-weight:bold;  text-decoration:underline;}
.smalllnk:hover {color:#9999CC; font-size: 8pt; font-weight:bold;  text-decoration:underline;}


/********************* FOOTER ********************************************/
#footer { 
 width: 100%; 
 min-height: 221px; 
 background-color: #073472;
 color: #83ABE2; 
 font-size: 0.875rem;
 line-height: 1.36; 
 padding: 26px 30px 26px 30px;
}

#footer a {
  color: #83ABE2;
}
#footer a:hover {
  color: #FFFFFF !important;
} 

#ft_copyright {
  margin-top: 39px;
}

/* Web Hint */

#webhint{display:none}.cc_banner-wrapper{z-index:9001;position:relative}.cc_container .cc_btn{cursor:pointer;text-align:center;font-size:0.6em;transition:font-size 200ms;line-height:1em}.cc_container .cc_message{font-size:0.6em;transition:font-size 200ms;margin:0;padding:0;line-height:1.5em}.cc_container .cc_logo{display:none;text-indent:-1000px;overflow:hidden;width:100px;height:22px;background-size:cover;background-image:none);opacity:0.9;transition:opacity 200ms}.cc_container .cc_logo:hover,.cc_container .cc_logo:active{opacity:1}@media screen and (min-width: 500px){.cc_container .cc_btn{font-size:0.8em}.cc_container .cc_message{font-size:0.8em}}@media screen and (min-width: 768px){.cc_container .cc_btn{font-size:1em}.cc_container .cc_message{font-size:1em;line-height:1em}}@media screen and (min-width: 992px){.cc_container .cc_message{font-size:1em}}@media print{.cc_banner-wrapper,.cc_container{display:none}}.cc_banner-wrapper{height:66px}.cc_container{padding:15px 15px 15px;overflow:hidden;position:fixed;top:0;left:0;right:0}.cc_container .cc_btn{padding:8px 10px;background-color:#f1d600;cursor:pointer;text-align:center;display:block;width:33%;margin-left:10px;float:right;max-width:120px}.cc_container .cc_message{display:block}@media screen and (min-width: 500px){.cc_container .cc_message{margin-top:0.5em;color:white}}@media screen and (min-width: 768px){#webhint{display:block}.cc_container{padding:15px 30px 15px}.cc_container .cc_btn{padding:8px 15px}}.cc_container{background:#222;color:#fff;font-size:17px;font-family:"Helvetica Neue Light","HelveticaNeue-Light","Helvetica Neue",Calibri,Helvetica,Arial;box-sizing:border-box}.cc_container ::-moz-selection{background:#ff5e99;color:#fff;text-shadow:none}.cc_container .cc_btn,.cc_container .cc_btn:visited{color:#000;background-color:#f1d600;transition:background 200ms ease-in-out,color 200ms ease-in-out,box-shadow 200ms ease-in-out;-webkit-transition:background 200ms ease-in-out,color 200ms ease-in-out,box-shadow 200ms ease-in-out;border-radius:5px;-webkit-border-radius:5px}.cc_container .cc_btn:hover,.cc_container .cc_btn:active{background-color:#fff;color:#000}.cc_container a,.cc_container a:visited{text-decoration:none;color:#31a8f0;transition:200ms color}.cc_container a:hover,.cc_container a:active{color:#b2f7ff}@-webkit-keyframes slideDown{0%{margin-top:-66px}100%{margin-top:0}}@keyframes slideDown{0%{margin-top:-66px}100%{margin-top:0px}}@-webkit-keyframes growDown{0%{height:0}100%{height:66px}}@keyframes growDown{0%{height:0}100%{height:66px}}.cc_container{-webkit-animation-duration:0.8s;-moz-animation-duration:0.8s;-o-animation-duration:0.8s;animation-duration:0.8s;-webkit-animation-name:slideDown;animation-name:slideDown}.cc_banner-wrapper{-webkit-animation-duration:0.8s;-moz-animation-duration:0.8s;-o-animation-duration:0.8s;animation-duration:0.8s;-webkit-animation-name:growDown;animation-name:growDown}


.cc_btn {
  background-color: #3872C2 !important; /* Farbe des Buttons */
  color: white !important; /* Textfarbe des Buttons */
}

.cc_container {
  background-color: #073472 !important; /* Hintergrundfarbe des gesamten Bereichs */
  color: white !important; /* Schriftfarbe des gesamten Bereichs */
}
 
.cc_container a {
 color: #E0E0FF !important; /* Textlink-Farbe "Mehr Infos" */

}