/*
++ GIT: 6_microsite_html5/project/_variables.scss
++ 2024-11-01 09:26 [6152a25] HAT\ryzndo1 - Remove hella fonts from MS-HTML5
++ 2022-01-24 07:49 [8f6a91c] Zdenek Klug - Update CSS for Microsites HTML - redesign
++ 2018-03-22 08:55 [553f4c3] Stepan Hlavaty - Pack for Masonry design Microsites HTML5 + video head module for Audi Microsite if it will be realized.
++ 2017-07-31 13:55 [70b4c68] Jan Klimes - Initial commit for responsive microsites
*/
/*
**
**============================================= NEW FILE =======================================================
**
++ GIT: 6_microsite_html5/project/_fonts.scss
++ 2024-11-01 09:26 [6152a25] HAT\ryzndo1 - Remove hella fonts from MS-HTML5
++ 2017-07-31 13:55 [70b4c68] Jan Klimes - Initial commit for responsive microsites
*/
/*
++ GIT: 6_microsite_html5/project/_variables.scss
++ 2024-11-01 09:26 [6152a25] HAT\ryzndo1 - Remove hella fonts from MS-HTML5
++ 2022-01-24 07:49 [8f6a91c] Zdenek Klug - Update CSS for Microsites HTML - redesign
++ 2018-03-22 08:55 [553f4c3] Stepan Hlavaty - Pack for Masonry design Microsites HTML5 + video head module for Audi Microsite if it will be realized.
++ 2017-07-31 13:55 [70b4c68] Jan Klimes - Initial commit for responsive microsites
*/
/*
**
**============================================= NEW FILE =======================================================
**
++ GIT: 6_microsite_html5/project/_mixins.scss
++ 2018-03-22 08:55 [553f4c3] Stepan Hlavaty - Pack for Masonry design Microsites HTML5 + video head module for Audi Microsite if it will be realized.
++ 2017-07-31 13:55 [70b4c68] Jan Klimes - Initial commit for responsive microsites
*/
/*
**
**============================================= NEW FILE =======================================================
**
++ GIT: 6_microsite_html5/project/styles.bootstrap.scss
++ 2018-01-03 09:31 [ebe30e8] Jan Klimes - Fixed a parameter call for a gutter mixin in custom bootstrap styles for microsite_html5
++ 2017-07-31 13:55 [70b4c68] Jan Klimes - Initial commit for responsive microsites
*/
/*
++ GIT: 6_microsite_html5/project/_variables.scss
++ 2024-11-01 09:26 [6152a25] HAT\ryzndo1 - Remove hella fonts from MS-HTML5
++ 2022-01-24 07:49 [8f6a91c] Zdenek Klug - Update CSS for Microsites HTML - redesign
++ 2018-03-22 08:55 [553f4c3] Stepan Hlavaty - Pack for Masonry design Microsites HTML5 + video head module for Audi Microsite if it will be realized.
++ 2017-07-31 13:55 [70b4c68] Jan Klimes - Initial commit for responsive microsites
*/
/*
++ GIT: 6_microsite_html5/project/_mixins.scss
++ 2018-03-22 08:55 [553f4c3] Stepan Hlavaty - Pack for Masonry design Microsites HTML5 + video head module for Audi Microsite if it will be realized.
++ 2017-07-31 13:55 [70b4c68] Jan Klimes - Initial commit for responsive microsites
*/
@media (max-width: 480px) {
  .container-fluid .row {
    padding-left: 5px;
    padding-right: 5px; } }

@media (min-width: 481px) and (max-width: 768px) {
  .container-fluid .row {
    padding-left: 10px;
    padding-right: 10px; } }

@media (min-width: 769px) {
  .container-fluid .row {
    padding-left: 15px;
    padding-right: 15px; } }

.container-fluid .row .row {
  padding-left: 0;
  padding-right: 0; }
  @media (max-width: 480px) {
    .container-fluid .row .row {
      margin-left: -5px;
      margin-right: -5px; } }
  @media (min-width: 481px) and (max-width: 768px) {
    .container-fluid .row .row {
      margin-left: -10px;
      margin-right: -10px; } }
  @media (min-width: 769px) {
    .container-fluid .row .row {
      margin-left: -15px;
      margin-right: -15px; } }

@media (max-width: 480px) {
  .container-fluid .row > *[class^='col-'],
  .container-fluid .row > *[class*=' col-'] {
    padding-left: 5px;
    padding-right: 5px; } }

@media (min-width: 481px) and (max-width: 768px) {
  .container-fluid .row > *[class^='col-'],
  .container-fluid .row > *[class*=' col-'] {
    padding-left: 10px;
    padding-right: 10px; } }

@media (min-width: 769px) {
  .container-fluid .row > *[class^='col-'],
  .container-fluid .row > *[class*=' col-'] {
    padding-left: 15px;
    padding-right: 15px; } }

@media (min-width: 769px) {
  .container-fluid .row > .col-md-ext-33 {
    float: left;
    position: relative;
    min-height: 1px;
    width: 33.3%; } }

@media (min-width: 481px) and (max-width: 768px) {
  .container-fluid .row > .col-sm-ext-33 {
    float: left;
    position: relative;
    min-height: 1px;
    width: 33.3%; } }

@media (max-width: 480px) {
  .container-fluid .row > .col-xs-ext-33 {
    float: left;
    position: relative;
    min-height: 1px;
    width: 33.3%; } }

.container-fluid .img-responsive-unlim {
  width: 100%; }

/*
**
**============================================= NEW FILE =======================================================
**
++ GIT: 6_microsite_html5/project/styles.common.scss
++ 2024-11-01 09:26 [6152a25] HAT\ryzndo1 - Remove hella fonts from MS-HTML5
++ 2022-01-24 07:49 [8f6a91c] Zdenek Klug - Update CSS for Microsites HTML - redesign
++ 2017-09-07 13:30 [d7fddbc] Jan Klimes - Removed !important qualifiers from couple of styles for toolbox modules for microsite_html5
++ 2017-08-18 09:28 [545e70b] Jan Klimes - Updated language menu and shared styles for microsite_html5
++ 2017-07-31 13:55 [70b4c68] Jan Klimes - Initial commit for responsive microsites
*/
/*
++ GIT: 6_microsite_html5/project/_variables.scss
++ 2024-11-01 09:26 [6152a25] HAT\ryzndo1 - Remove hella fonts from MS-HTML5
++ 2022-01-24 07:49 [8f6a91c] Zdenek Klug - Update CSS for Microsites HTML - redesign
++ 2018-03-22 08:55 [553f4c3] Stepan Hlavaty - Pack for Masonry design Microsites HTML5 + video head module for Audi Microsite if it will be realized.
++ 2017-07-31 13:55 [70b4c68] Jan Klimes - Initial commit for responsive microsites
*/
/*
++ GIT: 6_microsite_html5/project/_mixins.scss
++ 2018-03-22 08:55 [553f4c3] Stepan Hlavaty - Pack for Masonry design Microsites HTML5 + video head module for Audi Microsite if it will be realized.
++ 2017-07-31 13:55 [70b4c68] Jan Klimes - Initial commit for responsive microsites
*/
.topic {
  font-size: 0.867em;
  font-family: Trebuchet MS, Arial, Helvetica;
  border-bottom: 1px solid #7C7B6D;
  color: #7C7B6D;
  margin-bottom: 1.154em;
  padding-bottom: 0.385em;
  clear: both;
  font-weight: bold; }

#left-side-modules h1, #left-side-modules h2 {
  font-family: Arial, Helvetica;
  padding-bottom: 0.4em;
  font-size: 1.539em;
  line-height: 1.1em;
  color: #000; }

.toolbox {
  font-size: 0.867em;
  font-weight: normal;
  color: #7C7B6D;
  /*line-height: 1.231em;*/
  margin-bottom: 1.231em;
  /*0.65em;*/
  height: auto; }
  .toolbox .headlineToolbox {
    display: block;
    font-weight: 700;
    color: #000; }
  .toolbox .topic {
    font-size: 1em;
    line-height: 1.2em;
    font-family: Trebuchet MS, Arial, Helvetica;
    font-weight: bold;
    border-bottom: 1px #7C7B6D solid;
    color: #7C7B6D;
    margin-bottom: 1.154em;
    padding-bottom: 0.385em;
    clear: both;
    width: 100%; }
  .toolbox.downloadboxTypA .textToolbox {
    width: 13.077em;
    float: left; }
  .toolbox.downloadboxTypA .imageToolbox {
    width: 12.308em;
    float: right;
    margin: 0 0 0.2em 0; }
  .toolbox.downloadboxTypB .imageToolbox {
    float: left;
    width: 100%; }
  .toolbox.downloadboxTypB .first, .toolbox .toolbox.downloadboxTypB .second {
    padding: 0 0.538em 0 0;
    width: 6.308em; }
  .toolbox.downloadTypboxB .third {
    padding: 0;
    width: 6.308em; }
  .toolbox.downloadTypboxB .last {
    padding: 0;
    width: 6.308em; }
  .toolbox a.download {
    display: block;
    margin-top: 0em; }
  .toolbox .imageModule, .toolbox .imageModuleContent, .toolbox .listModule {
    background: white url("images/bild_person.jpg") top left no-repeat;
    margin: 0 0 2.385em;
    width: 100%; }
  .toolbox .listModule {
    background: #fff; }
  .toolbox .headlineToolbox, .toolbox .topic {
    font-weight: bold; }
  .toolbox .headlineToolbox {
    text-transform: uppercase; }
  .toolbox p .headlineToolbox {
    margin-top: 1.15em; }
  .toolbox .videoText {
    width: 12em;
    margin-right: 2.054em;
    float: left; }
  .toolbox #videoPlayerLarge {
    float: left;
    width: 26.769em;
    height: 18.154em; }
  .toolbox .textDetails p {
    margin-bottom: 0.769em; }
  .toolbox .listModule h3, .toolbox .listModule p, .toolbox .scrollListModule p {
    font-size: 1em; }
  .toolbox .playVideoArrow, .toolbox .teasers .playVideoArrow {
    display: none;
    left: 5em;
    position: absolute;
    top: 2em; }
  .toolbox .slidingReport .playVideoArrow {
    display: none;
    left: 5.2em;
    position: absolute;
    top: 2.2em; }
  .toolbox .image.modVideo {
    position: relative; }

.slidingReport {
  position: relative; }

.text {
  font-weight: normal;
  color: #7C7B6D;
  margin-bottom: 1.867em; }
  #middle .text {
    font-size: 13px; }
  .text p {
    margin-bottom: 1.154em; }
  .text .headline, .text h1 {
    color: #000;
    display: block;
    font-size: 20px;
    margin-bottom: 1em;
    text-transform: uppercase;
    vertical-align: top;
    margin-top: 9px; }

#print {
  display: none !important; }

/*
**
**============================================= NEW FILE =======================================================
**
++ GIT: 6_microsite_html5/project/styles.footer.scss
++ 2023-07-17 07:34 [5c73218] Vojtech Schwarz - Update flag for MS_HTML5
++ 2023-07-14 13:18 [fa7adc5] Vojtech Schwarz - Update flag for SL for MS_HTML5
++ 2023-07-14 12:55 [9c1ed62] Vojtech Schwarz - Update flaks for MS_HTML5
++ 2022-01-24 07:49 [8f6a91c] Zdenek Klug - Update CSS for Microsites HTML - redesign
++ 2021-12-09 13:08 [7a0b40d] Dominik R?znar - Update CSS of footer for MS HTML5
++ 2021-11-23 13:11 [41a34f3] Dominik R?znar - Update CSS of footer for MS HTML5
++ 2019-09-24 10:32 [ae942e5] Vojtech Schwarz - Update flag for MS-HTML5
++ 2019-06-05 11:29 [9503271] Vojtech Schwarz - Add footerPring image for MS html5
++ 2019-05-10 10:22 [f44f7e7] Stanislav ?incl - Update Footer SCSS - en-gb flag added
++ 2018-03-14 12:43 [4d7e266] Vojtech Schwarz - Merge branch 'master' of dc2git01v.dc.hella.com:WebResources
++ 2018-03-14 12:42 [71a1cfb] Vojtech Schwarz - Update footer for MS HTML5
++ 2018-02-21 10:08 [1963706] Vojtech Schwarz - Upate flag for MS HTML5
++ 2018-02-19 09:57 [a83ca16] Vojtech Schwarz - Update styte for MS HTML5
++ 2018-02-07 11:05 [ab1af06] Vojtech Schwarz - Update footer for MS HTML5
++ 2017-07-31 13:55 [70b4c68] Jan Klimes - Initial commit for responsive microsites
*/
/*
++ GIT: 6_microsite_html5/project/_variables.scss
++ 2024-11-01 09:26 [6152a25] HAT\ryzndo1 - Remove hella fonts from MS-HTML5
++ 2022-01-24 07:49 [8f6a91c] Zdenek Klug - Update CSS for Microsites HTML - redesign
++ 2018-03-22 08:55 [553f4c3] Stepan Hlavaty - Pack for Masonry design Microsites HTML5 + video head module for Audi Microsite if it will be realized.
++ 2017-07-31 13:55 [70b4c68] Jan Klimes - Initial commit for responsive microsites
*/
/*
++ GIT: 6_microsite_html5/project/_mixins.scss
++ 2018-03-22 08:55 [553f4c3] Stepan Hlavaty - Pack for Masonry design Microsites HTML5 + video head module for Audi Microsite if it will be realized.
++ 2017-07-31 13:55 [70b4c68] Jan Klimes - Initial commit for responsive microsites
*/
/*
++ GIT: 6_microsite_html5/project/styles.bootstrap.scss
++ 2018-01-03 09:31 [ebe30e8] Jan Klimes - Fixed a parameter call for a gutter mixin in custom bootstrap styles for microsite_html5
++ 2017-07-31 13:55 [70b4c68] Jan Klimes - Initial commit for responsive microsites
*/
/*
++ GIT: 6_microsite_html5/project/_variables.scss
++ 2024-11-01 09:26 [6152a25] HAT\ryzndo1 - Remove hella fonts from MS-HTML5
++ 2022-01-24 07:49 [8f6a91c] Zdenek Klug - Update CSS for Microsites HTML - redesign
++ 2018-03-22 08:55 [553f4c3] Stepan Hlavaty - Pack for Masonry design Microsites HTML5 + video head module for Audi Microsite if it will be realized.
++ 2017-07-31 13:55 [70b4c68] Jan Klimes - Initial commit for responsive microsites
*/
/*
++ GIT: 6_microsite_html5/project/_mixins.scss
++ 2018-03-22 08:55 [553f4c3] Stepan Hlavaty - Pack for Masonry design Microsites HTML5 + video head module for Audi Microsite if it will be realized.
++ 2017-07-31 13:55 [70b4c68] Jan Klimes - Initial commit for responsive microsites
*/
@media (max-width: 480px) {
  .container-fluid .row {
    padding-left: 5px;
    padding-right: 5px; } }

@media (min-width: 481px) and (max-width: 768px) {
  .container-fluid .row {
    padding-left: 10px;
    padding-right: 10px; } }

@media (min-width: 769px) {
  .container-fluid .row {
    padding-left: 15px;
    padding-right: 15px; } }

.container-fluid .row .row {
  padding-left: 0;
  padding-right: 0; }
  @media (max-width: 480px) {
    .container-fluid .row .row {
      margin-left: -5px;
      margin-right: -5px; } }
  @media (min-width: 481px) and (max-width: 768px) {
    .container-fluid .row .row {
      margin-left: -10px;
      margin-right: -10px; } }
  @media (min-width: 769px) {
    .container-fluid .row .row {
      margin-left: -15px;
      margin-right: -15px; } }

@media (max-width: 480px) {
  .container-fluid .row > *[class^='col-'],
  .container-fluid .row > *[class*=' col-'] {
    padding-left: 5px;
    padding-right: 5px; } }

@media (min-width: 481px) and (max-width: 768px) {
  .container-fluid .row > *[class^='col-'],
  .container-fluid .row > *[class*=' col-'] {
    padding-left: 10px;
    padding-right: 10px; } }

@media (min-width: 769px) {
  .container-fluid .row > *[class^='col-'],
  .container-fluid .row > *[class*=' col-'] {
    padding-left: 15px;
    padding-right: 15px; } }

@media (min-width: 769px) {
  .container-fluid .row > .col-md-ext-33 {
    float: left;
    position: relative;
    min-height: 1px;
    width: 33.3%; } }

@media (min-width: 481px) and (max-width: 768px) {
  .container-fluid .row > .col-sm-ext-33 {
    float: left;
    position: relative;
    min-height: 1px;
    width: 33.3%; } }

@media (max-width: 480px) {
  .container-fluid .row > .col-xs-ext-33 {
    float: left;
    position: relative;
    min-height: 1px;
    width: 33.3%; } }

.container-fluid .img-responsive-unlim {
  width: 100%; }

footer {
  background-color: #bdc9cf; }
  footer:before {
    content: '';
    background: url(images/color_separator.svg) no-repeat center;
    display: block;
    width: 100%;
    height: 4px;
    z-index: 9; }
  footer .socialMedias {
    background-color: #bdc9cf;
    height: 4em; }
    footer .socialMedias .wrapper {
      max-width: 66.4em;
      margin: 0 auto; }
      footer .socialMedias .wrapper .col-xs-20 {
        padding-left: 10px;
        padding-right: 10px; }
      footer .socialMedias .wrapper ul {
        list-style-type: none;
        float: right;
        padding-top: 0.667em; }
        footer .socialMedias .wrapper ul #footerPrint {
          margin-top: 0em;
          margin-left: 0.133em;
          display: inline-block; }
          footer .socialMedias .wrapper ul #footerPrint a {
            width: 2.667em;
            height: 2.667em;
            display: inline-block;
            -moz-transition: background-image 0.3s ease;
            -o-transition: background-image 0.3s ease;
            -webkit-transition: background-image 0.3s ease;
            transition: background-image 0.3s ease;
            background-image: url("images/drucker_grey.png"); }
            footer .socialMedias .wrapper ul #footerPrint a:hover {
              background-image: url("images/drucker_messing.png"); }
        footer .socialMedias .wrapper ul .media {
          margin-top: 0em;
          margin-left: 0.133em;
          display: inline-block; }
          footer .socialMedias .wrapper ul .media a {
            width: 2.667em;
            height: 2.667em;
            display: inline-block;
            -moz-transition: background-image 0.3s ease;
            -o-transition: background-image 0.3s ease;
            -webkit-transition: background-image 0.3s ease;
            transition: background-image 0.3s ease; }
            footer .socialMedias .wrapper ul .media a.facebook {
              background-image: url("images/facebook.png"); }
              footer .socialMedias .wrapper ul .media a.facebook:hover {
                background-image: url("images/facebook_hover.png"); }
            footer .socialMedias .wrapper ul .media a.youtube {
              background-image: url("images/youtube.png"); }
              footer .socialMedias .wrapper ul .media a.youtube:hover {
                background-image: url("images/youtube_hover.png"); }
            footer .socialMedias .wrapper ul .media a.googlePlus {
              background-image: url("images/googlePlus.png"); }
              footer .socialMedias .wrapper ul .media a.googlePlus:hover {
                background-image: url("images/googlePlus_hover.png"); }
            footer .socialMedias .wrapper ul .media a.twitter {
              background-image: url("images/twitter.png"); }
              footer .socialMedias .wrapper ul .media a.twitter:hover {
                background-image: url("images/twitter_hover.png"); }
            footer .socialMedias .wrapper ul .media a.xing {
              background-image: url("images/xing.png"); }
              footer .socialMedias .wrapper ul .media a.xing:hover {
                background-image: url("images/xing_hover.png"); }
            footer .socialMedias .wrapper ul .media a.linkedIn {
              background-image: url("images/linkedIn.png"); }
              footer .socialMedias .wrapper ul .media a.linkedIn:hover {
                background-image: url("images/linkedIn_hover.png"); }
  footer .columns {
    max-width: 66.4em;
    margin: 0 auto;
    margin-bottom: 2em;
    padding-top: 2em;
    width: 100%;
    /* if (not TYPE_CMS) */
    overflow: hidden;
    /* end if (not TYPE_CMS) */ }
    footer .columns .column {
      display: inline-block;
      font-size: 0.867em;
      text-transform: uppercase;
      color: #000;
      vertical-align: top;
      padding-left: 2.308em;
      position: relative;
      /* if (not TYPE_CMS) */
      margin-bottom: -9999px;
      padding-bottom: 9999px;
      /* end if (not TYPE_CMS) */ }
      footer .columns .column:before {
        content: '';
        display: block;
        position: absolute;
        border: 1px solid #bdc9cf;
        left: 0em; }
        @media (min-width: 769px) {
          footer .columns .column:before {
            border-width: 0 0 0 1px;
            height: 100%; } }
        @media (max-width: 768px) {
          footer .columns .column:before {
            border-width: 0 0 1px 0;
            width: 100%; } }
      footer .columns .column:first-of-type:before {
        content: '';
        display: none; }
      footer .columns .column:first-of-type ul li > a {
        display: inline-block;
        text-transform: lowercase; }
        footer .columns .column:first-of-type ul li > a:first-letter {
          text-transform: uppercase; }
        footer .columns .column:first-of-type ul li > a.upper-de {
          text-transform: uppercase; }
      footer .columns .column .headline {
        margin-bottom: 1.154em;
        display: block;
        cursor: default; }
        @media (max-width: 768px) {
          footer .columns .column .headline {
            padding-top: 1.154em; } }
      footer .columns .column ul {
        list-style-type: none; }
        @media (max-width: 768px) {
          footer .columns .column ul {
            padding-bottom: 1.154em; } }
        footer .columns .column ul li {
          line-height: 1.923em; }
          footer .columns .column ul li a {
            color: #000; }
            footer .columns .column ul li a:hover {
              color: #003cf5; }
        footer .columns .column ul.pages > li {
          text-transform: none; }
        footer .columns .column ul.languages {
          width: 23.231em;
          margin-bottom: 1.538em; }
          @media (max-width: 768px) {
            footer .columns .column ul.languages {
              width: 100%; } }
          footer .columns .column ul.languages li {
            width: 50%;
            float: left;
            text-transform: none;
            line-height: 1.923em; }
            footer .columns .column ul.languages li .reddot {
              font-size: 0.923em; }
            footer .columns .column ul.languages li a.flag:before {
              content: '';
              display: inline-block;
              height: 0.846em;
              width: 1.231em;
              margin-right: 0.385em; }
            footer .columns .column ul.languages li a.disabled {
              display: none; }
            footer .columns .column ul.languages li a.flag-cs:before {
              background-image: url("images/cs.gif"); }
            footer .columns .column ul.languages li a.flag-en:before {
              background-image: url("images/europeanunion.gif"); }
            footer .columns .column ul.languages li a.flag-da:before {
              background-image: url("images/da.gif"); }
            footer .columns .column ul.languages li a.flag-zh:before {
              background-image: url("images/zh.gif"); }
            footer .columns .column ul.languages li a.flag-nl:before {
              background-image: url("images/nl.gif"); }
            footer .columns .column ul.languages li a.flag-fr:before {
              background-image: url("images/fr.gif"); }
            footer .columns .column ul.languages li a.flag-de:before {
              background-image: url("images/de.gif"); }
            footer .columns .column ul.languages li a.flag-hu:before {
              background-image: url("images/hu.gif"); }
            footer .columns .column ul.languages li a.flag-it:before {
              background-image: url("images/it.gif"); }
            footer .columns .column ul.languages li a.flag-no:before {
              background-image: url("images/no.gif"); }
            footer .columns .column ul.languages li a.flag-pl:before {
              background-image: url("images/pl.gif"); }
            footer .columns .column ul.languages li a.flag-ru:before {
              background-image: url("images/ru.gif"); }
            footer .columns .column ul.languages li a.flag-es:before {
              background-image: url("images/es.gif"); }
            footer .columns .column ul.languages li a.flag-tr:before {
              background-image: url("images/tr.gif"); }
            footer .columns .column ul.languages li a.flag-sv:before {
              background-image: url("images/sv.gif"); }
            footer .columns .column ul.languages li a.flag-ro:before {
              background-image: url("images/ro.gif"); }
            footer .columns .column ul.languages li a.flag-fi:before {
              background-image: url("images/fi.gif"); }
            footer .columns .column ul.languages li a.flag-el:before {
              background-image: url("images/el.gif"); }
            footer .columns .column ul.languages li a.flag-pt:before {
              background-image: url("images/pt.gif"); }
            footer .columns .column ul.languages li a.flag-si:before {
              background-image: url("images/si.gif"); }
            footer .columns .column ul.languages li a.flag-nz:before {
              background-image: url("images/nz.gif"); }
            footer .columns .column ul.languages li a.flag-en-nz:before {
              background-image: url("images/en-nz.gif"); }
            footer .columns .column ul.languages li a.flag-en-gb:before {
              background-image: url("images/gb.gif"); }
            footer .columns .column ul.languages li a.flag-hi:before {
              background-image: url("images/hi.gif"); }
            footer .columns .column ul.languages li a.flag-sk:before {
              background-image: url("images/sk.gif"); }
            footer .columns .column ul.languages li a.flag-sl:before {
              background-image: url("images/sl.gif"); }
            footer .columns .column ul.languages li a.flag-pt-br:before {
              background-image: url("images/pt-br.gif"); }
            footer .columns .column ul.languages li a.flag-lt:before {
              background-image: url("images/lt.gif"); }
            footer .columns .column ul.languages li a.flag-fr.country-be:before, footer .columns .column ul.languages li a.flag-nl.country-be:before {
              background-image: url("images/be.gif"); }
  footer .copyRight {
    font-size: 0.933em;
    max-width: 71.143em;
    margin: 0 auto;
    color: #6a7a86;
    padding-bottom: 0.357em; }

.module_CustomConsentManager .modal-backdrop {
  background-color: #000;
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  opacity: .4; }

/*
**
**============================================= NEW FILE =======================================================
**
++ GIT: 6_microsite_html5/project/styles.navigation.scss
++ 2022-01-24 07:49 [8f6a91c] Zdenek Klug - Update CSS for Microsites HTML - redesign
++ 2019-09-30 10:53 [58c2013] Zdenek Klug - Adjustement of CSS for Navigation - Mansory Pages on Microsites HTML5
++ 2019-03-29 14:26 [cc67916] Stanislav ?incl - Update navigation MS HTML5 support hide in navigation for lvl5
++ 2019-01-17 14:41 [d543da0] Stanislav ?incl - Update navigation styles to adjust masonry page navigation background for MS HTML5
++ 2017-12-18 12:30 [6ffbde2] Stepan Hlavaty - Fix for font-size new navigation Microsites HTML5.
++ 2017-12-18 10:42 [7a3505a] Stepan Hlavaty - Merge branch 'master' of dc2git01v.dc.hella.com:WebResources
++ 2017-12-18 10:40 [3c692e2] Stepan Hlavaty - Incl. script and styles for New Microsites-HTML5 navigation.
++ 2017-12-04 08:04 [8607e09] Jan Klimes - Fixed problem with long navigation entries for microsite_html5
++ 2017-11-27 13:38 [eedcdd9] Stepan Hlavaty - Added styles for 4th level of navigation, Microsite_HTML5.
++ 2017-09-01 09:54 [ee588c6] Jan Klimes - Deactivated collapsible mobile search bar for microsite_html5
++ 2017-08-16 08:00 [27b84ae] Jan Klimes - Changed desktop navigation font size (now it is relevant to viewport width) for microsite_html5
++ 2017-07-31 13:55 [70b4c68] Jan Klimes - Initial commit for responsive microsites
*/
/*
++ GIT: 6_microsite_html5/project/_variables.scss
++ 2024-11-01 09:26 [6152a25] HAT\ryzndo1 - Remove hella fonts from MS-HTML5
++ 2022-01-24 07:49 [8f6a91c] Zdenek Klug - Update CSS for Microsites HTML - redesign
++ 2018-03-22 08:55 [553f4c3] Stepan Hlavaty - Pack for Masonry design Microsites HTML5 + video head module for Audi Microsite if it will be realized.
++ 2017-07-31 13:55 [70b4c68] Jan Klimes - Initial commit for responsive microsites
*/
/*
++ GIT: 6_microsite_html5/project/_mixins.scss
++ 2018-03-22 08:55 [553f4c3] Stepan Hlavaty - Pack for Masonry design Microsites HTML5 + video head module for Audi Microsite if it will be realized.
++ 2017-07-31 13:55 [70b4c68] Jan Klimes - Initial commit for responsive microsites
*/
/*
++ GIT: 6_microsite_html5/library/bootstrap/_variables.scss
++ 2022-01-24 07:49 [8f6a91c] Zdenek Klug - Update CSS for Microsites HTML - redesign
++ 2017-09-01 08:18 [fd5844c] Jan Klimes - Changed link hover color in bootstrap for microsite_html5
++ 2017-07-31 13:55 [70b4c68] Jan Klimes - Initial commit for responsive microsites
*/
/*
++ GIT: 6_microsite_html5/project/_variables.scss
++ 2024-11-01 09:26 [6152a25] HAT\ryzndo1 - Remove hella fonts from MS-HTML5
++ 2022-01-24 07:49 [8f6a91c] Zdenek Klug - Update CSS for Microsites HTML - redesign
++ 2018-03-22 08:55 [553f4c3] Stepan Hlavaty - Pack for Masonry design Microsites HTML5 + video head module for Audi Microsite if it will be realized.
++ 2017-07-31 13:55 [70b4c68] Jan Klimes - Initial commit for responsive microsites
*/
.navbar {
  border: 0;
  padding-top: 1.733em;
  padding-bottom: 1.8em;
  /*    @include mobileAndTablet {
        #navbar {
            margin-top: fromPxToEm(30);
        }
    }*/ }
  .navbar.navbar-default {
    background: none; }
  @media (min-width: 769px) {
    .navbar .navbar-header {
      width: 12.467em; } }
  @media (max-width: 768px) {
    .navbar .navbar-header {
      padding-bottom: 1.333em; } }
  .navbar #logo {
    position: relative;
    z-index: 10;
    width: 13.667em;
    height: 50px;
    margin-left: 2em; }
    @media (min-width: 481px) and (max-width: 768px) {
      .navbar #logo {
        margin-left: 1.333em; } }
    @media (max-width: 480px) {
      .navbar #logo {
        margin-left: 0.667em; } }
    .navbar #logo a {
      position: absolute;
      width: 13.667em;
      height: 13.067em; }
      @media (min-width: 481px) and (max-width: 768px) {
        .navbar #logo a {
          height: 4em; } }
      @media (max-width: 480px) {
        .navbar #logo a {
          height: 3.667em; } }
      @media (max-width: 768px) {
        .navbar #logo a img {
          height: inherit; } }
      .navbar #logo a span {
        font-size: 0.733em;
        /*                @include tablet {
                    left: fromPxToEm(135, $font-size);
                    margin-top: fromPxToEm(-$line-height / 2, $font-size);
                }
                
                @include mobile {
                    left: fromPxToEm(125, $font-size);
                    margin-top: fromPxToEm(-$line-height / 2, $font-size);
                }*/
        position: absolute;
        display: none;
        bottom: 1.182em;
        left: 1.182em;
        color: #000000;
        font-weight: bold; }
        @media (max-width: 768px) {
          .navbar #logo a span {
            display: none;
            /*                    top: 50%;
                    bottom: auto;
                    line-height: fromPxToEm($line-height, $font-size);
                    white-space: nowrap;*/ } }
  @media (min-width: 769px) {
    .navbar #navbar {
      padding-top: 0.467em; } }
  .navbar ul.nav {
    /*------------------------------------------
        NEW HTML5 NAVIGATION, MOBILE-FIRST APPROACH
        -------------------------------------------*/ }
    @media (min-width: 769px) {
      .navbar ul.nav {
        margin-left: 1em;
        float: none; } }
    @media (max-width: 768px) {
      .navbar ul.nav {
        margin-top: 0;
        margin-bottom: 0; } }
    .navbar ul.nav li.dropdown .arrow {
      display: none; }
    .navbar ul.nav li.navLink > a {
      font-size: 1em;
      font-size: 1.3vw;
      -moz-transition: color 0.3s ease;
      -o-transition: color 0.3s ease;
      -webkit-transition: color 0.3s ease;
      transition: color 0.3s ease;
      font-weight: bold;
      color: #000000;
      background-color: transparent; }
      @media (min-width: 997px) {
        .navbar ul.nav li.navLink > a {
          font-size: 1em; } }
      @media (max-width: 768px) {
        .navbar ul.nav li.navLink > a {
          font-size: 0.867em;
          padding-top: 0.769em;
          padding-bottom: 0.769em;
          border-bottom: 1px solid #dddddd; } }
      @media (min-width: 481px) and (max-width: 768px) {
        .navbar ul.nav li.navLink > a {
          padding-left: 20px;
          padding-right: 20px; } }
      @media (max-width: 480px) {
        .navbar ul.nav li.navLink > a {
          padding-left: 10px;
          padding-right: 10px; } }
      .navbar ul.nav li.navLink > a:hover {
        color: #003cf5; }
    .navbar ul.nav li.navLink.active > a {
      color: #003cf5; }
      .navbar ul.nav li.navLink.active > a:hover {
        background: none; }
    @media (max-width: 768px) {
      .navbar ul.nav ul[style] {
        height: auto !important;
        padding-top: 0 !important; } }
    .navbar ul.nav ul.level2 {
      padding-top: 1em; }
      @media (max-width: 768px) {
        .navbar ul.nav ul.level2 {
          padding-top: 0;
          padding-bottom: 0; } }
      @media (min-width: 481px) and (max-width: 768px) {
        .navbar ul.nav ul.level2 > li > a {
          padding-left: 3.077em; } }
      @media (max-width: 480px) {
        .navbar ul.nav ul.level2 > li > a {
          padding-left: 1.538em; } }
      @media (min-width: 769px) {
        .navbar ul.nav ul.level2 .dropdown-submenu > a {
          position: relative;
          padding-right: 2.308em; }
          .navbar ul.nav ul.level2 .dropdown-submenu > a:after {
            position: absolute;
            top: 50%;
            right: 0.769em;
            margin-top: -0.385em;
            border-top: 4px solid transparent;
            border-left: 4px solid #000000;
            border-bottom: 4px solid transparent;
            content: ''; }
          .navbar ul.nav ul.level2 .dropdown-submenu > a.noSublevel:after {
            display: none; } }
      .navbar ul.nav ul.level2 li.navLink a, .navbar ul.nav ul.level2 li.navLink.active a {
        font-size: 0.867em; }
        @media (max-width: 768px) {
          .navbar ul.nav ul.level2 li.navLink a, .navbar ul.nav ul.level2 li.navLink.active a {
            padding-top: 0.769em;
            padding-bottom: 0.769em; } }
    .navbar ul.nav ul.level3 {
      padding-top: 0;
      padding-bottom: 0; }
      @media (max-width: 768px) {
        .navbar ul.nav ul.level3 {
          padding-bottom: 0; } }
      @media (min-width: 481px) and (max-width: 768px) {
        .navbar ul.nav ul.level3 > li > a {
          padding-left: 4.615em; } }
      @media (max-width: 480px) {
        .navbar ul.nav ul.level3 > li > a {
          padding-left: 2.308em; } }
      .navbar ul.nav ul.level3 li.navLink a, .navbar ul.nav ul.level3 li.navLink.active a {
        font-weight: normal;
        text-transform: none; }
        @media (max-width: 768px) {
          .navbar ul.nav ul.level3 li.navLink a, .navbar ul.nav ul.level3 li.navLink.active a {
            font-weight: bold;
            text-transform: uppercase;
            padding-top: 0.769em;
            padding-bottom: 0.769em; } }
    .navbar ul.nav ul.level4 {
      padding-top: 0;
      padding-bottom: 0; }
      @media (max-width: 768px) {
        .navbar ul.nav ul.level4 {
          padding-bottom: 0; } }
      @media (min-width: 481px) and (max-width: 768px) {
        .navbar ul.nav ul.level4 > li > a {
          padding-left: 6.154em;
          display: block; } }
      @media (max-width: 480px) {
        .navbar ul.nav ul.level4 > li > a {
          padding-left: 3.077em;
          display: block; } }
      .navbar ul.nav ul.level4 li.navLink a, .navbar ul.nav ul.level4 li.navLink.active a {
        font-weight: normal;
        text-transform: none; }
        @media (max-width: 768px) {
          .navbar ul.nav ul.level4 li.navLink a, .navbar ul.nav ul.level4 li.navLink.active a {
            font-weight: normal;
            text-transform: uppercase;
            padding-top: 0.769em;
            padding-bottom: 0.769em; } }
    @media (min-width: 769px) {
      .navbar ul.nav li.dropdown > .dropdown-menu {
        border: 2px solid #E8E8E8;
        border-top: 0;
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 0;
        box-shadow: none; }
      .navbar ul.nav li.dropdown-submenu {
        position: relative; }
      .navbar ul.nav li.dropdown.dropdown-submenu > .dropdown-menu {
        display: none;
        top: -0.308em;
        left: 100%;
        border: 2px solid #E8E8E8;
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 0;
        box-shadow: none; } }
    @media (max-width: 768px) {
      .navbar ul.nav li.dropdown .arrow {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        padding: 10px;
        padding-right: 22px;
        line-height: 21px;
        cursor: pointer; }
        .navbar ul.nav li.dropdown .arrow .caret {
          border-width: 8px; }
      .navbar ul.nav li.dropdown > .dropdown-menu {
        position: static;
        left: auto;
        top: auto;
        float: none;
        padding-top: 0;
        border: 0;
        background-color: transparent;
        border-radius: 0;
        box-shadow: none; } }
    @media (min-width: 769px) {
      .navbar ul.nav li.slideNavLink {
        display: inline-block; } }
    .navbar ul.nav li.slideNavLink > a {
      padding-left: 10px;
      padding-right: 10px;
      font-size: 0.867em;
      -moz-transition: color 0.3s ease;
      -o-transition: color 0.3s ease;
      -webkit-transition: color 0.3s ease;
      transition: color 0.3s ease;
      padding-top: 0.769em;
      padding-bottom: 0.769em;
      border-bottom: 1px solid #dddddd;
      font-weight: bold;
      text-transform: uppercase;
      color: #000;
      background-color: transparent;
      display: block; }
      @media (min-width: 481px) and (max-width: 768px) {
        .navbar ul.nav li.slideNavLink > a {
          padding-left: 20px;
          padding-right: 20px; } }
      @media (min-width: 769px) {
        .navbar ul.nav li.slideNavLink > a {
          font-size: 1em;
          font-size: 1.3vw;
          padding: 0.925em 0.93em;
          display: block;
          font-size: 1em; } }
      .navbar ul.nav li.slideNavLink > a:hover {
        color: #003cf5;
        text-decoration: none; }
    .navbar ul.nav li.slideNavLink.slideDropdown {
      display: block;
      font-weight: bold;
      text-transform: uppercase;
      color: #000000;
      background-color: transparent;
      position: relative; }
      @media (min-width: 769px) {
        .navbar ul.nav li.slideNavLink.slideDropdown {
          display: inline-block; } }
      .navbar ul.nav li.slideNavLink.slideDropdown:hover {
        color: #003cf5; }
      .navbar ul.nav li.slideNavLink.slideDropdown > span {
        font-size: 0.867em;
        padding-left: 10px;
        padding-right: 10px;
        -moz-transition: color 0.3s ease;
        -o-transition: color 0.3s ease;
        -webkit-transition: color 0.3s ease;
        transition: color 0.3s ease;
        padding-top: 0.769em;
        padding-bottom: 0.769em;
        border-bottom: 1px solid #dddddd;
        font-weight: bold;
        text-transform: uppercase;
        color: #000;
        background-color: transparent;
        display: block;
        cursor: pointer; }
        @media (min-width: 481px) and (max-width: 768px) {
          .navbar ul.nav li.slideNavLink.slideDropdown > span {
            padding-left: 20px;
            padding-right: 20px; } }
        @media (min-width: 769px) {
          .navbar ul.nav li.slideNavLink.slideDropdown > span {
            font-size: 1.3vw;
            padding-top: 14.5px;
            padding-bottom: 14.5px;
            display: block;
            border-bottom: none;
            line-height: 21px; } }
  @media (min-width: 769px) and (min-width: 997px) {
    .navbar ul.nav li.slideNavLink.slideDropdown > span {
      font-size: 1em; } }
        .navbar ul.nav li.slideNavLink.slideDropdown > span:hover {
          color: #003cf5;
          text-decoration: none; }
        .navbar ul.nav li.slideNavLink.slideDropdown > span.glyphicon {
          display: block;
          position: absolute;
          top: 0;
          right: 0;
          padding: 10px;
          padding-right: 22px;
          cursor: pointer;
          border-bottom: none;
          line-height: 18px; }
          @media (min-width: 769px) {
            .navbar ul.nav li.slideNavLink.slideDropdown > span.glyphicon {
              display: none;
              padding: 14.5px; } }
      .navbar ul.nav li.slideNavLink.slideDropdown .caret {
        border-width: 8px; }
    .navbar ul.nav li.slideNavLink .slideDropdownMenu {
      display: none;
      width: 100%;
      position: static;
      border-radius: 0;
      margin: 0;
      background-color: #e8e8e8;
      border: none;
      z-index: 20; }
      @media (min-width: 769px) {
        .navbar ul.nav li.slideNavLink .slideDropdownMenu {
          border: initial;
          position: absolute; } }
    .navbar ul.nav li.slideNavLink.active > a {
      color: #003cf5; }
      .navbar ul.nav li.slideNavLink.active > a:hover {
        background: none; }
    @media (min-width: 769px) {
      .navbar ul.nav li.slideNavLink .navLink {
        display: inline-block; } }
    .navbar ul.nav ul.slideNavLevel2, .navbar ul.nav ul.slideNavLevel3, .navbar ul.nav ul.slideNavLevel4, .navbar ul.nav ul.slideNavLevel5, .navbar ul.nav ul.slideNavLevel6 {
      right: -100%;
      position: relative; }
      @media (min-width: 769px) {
        .navbar ul.nav ul.slideNavLevel2, .navbar ul.nav ul.slideNavLevel3, .navbar ul.nav ul.slideNavLevel4, .navbar ul.nav ul.slideNavLevel5, .navbar ul.nav ul.slideNavLevel6 {
          display: none;
          font-size: 0.867em;
          width: 16.25em !important;
          margin-top: 1em;
          position: absolute;
          text-transform: initial;
          right: auto; } }
      .navbar ul.nav ul.slideNavLevel2.opened, .navbar ul.nav ul.opened.slideNavLevel3, .navbar ul.nav ul.opened.slideNavLevel4, .navbar ul.nav ul.opened.slideNavLevel5, .navbar ul.nav ul.opened.slideNavLevel6 {
        position: absolute;
        left: 0;
        text-transform: initial; }
      .navbar ul.nav ul.slideNavLevel2 li.navLink, .navbar ul.nav ul.slideNavLevel3 li.navLink, .navbar ul.nav ul.slideNavLevel4 li.navLink, .navbar ul.nav ul.slideNavLevel5 li.navLink, .navbar ul.nav ul.slideNavLevel6 li.navLink {
        width: 100%; }
      .navbar ul.nav ul.slideNavLevel2 span, .navbar ul.nav ul.slideNavLevel3 span, .navbar ul.nav ul.slideNavLevel4 span, .navbar ul.nav ul.slideNavLevel5 span, .navbar ul.nav ul.slideNavLevel6 span {
        text-transform: initial; }
        @media (min-width: 769px) {
          .navbar ul.nav ul.slideNavLevel2 span, .navbar ul.nav ul.slideNavLevel3 span, .navbar ul.nav ul.slideNavLevel4 span, .navbar ul.nav ul.slideNavLevel5 span, .navbar ul.nav ul.slideNavLevel6 span {
            width: 15em; } }
        @media (min-width: 769px) {
          .navbar ul.nav ul.slideNavLevel2 span.glyphicon, .navbar ul.nav ul.slideNavLevel3 span.glyphicon, .navbar ul.nav ul.slideNavLevel4 span.glyphicon, .navbar ul.nav ul.slideNavLevel5 span.glyphicon, .navbar ul.nav ul.slideNavLevel6 span.glyphicon {
            display: block !important;
            top: -0.15em !important;
            width: auto; } }
      .navbar ul.nav ul.slideNavLevel2 a, .navbar ul.nav ul.slideNavLevel3 a, .navbar ul.nav ul.slideNavLevel4 a, .navbar ul.nav ul.slideNavLevel5 a, .navbar ul.nav ul.slideNavLevel6 a {
        display: block; }
        @media (min-width: 769px) {
          .navbar ul.nav ul.slideNavLevel2 a, .navbar ul.nav ul.slideNavLevel3 a, .navbar ul.nav ul.slideNavLevel4 a, .navbar ul.nav ul.slideNavLevel5 a, .navbar ul.nav ul.slideNavLevel6 a {
            padding: 14.5px 10px; } }
        .navbar ul.nav ul.slideNavLevel2 a:hover, .navbar ul.nav ul.slideNavLevel3 a:hover, .navbar ul.nav ul.slideNavLevel4 a:hover, .navbar ul.nav ul.slideNavLevel5 a:hover, .navbar ul.nav ul.slideNavLevel6 a:hover {
          text-decoration: none; }
    @media (min-width: 769px) {
      .navbar ul.nav ul.slideNavLevel3, .navbar ul.nav ul.slideNavLevel4, .navbar ul.nav ul.slideNavLevel5, .navbar ul.nav ul.slideNavLevel6 {
        right: -17.5em !important;
        top: 0 !important;
        font-size: 1em; }
        .navbar ul.nav ul.slideNavLevel3 span, .navbar ul.nav ul.slideNavLevel4 span, .navbar ul.nav ul.slideNavLevel5 span, .navbar ul.nav ul.slideNavLevel6 span, .navbar ul.nav ul.slideNavLevel3 a, .navbar ul.nav ul.slideNavLevel4 a, .navbar ul.nav ul.slideNavLevel5 a, .navbar ul.nav ul.slideNavLevel6 a {
          font-weight: normal !important;
          text-transform: none; } }
    .navbar ul.nav .menu-headline {
      display: block;
      text-align: center;
      font-weight: bold;
      padding: 0.667em;
      color: #6a7a86;
      cursor: pointer;
      padding: 1.5em 1.25em 1em 1.25em;
      border-bottom: 2px solid #6a7a86;
      margin-bottom: 0.5em;
      z-index: 100;
      -moz-transition: color 0.45s ease, border-bottom 0.45s ease;
      -o-transition: color 0.45s ease, border-bottom 0.45s ease;
      -webkit-transition: color 0.45s ease, border-bottom 0.45s ease;
      transition: color 0.45s ease, border-bottom 0.45s ease; }
      .navbar ul.nav .menu-headline:hover {
        color: #003cf5;
        border-bottom: 2px solid #003cf5;
        -moz-transition: color 0.45s ease, border-bottom 0.45s ease;
        -o-transition: color 0.45s ease, border-bottom 0.45s ease;
        -webkit-transition: color 0.45s ease, border-bottom 0.45s ease;
        transition: color 0.45s ease, border-bottom 0.45s ease; }
      .navbar ul.nav .menu-headline .glyphicon {
        float: left;
        z-index: 10; }
      .navbar ul.nav .menu-headline .levels-tree {
        font-weight: normal;
        font-size: 0.9em; }
      .navbar ul.nav .menu-headline:before {
        font-family: 'Glyphicons Halflings';
        content: "\e079";
        float: left; }
  .navbar .navbar-toggle {
    background: transparent !important;
    border: 0;
    margin-right: .5em; }
    .navbar .navbar-toggle:hover {
      background: transparent !important; }
    .navbar .navbar-toggle .icon-bar {
      width: 22px;
      transition: all 0.2s; }
    .navbar .navbar-toggle .icon-bar:nth-child(2) {
      transform: rotate(45deg);
      transform-origin: 10% 10%; }
    .navbar .navbar-toggle .icon-bar:nth-child(3) {
      opacity: 0; }
    .navbar .navbar-toggle .icon-bar:nth-child(4) {
      transform: rotate(-45deg);
      transform-origin: 10% 90%; }
    .navbar .navbar-toggle.collapsed .icon-bar:nth-child(2) {
      transform: rotate(0); }
    .navbar .navbar-toggle.collapsed .icon-bar:nth-child(3) {
      opacity: 1; }
    .navbar .navbar-toggle.collapsed .icon-bar:nth-child(4) {
      transform: rotate(0); }
  .navbar .navbar-magnifier {
    position: relative;
    float: right;
    font-size: 18px;
    top: 16px;
    right: 5px;
    color: #888; }
    @media (min-width: 769px) {
      .navbar .navbar-magnifier {
        display: none; } }
  .navbar .navbar-masonry .hidden {
    display: none; }
  .navbar .navbar-search {
    display: none;
    position: absolute;
    width: 100%;
    z-index: 8;
    background-image: -webkit-linear-gradient(top, #ddd 0%, #e8e8e8 100%);
    background-image: -o-linear-gradient(top, #ddd 0%, #e8e8e8 100%);
    background-image: linear-gradient(to bottom, #ddd 0%, #e8e8e8 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFDDDDDD', endColorstr='#FFE8E8E8', GradientType=0);
    -webkit-box-shadow: 1px 1px 2px #ccc ;
    -moz-box-shadow: 1px 1px 2px #ccc ;
    box-shadow: 1px 1px 2px #ccc ; }

/*
**
**============================================= NEW FILE =======================================================
**
++ GIT: 6_microsite_html5/project/styles.scss
++ 2024-11-01 09:26 [6152a25] HAT\ryzndo1 - Remove hella fonts from MS-HTML5
++ 2022-01-24 07:49 [8f6a91c] Zdenek Klug - Update CSS for Microsites HTML - redesign
++ 2018-08-22 15:04 [47b605d] Stanislav ?incl - Minor breadcrumbNav style fix
++ 2018-03-22 08:55 [553f4c3] Stepan Hlavaty - Pack for Masonry design Microsites HTML5 + video head module for Audi Microsite if it will be realized.
++ 2018-01-05 10:29 [d72dbf2] Stepan Hlavaty - Breadcrumb styling updates (when breadcrumb item is no link). Margin for last sitemap topic when there is 6 topics.
++ 2018-01-04 14:25 [7897bd8] Stepan Hlavaty - Added rule for span in breadcrumb, Microsites HTML5.
++ 2017-09-21 07:28 [7fbc79d] Jan Klimes - Merge branch 'master' of dc2git01v.dc.hella.com:WebResources
++ 2017-09-21 07:27 [83c96c2] Jan Klimes - Removed commented styles from project stylesheet for microsite_html5
++ 2017-09-07 13:31 [0b5bf35] Jan Klimes - Fixed generic module selector for microsite_html5
++ 2017-09-05 10:41 [a5ac03e] Jan Klimes - Added generic reddot styles from OHTW for microsite_html5
++ 2017-09-01 09:55 [4cf9bf1] Jan Klimes - Fixed module margin for microsite_html5
++ 2017-09-01 08:56 [b769ecd] Jan Klimes - Changed modules' margin bottom for microsite_html5
++ 2017-09-01 08:17 [3823ea4] Jan Klimes - Changed modules' bottom margin for microsite_html5
++ 2017-08-31 13:38 [7f30794] Jan Klimes - Updated project style for microsite_html5
++ 2017-08-18 09:27 [ed5b131] Jan Klimes - Updated stylesheet for search module for microsite_html5
++ 2017-08-17 13:50 [8bfb210] Jan Klimes - Updated project stylesheet (added reddot styles) for microsite_html5
++ 2017-07-31 13:55 [70b4c68] Jan Klimes - Initial commit for responsive microsites
*/
/*
++ GIT: 6_microsite_html5/project/_variables.scss
++ 2024-11-01 09:26 [6152a25] HAT\ryzndo1 - Remove hella fonts from MS-HTML5
++ 2022-01-24 07:49 [8f6a91c] Zdenek Klug - Update CSS for Microsites HTML - redesign
++ 2018-03-22 08:55 [553f4c3] Stepan Hlavaty - Pack for Masonry design Microsites HTML5 + video head module for Audi Microsite if it will be realized.
++ 2017-07-31 13:55 [70b4c68] Jan Klimes - Initial commit for responsive microsites
*/
/*
++ GIT: 6_microsite_html5/project/_mixins.scss
++ 2018-03-22 08:55 [553f4c3] Stepan Hlavaty - Pack for Masonry design Microsites HTML5 + video head module for Audi Microsite if it will be realized.
++ 2017-07-31 13:55 [70b4c68] Jan Klimes - Initial commit for responsive microsites
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, button,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
  font-family: Arial, Helvetica; }

*:link, *:visited {
  color: #003CF5;
  text-decoration: none; }

*:hover {
  text-decoration: none; }

html, body {
  font-size: 15px;
  background: none;
  padding: 0;
  margin: 0;
  min-width: 320px;
  /* skipped (TYPE_CMS) */ }
  html .blind, body .blind {
    display: none; }
  html #box, body #box {
    background-color: #fff;
    filter: none; }
    html #box.masonryPage, body #box.masonryPage {
      background: #f0f0f0; }
      html #box.masonryPage .wrapper, body #box.masonryPage .wrapper {
        background: transparent !important; }
        html #box.masonryPage .wrapper .headerImage, body #box.masonryPage .wrapper .headerImage {
          text-align: center; }
        html #box.masonryPage .wrapper .pageTitle, body #box.masonryPage .wrapper .pageTitle {
          margin-top: 10em; }
          @media (min-width: 769px) {
            html #box.masonryPage .wrapper .pageTitle, body #box.masonryPage .wrapper .pageTitle {
              margin-top: 22em; } }
          html #box.masonryPage .wrapper .pageTitle h1, body #box.masonryPage .wrapper .pageTitle h1 {
            font-size: 1.8em;
            font-weight: bold;
            display: inline-block;
            line-height: inherit;
            padding: .25em;
            color: #fff;
            background: #000;
            text-transform: uppercase; }
            @media (min-width: 769px) {
              html #box.masonryPage .wrapper .pageTitle h1, body #box.masonryPage .wrapper .pageTitle h1 {
                font-size: 2.5em;
                display: inline; } }
      html #box.masonryPage .navbar, body #box.masonryPage .navbar {
        -moz-border-radius: 0 0 4px 4px;
        -webkit-border-radius: 0 0 4px 4px;
        border-radius: 0 0 4px 4px; }
      html #box.masonryPage .navbar-default, body #box.masonryPage .navbar-default {
        background: transparent !important; }
      html #box.masonryPage > #container, body #box.masonryPage > #container {
        max-width: 1280px; }
      html #box.masonryPage footer, body #box.masonryPage footer {
        background: #dbdee3 !important;
        filter: none; }
    html #box > #container, body #box > #container {
      font-size: 1em;
      z-index: 2;
      min-width: 320px;
      max-width: 996px;
      margin: 0 auto;
      font-family: Arial, Helvetica;
      position: relative; }
      html #box > #container #login, body #box > #container #login {
        display: none; }
      html #box > #container .breadcrumbNav, body #box > #container .breadcrumbNav {
        font-size: 0.733em;
        margin-left: 2.727em;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        color: #7C7B6D;
        margin-bottom: 0.909em; }
        @media (min-width: 481px) and (max-width: 768px) {
          html #box > #container .breadcrumbNav, body #box > #container .breadcrumbNav {
            margin-left: 1.818em; } }
        @media (max-width: 480px) {
          html #box > #container .breadcrumbNav, body #box > #container .breadcrumbNav {
            margin-left: 0.909em; } }
        html #box > #container .breadcrumbNav:empty, body #box > #container .breadcrumbNav:empty {
          height: 1.364em; }
      html #box > #container .breadcrumbNav a,
      html #box > #container .breadcrumb-channel a, body #box > #container .breadcrumbNav a,
      body #box > #container .breadcrumb-channel a {
        color: #000000;
        text-decoration: none; }
        html #box > #container .breadcrumbNav a:not(:last-of-type):after,
        html #box > #container .breadcrumb-channel a:not(:last-of-type):after, body #box > #container .breadcrumbNav a:not(:last-of-type):after,
        body #box > #container .breadcrumb-channel a:not(:last-of-type):after {
          content: '>';
          margin-left: .3em;
          margin-right: .25em; }
      html #box > #container .breadcrumbNav span, body #box > #container .breadcrumbNav span {
        color: #000000;
        text-decoration: none; }
        html #box > #container .breadcrumbNav span:not(:last-of-type), body #box > #container .breadcrumbNav span:not(:last-of-type) {
          color: #000000; }
        html #box > #container .breadcrumbNav span:not(:last-of-type):after, body #box > #container .breadcrumbNav span:not(:last-of-type):after {
          content: '>';
          color: #000000;
          margin-left: .3em;
          margin-right: .25em; }
        html #box > #container .breadcrumbNav span:last-of-type a, body #box > #container .breadcrumbNav span:last-of-type a {
          color: #003CF5; }
      html #box > #container .wrapper-home:before, body #box > #container .wrapper-home:before {
        content: '';
        background-image: url("images/pageStripe.png");
        width: 100%;
        display: block;
        height: 4px;
        position: absolute;
        z-index: 9; }
      html #box > #container .wrapper, html #box > #container .wrapper-home, body #box > #container .wrapper, body #box > #container .wrapper-home {
        background: #ffffff; }
        html #box > #container .wrapper .headerImage, html #box > #container .wrapper-home .headerImage, body #box > #container .wrapper .headerImage, body #box > #container .wrapper-home .headerImage {
          padding-bottom: 0.667em; }
          @media (min-width: 769px) {
            html #box > #container .wrapper .headerImage, html #box > #container .wrapper-home .headerImage, body #box > #container .wrapper .headerImage, body #box > #container .wrapper-home .headerImage {
              min-height: 11.333em; } }
          html #box > #container .wrapper .headerImage:not(:empty), html #box > #container .wrapper-home .headerImage:not(:empty), body #box > #container .wrapper .headerImage:not(:empty), body #box > #container .wrapper-home .headerImage:not(:empty) {
            padding-bottom: 1.333em; }
          html #box > #container .wrapper .headerImage img.img-responsive:not(:last-of-type), html #box > #container .wrapper-home .headerImage img.img-responsive:not(:last-of-type), body #box > #container .wrapper .headerImage img.img-responsive:not(:last-of-type), body #box > #container .wrapper-home .headerImage img.img-responsive:not(:last-of-type) {
            display: none; }
      html #box > #container .wrapper-home, html #box > #container .wrapper-catsel, body #box > #container .wrapper-home, body #box > #container .wrapper-catsel {
        background: #ffffff; }
        html #box > #container .wrapper-home h1.centerHeadline, html #box > #container .wrapper-catsel h1.centerHeadline, body #box > #container .wrapper-home h1.centerHeadline, body #box > #container .wrapper-catsel h1.centerHeadline {
          color: #000000;
          font-family: Arial,Helvetica;
          margin-bottom: 34px;
          font-size: 20px;
          width: 100%;
          text-align: left; }
        html #box > #container .wrapper-home #tools, html #box > #container .wrapper-catsel #tools, body #box > #container .wrapper-home #tools, body #box > #container .wrapper-catsel #tools {
          margin-bottom: 1.2em; }
      html #box > #container #tools, body #box > #container #tools {
        margin-bottom: 0.4em;
        padding-bottom: 0.1em;
        float: left;
        width: 100%;
        border-bottom: 1px #7C7B6D solid;
        height: 1.533em;
        text-align: right; }
        html #box > #container #tools img, body #box > #container #tools img {
          position: relative; }
        html #box > #container #tools ul, body #box > #container #tools ul {
          list-style-type: none;
          margin: 0;
          display: inline-block;
          text-align: left;
          float: right; }
          html #box > #container #tools ul:after, body #box > #container #tools ul:after {
            display: block;
            clear: both;
            content: ''; }
        html #box > #container #tools li, body #box > #container #tools li {
          float: left;
          margin-left: 0.667em; }
          html #box > #container #tools li#languages, body #box > #container #tools li#languages {
            width: auto; }
      html #box > #container #tools.toolsInHead, body #box > #container #tools.toolsInHead {
        border-bottom: 0;
        width: auto;
        float: right;
        top: 0.667em;
        right: 0.667em; }
        @media (min-width: 769px) {
          html #box > #container #tools.toolsInHead, body #box > #container #tools.toolsInHead {
            position: absolute; } }
        @media (max-width: 768px) {
          html #box > #container #tools.toolsInHead, body #box > #container #tools.toolsInHead {
            position: relative; } }
        html #box > #container #tools.toolsInHead li, body #box > #container #tools.toolsInHead li {
          float: left;
          width: auto;
          margin-left: 0.667em; }
        html #box > #container #tools.toolsInHead li#languages:empty, body #box > #container #tools.toolsInHead li#languages:empty {
          display: none; }
      html #box > #container #tools-centred, body #box > #container #tools-centred {
        margin-bottom: 2em;
        padding-left: 0.133em;
        padding-bottom: 0.4em;
        width: 100%;
        border-bottom: 1px #7C7B6D solid;
        text-align: right; }
        html #box > #container #tools-centred:after, body #box > #container #tools-centred:after {
          display: block;
          clear: both;
          content: ''; }
        html #box > #container #tools-centred img, body #box > #container #tools-centred img {
          position: relative; }
        html #box > #container #tools-centred ul, body #box > #container #tools-centred ul {
          list-style-type: none;
          margin: 0;
          float: right; }
          html #box > #container #tools-centred ul:after, body #box > #container #tools-centred ul:after {
            display: block;
            clear: both;
            content: ''; }
        html #box > #container #tools-centred li, body #box > #container #tools-centred li {
          float: left;
          margin-left: 0.667em; }
        html #box > #container #tools-centred .headlineTools, html #box > #container #tools-centred h1, body #box > #container #tools-centred .headlineTools, body #box > #container #tools-centred h1 {
          font: 1.539em/1.1em Arial,Helvetica;
          color: #7C7B6D;
          float: left;
          text-align: left; }
      html #box > #container #left-side-modules > *[class*="module_"], body #box > #container #left-side-modules > *[class*="module_"] {
        margin-bottom: 2em; }
        @media (min-width: 481px) and (max-width: 768px) {
          html #box > #container #left-side-modules > *[class*="module_"], body #box > #container #left-side-modules > *[class*="module_"] {
            margin-bottom: 1.333em; } }
        @media (max-width: 480px) {
          html #box > #container #left-side-modules > *[class*="module_"], body #box > #container #left-side-modules > *[class*="module_"] {
            margin-bottom: 1.333em; } }
        @media (min-width: 769px) {
          html #box > #container #left-side-modules > *[class*="module_"]:last-child, body #box > #container #left-side-modules > *[class*="module_"]:last-child {
            margin-bottom: 6.667em; } }
      html #box > #container #right-side > .row > *[class*="module_"]:last-child, body #box > #container #right-side > .row > *[class*="module_"]:last-child {
        margin-bottom: 7.692em; }
      html #box > #container #middle.catSel, body #box > #container #middle.catSel {
        margin-bottom: 6.667em; }
      html #box > #container #middle.emptyPage > .row > *[class*="module_"], body #box > #container #middle.emptyPage > .row > *[class*="module_"] {
        margin-bottom: 2em; }
        @media (min-width: 481px) and (max-width: 768px) {
          html #box > #container #middle.emptyPage > .row > *[class*="module_"], body #box > #container #middle.emptyPage > .row > *[class*="module_"] {
            margin-bottom: 1.333em; } }
        @media (max-width: 480px) {
          html #box > #container #middle.emptyPage > .row > *[class*="module_"], body #box > #container #middle.emptyPage > .row > *[class*="module_"] {
            margin-bottom: 1.333em; } }
        html #box > #container #middle.emptyPage > .row > *[class*="module_"]:last-child, body #box > #container #middle.emptyPage > .row > *[class*="module_"]:last-child {
          margin-bottom: 6.667em; }
      html #box > #container #middle.slidingPageContent > .row, body #box > #container #middle.slidingPageContent > .row {
        overflow: hidden; }
        @media (min-width: 769px) {
          html #box > #container #middle.slidingPageContent > .row, body #box > #container #middle.slidingPageContent > .row {
            margin-bottom: 6.667em; } }
        html #box > #container #middle.slidingPageContent > .row > *[class*="module_"], body #box > #container #middle.slidingPageContent > .row > *[class*="module_"] {
          margin-bottom: 1.333em; }
          @media (min-width: 769px) {
            html #box > #container #middle.slidingPageContent > .row > *[class*="module_"], body #box > #container #middle.slidingPageContent > .row > *[class*="module_"] {
              margin-bottom: -99999px;
              padding-bottom: 99999px; } }
      @media (min-width: 769px) {
        html #box > #container #middle.slidingPageContent .toolbox:not(:last-child), body #box > #container #middle.slidingPageContent .toolbox:not(:last-child) {
          border-right: 1px solid #7C7B6D; } }
      @media (max-width: 768px) {
        html #box > #container #middle.slidingPageContent .toolbox:not(:last-child) > .moduleBody, body #box > #container #middle.slidingPageContent .toolbox:not(:last-child) > .moduleBody {
          padding-bottom: 1.333em;
          border-bottom: 1px solid #7C7B6D; } }
      html #box > #container #middle.slidingPageContent .toolbox.lastToolbox, body #box > #container #middle.slidingPageContent .toolbox.lastToolbox {
        border-width: 0; }
      html #box > #container #middle.slidingPageContent .toolbox.toolboxWithVideoplayer, body #box > #container #middle.slidingPageContent .toolbox.toolboxWithVideoplayer {
        margin-left: 1em;
        width: 327px; }
      html #box > #container #middle.slidingPageContent .toolbox.toolboxWithVideoplayer .textWrap, body #box > #container #middle.slidingPageContent .toolbox.toolboxWithVideoplayer .textWrap {
        margin-left: 1em;
        width: 147px;
        float: right; }
      html #box > #container #middle.slidingPageContent .toolbox.toolboxWithVideoplayer .topic, body #box > #container #middle.slidingPageContent .toolbox.toolboxWithVideoplayer .topic {
        float: right;
        color: #000000 !important;
        font: 1.539em/1.1em Arial,Helvetica !important;
        padding-bottom: 8px;
        text-transform: uppercase;
        font-weight: normal !important;
        border-bottom: 0px;
        margin-bottom: 0px; }
      html #box > #container .categorySelectionPageText, body #box > #container .categorySelectionPageText {
        color: #6A7A86;
        font-size: 0.867em;
        font-weight: normal;
        line-height: 1.231em;
        margin-bottom: 1.7em; }
        @media (max-width: 768px) {
          html #box > #container .categorySelectionPageText, body #box > #container .categorySelectionPageText {
            display: none; } }
        html #box > #container .categorySelectionPageText:not(:empty), body #box > #container .categorySelectionPageText:not(:empty) {
          padding-top: 1em; }
        html #box > #container .categorySelectionPageText a, body #box > #container .categorySelectionPageText a {
          color: #E49A00;
          text-decoration: none; }
      html #box > #container #siteSearch, body #box > #container #siteSearch {
        /*display: none;*/ }
    html #box .blind, body #box .blind {
      display: none; }
  html .reddotMenu, body .reddotMenu {
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif; }
    html .reddotMenu > .reddotItems img, body .reddotMenu > .reddotItems img {
      margin-right: .25em; }
    html .reddotMenu > .reddotItems p, body .reddotMenu > .reddotItems p {
      padding: .1em 0 .3em 1.5em;
      margin: 0;
      color: #000000; }
      html .reddotMenu > .reddotItems p a, body .reddotMenu > .reddotItems p a {
        color: #000000;
        text-decoration: underline; }
    html .reddotMenu.reddotMenuOpen, body .reddotMenu.reddotMenuOpen {
      border: 1px solid red; }
      html .reddotMenu.reddotMenuOpen > .reddotItems, body .reddotMenu.reddotMenuOpen > .reddotItems {
        padding: .5em; }
      html .reddotMenu.reddotMenuOpen .reddotItem:first-child:not(:last-child), body .reddotMenu.reddotMenuOpen .reddotItem:first-child:not(:last-child) {
        padding-bottom: .5em; }
    html .reddotMenu.reddotBox, body .reddotMenu.reddotBox {
      margin-top: .5em;
      margin-bottom: .5em; }
      html .reddotMenu.reddotBox.reddotNoBottomMargin, body .reddotMenu.reddotBox.reddotNoBottomMargin {
        margin-bottom: 0 !important; }
      html .reddotMenu.reddotBox.reddotNoTopMargin, body .reddotMenu.reddotBox.reddotNoTopMargin {
        margin-top: 0 !important; }
    html .reddotMenu > *[class*='module_']:last-child, body .reddotMenu > *[class*='module_']:last-child {
      margin-bottom: 0; }
    html .reddotMenu.reddotBox.reddotMenuOpen, body .reddotMenu.reddotBox.reddotMenuOpen {
      background: #ffc8c8; }
    html .reddotMenu .reddotItem, body .reddotMenu .reddotItem {
      color: #ff0000;
      border-bottom: 1px solid #ffd8d8; }
    html .reddotMenu .reddotItem:first-child,
    html .reddotMenu .reddotItem:last-child, body .reddotMenu .reddotItem:first-child,
    body .reddotMenu .reddotItem:last-child {
      border-bottom: none; }
    html .reddotMenu .reddotItemValue, body .reddotMenu .reddotItemValue {
      float: right;
      color: #000000;
      max-width: 50%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis; }
      html .reddotMenu .reddotItemValue:after, body .reddotMenu .reddotItemValue:after {
        display: block;
        clear: both;
        content: ''; }
    html .reddotMenu .reddotItemCategory, body .reddotMenu .reddotItemCategory {
      padding-top: .5em;
      font-weight: bold; }

/*# sourceMappingURL=ResourceManager */