html,
body {
  padding: 0;
  margin: 0;
  width: 100%;
}
html {
  height: 100%;
}
body {
  background-color: #FFFFFF;
  position: relative;
  min-width: 320px;
  min-height: 100%;
}
.grid,
.container,
.module {
  -webkit-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
}
.grid.fix[class][class][class],
.container.fix[class][class][class],
.module.fix[class][class][class] {
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  min-width: 0px;
}
.grid.fullwidth,
.container.fullwidth,
.module.fullwidth {
  width: 100vw;
  -webkit-flex-basis: 100vw;
  flex-basis: 100vw;
  -webkit-flex-shrink: 1;
  -ms-flex-shrink: 1;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  justify-content: flex-start;
}
.grid,
.container {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  -ms-flex-wrap: wrap;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}
.grid {
  width: auto;
  margin: 0 auto;
  clear: both;
  position: relative;
  -webkit-flex-basis: 100%;
  flex-basis: 100%;
}
.module {
  box-sizing: border-box;
  padding-left: 10px;
  padding-right: 10px;
  overflow: visible;
}
.no-flex .grid,
.no-flex .container,
.no-flex .module {
  display: block;
}
.no-flex .container,
.no-flex .module {
  float: left;
}
.align-center {
  text-align: center;
}
.align-right {
  text-align: right;
}
.align-left {
  text-align: left;
}
.align-justify {
  text-align: justify;
}
.grid.left,
.container.left,
.module.left {
  margin-left: 0;
  margin-right: auto;
}
.grid.center,
.container.center,
.module.center {
  margin-left: auto;
  margin-right: auto;
}
.grid.right,
.container.right,
.module.right {
  margin-left: auto;
  margin-right: 0px;
}
span.left,
a.left,
p.left,
h1.left,
h2.left,
h3.left,
h4.left,
h5.left,
h6.left {
  float: left;
}
span.right,
a.right,
p.right,
h1.right,
h2.right,
h3.right,
h4.right,
h5.right,
h6.right {
  float: right;
}
.container.center {
  -webkit-justify-content: center;
  -ms-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.container.left {
  -webkit-justify-content: flex-start;
  -ms-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
.container.right {
  -webkit-justify-content: flex-end;
  -ms-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
.container.row {
  -webkit-justify-content: stretch;
  -ms-justify-content: stretch;
  -ms-flex-align: stretch;
  justify-content: stretch;
}
.l-1 {
  width: 80px;
  min-width: 7.96875vw;
  -webkit-flex-basis: 7.96875vw;
  flex-basis: 7.96875vw;
  -webkit-flex-grow: 1;
  -ms-flex-grow: 1;
  flex-grow: 1;
}
.l-2 {
  width: 160px;
  min-width: 15.9375vw;
  -webkit-flex-basis: 15.9375vw;
  flex-basis: 15.9375vw;
  -webkit-flex-grow: 2;
  -ms-flex-grow: 2;
  flex-grow: 2;
}
.l-3 {
  width: 240px;
  min-width: 23.90625vw;
  -webkit-flex-basis: 23.90625vw;
  flex-basis: 23.90625vw;
  -webkit-flex-grow: 3;
  -ms-flex-grow: 3;
  flex-grow: 3;
}
.l-4 {
  width: 320px;
  min-width: 31.875vw;
  -webkit-flex-basis: 31.875vw;
  flex-basis: 31.875vw;
  -webkit-flex-grow: 4;
  -ms-flex-grow: 4;
  flex-grow: 4;
}
.l-5 {
  width: 400px;
  min-width: 39.84375vw;
  -webkit-flex-basis: 39.84375vw;
  flex-basis: 39.84375vw;
  -webkit-flex-grow: 5;
  -ms-flex-grow: 5;
  flex-grow: 5;
}
.l-6 {
  width: 480px;
  min-width: 47.8125vw;
  -webkit-flex-basis: 47.8125vw;
  flex-basis: 47.8125vw;
  -webkit-flex-grow: 6;
  -ms-flex-grow: 6;
  flex-grow: 6;
}
.l-7 {
  width: 560px;
  min-width: 55.78125vw;
  -webkit-flex-basis: 55.78125vw;
  flex-basis: 55.78125vw;
  -webkit-flex-grow: 7;
  -ms-flex-grow: 7;
  flex-grow: 7;
}
.l-8 {
  width: 640px;
  min-width: 63.75vw;
  -webkit-flex-basis: 63.75vw;
  flex-basis: 63.75vw;
  -webkit-flex-grow: 8;
  -ms-flex-grow: 8;
  flex-grow: 8;
}
.l-9 {
  width: 720px;
  min-width: 71.71875vw;
  -webkit-flex-basis: 71.71875vw;
  flex-basis: 71.71875vw;
  -webkit-flex-grow: 9;
  -ms-flex-grow: 9;
  flex-grow: 9;
}
.l-10 {
  width: 800px;
  min-width: 79.6875vw;
  -webkit-flex-basis: 79.6875vw;
  flex-basis: 79.6875vw;
  -webkit-flex-grow: 10;
  -ms-flex-grow: 10;
  flex-grow: 10;
}
.l-11 {
  width: 880px;
  min-width: 87.65625vw;
  -webkit-flex-basis: 87.65625vw;
  flex-basis: 87.65625vw;
  -webkit-flex-grow: 11;
  -ms-flex-grow: 11;
  flex-grow: 11;
}
.l-12 {
  width: 960px;
  min-width: 95.625vw;
  -webkit-flex-basis: 95.625vw;
  flex-basis: 95.625vw;
  -webkit-flex-grow: 12;
  -ms-flex-grow: 12;
  flex-grow: 12;
}
.l-1.fix, .l-2.fix, .l-3.fix, .l-4.fix, .l-5.fix, .l-6.fix, .l-7.fix, .l-8.fix, .l-9.fix, .l-10.fix, .l-11.fix, .l-12.fix {
  min-width: 0px;
  flex-grow: 0;
}
/*  */
.no-flex .l-1, .no-flex .l-2, .no-flex .l-3, .no-flex .l-4, .no-flex .l-5, .no-flex .l-6, .no-flex .l-7, .no-flex .l-8, .no-flex .l-9, .no-flex .l-10, .no-flex .l-11, .no-flex .l-12 {
  min-width: 0px;
}
/*  */
@media screen and (min-width: 980px) {
  .l-0[class][class][class] {
    display: none;
  }
  /*  */
  .l-fix {
    min-width: 0px;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }
  /*  */
  /*  */
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
  .m-0[class][class][class] {
    display: none;
  }
  .l-1,
  .m-1[class] {
    width: 80px;
    min-width: 11.6796875vw;
    -webkit-flex-basis: 11.6796875vw;
    flex-basis: 11.6796875vw;
    -webkit-flex-grow: 1;
    -ms-flex-grow: 1;
    flex-grow: 1;
  }
  .l-2,
  .m-2[class] {
    width: 160px;
    min-width: 23.359375vw;
    -webkit-flex-basis: 23.359375vw;
    flex-basis: 23.359375vw;
    -webkit-flex-grow: 2;
    -ms-flex-grow: 2;
    flex-grow: 2;
  }
  .l-3,
  .m-3[class] {
    width: 240px;
    min-width: 35.0390625vw;
    -webkit-flex-basis: 35.0390625vw;
    flex-basis: 35.0390625vw;
    -webkit-flex-grow: 3;
    -ms-flex-grow: 3;
    flex-grow: 3;
  }
  .l-4,
  .m-4[class] {
    width: 320px;
    min-width: 46.71875vw;
    -webkit-flex-basis: 46.71875vw;
    flex-basis: 46.71875vw;
    -webkit-flex-grow: 4;
    -ms-flex-grow: 4;
    flex-grow: 4;
  }
  .l-5,
  .m-5[class] {
    width: 400px;
    min-width: 58.3984375vw;
    -webkit-flex-basis: 58.3984375vw;
    flex-basis: 58.3984375vw;
    -webkit-flex-grow: 5;
    -ms-flex-grow: 5;
    flex-grow: 5;
  }
  .l-6,
  .m-6[class] {
    width: 480px;
    min-width: 70.078125vw;
    -webkit-flex-basis: 70.078125vw;
    flex-basis: 70.078125vw;
    -webkit-flex-grow: 6;
    -ms-flex-grow: 6;
    flex-grow: 6;
  }
  .l-7,
  .m-7[class] {
    width: 560px;
    min-width: 81.7578125vw;
    -webkit-flex-basis: 81.7578125vw;
    flex-basis: 81.7578125vw;
    -webkit-flex-grow: 7;
    -ms-flex-grow: 7;
    flex-grow: 7;
  }
  .l-8,
  .m-8[class] {
    width: 640px;
    min-width: 93.4375vw;
    -webkit-flex-basis: 93.4375vw;
    flex-basis: 93.4375vw;
    -webkit-flex-grow: 8;
    -ms-flex-grow: 8;
    flex-grow: 8;
  }
  .l-9,
  .l-10,
  .l-11,
  .l-12 {
    width: 640px;
    min-width: 93.4375vw;
    -webkit-flex-basis: 93.4375vw;
    flex-basis: 93.4375vw;
    -webkit-flex-grow: 8;
    -ms-flex-grow: 8;
    flex-grow: 8;
  }
  .m-1.fix[class], .m-2.fix[class], .m-3.fix[class], .m-4.fix[class], .m-5.fix[class], .m-6.fix[class], .m-7.fix[class], .m-8.fix[class] {
    min-width: 0px;
    flex-grow: 0;
  }
  /*  */
  .no-flex .m-1, .no-flex .m-2, .no-flex .m-3, .no-flex .m-4, .no-flex .m-5, .no-flex .m-6, .no-flex .m-7, .no-flex .m-8 {
    min-width: 0px;
  }
  /*  */
  /*  */
  .m-fix[class] {
    min-width: 0px;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }
  /*  */
  /*  */
  .m-align-center {
    text-align: center;
  }
  .m-align-right {
    text-align: right;
  }
  .m-align-left {
    text-align: left;
  }
}
@media screen and (max-width: 659.9px) {
  .grid > .container {
    max-width: 639px;
  }
  .s-0[class][class][class] {
    display: none;
  }
  .l-1,
  .m-1[class],
  .s-1[class][class] {
    width: 80px;
    min-width: 21.71875vw;
    -webkit-flex-basis: 21.71875vw;
    flex-basis: 21.71875vw;
    -webkit-flex-grow: 1;
    -ms-flex-grow: 1;
    flex-grow: 1;
  }
  .l-2,
  .m-2[class],
  .s-2[class][class] {
    width: 160px;
    min-width: 43.4375vw;
    -webkit-flex-basis: 43.4375vw;
    flex-basis: 43.4375vw;
    -webkit-flex-grow: 2;
    -ms-flex-grow: 2;
    flex-grow: 2;
  }
  .l-3,
  .m-3[class],
  .s-3[class][class] {
    width: 240px;
    min-width: 65.15625vw;
    -webkit-flex-basis: 65.15625vw;
    flex-basis: 65.15625vw;
    -webkit-flex-grow: 3;
    -ms-flex-grow: 3;
    flex-grow: 3;
  }
  .l-4,
  .m-4[class],
  .s-4[class][class] {
    width: 320px;
    min-width: 86.875vw;
    -webkit-flex-basis: 86.875vw;
    flex-basis: 86.875vw;
    -webkit-flex-grow: 4;
    -ms-flex-grow: 4;
    flex-grow: 4;
  }
  .l-5,
  .m-5[class],
  .l-6,
  .m-6[class],
  .l-7,
  .m-7[class],
  .l-8,
  .m-8[class],
  .l-9,
  .l-10,
  .l-11,
  .l-12 {
    width: 320px;
    min-width: 86.875vw;
    -webkit-flex-basis: 86.875vw;
    flex-basis: 86.875vw;
    -webkit-flex-grow: 4;
    -ms-flex-grow: 4;
    flex-grow: 4;
  }
  .s-1.fix[class][class], .s-2.fix[class][class], .s-3.fix[class][class], .s-4.fix[class][class] {
    min-width: 0px;
    flex-grow: 0;
  }
  /*  */
  .no-flex > .grid {
    max-width: 639px;
  }
  .no-flex .s-1, .no-flex .s-2, .no-flex .s-3, .no-flex .s-4 {
    min-width: 0px;
  }
  /*  */
  /*  */
  .s-fix[class][class] {
    min-width: 0px;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }
  /*  */
  /*  */
  .m-align-center,
  .s-align-center[class] {
    text-align: center;
  }
  .m-align-right,
  .s-align-right[class] {
    text-align: right;
  }
  .m-align-left,
  .s-align-left[class] {
    text-align: left;
  }
}
/*  */

/* Hotfix Boxing - chpo 21.05.2019 */
@media screen and (min-width: 980px) {
  body {
    max-width: 1002px;
    min-width: auto;
    width: 1002px;
    margin-left: auto;
    margin-right: auto;
    background-color: #FFFFFF;
  }
  body > .grid {
    max-width: 1000px;
    min-width: auto;
    width: 1000px;
    display: inline-block;
    border-left: 1px solid #C2C2C2;
    border-right: 1px solid #C2C2C2;
    background-color: #FFFFFF;
    z-index: 0;
  }
  /* wegen error message hinzugefuegt */
  body > .grid > .fullwidth,
  body > .grid > .container.l-12:not(.fix) {
    width: 1000px;
    max-width: 1000px;
    min-width: auto;
    padding-right: 0;
    padding-left: 0;
  }
  body > .grid > .container.fullwidth .container.l-12 {
    max-width: 960px;
    min-width: auto;
    width: 960px;
    padding-right: 20px;
    padding-left: 20px;
  }
}


@font-face {
    font-family: 'WebdeSans';
    src: url('//img.ui-portal.de/ci/webde/global/fonts/web.de-sans/web.de-sans-medium.eot');
    src: url('//img.ui-portal.de/ci/webde/global/fonts/web.de-sans/web.de-sans-medium.eot?#iefix') format('embedded-opentype'),
    url('//img.ui-portal.de/ci/webde/global/fonts/web.de-sans/web.de-sans-medium.woff') format('woff'),
    url('//img.ui-portal.de/ci/webde/global/fonts/web.de-sans/web.de-sans-medium.ttf') format('truetype');
    font-weight: ;
    font-style: ;
}
@font-face {
    font-family: 'WebdeSansRegular';
    src: url('//img.ui-portal.de/ci/webde/global/fonts/web.de-sans/web.de-sans-regular.eot');
    src: url('//img.ui-portal.de/ci/webde/global/fonts/web.de-sans/web.de-sans-regular.eot?#iefix') format('embedded-opentype'),
    url('//img.ui-portal.de/ci/webde/global/fonts/web.de-sans/web.de-sans-regular.woff') format('woff'),
    url('//img.ui-portal.de/ci/webde/global/fonts/web.de-sans/web.de-sans-regular.ttf') format('truetype');
    font-weight: ;
    font-style: ;
}
@font-face {
    font-family: 'WebdeScript';
    src: url('//img.ui-portal.de/ci/webde/global/fonts/web.de-script/web.de-script-regular.eot');
    src: url('//img.ui-portal.de/ci/webde/global/fonts/web.de-script/web.de-script-regular.eot?#iefix') format('embedded-opentype'),
    url('//img.ui-portal.de/ci/webde/global/fonts/web.de-script/web.de-script-regular.woff') format('woff'),
    url('//img.ui-portal.de/ci/webde/global/fonts/web.de-script/web.de-script-regular.ttf') format('truetype');
    font-weight: ;
    font-style: ;
}


body {
    font-family: 'WebdeSansRegular', Verdana, sans-serif;
    color: #333333;
}
* {
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;
}

a {
	color: #2269C3;
	text-decoration: none;
}
a:hover,
a:focus {
	text-decoration: underline;
}
a:active,
a:visited {
	color: #6496D5;
}
a img {
	border: 0px;
}

h1, h2, h3, h4, h5, h6,
.size-9, .size-8, .size-7, .size-6, .size-5, .size-4, .size-3 {
    font-family: 'WebdeSans', Arial, sans-serif;
    font-weight: 400;
}
.script {
    font-family: 'WebdeScript', Arial, sans-serif;
    color: #F2B600;
}

/* Defaults > können durch setzen der responsiven Size-Klassen überschrieben werden. .[screensize]-size-[headlineformat]  */

h1.xl, span.headline-1.xl, [class].size-9 {
    font-size: 64px; line-height: 72px;
}
h1, span.headline-1, [class].size-8 {
    font-size: 56px; line-height: 64px;
}
h2.xl, span.headline-2.xl, [class].size-7 {
    font-size: 48px; line-height: 56px;
}
h2, span.headline-2, [class].size-6 {
    font-size: 40px; line-height: 48px;
}
h3.xl, span.headline-3.xl, [class].size-5 {
    font-size: 32px; line-height: 40px;
}
h3, span.headline-3, [class].size-4 {
    font-size: 24px; line-height: 32px;
}
h4, span.headline-4, [class].size-3 {
    font-size: 20px; line-height: 28px;
}
p, [class].size-2 {
    font-size: 16px; line-height: 24px;
}
.note, [class].size-1 {
    font-size: 14px; line-height: 22px;
}
.icontext, [class].size-0 {
    font-size: 9px; line-height: 16px;
    font-family: Verdana, sans-serif;
}






@media screen and (min-width: 980px) {
    [class][class].l-size-9 { font-size: 64px; line-height: 72px; }
    [class][class].l-size-8 { font-size: 56px; line-height: 64px; }
    [class][class].l-size-7 { font-size: 48px; line-height: 56px; }
    [class][class].l-size-6 { font-size: 40px; line-height: 48px; }
    [class][class].l-size-5 { font-size: 32px; line-height: 40px; }
    [class][class].l-size-4 { font-size: 24px; line-height: 32px; }
    [class][class].l-size-3 { font-size: 20px; line-height: 28px; }
    [class][class].l-size-2 { font-size: 16px; line-height: 24px;
    font-family: WebdeSans Regular, Verdana, sans-serif; }
    [class][class].l-size-1 { font-size: 14px; line-height: 22px;
    font-family: WebdeSans Regular, Verdana, sans-serif; }
}

@media screen and (max-width: 979.9px) {
    /* Defaults Größe M > können durch setzen der responsiven Size-Klassen überschrieben werden. .m-size-[headlineformat]  */
    h1.xl, span.headline-1.xl, [class].size-9 {   font-size: 48px; line-height: 56px; }
    h1, span.headline-1,[class].size-8 {          font-size: 48px; line-height: 56px; }
    h2.xl, span.headline-2, [class].size-7 {      font-size: 32px; line-height: 40px; }
    h2, span.headline-3, [class].size-6 {         font-size: 32px; line-height: 40px; }
    h3.xl, span.headline-4, [class].size-5 {      font-size: 24px; line-height: 32px; }
    h3, span.headline-5, [class].size-4 {         font-size: 20px; line-height: 24px; }
    h4, span.headline-4, [class].size-3 {         font-size: 20px; line-height: 28px; }
}

@media screen and (min-width: 660px) and (max-width: 979.9px) {
    [class][class].m-size-9 { font-size: 40px; line-height: 48px; }
    [class][class].m-size-8 { font-size: 40px; line-height: 48px; }
    [class][class].m-size-7 { font-size: 32px; line-height: 40px; }
    [class][class].m-size-6 { font-size: 32px; line-height: 40px; }
    [class][class].m-size-5 { font-size: 24px; line-height: 32px; }
    [class][class].m-size-4 { font-size: 20px; line-height: 28px; }
    [class][class].m-size-3 { font-size: 20px; line-height: 28px; }
    [class][class].m-size-2 { font-size: 16px; line-height: 24px;
    font-family: WebdeSans Regular, Verdana, sans-serif; }
    [class][class].m-size-1 { font-size: 14px; line-height: 22px;
    font-family: WebdeSans Regular, Verdana, sans-serif; }
}

@media screen and (max-width: 659.9px) {
    /* Defaults Größe S > können durch setzen der responsiven Size-Klassen überschrieben werden. .s-size-[headlineformat]  */
    h1.xl, span.headline-1.xl, [class].size-9 {   font-size: 32px; line-height: 40px; }
    h1, span.headline-1,[class].size-8 {          font-size: 48px; line-height: 56px; }
    h2.xl, span.headline-2, [class].size-7 {      font-size: 32px; line-height: 40px; }
    h2, span.headline-3, [class].size-6 {         font-size: 32px; line-height: 40px; }
    h3.xl, span.headline-4, [class].size-5 {      font-size: 24px; line-height: 32px; }
    h3, span.headline-5, [class].size-4 {         font-size: 20px; line-height: 24px; }
    h4, span.headline-4, [class].size-3 {         font-size: 20px; line-height: 28px; }

    [class][class].s-size-9 { font-size: 32px; line-height: 40px; }
    [class][class].s-size-8 { font-size: 32px; line-height: 40px; }
    [class][class].s-size-7 { font-size: 32px; line-height: 40px; }
    [class][class].s-size-6 { font-size: 32px; line-height: 40px; }
    [class][class].s-size-5 { font-size: 24px; line-height: 32px; }
    [class][class].s-size-4 { font-size: 20px; line-height: 28px; }
    [class][class].s-size-3 { font-size: 20px; line-height: 28px; }
    [class][class].s-size-2 { font-size: 16px; line-height: 24px;
    font-family: WebdeSans Regular, Verdana, sans-serif; }
    [class][class].s-size-1 { font-size: 14px; line-height: 22px;
    font-family: WebdeSans Regular, Verdana, sans-serif; }
}


h1,
h2,
h3,
h4,
h5,
p,
ul,
ol {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}
p > img {
  display: block;
}
.vspace-xxxl {
  padding-top: 100px;
  padding-bottom: 0px;
}
.vspace-xxxl > * {
  margin-top: 0px;
  margin-bottom: 100px;
}
.vspace-xxl {
  padding-top: 70px;
  padding-bottom: 0px;
}
.vspace-xxl > * {
  margin-top: 0px;
  margin-bottom: 70px;
}
.vspace-xl {
  padding-top: 50px;
  padding-bottom: 0px;
}
.vspace-xl > * {
  margin-top: 0px;
  margin-bottom: 50px;
}
.vspace-l {
  padding-top: 40px;
  padding-bottom: 0px;
}
.vspace-l > * {
  margin-top: 0px;
  margin-bottom: 40px;
}
.vspace-m {
  padding-top: 30px;
  padding-bottom: 0px;
}
.vspace-m > * {
  margin-top: 0px;
  margin-bottom: 30px;
}
.vspace-s {
  padding-top: 20px;
  padding-bottom: 0px;
}
.vspace-s > * {
  margin-top: 0px;
  margin-bottom: 20px;
}
.vspace-xs {
  padding-top: 10px;
  padding-bottom: 0px;
}
.vspace-xs > * {
  margin-top: 0px;
  margin-bottom: 10px;
}
@media screen and (max-width: 959px) {
  .vspace-xxxl {
    padding-top: 75px;
  }
  .vspace-xxxl > * {
    margin-bottom: 75px;
  }
  .vspace-xxl {
    padding-top: 38px;
  }
  .vspace-xxl > * {
    margin-bottom: 38px;
  }
  .vspace-xl {
    padding-top: 38px;
  }
  .vspace-xl > * {
    margin-bottom: 38px;
  }
  .vspace-l {
    padding-top: 30px;
  }
  .vspace-l > * {
    margin-bottom: 30px;
  }
  .vspace-m {
    padding-top: 22px;
  }
  .vspace-m > * {
    margin-bottom: 22px;
  }
  .vspace-s {
    padding-top: 15px;
  }
  .vspace-s > * {
    margin-bottom: 15px;
  }
  .vspace-xs {
    padding-top: 10px;
  }
  .vspace-xs > * {
    margin-bottom: 10px;
  }
}
.vspace-top-0 {
  padding-top: 0px;
}
.vspace-bottom-0 {
  margin-bottom: 0;
}
@media screen and (min-width: 960px) {
  .l-vspace-top-0 {
    padding-top: 0px;
  }
  .l-vspace-bottom-0 {
    margin-bottom: 0;
  }
}
@media screen and (min-width: 640px) and (max-width: 959px) {
  .m-vspace-top-0 {
    padding-top: 0px;
  }
  .m-vspace-bottom-0 {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 639px) {
  .s-vspace-top-0 {
    padding-top: 0px;
  }
  .s-vspace-bottom-0 {
    margin-bottom: 0;
  }
}
/**/
.debug.debug .vspace-xxxl {
  background-color: #FFCCCC;
}
.debug.debug .vspace-xxl {
  background-color: #CCFFCC;
}
.debug.debug .vspace-xl {
  background-color: #CCCCFF;
}
.debug.debug .vspace-l {
  background-color: #FFFFCC;
}
.debug.debug .vspace-m {
  background-color: #FFCCFF;
}
.debug.debug .vspace-s {
  background-color: #CCFFFF;
}
.debug.debug .vspace-xs {
  background-color: #FFCCAA;
}

.message {
	border-bottom: 3px solid black;
	/*padding: 20px;*/
	padding: 10px 10px 10px 44px;
	display: block;
	/**/border-radius: 5px;
	border-bottom: 0 none;/**/
	min-height: 44px;
	box-sizing: border-box;
}
.message .close.icon {
	display: none;
	float: right;
	margin: 0px 0px 0px 10px;
}
.js .message .close.icon {
	display: block;
	cursor: pointer;
}
.message.big {
	padding: 20px 20px 20px 88px;
	min-height: 88px;
}
.message .icon {
	float: left;
	margin-right: 10px;
	margin-left: -34px;
	position: relative;
}
.message.big .icon {
	margin-right: 20px;
	margin-left: -68px;
}
.message.big .close.icon {
	margin: 0px 0px 0px 20px;
}
.message .icon + * {
	margin-top: 0px;
}
.message.error {
	background-color: #F8EEEE;
	border-color: #D59394;
}
.message.info {
	background-color: #EFF4F8;
	border-color: #B9CFDD;
}
.message.warning {
	background-color: #FDF9EA;
	border-color: #F3DA79;
}
.message.success {
	background-color: #F1F6ED;
	border-color: #A9C88F;
}

.message .m.icon + h1,
.message .m.icon + h2,
.message .m.icon + h3,
.message .m.icon + h4,
.message .m.icon + h5,
.message .m.icon + h6 {
	font-family: Verdana, Arial, sans-serif;
    font-size: 16px;
    line-height: 25px;
	font-weight: 700;
	display: inline;
}

.message .m.icon ~ p {
	display: inline;
}

@media all and (max-width: 979.9px) {
	.message.big h1,
	.message.big h2,
	.message.big h3,
	.message.big h4,
	.message.big h5,
	.message.big h6 {
		font-size: 20px;
		line-height: 27px;
	}
}

@media all and (max-width: 659.9px) {
	.message.big {
		text-align: center;
		padding-left: 20px;
	}

	.message.big .icon {
		float: none;
		margin: 0;
	}
	.message.big .icon.close {
		float: right;
		margin: 0 0 0 -20px;
	}
}
.fullwidth.message {
	padding-left: 0px;
	padding-right: 0px;
	width: 100%;
}
.fullwidth.message > div {
	box-sizing: border-box;
	padding: 0px 10px 0px 54px;
}
.fullwidth.message.big > div {
	padding: 0px 20px 0px 88px;
}
.message > div.center {
	margin-left: auto;
	margin-right: auto;
}
/* basic teaser format */
.teaser {
    position: relative;
    align-self: flex-start;
}
.teaser.module {
    padding-left: 0px;
    padding-right: 0px;
}
.row .teaser {
    align-self: stretch;
}
.teaser img,
.teaser svg {
    width: 100%;
    height: auto;
}
.teaser .content img,
.teaser .content svg {
    width: auto;
}
/*.content * + h1, .content * + h2, .content * + h3, .content * + h4,
.content * + .headline-1, .content * + .headline-2, .content * + .headline-3, .content * + .headline-4 {
    margin-top: 10px;
    margin-bottom: 0px;
}*/
/*.content h1 + p, .content .headline-1 + p,
.content h2 + p, .content .headline-2 + p,
.content h3 + p, .content .headline-3 + p,
.content h4 + p, .content .headline-4 + p {
    margin-top: 0px;
}
.content p + p {
    margin-top: 10px;
}*/
.background {
    position: relative;
    margin-right: -100%;
    z-index: -1;
    max-width: none;
    float: left;
    width: 100%;
    height: auto;
}
.background > img,
.background > svg {
    margin-top: 0px;
}
.background + .content,
.service .secondary .background + .content {
    text-shadow: #FFFFFF 0px 0px 1px, #FFFFFF 0px 0px 1px;
}
.service .background + .content {
    text-shadow: #262626 0px 0px 1px, #262626 0px 0px 1px;
}
.background + .content .button,
.background + .content [role="button"] {
    text-shadow: none;
}

.teaser .visual,
.teaser .content {
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    position: relative;
    float: left;
}
.teaser .content .content {
    padding-left: 0px;
    padding-right: 0px;
}
.visual > img,
.visual > svg,
.visual > .icon {
    display: block;
}
.top {
    height: 50%;
}
.bottom {
    height: 50%;
}
.content.left,
.visual.left {
    width: 50%;
    float: left;
}
.content.right,
.visual.right {
    width: 50%;
    float: right;
}
.content.center,
.visual.center {
    margin-left: auto;
    margin-right: auto;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
}
a.teaser {
    display: block;
}
.teaser.row {
    display: table;
}
.teaser.row > * {
    display: table-cell;
    float: none;
    vertical-align: top;
}
.teaser.row > .middle {
    vertical-align: middle;
}
.teaser.row > .bottom {
    vertical-align: bottom;
}
@media screen and (min-width: 980px) {
    .l-top {
        max-height: 50%;
    }
    .l-bottom {
        max-height: 50%;
    }
    .l-left {
        max-width: 50%;
        float: left;
    }
    .l-right {
        max-width: 50%;
        float: right;
    }
    .l-center,
    [class].visual.l-center {
        -webkit-justify-content: center;
        -ms-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
    .teaser.l-row {
        display: table;
    }
    .teaser.l-row > * {
        display: table-cell;
        float: none;
        vertical-align: top;
    }
    .teaser.l-row > .middle {
        vertical-align: middle;
    }
    .teaser.l-row > .bottom {
        vertical-align: bottom;
    }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
    .m-top {
        max-height: 50%;
    }
    .m-bottom {
        max-height: 50%;
    }
    .m-left {
        max-width: 50%;
        float: left;
    }
    .m-right {
        max-width: 50%;
        float: right;
    }
    .m-center,
    [class].visual.m-center {
        -webkit-justify-content: center;
        -ms-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
    .teaser.m-row {
        display: table;
    }
    .teaser.m-row > * {
        display: table-cell;
        float: none;
        vertical-align: top;
    }
    .teaser.m-row > .middle {
        vertical-align: middle;
    }
    .teaser.m-row > .bottom {
        vertical-align: bottom;
    }
}
@media screen and (max-width: 659.9px) {
    .s-top {
        max-height: 50%;
    }
    .visual.s-top {
        display: table-caption;
    }
    .s-bottom {
        max-height: 50%;
    }
    .s-left {
        max-width: 50%;
        float: left;
    }
    .s-right {
        max-width: 50%;
        float: right;
    }
    .s-center,
    [class].visual.s-center {
        -webkit-justify-content: center;
        -ms-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
    .teaser.s-row {
        display: table;
    }
    .teaser.s-row > * {
        display: table-cell;
        float: none;
        vertical-align: top;
    }
    .teaser.s-row > .middle {
        vertical-align: middle;
    }
    .teaser.s-row > .bottom {
        vertical-align: bottom;
    }
}
.vertical {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
}
.vertical > .vertical {
    height: 100%;
    min-height: 200px;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-around;
    -ms-justify-content: space-around;
    justify-content: space-around;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -webkit-align-self: flex-start;
    -ms-align-self: flex-start;
    align-self: flex-start;
}
.vertical > .vertical:before {
    content: "";
    height: 10%;
    display: block;
}
.fullsize,
.fullsize .background {
    width: 100%;
    height: 100vh;
}
.vspace-xxxl .fullsize { margin-top: -100px; }
.vspace-xxl .fullsize { margin-top: -70px; }
.vspace-xl .fullsize { margin-top: -50px; }
.vspace-l .fullsize { margin-top: -40px; }
.vspace-m .fullsize { margin-top: -30px; }
.vspace-s .fullsize { margin-top: -20px; }
.vspace-xs .fullsize { margin-top: -10px; }
.halfsize,
.halfsize .background {
    width: 100%;
    height: 50vh;
}
.vertical > .vertical > * {
    padding-left: 10px;
    padding-right: 10px;
    max-width: 100%;
    flex: 1 0 auto;
}
.fullsize .background,
.halfsize .background {
    overflow: hidden;
}
.fullsize .background > img,
.fullsize .background > svg,
.halfsize .background > img,
.halfsize .background > svg {
    position: relative;
    width: auto;
    z-index: -1;
}
.fullsize .background > img,
.fullsize .background > svg {
    height: 100vh;
}
.halfsize .background > img,
.halfsize .background > svg {
    height: 50vh;
}
.background.top-center > img,
.background.top-center > svg {
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}
.background.top-right > img,
.background.top-right > svg {
    left: 100%;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
}
.background.center-left > img,
.background.center-left > svg {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.background.center > img,
.background.center > svg {
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.background.center-right > img,
.background.center-right > svg {
    left: 100%;
    top: 50%;
    -webkit-transform: translateX(-100%) translateY(-50%);
    -moz-transform: translateX(-100%) translateY(-50%);
    -ms-transform: translateX(-100%) translateY(-50%);
    transform: translateX(-100%) translateY(-50%);
}
.background.bottom-left > img,
.background.bottom-left > svg {
    top: 100%;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
}
.background.bottom-center > img,
.background.bottom-center > svg {
    left: 50%;
    top: 100%;
    -webkit-transform: translateX(-50%) translateY(-100%);
    -moz-transform: translateX(-50%) translateY(-100%);
    -ms-transform: translateX(-50%) translateY(-100%);
    transform: translateX(-50%) translateY(-100%);
}
.background.bottom-right > img,
.background.bottom-right > svg {
    left: 100%;
    top: 100%;
    -webkit-transform: translateX(-100%) translateY(-100%);
    -moz-transform: translateX(-100%) translateY(-100%);
    -ms-transform: translateX(-100%) translateY(-100%);
    transform: translateX(-100%) translateY(-100%);
}
@media screen and (min-aspect-ratio: 16/9) {
    .fullsize .background > img,
    .fullsize .background > svg,
    .halfsize .background > img,
    .halfsize .background > svg {
        width: 100vw;
        height: auto !important;
    }
}
.fullsize .vertical,
.halfsize .vertical {
    box-sizing: border-box;
}
/* fullwidth teaser formats */
.teaser.fullwidth .background[class*="height"] {
    overflow: hidden;
}
.teaser.fullwidth .background[class*="height"] img {
    position: relative;
    width: auto;
}
.teaser.fullwidth .background.height-620 img { height: 620px; }
.teaser.fullwidth .background.height-460 img { height: 460px; }
.teaser.fullwidth .background.height-300 img { height: 300px; }
.teaser.fullwidth .background.height-220 img { height: 220px; }
.teaser.fullwidth .background[class*="height"].sector-25 img { left: 25%; }
.teaser.fullwidth .background[class*="height"].sector-50 img { left: 50%; }
.teaser.fullwidth .background[class*="height"].sector-75 img { left: 75%; }
.teaser.fullwidth .background[class*="height"].sector-100 img { left: 100%; }
.teaser.fullwidth .background[class*="height"] img.sector-25 {
    -webkit-transform: translateX(-25%);
    -moz-transform: translateX(-25%);
    -ms-transform: translateX(-25%);
    -o-transform: translateX(-25%);
    transform: translateX(-25%);
}
.teaser.fullwidth .background[class*="height"] img.sector-50 {
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}
.teaser.fullwidth .background[class*="height"] img.sector-75 {
    -webkit-transform: translateX(-75%);
    -moz-transform: translateX(-75%);
    -ms-transform: translateX(-75%);
    -o-transform: translateX(-75%);
    transform: translateX(-75%);
}
.teaser.fullwidth .background[class*="height"] img.sector-25 {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
}
@media screen and (min-width: 980px) {
    .teaser.fullwidth .background.l-height-620 img { height: 620px; }
    .teaser.fullwidth .background.l-height-460 img { height: 460px; }
    .teaser.fullwidth .background.l-height-300 img { height: 300px; }
    .teaser.fullwidth .background.l-height-220 img { height: 220px; }
    .teaser.fullwidth .background[class*="height"].l-sector-25 img { left: 25%; }
    .teaser.fullwidth .background[class*="height"].l-sector-50 img { left: 50%; }
    .teaser.fullwidth .background[class*="height"].l-sector-75 img { left: 75%; }
    .teaser.fullwidth .background[class*="height"].l-sector-100 img { left: 100%; }
    .teaser.fullwidth .background[class*="height"] img.l-sector-25 {
        -webkit-transform: translateX(-25%);
        -moz-transform: translateX(-25%);
        -ms-transform: translateX(-25%);
        -o-transform: translateX(-25%);
        transform: translateX(-25%);
    }
    .teaser.fullwidth .background[class*="height"] img.l-sector-50 {
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    .teaser.fullwidth .background[class*="height"] img.l-sector-75 {
        -webkit-transform: translateX(-75%);
        -moz-transform: translateX(-75%);
        -ms-transform: translateX(-75%);
        -o-transform: translateX(-75%);
        transform: translateX(-75%);
    }
    .teaser.fullwidth .background[class*="height"] img.l-sector-100 {
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
    .teaser.fullwidth .background.m-height-620 img { height: 620px; }
    .teaser.fullwidth .background.m-height-460 img { height: 460px; }
    .teaser.fullwidth .background.m-height-300 img { height: 300px; }
    .teaser.fullwidth .background.m-height-220 img { height: 220px; }
    .teaser.fullwidth .background[class*="height"].m-sector-25 img { left: 25%; }
    .teaser.fullwidth .background[class*="height"].m-sector-50 img { left: 50%; }
    .teaser.fullwidth .background[class*="height"].m-sector-75 img { left: 75%; }
    .teaser.fullwidth .background[class*="height"].m-sector-100 img { left: 100%; }
    .teaser.fullwidth .background[class*="height"] img.m-sector-25 {
        -webkit-transform: translateX(-25%);
        -moz-transform: translateX(-25%);
        -ms-transform: translateX(-25%);
        -o-transform: translateX(-25%);
        transform: translateX(-25%);
    }
    .teaser.fullwidth .background[class*="height"] img.m-sector-50 {
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    .teaser.fullwidth .background[class*="height"] img.m-sector-75 {
        -webkit-transform: translateX(-75%);
        -moz-transform: translateX(-75%);
        -ms-transform: translateX(-75%);
        -o-transform: translateX(-75%);
        transform: translateX(-75%);
    }
    .teaser.fullwidth .background[class*="height"] img.m-sector-100 {
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}
@media screen and (max-width: 659.9px) {
    .teaser.fullwidth .background.s-height-620 img { height: 620px; }
    .teaser.fullwidth .background.s-height-460 img { height: 460px; }
    .teaser.fullwidth .background.s-height-300 img { height: 300px; }
    .teaser.fullwidth .background.s-height-220 img { height: 220px; }
    .teaser.fullwidth .background[class*="height"].s-sector-25 img { left: 25%; }
    .teaser.fullwidth .background[class*="height"].s-sector-50 img { left: 50%; }
    .teaser.fullwidth .background[class*="height"].s-sector-75 img { left: 75%; }
    .teaser.fullwidth .background[class*="height"].s-sector-100 img { left: 100%; }
    .teaser.fullwidth .background[class*="height"] img.s-sector-25 {
        -webkit-transform: translateX(-25%);
        -moz-transform: translateX(-25%);
        -ms-transform: translateX(-25%);
        -o-transform: translateX(-25%);
        transform: translateX(-25%);
    }
    .teaser.fullwidth .background[class*="height"] img.s-sector-50 {
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    .teaser.fullwidth .background[class*="height"] img.s-sector-75 {
        -webkit-transform: translateX(-75%);
        -moz-transform: translateX(-75%);
        -ms-transform: translateX(-75%);
        -o-transform: translateX(-75%);
        transform: translateX(-75%);
    }
    .teaser.fullwidth .background[class*="height"] img.s-sector-100 {
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

.hero-container {
  background-color: #F7F7F7;
}
.hero-container .background {
  z-index: 0;
}
/* Warum width: 50%;?
.content.right, .visual.right {
    width: 50%;
    float: right;
}
*/


.label {
	display: inline-block;
}

.label.top-left,
.label.top-center,
.label.top-right,
.label.center-left,
.label.center,
.label.center-right,
.label.bottom-left,
.label.bottom-center,
.label.bottom-right {
	position: absolute;
	margin: 10px 20px;
	z-index: 3;
}
.label.top-left {
	top: 0px;
	left: 0px;
}
.label.top-center {
	top: 0px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}
.label.top-right {
	top: 0px;
	right: 0px;
}
.label.center-left {
	top: 50%;
	left: 0px;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.label.center {
	top: 50%;
	left: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	margin: 0px;
}
.label.center-right {
	top: 50%;
	right: 0px;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.label.bottom-left {
	bottom: 0px;
	left: 0px;
}
.label.bottom-center {
	bottom: 0px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}
.label.bottom-right {
	bottom: 0px;
	right: 0px;
}
.label.service {
	padding: 0px 3px;
	border-radius: 3px;
	background: #F2B600;
}

span.icon {
    outline: none;
}

.icon:not(a) {
    outline: none;
}

.icon,
.s.icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(//img.ui-portal.de/club/login/icon-s.png) no-repeat;
    background: url(//img.ui-portal.de/club/login/icon.svg) no-repeat, none;
    background-size: 80px 600px;
    padding: 0px;
    text-align: left;
    text-indent: -10000px;
    overflow: hidden;
}
.m.icon {
    width: 24px;
    height: 24px;
    background: url(//img.ui-portal.de/club/login/icon-m.png) no-repeat;
    background: url(//img.ui-portal.de/club/login/icon.svg) no-repeat, none;
    background-size: 120px 900px;
}
.l.icon {
    width: 32px;
    height: 32px;
    background: url(//img.ui-portal.de/club/login/icon-l.png) no-repeat;
    background: url(//img.ui-portal.de/club/login/icon.svg) no-repeat, none;
    background-size: 160px 1200px;
}
.xl.icon {
    width: 40px;
    height: 40px;
    background: url(//img.ui-portal.de/club/login/icon-xl.png) no-repeat;
    background: url(//img.ui-portal.de/club/login/icon.svg) no-repeat, none;
    background-size: 200px 1500px;
}
.xxl.icon {
    width: 48px;
    height: 48px;
    background: url(//img.ui-portal.de/club/login/icon-xxl.png) no-repeat;
    background: url(//img.ui-portal.de/club/login/icon.svg) no-repeat, none;
    background-size: 240px 1800px;
}
.xxxl.icon {
    width: 60px;
    height: 60px;
    background: url(//img.ui-portal.de/club/login/icon-xxxl.png) no-repeat;
    background: url(//img.ui-portal.de/club/login/icon.svg) no-repeat, none;
    background-size: 300px 2250px;
}
.no-svg .s.icon { background-image: url(//img.ui-portal.de/club/login/icon-s.png); }
.no-svg .m.icon { background-image: url(//img.ui-portal.de/club/login/icon-m.png); }
.no-svg .l.icon { background-image: url(//img.ui-portal.de/club/login/icon-l.png); }
.no-svg .xl.icon { background-image: url(//img.ui-portal.de/club/login/icon-xl.png); }
.no-svg .xxl.icon { background-image: url(//img.ui-portal.de/club/login/icon-xxl.png); }
.no-svg .xxxl.icon { background-image: url(//img.ui-portal.de/club/login/icon-xxxl.png); }



.icon.up,
.icon.up.hover-default:hover,
a:hover .icon.up.hover-default,
li:hover .icon.up.hover-default  { background-position: 0px 0px; }
.icon.down,
.icon.down.hover-default:hover,
a:hover .icon.down.hover-default,
li:hover .icon.down.hover-default  { background-position: 0px -20px; }
.icon.back,
.icon.back.hover-default:hover,
a:hover .icon.back.hover-default,
li:hover .icon.back.hover-default  { background-position: 0px -40px; }
.icon.next,
.icon.next.hover-default:hover,
a:hover .icon.next.hover-default,
li:hover .icon.next.hover-default  { background-position: 0px -60px; }
.icon.burger,
.icon.burger.hover-default:hover,
a:hover .icon.burger.hover-default,
li:hover .icon.burger.hover-default  { background-position: 0px -80px; }
.icon.home,
.icon.home.hover-default:hover,
a:hover .icon.home.hover-default,
li:hover .icon.home.hover-default  { background-position: 0px -100px; }
.icon.close,
.icon.close.hover-default:hover,
a:hover .icon.close.hover-default,
li:hover .icon.close.hover-default  { background-position: 0px -120px; }
.icon.logout,
.icon.logout.hover-default:hover,
a:hover .icon.logout.hover-default,
li:hover .icon.logout.hover-default  { background-position: 0px -140px; }
.icon.search,
.icon.search.hover-default:hover,
a:hover .icon.search.hover-default,
li:hover .icon.search.hover-default  { background-position: 0px -160px; }
.icon.person,
.icon.person.hover-default:hover,
a:hover .icon.person.hover-default,
li:hover .icon.person.hover-default  { background-position: 0px -180px; }
.icon.basket,
.icon.basket.hover-default:hover,
a:hover .icon.basket.hover-default,
li:hover .icon.basket.hover-default  { background-position: 0px -200px; }
.icon.apps,
.icon.apps.hover-default:hover,
a:hover .icon.apps.hover-default,
li:hover .icon.apps.hover-default  { background-position: 0px -220px; }
.icon.email,
.icon.email.hover-default:hover,
a:hover .icon.email.hover-default,
li:hover .icon.email.hover-default  { background-position: 0px -240px; }
.icon.demail,
.icon.demail.hover-default:hover,
a:hover .icon.demail.hover-default,
li:hover .icon.demail.hover-default  { background-position: 0px -260px; }
.icon.mailcheck,
.icon.mailcheck.hover-default:hover,
a:hover .icon.mailcheck.hover-default,
li:hover .icon.mailcheck.hover-default  { background-position: 0px -280px; }
.icon.calendar,
.icon.calendar.hover-default:hover,
a:hover .icon.calendar.hover-default,
li:hover .icon.calendar.hover-default  { background-position: 0px -300px; }
.icon.clock,
.icon.clock.hover-default:hover,
a:hover .icon.clock.hover-default,
li:hover .icon.clock.hover-default  { background-position: 0px -320px; }
.icon.office,
.icon.office.hover-default:hover,
a:hover .icon.office.hover-default,
li:hover .icon.office.hover-default  { background-position: 0px -340px; }
.icon.cloud,
.icon.cloud.hover-default:hover,
a:hover .icon.cloud.hover-default,
li:hover .icon.cloud.hover-default  { background-position: 0px -360px; }
.icon.security,
.icon.security.hover-default:hover,
a:hover .icon.security.hover-default,
li:hover .icon.security.hover-default  { background-position: 0px -380px; }
.icon.overview,
.icon.overview.hover-default:hover,
a:hover .icon.overview.hover-default,
li:hover .icon.overview.hover-default  { background-position: 0px -400px; }
.icon.hint,
.icon.hint.hover-default:hover,
a:hover .icon.hint.hover-default,
li:hover .icon.hint.hover-default  { background-position: 0px -420px; }
.icon.google,
.icon.google.hover-default:hover,
a:hover .icon.google.hover-default,
li:hover .icon.google.hover-default  { background-position: 0px -440px; }
.icon.facebook,
.icon.facebook.hover-default:hover,
a:hover .icon.facebook.hover-default,
li:hover .icon.facebook.hover-default  { background-position: 0px -460px; }
.icon.twitter,
.icon.twitter.hover-default:hover,
a:hover .icon.twitter.hover-default,
li:hover .icon.twitter.hover-default  { background-position: 0px -480px; }
.icon.mail,
.icon.mail.hover-default:hover,
a:hover .icon.mail.hover-default,
li:hover .icon.mail.hover-default  { background-position: 0px -500px; }

.icon.success { background-position: 0px -520px; }
.icon.info { background-position: 0px -540px; }
.icon.warning { background-position: 0px -560px; }
.icon.error { background-position: 0px -580px; }

.icon.up.white,
.icon.up.hover-white:hover,
a:hover .icon.up.hover-white,
li:hover .icon.up.hover-white  { background-position: -20px 0px; }
.icon.down.white,
.icon.down.hover-white:hover,
a:hover .icon.down.hover-white,
li:hover .icon.down.hover-white  { background-position: -20px -20px; }
.icon.back.white,
.icon.back.hover-white:hover,
a:hover .icon.back.hover-white,
li:hover .icon.back.hover-white  { background-position: -20px -40px; }
.icon.next.white,
.icon.next.hover-white:hover,
a:hover .icon.next.hover-white,
li:hover .icon.next.hover-white  { background-position: -20px -60px; }
.icon.burger.white,
.icon.burger.hover-white:hover,
a:hover .icon.burger.hover-white,
li:hover .icon.burger.hover-white  { background-position: -20px -80px; }
.icon.home.white,
.icon.home.hover-white:hover,
a:hover .icon.home.hover-white,
li:hover .icon.home.hover-white  { background-position: -20px -100px; }
.icon.close.white,
.icon.close.hover-white:hover,
a:hover .icon.close.hover-white,
li:hover .icon.close.hover-white  { background-position: -20px -120px; }
.icon.logout.white,
.icon.logout.hover-white:hover,
a:hover .icon.logout.hover-white,
li:hover .icon.logout.hover-white  { background-position: -20px -140px; }
.icon.search.white,
.icon.search.hover-white:hover,
a:hover .icon.search.hover-white,
li:hover .icon.search.hover-white  { background-position: -20px -160px; }
.icon.person.white,
.icon.person.hover-white:hover,
a:hover .icon.person.hover-white,
li:hover .icon.person.hover-white  { background-position: -20px -180px; }
.icon.basket.white,
.icon.basket.hover-white:hover,
a:hover .icon.basket.hover-white,
li:hover .icon.basket.hover-white  { background-position: -20px -200px; }
.icon.apps.white,
.icon.apps.hover-white:hover,
a:hover .icon.apps.hover-white,
li:hover .icon.apps.hover-white  { background-position: -20px -220px; }
.icon.email.white,
.icon.email.hover-white:hover,
a:hover .icon.email.hover-white,
li:hover .icon.email.hover-white  { background-position: -20px -240px; }
.icon.demail.white,
.icon.demail.hover-white:hover,
a:hover .icon.demail.hover-white,
li:hover .icon.demail.hover-white  { background-position: -20px -260px; }
.icon.mailcheck.white,
.icon.mailcheck.hover-white:hover,
a:hover .icon.mailcheck.hover-white,
li:hover .icon.mailcheck.hover-white  { background-position: -20px -280px; }
.icon.calendar.white,
.icon.calendar.hover-white:hover,
a:hover .icon.calendar.hover-white,
li:hover .icon.calendar.hover-white  { background-position: -20px -300px; }
.icon.clock.white,
.icon.clock.hover-white:hover,
a:hover .icon.clock.hover-white,
li:hover .icon.clock.hover-white  { background-position: -20px -320px; }
.icon.office.white,
.icon.office.hover-white:hover,
a:hover .icon.office.hover-white,
li:hover .icon.office.hover-white  { background-position: -20px -340px; }
.icon.cloud.white,
.icon.cloud.hover-white:hover,
a:hover .icon.cloud.hover-white,
li:hover .icon.cloud.hover-white  { background-position: -20px -360px; }
.icon.security.white,
.icon.security.hover-white:hover,
a:hover .icon.security.hover-white,
li:hover .icon.security.hover-white  { background-position: -20px -380px; }
.icon.overview.white,
.icon.overview.hover-white:hover,
a:hover .icon.overview.hover-white,
li:hover .icon.overview.hover-white  { background-position: -20px -400px; }
.icon.hint.white,
.icon.hint.hover-white:hover,
a:hover .icon.hint.hover-white,
li:hover .icon.hint.hover-white  { background-position: -20px -420px; }
.icon.google.white,
.icon.google.hover-white:hover,
a:hover .icon.google.hover-white,
li:hover .icon.google.hover-white  { background-position: -20px -440px; }
.icon.facebook.white,
.icon.facebook.hover-white:hover,
a:hover .icon.facebook.hover-white,
li:hover .icon.facebook.hover-white  { background-position: -20px -460px; }
.icon.twitter.white,
.icon.twitter.hover-white:hover,
a:hover .icon.twitter.hover-white,
li:hover .icon.twitter.hover-white  { background-position: -20px -480px; }
.icon.mail.white,
.icon.mail.hover-white:hover,
a:hover .icon.mail.hover-white,
li:hover .icon.mail.hover-white  { background-position: -20px -500px; }

.icon.up.inactive,
.icon.up.hover-inactive:hover,
a:hover .icon.up.hover-inactive,
li:hover .icon.up.hover-inactive  { background-position: -40px 0px; }
.icon.down.inactive,
.icon.down.hover-inactive:hover,
a:hover .icon.down.hover-inactive,
li:hover .icon.down.hover-inactive  { background-position: -40px -20px; }
.icon.back.inactive,
.icon.back.hover-inactive:hover,
a:hover .icon.back.hover-inactive,
li:hover .icon.back.hover-inactive  { background-position: -40px -40px; }
.icon.next.inactive,
.icon.next.hover-inactive:hover,
a:hover .icon.next.hover-inactive,
li:hover .icon.next.hover-inactive  { background-position: -40px -60px; }
.icon.burger.inactive,
.icon.burger.hover-inactive:hover,
a:hover .icon.burger.hover-inactive,
li:hover .icon.burger.hover-inactive  { background-position: -40px -80px; }
.icon.home.inactive,
.icon.home.hover-inactive:hover,
a:hover .icon.home.hover-inactive,
li:hover .icon.home.hover-inactive  { background-position: -40px -100px; }
.icon.close.inactive,
.icon.close.hover-inactive:hover,
a:hover .icon.close.hover-inactive,
li:hover .icon.close.hover-inactive  { background-position: -40px -120px; }
.icon.logout.inactive,
.icon.logout.hover-inactive:hover,
a:hover .icon.logout.hover-inactive,
li:hover .icon.logout.hover-inactive  { background-position: -40px -140px; }
.icon.search.inactive,
.icon.search.hover-inactive:hover,
a:hover .icon.search.hover-inactive,
li:hover .icon.search.hover-inactive  { background-position: -40px -160px; }
.icon.person.inactive,
.icon.person.hover-inactive:hover,
a:hover .icon.person.hover-inactive,
li:hover .icon.person.hover-inactive  { background-position: -40px -180px; }
.icon.basket.inactive,
.icon.basket.hover-inactive:hover,
a:hover .icon.basket.hover-inactive,
li:hover .icon.basket.hover-inactive  { background-position: -40px -200px; }
.icon.apps.inactive,
.icon.apps.hover-inactive:hover,
a:hover .icon.apps.hover-inactive,
li:hover .icon.apps.hover-inactive  { background-position: -40px -220px; }
.icon.email.inactive,
.icon.email.hover-inactive:hover,
a:hover .icon.email.hover-inactive,
li:hover .icon.email.hover-inactive  { background-position: -40px -240px; }
.icon.demail.inactive,
.icon.demail.hover-inactive:hover,
a:hover .icon.demail.hover-inactive,
li:hover .icon.demail.hover-inactive  { background-position: -40px -260px; }
.icon.mailcheck.inactive,
.icon.mailcheck.hover-inactive:hover,
a:hover .icon.mailcheck.hover-inactive,
li:hover .icon.mailcheck.hover-inactive  { background-position: -40px -280px; }
.icon.calendar.inactive,
.icon.calendar.hover-inactive:hover,
a:hover .icon.calendar.hover-inactive,
li:hover .icon.calendar.hover-inactive  { background-position: -40px -300px; }
.icon.clock.inactive,
.icon.clock.hover-inactive:hover,
a:hover .icon.clock.hover-inactive,
li:hover .icon.clock.hover-inactive  { background-position: -40px -320px; }
.icon.office.inactive,
.icon.office.hover-inactive:hover,
a:hover .icon.office.hover-inactive,
li:hover .icon.office.hover-inactive  { background-position: -40px -340px; }
.icon.cloud.inactive,
.icon.cloud.hover-inactive:hover,
a:hover .icon.cloud.hover-inactive,
li:hover .icon.cloud.hover-inactive  { background-position: -40px -360px; }
.icon.security.inactive,
.icon.security.hover-inactive:hover,
a:hover .icon.security.hover-inactive,
li:hover .icon.security.hover-inactive  { background-position: -40px -380px; }
.icon.overview.inactive,
.icon.overview.hover-inactive:hover,
a:hover .icon.overview.hover-inactive,
li:hover .icon.overview.hover-inactive  { background-position: -40px -400px; }
.icon.hint.inactive,
.icon.hint.hover-inactive:hover,
a:hover .icon.hint.hover-inactive,
li:hover .icon.hint.hover-inactive  { background-position: -40px -420px; }
.icon.google.inactive,
.icon.google.hover-inactive:hover,
a:hover .icon.google.hover-inactive,
li:hover .icon.google.hover-inactive  { background-position: -40px -440px; }
.icon.facebook.inactive,
.icon.facebook.hover-inactive:hover,
a:hover .icon.facebook.hover-inactive,
li:hover .icon.facebook.hover-inactive  { background-position: -40px -460px; }
.icon.twitter.inactive,
.icon.twitter.hover-inactive:hover,
a:hover .icon.twitter.hover-inactive,
li:hover .icon.twitter.hover-inactive  { background-position: -40px -480px; }
.icon.mail.inactive,
.icon.mail.hover-inactive:hover,
a:hover .icon.mail.hover-inactive,
li:hover .icon.mail.hover-inactive  { background-position: -40px -500px; }

.icon.up.service,
.icon.up.hover-service:hover,
a:hover .icon.up.hover-service,
li:hover .icon.up.hover-service  { background-position: -60px 0px; }
.icon.down.service,
.icon.down.hover-service:hover,
a:hover .icon.down.hover-service,
li:hover .icon.down.hover-service  { background-position: -60px -20px; }
.icon.back.service,
.icon.back.hover-service:hover,
a:hover .icon.back.hover-service,
li:hover .icon.back.hover-service  { background-position: -60px -40px; }
.icon.next.service,
.icon.next.hover-service:hover,
a:hover .icon.next.hover-service,
li:hover .icon.next.hover-service  { background-position: -60px -60px; }
.icon.burger.service,
.icon.burger.hover-service:hover,
a:hover .icon.burger.hover-service,
li:hover .icon.burger.hover-service  { background-position: -60px -80px; }
.icon.home.service,
.icon.home.hover-service:hover,
a:hover .icon.home.hover-service,
li:hover .icon.home.hover-service  { background-position: -60px -100px; }
.icon.close.service,
.icon.close.hover-service:hover,
a:hover .icon.close.hover-service,
li:hover .icon.close.hover-service  { background-position: -60px -120px; }
.icon.logout.service,
.icon.logout.hover-service:hover,
a:hover .icon.logout.hover-service,
li:hover .icon.logout.hover-service  { background-position: -60px -140px; }
.icon.search.service,
.icon.search.hover-service:hover,
a:hover .icon.search.hover-service,
li:hover .icon.search.hover-service  { background-position: -60px -160px; }
.icon.person.service,
.icon.person.hover-service:hover,
a:hover .icon.person.hover-service,
li:hover .icon.person.hover-service  { background-position: -60px -180px; }
.icon.basket.service,
.icon.basket.hover-service:hover,
a:hover .icon.basket.hover-service,
li:hover .icon.basket.hover-service  { background-position: -60px -200px; }
.icon.apps.service,
.icon.apps.hover-service:hover,
a:hover .icon.apps.hover-service,
li:hover .icon.apps.hover-service  { background-position: -60px -220px; }
.icon.email.service,
.icon.email.hover-service:hover,
a:hover .icon.email.hover-service,
li:hover .icon.email.hover-service  { background-position: -60px -240px; }
.icon.demail.service,
.icon.demail.hover-service:hover,
a:hover .icon.demail.hover-service,
li:hover .icon.demail.hover-service  { background-position: -60px -260px; }
.icon.mailcheck.service,
.icon.mailcheck.hover-service:hover,
a:hover .icon.mailcheck.hover-service,
li:hover .icon.mailcheck.hover-service  { background-position: -60px -280px; }
.icon.calendar.service,
.icon.calendar.hover-service:hover,
a:hover .icon.calendar.hover-service,
li:hover .icon.calendar.hover-service  { background-position: -60px -300px; }
.icon.clock.service,
.icon.clock.hover-service:hover,
a:hover .icon.clock.hover-service,
li:hover .icon.clock.hover-service  { background-position: -60px -320px; }
.icon.office.service,
.icon.office.hover-service:hover,
a:hover .icon.office.hover-service,
li:hover .icon.office.hover-service  { background-position: -60px -340px; }
.icon.cloud.service,
.icon.cloud.hover-service:hover,
a:hover .icon.cloud.hover-service,
li:hover .icon.cloud.hover-service  { background-position: -60px -360px; }
.icon.security.service,
.icon.security.hover-service:hover,
a:hover .icon.security.hover-service,
li:hover .icon.security.hover-service  { background-position: -60px -380px; }
.icon.overview.service,
.icon.overview.hover-service:hover,
a:hover .icon.overview.hover-service,
li:hover .icon.overview.hover-service  { background-position: -60px -400px; }
.icon.hint.service,
.icon.hint.hover-service:hover,
a:hover .icon.hint.hover-service,
li:hover .icon.hint.hover-service  { background-position: -60px -420px; }
.icon.google.service,
.icon.google.hover-service:hover,
a:hover .icon.google.hover-service,
li:hover .icon.google.hover-service  { background-position: -60px -440px; }
.icon.facebook.service,
.icon.facebook.hover-service:hover,
a:hover .icon.facebook.hover-service,
li:hover .icon.facebook.hover-service  { background-position: -60px -460px; }
.icon.twitter.service,
.icon.twitter.hover-service:hover,
a:hover .icon.twitter.hover-service,
li:hover .icon.twitter.hover-service  { background-position: -60px -480px; }
.icon.mail.service,
.icon.mail.hover-service:hover,
a:hover .icon.mail.hover-service,
li:hover .icon.mail.hover-service  { background-position: -60px -500px; }



.m.icon.up,
.m.icon.up.hover-default:hover,
a:hover .m.icon.up.hover-default,
li:hover .m.icon.up.hover-default { background-position: 0px 0px; }
.m.icon.down,
.m.icon.down.hover-default:hover,
a:hover .m.icon.down.hover-default,
li:hover .m.icon.down.hover-default { background-position: 0px -30px; }
.m.icon.back,
.m.icon.back.hover-default:hover,
a:hover .m.icon.back.hover-default,
li:hover .m.icon.back.hover-default { background-position: 0px -60px; }
.m.icon.next,
.m.icon.next.hover-default:hover,
a:hover .m.icon.next.hover-default,
li:hover .m.icon.next.hover-default { background-position: 0px -90px; }
.m.icon.burger,
.m.icon.burger.hover-default:hover,
a:hover .m.icon.burger.hover-default,
li:hover .m.icon.burger.hover-default { background-position: 0px -120px; }
.m.icon.home,
.m.icon.home.hover-default:hover,
a:hover .m.icon.home.hover-default,
li:hover .m.icon.home.hover-default { background-position: 0px -150px; }
.m.icon.close,
.m.icon.close.hover-default:hover,
a:hover .m.icon.close.hover-default,
li:hover .m.icon.close.hover-default { background-position: 0px -180px; }
.m.icon.logout,
.m.icon.logout.hover-default:hover,
a:hover .m.icon.logout.hover-default,
li:hover .m.icon.logout.hover-default { background-position: 0px -210px; }
.m.icon.search,
.m.icon.search.hover-default:hover,
a:hover .m.icon.search.hover-default,
li:hover .m.icon.search.hover-default { background-position: 0px -240px; }
.m.icon.person,
.m.icon.person.hover-default:hover,
a:hover .m.icon.person.hover-default,
li:hover .m.icon.person.hover-default { background-position: 0px -270px; }
.m.icon.basket,
.m.icon.basket.hover-default:hover,
a:hover .m.icon.basket.hover-default,
li:hover .m.icon.basket.hover-default { background-position: 0px -300px; }
.m.icon.apps,
.m.icon.apps.hover-default:hover,
a:hover .m.icon.apps.hover-default,
li:hover .m.icon.apps.hover-default { background-position: 0px -330px; }
.m.icon.email,
.m.icon.email.hover-default:hover,
a:hover .m.icon.email.hover-default,
li:hover .m.icon.email.hover-default { background-position: 0px -360px; }
.m.icon.demail,
.m.icon.demail.hover-default:hover,
a:hover .m.icon.demail.hover-default,
li:hover .m.icon.demail.hover-default { background-position: 0px -390px; }
.m.icon.mailcheck,
.m.icon.mailcheck.hover-default:hover,
a:hover .m.icon.mailcheck.hover-default,
li:hover .m.icon.mailcheck.hover-default { background-position: 0px -420px; }
.m.icon.calendar,
.m.icon.calendar.hover-default:hover,
a:hover .m.icon.calendar.hover-default,
li:hover .m.icon.calendar.hover-default { background-position: 0px -450px; }
.m.icon.clock,
.m.icon.clock.hover-default:hover,
a:hover .m.icon.clock.hover-default,
li:hover .m.icon.clock.hover-default { background-position: 0px -480px; }
.m.icon.office,
.m.icon.office.hover-default:hover,
a:hover .m.icon.office.hover-default,
li:hover .m.icon.office.hover-default { background-position: 0px -510px; }
.m.icon.cloud,
.m.icon.cloud.hover-default:hover,
a:hover .m.icon.cloud.hover-default,
li:hover .m.icon.cloud.hover-default { background-position: 0px -540px; }
.m.icon.security,
.m.icon.security.hover-default:hover,
a:hover .m.icon.security.hover-default,
li:hover .m.icon.security.hover-default { background-position: 0px -570px; }
.m.icon.overview,
.m.icon.overview.hover-default:hover,
a:hover .m.icon.overview.hover-default,
li:hover .m.icon.overview.hover-default { background-position: 0px -600px; }
.m.icon.hint,
.m.icon.hint.hover-default:hover,
a:hover .m.icon.hint.hover-default,
li:hover .m.icon.hint.hover-default { background-position: 0px -630px; }
.m.icon.google,
.m.icon.google.hover-default:hover,
a:hover .m.icon.google.hover-default,
li:hover .m.icon.google.hover-default { background-position: 0px -660px; }
.m.icon.facebook,
.m.icon.facebook.hover-default:hover,
a:hover .m.icon.facebook.hover-default,
li:hover .m.icon.facebook.hover-default { background-position: 0px -690px; }
.m.icon.twitter,
.m.icon.twitter.hover-default:hover,
a:hover .m.icon.twitter.hover-default,
li:hover .m.icon.twitter.hover-default { background-position: 0px -720px; }
.m.icon.mail,
.m.icon.mail.hover-default:hover,
a:hover .m.icon.mail.hover-default,
li:hover .m.icon.mail.hover-default { background-position: 0px -750px; }

.m.icon.success { background-position: 0px -780px; }
.m.icon.info { background-position: 0px -810px; }
.m.icon.warning { background-position: 0px -840px; }
.m.icon.error { background-position: 0px -870px; }

.m.icon.up.white,
.m.icon.up.hover-white:hover,
a:hover .m.icon.up.hover-white,
li:hover .m.icon.up.hover-white { background-position: -30px 0px; }
.m.icon.down.white,
.m.icon.down.hover-white:hover,
a:hover .m.icon.down.hover-white,
li:hover .m.icon.down.hover-white { background-position: -30px -30px; }
.m.icon.back.white,
.m.icon.back.hover-white:hover,
a:hover .m.icon.back.hover-white,
li:hover .m.icon.back.hover-white { background-position: -30px -60px; }
.m.icon.next.white,
.m.icon.next.hover-white:hover,
a:hover .m.icon.next.hover-white,
li:hover .m.icon.next.hover-white { background-position: -30px -90px; }
.m.icon.burger.white,
.m.icon.burger.hover-white:hover,
a:hover .m.icon.burger.hover-white,
li:hover .m.icon.burger.hover-white { background-position: -30px -120px; }
.m.icon.home.white,
.m.icon.home.hover-white:hover,
a:hover .m.icon.home.hover-white,
li:hover .m.icon.home.hover-white { background-position: -30px -150px; }
.m.icon.close.white,
.m.icon.close.hover-white:hover,
a:hover .m.icon.close.hover-white,
li:hover .m.icon.close.hover-white { background-position: -30px -180px; }
.m.icon.logout.white,
.m.icon.logout.hover-white:hover,
a:hover .m.icon.logout.hover-white,
li:hover .m.icon.logout.hover-white { background-position: -30px -210px; }
.m.icon.search.white,
.m.icon.search.hover-white:hover,
a:hover .m.icon.search.hover-white,
li:hover .m.icon.search.hover-white { background-position: -30px -240px; }
.m.icon.person.white,
.m.icon.person.hover-white:hover,
a:hover .m.icon.person.hover-white,
li:hover .m.icon.person.hover-white { background-position: -30px -270px; }
.m.icon.basket.white,
.m.icon.basket.hover-white:hover,
a:hover .m.icon.basket.hover-white,
li:hover .m.icon.basket.hover-white { background-position: -30px -300px; }
.m.icon.apps.white,
.m.icon.apps.hover-white:hover,
a:hover .m.icon.apps.hover-white,
li:hover .m.icon.apps.hover-white { background-position: -30px -330px; }
.m.icon.email.white,
.m.icon.email.hover-white:hover,
a:hover .m.icon.email.hover-white,
li:hover .m.icon.email.hover-white { background-position: -30px -360px; }
.m.icon.demail.white,
.m.icon.demail.hover-white:hover,
a:hover .m.icon.demail.hover-white,
li:hover .m.icon.demail.hover-white { background-position: -30px -390px; }
.m.icon.mailcheck.white,
.m.icon.mailcheck.hover-white:hover,
a:hover .m.icon.mailcheck.hover-white,
li:hover .m.icon.mailcheck.hover-white { background-position: -30px -420px; }
.m.icon.calendar.white,
.m.icon.calendar.hover-white:hover,
a:hover .m.icon.calendar.hover-white,
li:hover .m.icon.calendar.hover-white { background-position: -30px -450px; }
.m.icon.clock.white,
.m.icon.clock.hover-white:hover,
a:hover .m.icon.clock.hover-white,
li:hover .m.icon.clock.hover-white { background-position: -30px -480px; }
.m.icon.office.white,
.m.icon.office.hover-white:hover,
a:hover .m.icon.office.hover-white,
li:hover .m.icon.office.hover-white { background-position: -30px -510px; }
.m.icon.cloud.white,
.m.icon.cloud.hover-white:hover,
a:hover .m.icon.cloud.hover-white,
li:hover .m.icon.cloud.hover-white { background-position: -30px -540px; }
.m.icon.security.white,
.m.icon.security.hover-white:hover,
a:hover .m.icon.security.hover-white,
li:hover .m.icon.security.hover-white { background-position: -30px -570px; }
.m.icon.overview.white,
.m.icon.overview.hover-white:hover,
a:hover .m.icon.overview.hover-white,
li:hover .m.icon.overview.hover-white { background-position: -30px -600px; }
.m.icon.hint.white,
.m.icon.hint.hover-white:hover,
a:hover .m.icon.hint.hover-white,
li:hover .m.icon.hint.hover-white { background-position: -30px -630px; }
.m.icon.google.white,
.m.icon.google.hover-white:hover,
a:hover .m.icon.google.hover-white,
li:hover .m.icon.google.hover-white { background-position: -30px -660px; }
.m.icon.facebook.white,
.m.icon.facebook.hover-white:hover,
a:hover .m.icon.facebook.hover-white,
li:hover .m.icon.facebook.hover-white { background-position: -30px -690px; }
.m.icon.twitter.white,
.m.icon.twitter.hover-white:hover,
a:hover .m.icon.twitter.hover-white,
li:hover .m.icon.twitter.hover-white { background-position: -30px -720px; }
.m.icon.mail.white,
.m.icon.mail.hover-white:hover,
a:hover .m.icon.mail.hover-white,
li:hover .m.icon.mail.hover-white { background-position: -30px -750px; }

.m.icon.up.inactive,
.m.icon.up.hover-inactive:hover,
a:hover .m.icon.up.hover-inactive,
li:hover .m.icon.up.hover-inactive { background-position: -60px 0px; }
.m.icon.down.inactive,
.m.icon.down.hover-inactive:hover,
a:hover .m.icon.down.hover-inactive,
li:hover .m.icon.down.hover-inactive { background-position: -60px -30px; }
.m.icon.back.inactive,
.m.icon.back.hover-inactive:hover,
a:hover .m.icon.back.hover-inactive,
li:hover .m.icon.back.hover-inactive { background-position: -60px -60px; }
.m.icon.next.inactive,
.m.icon.next.hover-inactive:hover,
a:hover .m.icon.next.hover-inactive,
li:hover .m.icon.next.hover-inactive { background-position: -60px -90px; }
.m.icon.burger.inactive,
.m.icon.burger.hover-inactive:hover,
a:hover .m.icon.burger.hover-inactive,
li:hover .m.icon.burger.hover-inactive { background-position: -60px -120px; }
.m.icon.home.inactive,
.m.icon.home.hover-inactive:hover,
a:hover .m.icon.home.hover-inactive,
li:hover .m.icon.home.hover-inactive { background-position: -60px -150px; }
.m.icon.close.inactive,
.m.icon.close.hover-inactive:hover,
a:hover .m.icon.close.hover-inactive,
li:hover .m.icon.close.hover-inactive { background-position: -60px -180px; }
.m.icon.logout.inactive,
.m.icon.logout.hover-inactive:hover,
a:hover .m.icon.logout.hover-inactive,
li:hover .m.icon.logout.hover-inactive { background-position: -60px -210px; }
.m.icon.search.inactive,
.m.icon.search.hover-inactive:hover,
a:hover .m.icon.search.hover-inactive,
li:hover .m.icon.search.hover-inactive { background-position: -60px -240px; }
.m.icon.person.inactive,
.m.icon.person.hover-inactive:hover,
a:hover .m.icon.person.hover-inactive,
li:hover .m.icon.person.hover-inactive { background-position: -60px -270px; }
.m.icon.basket.inactive,
.m.icon.basket.hover-inactive:hover,
a:hover .m.icon.basket.hover-inactive,
li:hover .m.icon.basket.hover-inactive { background-position: -60px -300px; }
.m.icon.apps.inactive,
.m.icon.apps.hover-inactive:hover,
a:hover .m.icon.apps.hover-inactive,
li:hover .m.icon.apps.hover-inactive { background-position: -60px -330px; }
.m.icon.email.inactive,
.m.icon.email.hover-inactive:hover,
a:hover .m.icon.email.hover-inactive,
li:hover .m.icon.email.hover-inactive { background-position: -60px -360px; }
.m.icon.demail.inactive,
.m.icon.demail.hover-inactive:hover,
a:hover .m.icon.demail.hover-inactive,
li:hover .m.icon.demail.hover-inactive { background-position: -60px -390px; }
.m.icon.mailcheck.inactive,
.m.icon.mailcheck.hover-inactive:hover,
a:hover .m.icon.mailcheck.hover-inactive,
li:hover .m.icon.mailcheck.hover-inactive { background-position: -60px -420px; }
.m.icon.calendar.inactive,
.m.icon.calendar.hover-inactive:hover,
a:hover .m.icon.calendar.hover-inactive,
li:hover .m.icon.calendar.hover-inactive { background-position: -60px -450px; }
.m.icon.clock.inactive,
.m.icon.clock.hover-inactive:hover,
a:hover .m.icon.clock.hover-inactive,
li:hover .m.icon.clock.hover-inactive { background-position: -60px -480px; }
.m.icon.office.inactive,
.m.icon.office.hover-inactive:hover,
a:hover .m.icon.office.hover-inactive,
li:hover .m.icon.office.hover-inactive { background-position: -60px -510px; }
.m.icon.cloud.inactive,
.m.icon.cloud.hover-inactive:hover,
a:hover .m.icon.cloud.hover-inactive,
li:hover .m.icon.cloud.hover-inactive { background-position: -60px -540px; }
.m.icon.security.inactive,
.m.icon.security.hover-inactive:hover,
a:hover .m.icon.security.hover-inactive,
li:hover .m.icon.security.hover-inactive { background-position: -60px -570px; }
.m.icon.overview.inactive,
.m.icon.overview.hover-inactive:hover,
a:hover .m.icon.overview.hover-inactive,
li:hover .m.icon.overview.hover-inactive { background-position: -60px -600px; }
.m.icon.hint.inactive,
.m.icon.hint.hover-inactive:hover,
a:hover .m.icon.hint.hover-inactive,
li:hover .m.icon.hint.hover-inactive { background-position: -60px -630px; }
.m.icon.google.inactive,
.m.icon.google.hover-inactive:hover,
a:hover .m.icon.google.hover-inactive,
li:hover .m.icon.google.hover-inactive { background-position: -60px -660px; }
.m.icon.facebook.inactive,
.m.icon.facebook.hover-inactive:hover,
a:hover .m.icon.facebook.hover-inactive,
li:hover .m.icon.facebook.hover-inactive { background-position: -60px -690px; }
.m.icon.twitter.inactive,
.m.icon.twitter.hover-inactive:hover,
a:hover .m.icon.twitter.hover-inactive,
li:hover .m.icon.twitter.hover-inactive { background-position: -60px -720px; }
.m.icon.mail.inactive,
.m.icon.mail.hover-inactive:hover,
a:hover .m.icon.mail.hover-inactive,
li:hover .m.icon.mail.hover-inactive { background-position: -60px -750px; }

.m.icon.up.service,
.m.icon.up.hover-service:hover,
a:hover .m.icon.up.hover-service,
li:hover .m.icon.up.hover-service { background-position: -90px 0px; }
.m.icon.down.service,
.m.icon.down.hover-service:hover,
a:hover .m.icon.down.hover-service,
li:hover .m.icon.down.hover-service { background-position: -90px -30px; }
.m.icon.back.service,
.m.icon.back.hover-service:hover,
a:hover .m.icon.back.hover-service,
li:hover .m.icon.back.hover-service { background-position: -90px -60px; }
.m.icon.next.service,
.m.icon.next.hover-service:hover,
a:hover .m.icon.next.hover-service,
li:hover .m.icon.next.hover-service { background-position: -90px -90px; }
.m.icon.burger.service,
.m.icon.burger.hover-service:hover,
a:hover .m.icon.burger.hover-service,
li:hover .m.icon.burger.hover-service { background-position: -90px -120px; }
.m.icon.home.service,
.m.icon.home.hover-service:hover,
a:hover .m.icon.home.hover-service,
li:hover .m.icon.home.hover-service { background-position: -90px -150px; }
.m.icon.close.service,
.m.icon.close.hover-service:hover,
a:hover .m.icon.close.hover-service,
li:hover .m.icon.close.hover-service { background-position: -90px -180px; }
.m.icon.logout.service,
.m.icon.logout.hover-service:hover,
a:hover .m.icon.logout.hover-service,
li:hover .m.icon.logout.hover-service { background-position: -90px -210px; }
.m.icon.search.service,
.m.icon.search.hover-service:hover,
a:hover .m.icon.search.hover-service,
li:hover .m.icon.search.hover-service { background-position: -90px -240px; }
.m.icon.person.service,
.m.icon.person.hover-service:hover,
a:hover .m.icon.person.hover-service,
li:hover .m.icon.person.hover-service { background-position: -90px -270px; }
.m.icon.basket.service,
.m.icon.basket.hover-service:hover,
a:hover .m.icon.basket.hover-service,
li:hover .m.icon.basket.hover-service { background-position: -90px -300px; }
.m.icon.apps.service,
.m.icon.apps.hover-service:hover,
a:hover .m.icon.apps.hover-service,
li:hover .m.icon.apps.hover-service { background-position: -90px -330px; }
.m.icon.email.service,
.m.icon.email.hover-service:hover,
a:hover .m.icon.email.hover-service,
li:hover .m.icon.email.hover-service { background-position: -90px -360px; }
.m.icon.demail.service,
.m.icon.demail.hover-service:hover,
a:hover .m.icon.demail.hover-service,
li:hover .m.icon.demail.hover-service { background-position: -90px -390px; }
.m.icon.mailcheck.service,
.m.icon.mailcheck.hover-service:hover,
a:hover .m.icon.mailcheck.hover-service,
li:hover .m.icon.mailcheck.hover-service { background-position: -90px -420px; }
.m.icon.calendar.service,
.m.icon.calendar.hover-service:hover,
a:hover .m.icon.calendar.hover-service,
li:hover .m.icon.calendar.hover-service { background-position: -90px -450px; }
.m.icon.clock.service,
.m.icon.clock.hover-service:hover,
a:hover .m.icon.clock.hover-service,
li:hover .m.icon.clock.hover-service { background-position: -90px -480px; }
.m.icon.office.service,
.m.icon.office.hover-service:hover,
a:hover .m.icon.office.hover-service,
li:hover .m.icon.office.hover-service { background-position: -90px -510px; }
.m.icon.cloud.service,
.m.icon.cloud.hover-service:hover,
a:hover .m.icon.cloud.hover-service,
li:hover .m.icon.cloud.hover-service { background-position: -90px -540px; }
.m.icon.security.service,
.m.icon.security.hover-service:hover,
a:hover .m.icon.security.hover-service,
li:hover .m.icon.security.hover-service { background-position: -90px -570px; }
.m.icon.overview.service,
.m.icon.overview.hover-service:hover,
a:hover .m.icon.overview.hover-service,
li:hover .m.icon.overview.hover-service { background-position: -90px -600px; }
.m.icon.hint.service,
.m.icon.hint.hover-service:hover,
a:hover .m.icon.hint.hover-service,
li:hover .m.icon.hint.hover-service { background-position: -90px -630px; }
.m.icon.google.service,
.m.icon.google.hover-service:hover,
a:hover .m.icon.google.hover-service,
li:hover .m.icon.google.hover-service { background-position: -90px -660px; }
.m.icon.facebook.service,
.m.icon.facebook.hover-service:hover,
a:hover .m.icon.facebook.hover-service,
li:hover .m.icon.facebook.hover-service { background-position: -90px -690px; }
.m.icon.twitter.service,
.m.icon.twitter.hover-service:hover,
a:hover .m.icon.twitter.hover-service,
li:hover .m.icon.twitter.hover-service { background-position: -90px -720px; }
.m.icon.mail.service,
.m.icon.mail.hover-service:hover,
a:hover .m.icon.mail.hover-service,
li:hover .m.icon.mail.hover-service { background-position: -90px -750px; }



.l.icon.up,
.l.icon.up.hover-default:hover,
a:hover .l.icon.up.hover-default,
li:hover .l.icon.up.hover-default { background-position: 0px 0px; }
.l.icon.down,
.l.icon.down.hover-default:hover,
a:hover .l.icon.down.hover-default,
li:hover .l.icon.down.hover-default { background-position: 0px -40px; }
.l.icon.back,
.l.icon.back.hover-default:hover,
a:hover .l.icon.back.hover-default,
li:hover .l.icon.back.hover-default { background-position: 0px -80px; }
.l.icon.next,
.l.icon.next.hover-default:hover,
a:hover .l.icon.next.hover-default,
li:hover .l.icon.next.hover-default { background-position: 0px -120px; }
.l.icon.burger,
.l.icon.burger.hover-default:hover,
a:hover .l.icon.burger.hover-default,
li:hover .l.icon.burger.hover-default { background-position: 0px -160px; }
.l.icon.home,
.l.icon.home.hover-default:hover,
a:hover .l.icon.home.hover-default,
li:hover .l.icon.home.hover-default { background-position: 0px -200px; }
.l.icon.close,
.l.icon.close.hover-default:hover,
a:hover .l.icon.close.hover-default,
li:hover .l.icon.close.hover-default { background-position: 0px -240px; }
.l.icon.logout,
.l.icon.logout.hover-default:hover,
a:hover .l.icon.logout.hover-default,
li:hover .l.icon.logout.hover-default { background-position: 0px -280px; }
.l.icon.search,
.l.icon.search.hover-default:hover,
a:hover .l.icon.search.hover-default,
li:hover .l.icon.search.hover-default { background-position: 0px -320px; }
.l.icon.person,
.l.icon.person.hover-default:hover,
a:hover .l.icon.person.hover-default,
li:hover .l.icon.person.hover-default { background-position: 0px -360px; }
.l.icon.basket,
.l.icon.basket.hover-default:hover,
a:hover .l.icon.basket.hover-default,
li:hover .l.icon.basket.hover-default { background-position: 0px -400px; }
.l.icon.apps,
.l.icon.apps.hover-default:hover,
a:hover .l.icon.apps.hover-default,
li:hover .l.icon.apps.hover-default { background-position: 0px -440px; }
.l.icon.email,
.l.icon.email.hover-default:hover,
a:hover .l.icon.email.hover-default,
li:hover .l.icon.email.hover-default { background-position: 0px -480px; }
.l.icon.demail,
.l.icon.demail.hover-default:hover,
a:hover .l.icon.demail.hover-default,
li:hover .l.icon.demail.hover-default { background-position: 0px -520px; }
.l.icon.mailcheck,
.l.icon.mailcheck.hover-default:hover,
a:hover .l.icon.mailcheck.hover-default,
li:hover .l.icon.mailcheck.hover-default { background-position: 0px -560px; }
.l.icon.calendar,
.l.icon.calendar.hover-default:hover,
a:hover .l.icon.calendar.hover-default,
li:hover .l.icon.calendar.hover-default { background-position: 0px -600px; }
.l.icon.clock,
.l.icon.clock.hover-default:hover,
a:hover .l.icon.clock.hover-default,
li:hover .l.icon.clock.hover-default { background-position: 0px -640px; }
.l.icon.office,
.l.icon.office.hover-default:hover,
a:hover .l.icon.office.hover-default,
li:hover .l.icon.office.hover-default { background-position: 0px -680px; }
.l.icon.cloud,
.l.icon.cloud.hover-default:hover,
a:hover .l.icon.cloud.hover-default,
li:hover .l.icon.cloud.hover-default { background-position: 0px -720px; }
.l.icon.security,
.l.icon.security.hover-default:hover,
a:hover .l.icon.security.hover-default,
li:hover .l.icon.security.hover-default { background-position: 0px -760px; }
.l.icon.overview,
.l.icon.overview.hover-default:hover,
a:hover .l.icon.overview.hover-default,
li:hover .l.icon.overview.hover-default { background-position: 0px -800px; }
.l.icon.hint,
.l.icon.hint.hover-default:hover,
a:hover .l.icon.hint.hover-default,
li:hover .l.icon.hint.hover-default { background-position: 0px -840px; }
.l.icon.google,
.l.icon.google.hover-default:hover,
a:hover .l.icon.google.hover-default,
li:hover .l.icon.google.hover-default { background-position: 0px -880px; }
.l.icon.facebook,
.l.icon.facebook.hover-default:hover,
a:hover .l.icon.facebook.hover-default,
li:hover .l.icon.facebook.hover-default { background-position: 0px -920px; }
.l.icon.twitter,
.l.icon.twitter.hover-default:hover,
a:hover .l.icon.twitter.hover-default,
li:hover .l.icon.twitter.hover-default { background-position: 0px -960px; }
.l.icon.mail,
.l.icon.mail.hover-default:hover,
a:hover .l.icon.mail.hover-default,
li:hover .l.icon.mail.hover-default { background-position: 0px -1000px; }

.l.icon.success { background-position: 0px -1040px; }
.l.icon.info { background-position: 0px -1080px; }
.l.icon.warning { background-position: 0px -1120px; }
.l.icon.error { background-position: 0px -1160px; }

.l.icon.up.white,
.l.icon.up.hover-white:hover,
a:hover .l.icon.up.hover-white,
li:hover .l.icon.up.hover-white { background-position: -40px 0px; }
.l.icon.down.white,
.l.icon.down.hover-white:hover,
a:hover .l.icon.down.hover-white,
li:hover .l.icon.down.hover-white { background-position: -40px -40px; }
.l.icon.back.white,
.l.icon.back.hover-white:hover,
a:hover .l.icon.back.hover-white,
li:hover .l.icon.back.hover-white { background-position: -40px -80px; }
.l.icon.next.white,
.l.icon.next.hover-white:hover,
a:hover .l.icon.next.hover-white,
li:hover .l.icon.next.hover-white { background-position: -40px -120px; }
.l.icon.burger.white,
.l.icon.burger.hover-white:hover,
a:hover .l.icon.burger.hover-white,
li:hover .l.icon.burger.hover-white { background-position: -40px -160px; }
.l.icon.home.white,
.l.icon.home.hover-white:hover,
a:hover .l.icon.home.hover-white,
li:hover .l.icon.home.hover-white { background-position: -40px -200px; }
.l.icon.close.white,
.l.icon.close.hover-white:hover,
a:hover .l.icon.close.hover-white,
li:hover .l.icon.close.hover-white { background-position: -40px -240px; }
.l.icon.logout.white,
.l.icon.logout.hover-white:hover,
a:hover .l.icon.logout.hover-white,
li:hover .l.icon.logout.hover-white { background-position: -40px -280px; }
.l.icon.search.white,
.l.icon.search.hover-white:hover,
a:hover .l.icon.search.hover-white,
li:hover .l.icon.search.hover-white { background-position: -40px -320px; }
.l.icon.person.white,
.l.icon.person.hover-white:hover,
a:hover .l.icon.person.hover-white,
li:hover .l.icon.person.hover-white { background-position: -40px -360px; }
.l.icon.basket.white,
.l.icon.basket.hover-white:hover,
a:hover .l.icon.basket.hover-white,
li:hover .l.icon.basket.hover-white { background-position: -40px -400px; }
.l.icon.apps.white,
.l.icon.apps.hover-white:hover,
a:hover .l.icon.apps.hover-white,
li:hover .l.icon.apps.hover-white { background-position: -40px -440px; }
.l.icon.email.white,
.l.icon.email.hover-white:hover,
a:hover .l.icon.email.hover-white,
li:hover .l.icon.email.hover-white { background-position: -40px -480px; }
.l.icon.demail.white,
.l.icon.demail.hover-white:hover,
a:hover .l.icon.demail.hover-white,
li:hover .l.icon.demail.hover-white { background-position: -40px -520px; }
.l.icon.mailcheck.white,
.l.icon.mailcheck.hover-white:hover,
a:hover .l.icon.mailcheck.hover-white,
li:hover .l.icon.mailcheck.hover-white { background-position: -40px -560px; }
.l.icon.calendar.white,
.l.icon.calendar.hover-white:hover,
a:hover .l.icon.calendar.hover-white,
li:hover .l.icon.calendar.hover-white { background-position: -40px -600px; }
.l.icon.clock.white,
.l.icon.clock.hover-white:hover,
a:hover .l.icon.clock.hover-white,
li:hover .l.icon.clock.hover-white { background-position: -40px -640px; }
.l.icon.office.white,
.l.icon.office.hover-white:hover,
a:hover .l.icon.office.hover-white,
li:hover .l.icon.office.hover-white { background-position: -40px -680px; }
.l.icon.cloud.white,
.l.icon.cloud.hover-white:hover,
a:hover .l.icon.cloud.hover-white,
li:hover .l.icon.cloud.hover-white { background-position: -40px -720px; }
.l.icon.security.white,
.l.icon.security.hover-white:hover,
a:hover .l.icon.security.hover-white,
li:hover .l.icon.security.hover-white { background-position: -40px -760px; }
.l.icon.overview.white,
.l.icon.overview.hover-white:hover,
a:hover .l.icon.overview.hover-white,
li:hover .l.icon.overview.hover-white { background-position: -40px -800px; }
.l.icon.hint.white,
.l.icon.hint.hover-white:hover,
a:hover .l.icon.hint.hover-white,
li:hover .l.icon.hint.hover-white { background-position: -40px -840px; }
.l.icon.google.white,
.l.icon.google.hover-white:hover,
a:hover .l.icon.google.hover-white,
li:hover .l.icon.google.hover-white { background-position: -40px -880px; }
.l.icon.facebook.white,
.l.icon.facebook.hover-white:hover,
a:hover .l.icon.facebook.hover-white,
li:hover .l.icon.facebook.hover-white { background-position: -40px -920px; }
.l.icon.twitter.white,
.l.icon.twitter.hover-white:hover,
a:hover .l.icon.twitter.hover-white,
li:hover .l.icon.twitter.hover-white { background-position: -40px -960px; }
.l.icon.mail.white,
.l.icon.mail.hover-white:hover,
a:hover .l.icon.mail.hover-white,
li:hover .l.icon.mail.hover-white { background-position: -40px -1000px; }

.l.icon.up.inactive,
.l.icon.up.hover-inactive:hover,
a:hover .l.icon.up.hover-inactive,
li:hover .l.icon.up.hover-inactive { background-position: -80px 0px; }
.l.icon.down.inactive,
.l.icon.down.hover-inactive:hover,
a:hover .l.icon.down.hover-inactive,
li:hover .l.icon.down.hover-inactive { background-position: -80px -40px; }
.l.icon.back.inactive,
.l.icon.back.hover-inactive:hover,
a:hover .l.icon.back.hover-inactive,
li:hover .l.icon.back.hover-inactive { background-position: -80px -80px; }
.l.icon.next.inactive,
.l.icon.next.hover-inactive:hover,
a:hover .l.icon.next.hover-inactive,
li:hover .l.icon.next.hover-inactive { background-position: -80px -120px; }
.l.icon.burger.inactive,
.l.icon.burger.hover-inactive:hover,
a:hover .l.icon.burger.hover-inactive,
li:hover .l.icon.burger.hover-inactive { background-position: -80px -160px; }
.l.icon.home.inactive,
.l.icon.home.hover-inactive:hover,
a:hover .l.icon.home.hover-inactive,
li:hover .l.icon.home.hover-inactive { background-position: -80px -200px; }
.l.icon.close.inactive,
.l.icon.close.hover-inactive:hover,
a:hover .l.icon.close.hover-inactive,
li:hover .l.icon.close.hover-inactive { background-position: -80px -240px; }
.l.icon.logout.inactive,
.l.icon.logout.hover-inactive:hover,
a:hover .l.icon.logout.hover-inactive,
li:hover .l.icon.logout.hover-inactive { background-position: -80px -280px; }
.l.icon.search.inactive,
.l.icon.search.hover-inactive:hover,
a:hover .l.icon.search.hover-inactive,
li:hover .l.icon.search.hover-inactive { background-position: -80px -320px; }
.l.icon.person.inactive,
.l.icon.person.hover-inactive:hover,
a:hover .l.icon.person.hover-inactive,
li:hover .l.icon.person.hover-inactive { background-position: -80px -360px; }
.l.icon.basket.inactive,
.l.icon.basket.hover-inactive:hover,
a:hover .l.icon.basket.hover-inactive,
li:hover .l.icon.basket.hover-inactive { background-position: -80px -400px; }
.l.icon.apps.inactive,
.l.icon.apps.hover-inactive:hover,
a:hover .l.icon.apps.hover-inactive,
li:hover .l.icon.apps.hover-inactive { background-position: -80px -440px; }
.l.icon.email.inactive,
.l.icon.email.hover-inactive:hover,
a:hover .l.icon.email.hover-inactive,
li:hover .l.icon.email.hover-inactive { background-position: -80px -480px; }
.l.icon.demail.inactive,
.l.icon.demail.hover-inactive:hover,
a:hover .l.icon.demail.hover-inactive,
li:hover .l.icon.demail.hover-inactive { background-position: -80px -520px; }
.l.icon.mailcheck.inactive,
.l.icon.mailcheck.hover-inactive:hover,
a:hover .l.icon.mailcheck.hover-inactive,
li:hover .l.icon.mailcheck.hover-inactive { background-position: -80px -560px; }
.l.icon.calendar.inactive,
.l.icon.calendar.hover-inactive:hover,
a:hover .l.icon.calendar.hover-inactive,
li:hover .l.icon.calendar.hover-inactive { background-position: -80px -600px; }
.l.icon.clock.inactive,
.l.icon.clock.hover-inactive:hover,
a:hover .l.icon.clock.hover-inactive,
li:hover .l.icon.clock.hover-inactive { background-position: -80px -640px; }
.l.icon.office.inactive,
.l.icon.office.hover-inactive:hover,
a:hover .l.icon.office.hover-inactive,
li:hover .l.icon.office.hover-inactive { background-position: -80px -680px; }
.l.icon.cloud.inactive,
.l.icon.cloud.hover-inactive:hover,
a:hover .l.icon.cloud.hover-inactive,
li:hover .l.icon.cloud.hover-inactive { background-position: -80px -720px; }
.l.icon.security.inactive,
.l.icon.security.hover-inactive:hover,
a:hover .l.icon.security.hover-inactive,
li:hover .l.icon.security.hover-inactive { background-position: -80px -760px; }
.l.icon.overview.inactive,
.l.icon.overview.hover-inactive:hover,
a:hover .l.icon.overview.hover-inactive,
li:hover .l.icon.overview.hover-inactive { background-position: -80px -800px; }
.l.icon.hint.inactive,
.l.icon.hint.hover-inactive:hover,
a:hover .l.icon.hint.hover-inactive,
li:hover .l.icon.hint.hover-inactive { background-position: -80px -840px; }
.l.icon.google.inactive,
.l.icon.google.hover-inactive:hover,
a:hover .l.icon.google.hover-inactive,
li:hover .l.icon.google.hover-inactive { background-position: -80px -880px; }
.l.icon.facebook.inactive,
.l.icon.facebook.hover-inactive:hover,
a:hover .l.icon.facebook.hover-inactive,
li:hover .l.icon.facebook.hover-inactive { background-position: -80px -920px; }
.l.icon.twitter.inactive,
.l.icon.twitter.hover-inactive:hover,
a:hover .l.icon.twitter.hover-inactive,
li:hover .l.icon.twitter.hover-inactive { background-position: -80px -960px; }
.l.icon.mail.inactive,
.l.icon.mail.hover-inactive:hover,
a:hover .l.icon.mail.hover-inactive,
li:hover .l.icon.mail.hover-inactive { background-position: -80px -1000px; }

.l.icon.up.service,
.l.icon.up.hover-service:hover,
a:hover .l.icon.up.hover-service,
li:hover .l.icon.up.hover-service { background-position: -120px 0px; }
.l.icon.down.service,
.l.icon.down.hover-service:hover,
a:hover .l.icon.down.hover-service,
li:hover .l.icon.down.hover-service { background-position: -120px -40px; }
.l.icon.back.service,
.l.icon.back.hover-service:hover,
a:hover .l.icon.back.hover-service,
li:hover .l.icon.back.hover-service { background-position: -120px -80px; }
.l.icon.next.service,
.l.icon.next.hover-service:hover,
a:hover .l.icon.next.hover-service,
li:hover .l.icon.next.hover-service { background-position: -120px -120px; }
.l.icon.burger.service,
.l.icon.burger.hover-service:hover,
a:hover .l.icon.burger.hover-service,
li:hover .l.icon.burger.hover-service { background-position: -120px -160px; }
.l.icon.home.service,
.l.icon.home.hover-service:hover,
a:hover .l.icon.home.hover-service,
li:hover .l.icon.home.hover-service { background-position: -120px -200px; }
.l.icon.close.service,
.l.icon.close.hover-service:hover,
a:hover .l.icon.close.hover-service,
li:hover .l.icon.close.hover-service { background-position: -120px -240px; }
.l.icon.logout.service,
.l.icon.logout.hover-service:hover,
a:hover .l.icon.logout.hover-service,
li:hover .l.icon.logout.hover-service { background-position: -120px -280px; }
.l.icon.search.service,
.l.icon.search.hover-service:hover,
a:hover .l.icon.search.hover-service,
li:hover .l.icon.search.hover-service { background-position: -120px -320px; }
.l.icon.person.service,
.l.icon.person.hover-service:hover,
a:hover .l.icon.person.hover-service,
li:hover .l.icon.person.hover-service { background-position: -120px -360px; }
.l.icon.basket.service,
.l.icon.basket.hover-service:hover,
a:hover .l.icon.basket.hover-service,
li:hover .l.icon.basket.hover-service { background-position: -120px -400px; }
.l.icon.apps.service,
.l.icon.apps.hover-service:hover,
a:hover .l.icon.apps.hover-service,
li:hover .l.icon.apps.hover-service { background-position: -120px -440px; }
.l.icon.email.service,
.l.icon.email.hover-service:hover,
a:hover .l.icon.email.hover-service,
li:hover .l.icon.email.hover-service { background-position: -120px -480px; }
.l.icon.demail.service,
.l.icon.demail.hover-service:hover,
a:hover .l.icon.demail.hover-service,
li:hover .l.icon.demail.hover-service { background-position: -120px -520px; }
.l.icon.mailcheck.service,
.l.icon.mailcheck.hover-service:hover,
a:hover .l.icon.mailcheck.hover-service,
li:hover .l.icon.mailcheck.hover-service { background-position: -120px -560px; }
.l.icon.calendar.service,
.l.icon.calendar.hover-service:hover,
a:hover .l.icon.calendar.hover-service,
li:hover .l.icon.calendar.hover-service { background-position: -120px -600px; }
.l.icon.clock.service,
.l.icon.clock.hover-service:hover,
a:hover .l.icon.clock.hover-service,
li:hover .l.icon.clock.hover-service { background-position: -120px -640px; }
.l.icon.office.service,
.l.icon.office.hover-service:hover,
a:hover .l.icon.office.hover-service,
li:hover .l.icon.office.hover-service { background-position: -120px -680px; }
.l.icon.cloud.service,
.l.icon.cloud.hover-service:hover,
a:hover .l.icon.cloud.hover-service,
li:hover .l.icon.cloud.hover-service { background-position: -120px -720px; }
.l.icon.security.service,
.l.icon.security.hover-service:hover,
a:hover .l.icon.security.hover-service,
li:hover .l.icon.security.hover-service { background-position: -120px -760px; }
.l.icon.overview.service,
.l.icon.overview.hover-service:hover,
a:hover .l.icon.overview.hover-service,
li:hover .l.icon.overview.hover-service { background-position: -120px -800px; }
.l.icon.hint.service,
.l.icon.hint.hover-service:hover,
a:hover .l.icon.hint.hover-service,
li:hover .l.icon.hint.hover-service { background-position: -120px -840px; }
.l.icon.google.service,
.l.icon.google.hover-service:hover,
a:hover .l.icon.google.hover-service,
li:hover .l.icon.google.hover-service { background-position: -120px -880px; }
.l.icon.facebook.service,
.l.icon.facebook.hover-service:hover,
a:hover .l.icon.facebook.hover-service,
li:hover .l.icon.facebook.hover-service { background-position: -120px -920px; }
.l.icon.twitter.service,
.l.icon.twitter.hover-service:hover,
a:hover .l.icon.twitter.hover-service,
li:hover .l.icon.twitter.hover-service { background-position: -120px -960px; }
.l.icon.mail.service,
.l.icon.mail.hover-service:hover,
a:hover .l.icon.mail.hover-service,
li:hover .l.icon.mail.hover-service { background-position: -120px -1000px; }



.xl.icon.up,
.xl.icon.up.hover-default:hover,
a:hover .xl.icon.up.hover-default,
li:hover .xl.icon.up.hover-default { background-position: 0px 0px; }
.xl.icon.down,
.xl.icon.down.hover-default:hover,
a:hover .xl.icon.down.hover-default,
li:hover .xl.icon.down.hover-default { background-position: 0px -50px; }
.xl.icon.back,
.xl.icon.back.hover-default:hover,
a:hover .xl.icon.back.hover-default,
li:hover .xl.icon.back.hover-default { background-position: 0px -100px; }
.xl.icon.next,
.xl.icon.next.hover-default:hover,
a:hover .xl.icon.next.hover-default,
li:hover .xl.icon.next.hover-default { background-position: 0px -150px; }
.xl.icon.burger,
.xl.icon.burger.hover-default:hover,
a:hover .xl.icon.burger.hover-default,
li:hover .xl.icon.burger.hover-default { background-position: 0px -200px; }
.xl.icon.home,
.xl.icon.home.hover-default:hover,
a:hover .xl.icon.home.hover-default,
li:hover .xl.icon.home.hover-default { background-position: 0px -250px; }
.xl.icon.close,
.xl.icon.close.hover-default:hover,
a:hover .xl.icon.close.hover-default,
li:hover .xl.icon.close.hover-default { background-position: 0px -300px; }
.xl.icon.logout,
.xl.icon.logout.hover-default:hover,
a:hover .xl.icon.logout.hover-default,
li:hover .xl.icon.logout.hover-default { background-position: 0px -350px; }
.xl.icon.search,
.xl.icon.search.hover-default:hover,
a:hover .xl.icon.search.hover-default,
li:hover .xl.icon.search.hover-default { background-position: 0px -400px; }
.xl.icon.person,
.xl.icon.person.hover-default:hover,
a:hover .xl.icon.person.hover-default,
li:hover .xl.icon.person.hover-default { background-position: 0px -450px; }
.xl.icon.basket,
.xl.icon.basket.hover-default:hover,
a:hover .xl.icon.basket.hover-default,
li:hover .xl.icon.basket.hover-default { background-position: 0px -500px; }
.xl.icon.apps,
.xl.icon.apps.hover-default:hover,
a:hover .xl.icon.apps.hover-default,
li:hover .xl.icon.apps.hover-default { background-position: 0px -550px; }
.xl.icon.email,
.xl.icon.email.hover-default:hover,
a:hover .xl.icon.email.hover-default,
li:hover .xl.icon.email.hover-default { background-position: 0px -600px; }
.xl.icon.demail,
.xl.icon.demail.hover-default:hover,
a:hover .xl.icon.demail.hover-default,
li:hover .xl.icon.demail.hover-default { background-position: 0px -650px; }
.xl.icon.mailcheck,
.xl.icon.mailcheck.hover-default:hover,
a:hover .xl.icon.mailcheck.hover-default,
li:hover .xl.icon.mailcheck.hover-default { background-position: 0px -700px; }
.xl.icon.calendar,
.xl.icon.calendar.hover-default:hover,
a:hover .xl.icon.calendar.hover-default,
li:hover .xl.icon.calendar.hover-default { background-position: 0px -750px; }
.xl.icon.clock,
.xl.icon.clock.hover-default:hover,
a:hover .xl.icon.clock.hover-default,
li:hover .xl.icon.clock.hover-default { background-position: 0px -800px; }
.xl.icon.office,
.xl.icon.office.hover-default:hover,
a:hover .xl.icon.office.hover-default,
li:hover .xl.icon.office.hover-default { background-position: 0px -850px; }
.xl.icon.cloud,
.xl.icon.cloud.hover-default:hover,
a:hover .xl.icon.cloud.hover-default,
li:hover .xl.icon.cloud.hover-default { background-position: 0px -900px; }
.xl.icon.security,
.xl.icon.security.hover-default:hover,
a:hover .xl.icon.security.hover-default,
li:hover .xl.icon.security.hover-default { background-position: 0px -950px; }
.xl.icon.overview,
.xl.icon.overview.hover-default:hover,
a:hover .xl.icon.overview.hover-default,
li:hover .xl.icon.overview.hover-default { background-position: 0px -1000px; }
.xl.icon.hint,
.xl.icon.hint.hover-default:hover,
a:hover .xl.icon.hint.hover-default,
li:hover .xl.icon.hint.hover-default { background-position: 0px -1050px; }
.xl.icon.google,
.xl.icon.google.hover-default:hover,
a:hover .xl.icon.google.hover-default,
li:hover .xl.icon.google.hover-default { background-position: 0px -1100px; }
.xl.icon.facebook,
.xl.icon.facebook.hover-default:hover,
a:hover .xl.icon.facebook.hover-default,
li:hover .xl.icon.facebook.hover-default { background-position: 0px -1150px; }
.xl.icon.twitter,
.xl.icon.twitter.hover-default:hover,
a:hover .xl.icon.twitter.hover-default,
li:hover .xl.icon.twitter.hover-default { background-position: 0px -1200px; }
.xl.icon.mail,
.xl.icon.mail.hover-default:hover,
a:hover .xl.icon.mail.hover-default,
li:hover .xl.icon.mail.hover-default { background-position: 0px -1250px; }

.xl.icon.success { background-position: 0px -1300px; }
.xl.icon.info { background-position: 0px -1350px; }
.xl.icon.warning { background-position: 0px -1400px; }
.xl.icon.error { background-position: 0px -1450px; }

.xl.icon.up.white,
.xl.icon.up.hover-white:hover,
a:hover .xl.icon.up.hover-white,
li:hover .xl.icon.up.hover-white { background-position: -50px 0px; }
.xl.icon.down.white,
.xl.icon.down.hover-white:hover,
a:hover .xl.icon.down.hover-white,
li:hover .xl.icon.down.hover-white { background-position: -50px -50px; }
.xl.icon.back.white,
.xl.icon.back.hover-white:hover,
a:hover .xl.icon.back.hover-white,
li:hover .xl.icon.back.hover-white { background-position: -50px -100px; }
.xl.icon.next.white,
.xl.icon.next.hover-white:hover,
a:hover .xl.icon.next.hover-white,
li:hover .xl.icon.next.hover-white { background-position: -50px -150px; }
.xl.icon.burger.white,
.xl.icon.burger.hover-white:hover,
a:hover .xl.icon.burger.hover-white,
li:hover .xl.icon.burger.hover-white { background-position: -50px -200px; }
.xl.icon.home.white,
.xl.icon.home.hover-white:hover,
a:hover .xl.icon.home.hover-white,
li:hover .xl.icon.home.hover-white { background-position: -50px -250px; }
.xl.icon.close.white,
.xl.icon.close.hover-white:hover,
a:hover .xl.icon.close.hover-white,
li:hover .xl.icon.close.hover-white { background-position: -50px -300px; }
.xl.icon.logout.white,
.xl.icon.logout.hover-white:hover,
a:hover .xl.icon.logout.hover-white,
li:hover .xl.icon.logout.hover-white { background-position: -50px -350px; }
.xl.icon.search.white,
.xl.icon.search.hover-white:hover,
a:hover .xl.icon.search.hover-white,
li:hover .xl.icon.search.hover-white { background-position: -50px -400px; }
.xl.icon.person.white,
.xl.icon.person.hover-white:hover,
a:hover .xl.icon.person.hover-white,
li:hover .xl.icon.person.hover-white { background-position: -50px -450px; }
.xl.icon.basket.white,
.xl.icon.basket.hover-white:hover,
a:hover .xl.icon.basket.hover-white,
li:hover .xl.icon.basket.hover-white { background-position: -50px -500px; }
.xl.icon.apps.white,
.xl.icon.apps.hover-white:hover,
a:hover .xl.icon.apps.hover-white,
li:hover .xl.icon.apps.hover-white { background-position: -50px -550px; }
.xl.icon.email.white,
.xl.icon.email.hover-white:hover,
a:hover .xl.icon.email.hover-white,
li:hover .xl.icon.email.hover-white { background-position: -50px -600px; }
.xl.icon.demail.white,
.xl.icon.demail.hover-white:hover,
a:hover .xl.icon.demail.hover-white,
li:hover .xl.icon.demail.hover-white { background-position: -50px -650px; }
.xl.icon.mailcheck.white,
.xl.icon.mailcheck.hover-white:hover,
a:hover .xl.icon.mailcheck.hover-white,
li:hover .xl.icon.mailcheck.hover-white { background-position: -50px -700px; }
.xl.icon.calendar.white,
.xl.icon.calendar.hover-white:hover,
a:hover .xl.icon.calendar.hover-white,
li:hover .xl.icon.calendar.hover-white { background-position: -50px -750px; }
.xl.icon.clock.white,
.xl.icon.clock.hover-white:hover,
a:hover .xl.icon.clock.hover-white,
li:hover .xl.icon.clock.hover-white { background-position: -50px -800px; }
.xl.icon.office.white,
.xl.icon.office.hover-white:hover,
a:hover .xl.icon.office.hover-white,
li:hover .xl.icon.office.hover-white { background-position: -50px -850px; }
.xl.icon.cloud.white,
.xl.icon.cloud.hover-white:hover,
a:hover .xl.icon.cloud.hover-white,
li:hover .xl.icon.cloud.hover-white { background-position: -50px -900px; }
.xl.icon.security.white,
.xl.icon.security.hover-white:hover,
a:hover .xl.icon.security.hover-white,
li:hover .xl.icon.security.hover-white { background-position: -50px -950px; }
.xl.icon.overview.white,
.xl.icon.overview.hover-white:hover,
a:hover .xl.icon.overview.hover-white,
li:hover .xl.icon.overview.hover-white { background-position: -50px -1000px; }
.xl.icon.hint.white,
.xl.icon.hint.hover-white:hover,
a:hover .xl.icon.hint.hover-white,
li:hover .xl.icon.hint.hover-white { background-position: -50px -1050px; }
.xl.icon.google.white,
.xl.icon.google.hover-white:hover,
a:hover .xl.icon.google.hover-white,
li:hover .xl.icon.google.hover-white { background-position: -50px -1100px; }
.xl.icon.facebook.white,
.xl.icon.facebook.hover-white:hover,
a:hover .xl.icon.facebook.hover-white,
li:hover .xl.icon.facebook.hover-white { background-position: -50px -1150px; }
.xl.icon.twitter.white,
.xl.icon.twitter.hover-white:hover,
a:hover .xl.icon.twitter.hover-white,
li:hover .xl.icon.twitter.hover-white { background-position: -50px -1200px; }
.xl.icon.mail.white,
.xl.icon.mail.hover-white:hover,
a:hover .xl.icon.mail.hover-white,
li:hover .xl.icon.mail.hover-white { background-position: -50px -1250px; }

.xl.icon.up.inactive,
.xl.icon.up.hover-inactive:hover,
a:hover .xl.icon.up.hover-inactive,
li:hover .xl.icon.up.hover-inactive { background-position: -100px 0px; }
.xl.icon.down.inactive,
.xl.icon.down.hover-inactive:hover,
a:hover .xl.icon.down.hover-inactive,
li:hover .xl.icon.down.hover-inactive { background-position: -100px -50px; }
.xl.icon.back.inactive,
.xl.icon.back.hover-inactive:hover,
a:hover .xl.icon.back.hover-inactive,
li:hover .xl.icon.back.hover-inactive { background-position: -100px -100px; }
.xl.icon.next.inactive,
.xl.icon.next.hover-inactive:hover,
a:hover .xl.icon.next.hover-inactive,
li:hover .xl.icon.next.hover-inactive { background-position: -100px -150px; }
.xl.icon.burger.inactive,
.xl.icon.burger.hover-inactive:hover,
a:hover .xl.icon.burger.hover-inactive,
li:hover .xl.icon.burger.hover-inactive { background-position: -100px -200px; }
.xl.icon.home.inactive,
.xl.icon.home.hover-inactive:hover,
a:hover .xl.icon.home.hover-inactive,
li:hover .xl.icon.home.hover-inactive { background-position: -100px -250px; }
.xl.icon.close.inactive,
.xl.icon.close.hover-inactive:hover,
a:hover .xl.icon.close.hover-inactive,
li:hover .xl.icon.close.hover-inactive { background-position: -100px -300px; }
.xl.icon.logout.inactive,
.xl.icon.logout.hover-inactive:hover,
a:hover .xl.icon.logout.hover-inactive,
li:hover .xl.icon.logout.hover-inactive { background-position: -100px -350px; }
.xl.icon.search.inactive,
.xl.icon.search.hover-inactive:hover,
a:hover .xl.icon.search.hover-inactive,
li:hover .xl.icon.search.hover-inactive { background-position: -100px -400px; }
.xl.icon.person.inactive,
.xl.icon.person.hover-inactive:hover,
a:hover .xl.icon.person.hover-inactive,
li:hover .xl.icon.person.hover-inactive { background-position: -100px -450px; }
.xl.icon.basket.inactive,
.xl.icon.basket.hover-inactive:hover,
a:hover .xl.icon.basket.hover-inactive,
li:hover .xl.icon.basket.hover-inactive { background-position: -100px -500px; }
.xl.icon.apps.inactive,
.xl.icon.apps.hover-inactive:hover,
a:hover .xl.icon.apps.hover-inactive,
li:hover .xl.icon.apps.hover-inactive { background-position: -100px -550px; }
.xl.icon.email.inactive,
.xl.icon.email.hover-inactive:hover,
a:hover .xl.icon.email.hover-inactive,
li:hover .xl.icon.email.hover-inactive { background-position: -100px -600px; }
.xl.icon.demail.inactive,
.xl.icon.demail.hover-inactive:hover,
a:hover .xl.icon.demail.hover-inactive,
li:hover .xl.icon.demail.hover-inactive { background-position: -100px -650px; }
.xl.icon.mailcheck.inactive,
.xl.icon.mailcheck.hover-inactive:hover,
a:hover .xl.icon.mailcheck.hover-inactive,
li:hover .xl.icon.mailcheck.hover-inactive { background-position: -100px -700px; }
.xl.icon.calendar.inactive,
.xl.icon.calendar.hover-inactive:hover,
a:hover .xl.icon.calendar.hover-inactive,
li:hover .xl.icon.calendar.hover-inactive { background-position: -100px -750px; }
.xl.icon.clock.inactive,
.xl.icon.clock.hover-inactive:hover,
a:hover .xl.icon.clock.hover-inactive,
li:hover .xl.icon.clock.hover-inactive { background-position: -100px -800px; }
.xl.icon.office.inactive,
.xl.icon.office.hover-inactive:hover,
a:hover .xl.icon.office.hover-inactive,
li:hover .xl.icon.office.hover-inactive { background-position: -100px -850px; }
.xl.icon.cloud.inactive,
.xl.icon.cloud.hover-inactive:hover,
a:hover .xl.icon.cloud.hover-inactive,
li:hover .xl.icon.cloud.hover-inactive { background-position: -100px -900px; }
.xl.icon.security.inactive,
.xl.icon.security.hover-inactive:hover,
a:hover .xl.icon.security.hover-inactive,
li:hover .xl.icon.security.hover-inactive { background-position: -100px -950px; }
.xl.icon.overview.inactive,
.xl.icon.overview.hover-inactive:hover,
a:hover .xl.icon.overview.hover-inactive,
li:hover .xl.icon.overview.hover-inactive { background-position: -100px -1000px; }
.xl.icon.hint.inactive,
.xl.icon.hint.hover-inactive:hover,
a:hover .xl.icon.hint.hover-inactive,
li:hover .xl.icon.hint.hover-inactive { background-position: -100px -1050px; }
.xl.icon.google.inactive,
.xl.icon.google.hover-inactive:hover,
a:hover .xl.icon.google.hover-inactive,
li:hover .xl.icon.google.hover-inactive { background-position: -100px -1100px; }
.xl.icon.facebook.inactive,
.xl.icon.facebook.hover-inactive:hover,
a:hover .xl.icon.facebook.hover-inactive,
li:hover .xl.icon.facebook.hover-inactive { background-position: -100px -1150px; }
.xl.icon.twitter.inactive,
.xl.icon.twitter.hover-inactive:hover,
a:hover .xl.icon.twitter.hover-inactive,
li:hover .xl.icon.twitter.hover-inactive { background-position: -100px -1200px; }
.xl.icon.mail.inactive,
.xl.icon.mail.hover-inactive:hover,
a:hover .xl.icon.mail.hover-inactive,
li:hover .xl.icon.mail.hover-inactive { background-position: -100px -1250px; }

.xl.icon.up.service,
.xl.icon.up.hover-service:hover,
a:hover .xl.icon.up.hover-service,
li:hover .xl.icon.up.hover-service { background-position: -150px 0px; }
.xl.icon.down.service,
.xl.icon.down.hover-service:hover,
a:hover .xl.icon.down.hover-service,
li:hover .xl.icon.down.hover-service { background-position: -150px -50px; }
.xl.icon.back.service,
.xl.icon.back.hover-service:hover,
a:hover .xl.icon.back.hover-service,
li:hover .xl.icon.back.hover-service { background-position: -150px -100px; }
.xl.icon.next.service,
.xl.icon.next.hover-service:hover,
a:hover .xl.icon.next.hover-service,
li:hover .xl.icon.next.hover-service { background-position: -150px -150px; }
.xl.icon.burger.service,
.xl.icon.burger.hover-service:hover,
a:hover .xl.icon.burger.hover-service,
li:hover .xl.icon.burger.hover-service { background-position: -150px -200px; }
.xl.icon.home.service,
.xl.icon.home.hover-service:hover,
a:hover .xl.icon.home.hover-service,
li:hover .xl.icon.home.hover-service { background-position: -150px -250px; }
.xl.icon.close.service,
.xl.icon.close.hover-service:hover,
a:hover .xl.icon.close.hover-service,
li:hover .xl.icon.close.hover-service { background-position: -150px -300px; }
.xl.icon.logout.service,
.xl.icon.logout.hover-service:hover,
a:hover .xl.icon.logout.hover-service,
li:hover .xl.icon.logout.hover-service { background-position: -150px -350px; }
.xl.icon.search.service,
.xl.icon.search.hover-service:hover,
a:hover .xl.icon.search.hover-service,
li:hover .xl.icon.search.hover-service { background-position: -150px -400px; }
.xl.icon.person.service,
.xl.icon.person.hover-service:hover,
a:hover .xl.icon.person.hover-service,
li:hover .xl.icon.person.hover-service { background-position: -150px -450px; }
.xl.icon.basket.service,
.xl.icon.basket.hover-service:hover,
a:hover .xl.icon.basket.hover-service,
li:hover .xl.icon.basket.hover-service { background-position: -150px -500px; }
.xl.icon.apps.service,
.xl.icon.apps.hover-service:hover,
a:hover .xl.icon.apps.hover-service,
li:hover .xl.icon.apps.hover-service { background-position: -150px -550px; }
.xl.icon.email.service,
.xl.icon.email.hover-service:hover,
a:hover .xl.icon.email.hover-service,
li:hover .xl.icon.email.hover-service { background-position: -150px -600px; }
.xl.icon.demail.service,
.xl.icon.demail.hover-service:hover,
a:hover .xl.icon.demail.hover-service,
li:hover .xl.icon.demail.hover-service { background-position: -150px -650px; }
.xl.icon.mailcheck.service,
.xl.icon.mailcheck.hover-service:hover,
a:hover .xl.icon.mailcheck.hover-service,
li:hover .xl.icon.mailcheck.hover-service { background-position: -150px -700px; }
.xl.icon.calendar.service,
.xl.icon.calendar.hover-service:hover,
a:hover .xl.icon.calendar.hover-service,
li:hover .xl.icon.calendar.hover-service { background-position: -150px -750px; }
.xl.icon.clock.service,
.xl.icon.clock.hover-service:hover,
a:hover .xl.icon.clock.hover-service,
li:hover .xl.icon.clock.hover-service { background-position: -150px -800px; }
.xl.icon.office.service,
.xl.icon.office.hover-service:hover,
a:hover .xl.icon.office.hover-service,
li:hover .xl.icon.office.hover-service { background-position: -150px -850px; }
.xl.icon.cloud.service,
.xl.icon.cloud.hover-service:hover,
a:hover .xl.icon.cloud.hover-service,
li:hover .xl.icon.cloud.hover-service { background-position: -150px -900px; }
.xl.icon.security.service,
.xl.icon.security.hover-service:hover,
a:hover .xl.icon.security.hover-service,
li:hover .xl.icon.security.hover-service { background-position: -150px -950px; }
.xl.icon.overview.service,
.xl.icon.overview.hover-service:hover,
a:hover .xl.icon.overview.hover-service,
li:hover .xl.icon.overview.hover-service { background-position: -150px -1000px; }
.xl.icon.hint.service,
.xl.icon.hint.hover-service:hover,
a:hover .xl.icon.hint.hover-service,
li:hover .xl.icon.hint.hover-service { background-position: -150px -1050px; }
.xl.icon.google.service,
.xl.icon.google.hover-service:hover,
a:hover .xl.icon.google.hover-service,
li:hover .xl.icon.google.hover-service { background-position: -150px -1100px; }
.xl.icon.facebook.service,
.xl.icon.facebook.hover-service:hover,
a:hover .xl.icon.facebook.hover-service,
li:hover .xl.icon.facebook.hover-service { background-position: -150px -1150px; }
.xl.icon.twitter.service,
.xl.icon.twitter.hover-service:hover,
a:hover .xl.icon.twitter.hover-service,
li:hover .xl.icon.twitter.hover-service { background-position: -150px -1200px; }
.xl.icon.mail.service,
.xl.icon.mail.hover-service:hover,
a:hover .xl.icon.mail.hover-service,
li:hover .xl.icon.mail.hover-service { background-position: -150px -1250px; }



.xxl.icon.up,
.xxl.icon.up.hover-default:hover,
a:hover .xxl.icon.up.hover-default,
li:hover .xxl.icon.up.hover-default { background-position: 0px 0px; }
.xxl.icon.down,
.xxl.icon.down.hover-default:hover,
a:hover .xxl.icon.down.hover-default,
li:hover .xxl.icon.down.hover-default { background-position: 0px -60px; }
.xxl.icon.back,
.xxl.icon.back.hover-default:hover,
a:hover .xxl.icon.back.hover-default,
li:hover .xxl.icon.back.hover-default { background-position: 0px -120px; }
.xxl.icon.next,
.xxl.icon.next.hover-default:hover,
a:hover .xxl.icon.next.hover-default,
li:hover .xxl.icon.next.hover-default { background-position: 0px -180px; }
.xxl.icon.burger,
.xxl.icon.burger.hover-default:hover,
a:hover .xxl.icon.burger.hover-default,
li:hover .xxl.icon.burger.hover-default { background-position: 0px -240px; }
.xxl.icon.home,
.xxl.icon.home.hover-default:hover,
a:hover .xxl.icon.home.hover-default,
li:hover .xxl.icon.home.hover-default { background-position: 0px -300px; }
.xxl.icon.close,
.xxl.icon.close.hover-default:hover,
a:hover .xxl.icon.close.hover-default,
li:hover .xxl.icon.close.hover-default { background-position: 0px -360px; }
.xxl.icon.logout,
.xxl.icon.logout.hover-default:hover,
a:hover .xxl.icon.logout.hover-default,
li:hover .xxl.icon.logout.hover-default { background-position: 0px -420px; }
.xxl.icon.search,
.xxl.icon.search.hover-default:hover,
a:hover .xxl.icon.search.hover-default,
li:hover .xxl.icon.search.hover-default { background-position: 0px -480px; }
.xxl.icon.person,
.xxl.icon.person.hover-default:hover,
a:hover .xxl.icon.person.hover-default,
li:hover .xxl.icon.person.hover-default { background-position: 0px -540px; }
.xxl.icon.basket,
.xxl.icon.basket.hover-default:hover,
a:hover .xxl.icon.basket.hover-default,
li:hover .xxl.icon.basket.hover-default { background-position: 0px -600px; }
.xxl.icon.apps,
.xxl.icon.apps.hover-default:hover,
a:hover .xxl.icon.apps.hover-default,
li:hover .xxl.icon.apps.hover-default { background-position: 0px -660px; }
.xxl.icon.email,
.xxl.icon.email.hover-default:hover,
a:hover .xxl.icon.email.hover-default,
li:hover .xxl.icon.email.hover-default { background-position: 0px -720px; }
.xxl.icon.demail,
.xxl.icon.demail.hover-default:hover,
a:hover .xxl.icon.demail.hover-default,
li:hover .xxl.icon.demail.hover-default { background-position: 0px -780px; }
.xxl.icon.mailcheck,
.xxl.icon.mailcheck.hover-default:hover,
a:hover .xxl.icon.mailcheck.hover-default,
li:hover .xxl.icon.mailcheck.hover-default { background-position: 0px -840px; }
.xxl.icon.calendar,
.xxl.icon.calendar.hover-default:hover,
a:hover .xxl.icon.calendar.hover-default,
li:hover .xxl.icon.calendar.hover-default { background-position: 0px -900px; }
.xxl.icon.clock,
.xxl.icon.clock.hover-default:hover,
a:hover .xxl.icon.clock.hover-default,
li:hover .xxl.icon.clock.hover-default { background-position: 0px -960px; }
.xxl.icon.office,
.xxl.icon.office.hover-default:hover,
a:hover .xxl.icon.office.hover-default,
li:hover .xxl.icon.office.hover-default { background-position: 0px -1020px; }
.xxl.icon.cloud,
.xxl.icon.cloud.hover-default:hover,
a:hover .xxl.icon.cloud.hover-default,
li:hover .xxl.icon.cloud.hover-default { background-position: 0px -1080px; }
.xxl.icon.security,
.xxl.icon.security.hover-default:hover,
a:hover .xxl.icon.security.hover-default,
li:hover .xxl.icon.security.hover-default { background-position: 0px -1140px; }
.xxl.icon.overview,
.xxl.icon.overview.hover-default:hover,
a:hover .xxl.icon.overview.hover-default,
li:hover .xxl.icon.overview.hover-default { background-position: 0px -1200px; }
.xxl.icon.hint,
.xxl.icon.hint.hover-default:hover,
a:hover .xxl.icon.hint.hover-default,
li:hover .xxl.icon.hint.hover-default { background-position: 0px -1260px; }
.xxl.icon.google,
.xxl.icon.google.hover-default:hover,
a:hover .xxl.icon.google.hover-default,
li:hover .xxl.icon.google.hover-default { background-position: 0px -1320px; }
.xxl.icon.facebook,
.xxl.icon.facebook.hover-default:hover,
a:hover .xxl.icon.facebook.hover-default,
li:hover .xxl.icon.facebook.hover-default { background-position: 0px -1380px; }
.xxl.icon.twitter,
.xxl.icon.twitter.hover-default:hover,
a:hover .xxl.icon.twitter.hover-default,
li:hover .xxl.icon.twitter.hover-default { background-position: 0px -1440px; }
.xxl.icon.mail,
.xxl.icon.mail.hover-default:hover,
a:hover .xxl.icon.mail.hover-default,
li:hover .xxl.icon.mail.hover-default { background-position: 0px -1500px; }

.xxl.icon.success { background-position: 0px -1560px; }
.xxl.icon.info { background-position: 0px -1620px; }
.xxl.icon.warning { background-position: 0px -1680px; }
.xxl.icon.error { background-position: 0px -1740px; }

.xxl.icon.up.white,
.xxl.icon.up.hover-white:hover,
a:hover .xxl.icon.up.hover-white,
li:hover .xxl.icon.up.hover-white { background-position: -60px 0px; }
.xxl.icon.down.white,
.xxl.icon.down.hover-white:hover,
a:hover .xxl.icon.down.hover-white,
li:hover .xxl.icon.down.hover-white { background-position: -60px -60px; }
.xxl.icon.back.white,
.xxl.icon.back.hover-white:hover,
a:hover .xxl.icon.back.hover-white,
li:hover .xxl.icon.back.hover-white { background-position: -60px -120px; }
.xxl.icon.next.white,
.xxl.icon.next.hover-white:hover,
a:hover .xxl.icon.next.hover-white,
li:hover .xxl.icon.next.hover-white { background-position: -60px -180px; }
.xxl.icon.burger.white,
.xxl.icon.burger.hover-white:hover,
a:hover .xxl.icon.burger.hover-white,
li:hover .xxl.icon.burger.hover-white { background-position: -60px -240px; }
.xxl.icon.home.white,
.xxl.icon.home.hover-white:hover,
a:hover .xxl.icon.home.hover-white,
li:hover .xxl.icon.home.hover-white { background-position: -60px -300px; }
.xxl.icon.close.white,
.xxl.icon.close.hover-white:hover,
a:hover .xxl.icon.close.hover-white,
li:hover .xxl.icon.close.hover-white { background-position: -60px -360px; }
.xxl.icon.logout.white,
.xxl.icon.logout.hover-white:hover,
a:hover .xxl.icon.logout.hover-white,
li:hover .xxl.icon.logout.hover-white { background-position: -60px -420px; }
.xxl.icon.search.white,
.xxl.icon.search.hover-white:hover,
a:hover .xxl.icon.search.hover-white,
li:hover .xxl.icon.search.hover-white { background-position: -60px -480px; }
.xxl.icon.person.white,
.xxl.icon.person.hover-white:hover,
a:hover .xxl.icon.person.hover-white,
li:hover .xxl.icon.person.hover-white { background-position: -60px -540px; }
.xxl.icon.basket.white,
.xxl.icon.basket.hover-white:hover,
a:hover .xxl.icon.basket.hover-white,
li:hover .xxl.icon.basket.hover-white { background-position: -60px -600px; }
.xxl.icon.apps.white,
.xxl.icon.apps.hover-white:hover,
a:hover .xxl.icon.apps.hover-white,
li:hover .xxl.icon.apps.hover-white { background-position: -60px -660px; }
.xxl.icon.email.white,
.xxl.icon.email.hover-white:hover,
a:hover .xxl.icon.email.hover-white,
li:hover .xxl.icon.email.hover-white { background-position: -60px -720px; }
.xxl.icon.demail.white,
.xxl.icon.demail.hover-white:hover,
a:hover .xxl.icon.demail.hover-white,
li:hover .xxl.icon.demail.hover-white { background-position: -60px -780px; }
.xxl.icon.mailcheck.white,
.xxl.icon.mailcheck.hover-white:hover,
a:hover .xxl.icon.mailcheck.hover-white,
li:hover .xxl.icon.mailcheck.hover-white { background-position: -60px -840px; }
.xxl.icon.calendar.white,
.xxl.icon.calendar.hover-white:hover,
a:hover .xxl.icon.calendar.hover-white,
li:hover .xxl.icon.calendar.hover-white { background-position: -60px -900px; }
.xxl.icon.clock.white,
.xxl.icon.clock.hover-white:hover,
a:hover .xxl.icon.clock.hover-white,
li:hover .xxl.icon.clock.hover-white { background-position: -60px -960px; }
.xxl.icon.office.white,
.xxl.icon.office.hover-white:hover,
a:hover .xxl.icon.office.hover-white,
li:hover .xxl.icon.office.hover-white { background-position: -60px -1020px; }
.xxl.icon.cloud.white,
.xxl.icon.cloud.hover-white:hover,
a:hover .xxl.icon.cloud.hover-white,
li:hover .xxl.icon.cloud.hover-white { background-position: -60px -1080px; }
.xxl.icon.security.white,
.xxl.icon.security.hover-white:hover,
a:hover .xxl.icon.security.hover-white,
li:hover .xxl.icon.security.hover-white { background-position: -60px -1140px; }
.xxl.icon.overview.white,
.xxl.icon.overview.hover-white:hover,
a:hover .xxl.icon.overview.hover-white,
li:hover .xxl.icon.overview.hover-white { background-position: -60px -1200px; }
.xxl.icon.hint.white,
.xxl.icon.hint.hover-white:hover,
a:hover .xxl.icon.hint.hover-white,
li:hover .xxl.icon.hint.hover-white { background-position: -60px -1260px; }
.xxl.icon.google.white,
.xxl.icon.google.hover-white:hover,
a:hover .xxl.icon.google.hover-white,
li:hover .xxl.icon.google.hover-white { background-position: -60px -1320px; }
.xxl.icon.facebook.white,
.xxl.icon.facebook.hover-white:hover,
a:hover .xxl.icon.facebook.hover-white,
li:hover .xxl.icon.facebook.hover-white { background-position: -60px -1380px; }
.xxl.icon.twitter.white,
.xxl.icon.twitter.hover-white:hover,
a:hover .xxl.icon.twitter.hover-white,
li:hover .xxl.icon.twitter.hover-white { background-position: -60px -1440px; }
.xxl.icon.mail.white,
.xxl.icon.mail.hover-white:hover,
a:hover .xxl.icon.mail.hover-white,
li:hover .xxl.icon.mail.hover-white { background-position: -60px -1500px; }

.xxl.icon.up.inactive,
.xxl.icon.up.hover-inactive:hover,
a:hover .xxl.icon.up.hover-inactive,
li:hover .xxl.icon.up.hover-inactive { background-position: -120px 0px; }
.xxl.icon.down.inactive,
.xxl.icon.down.hover-inactive:hover,
a:hover .xxl.icon.down.hover-inactive,
li:hover .xxl.icon.down.hover-inactive { background-position: -120px -60px; }
.xxl.icon.back.inactive,
.xxl.icon.back.hover-inactive:hover,
a:hover .xxl.icon.back.hover-inactive,
li:hover .xxl.icon.back.hover-inactive { background-position: -120px -120px; }
.xxl.icon.next.inactive,
.xxl.icon.next.hover-inactive:hover,
a:hover .xxl.icon.next.hover-inactive,
li:hover .xxl.icon.next.hover-inactive { background-position: -120px -180px; }
.xxl.icon.burger.inactive,
.xxl.icon.burger.hover-inactive:hover,
a:hover .xxl.icon.burger.hover-inactive,
li:hover .xxl.icon.burger.hover-inactive { background-position: -120px -240px; }
.xxl.icon.home.inactive,
.xxl.icon.home.hover-inactive:hover,
a:hover .xxl.icon.home.hover-inactive,
li:hover .xxl.icon.home.hover-inactive { background-position: -120px -300px; }
.xxl.icon.close.inactive,
.xxl.icon.close.hover-inactive:hover,
a:hover .xxl.icon.close.hover-inactive,
li:hover .xxl.icon.close.hover-inactive { background-position: -120px -360px; }
.xxl.icon.logout.inactive,
.xxl.icon.logout.hover-inactive:hover,
a:hover .xxl.icon.logout.hover-inactive,
li:hover .xxl.icon.logout.hover-inactive { background-position: -120px -420px; }
.xxl.icon.search.inactive,
.xxl.icon.search.hover-inactive:hover,
a:hover .xxl.icon.search.hover-inactive,
li:hover .xxl.icon.search.hover-inactive { background-position: -120px -480px; }
.xxl.icon.person.inactive,
.xxl.icon.person.hover-inactive:hover,
a:hover .xxl.icon.person.hover-inactive,
li:hover .xxl.icon.person.hover-inactive { background-position: -120px -540px; }
.xxl.icon.basket.inactive,
.xxl.icon.basket.hover-inactive:hover,
a:hover .xxl.icon.basket.hover-inactive,
li:hover .xxl.icon.basket.hover-inactive { background-position: -120px -600px; }
.xxl.icon.apps.inactive,
.xxl.icon.apps.hover-inactive:hover,
a:hover .xxl.icon.apps.hover-inactive,
li:hover .xxl.icon.apps.hover-inactive { background-position: -120px -660px; }
.xxl.icon.email.inactive,
.xxl.icon.email.hover-inactive:hover,
a:hover .xxl.icon.email.hover-inactive,
li:hover .xxl.icon.email.hover-inactive { background-position: -120px -720px; }
.xxl.icon.demail.inactive,
.xxl.icon.demail.hover-inactive:hover,
a:hover .xxl.icon.demail.hover-inactive,
li:hover .xxl.icon.demail.hover-inactive { background-position: -120px -780px; }
.xxl.icon.mailcheck.inactive,
.xxl.icon.mailcheck.hover-inactive:hover,
a:hover .xxl.icon.mailcheck.hover-inactive,
li:hover .xxl.icon.mailcheck.hover-inactive { background-position: -120px -840px; }
.xxl.icon.calendar.inactive,
.xxl.icon.calendar.hover-inactive:hover,
a:hover .xxl.icon.calendar.hover-inactive,
li:hover .xxl.icon.calendar.hover-inactive { background-position: -120px -900px; }
.xxl.icon.clock.inactive,
.xxl.icon.clock.hover-inactive:hover,
a:hover .xxl.icon.clock.hover-inactive,
li:hover .xxl.icon.clock.hover-inactive { background-position: -120px -960px; }
.xxl.icon.office.inactive,
.xxl.icon.office.hover-inactive:hover,
a:hover .xxl.icon.office.hover-inactive,
li:hover .xxl.icon.office.hover-inactive { background-position: -120px -1020px; }
.xxl.icon.cloud.inactive,
.xxl.icon.cloud.hover-inactive:hover,
a:hover .xxl.icon.cloud.hover-inactive,
li:hover .xxl.icon.cloud.hover-inactive { background-position: -120px -1080px; }
.xxl.icon.security.inactive,
.xxl.icon.security.hover-inactive:hover,
a:hover .xxl.icon.security.hover-inactive,
li:hover .xxl.icon.security.hover-inactive { background-position: -120px -1140px; }
.xxl.icon.overview.inactive,
.xxl.icon.overview.hover-inactive:hover,
a:hover .xxl.icon.overview.hover-inactive,
li:hover .xxl.icon.overview.hover-inactive { background-position: -120px -1200px; }
.xxl.icon.hint.inactive,
.xxl.icon.hint.hover-inactive:hover,
a:hover .xxl.icon.hint.hover-inactive,
li:hover .xxl.icon.hint.hover-inactive { background-position: -120px -1260px; }
.xxl.icon.google.inactive,
.xxl.icon.google.hover-inactive:hover,
a:hover .xxl.icon.google.hover-inactive,
li:hover .xxl.icon.google.hover-inactive { background-position: -120px -1320px; }
.xxl.icon.facebook.inactive,
.xxl.icon.facebook.hover-inactive:hover,
a:hover .xxl.icon.facebook.hover-inactive,
li:hover .xxl.icon.facebook.hover-inactive { background-position: -120px -1380px; }
.xxl.icon.twitter.inactive,
.xxl.icon.twitter.hover-inactive:hover,
a:hover .xxl.icon.twitter.hover-inactive,
li:hover .xxl.icon.twitter.hover-inactive { background-position: -120px -1440px; }
.xxl.icon.mail.inactive,
.xxl.icon.mail.hover-inactive:hover,
a:hover .xxl.icon.mail.hover-inactive,
li:hover .xxl.icon.mail.hover-inactive { background-position: -120px -1500px; }

.xxl.icon.up.service,
.xxl.icon.up.hover-service:hover,
a:hover .xxl.icon.up.hover-service,
li:hover .xxl.icon.up.hover-service { background-position: -180px 0px; }
.xxl.icon.down.service,
.xxl.icon.down.hover-service:hover,
a:hover .xxl.icon.down.hover-service,
li:hover .xxl.icon.down.hover-service { background-position: -180px -60px; }
.xxl.icon.back.service,
.xxl.icon.back.hover-service:hover,
a:hover .xxl.icon.back.hover-service,
li:hover .xxl.icon.back.hover-service { background-position: -180px -120px; }
.xxl.icon.next.service,
.xxl.icon.next.hover-service:hover,
a:hover .xxl.icon.next.hover-service,
li:hover .xxl.icon.next.hover-service { background-position: -180px -180px; }
.xxl.icon.burger.service,
.xxl.icon.burger.hover-service:hover,
a:hover .xxl.icon.burger.hover-service,
li:hover .xxl.icon.burger.hover-service { background-position: -180px -240px; }
.xxl.icon.home.service,
.xxl.icon.home.hover-service:hover,
a:hover .xxl.icon.home.hover-service,
li:hover .xxl.icon.home.hover-service { background-position: -180px -300px; }
.xxl.icon.close.service,
.xxl.icon.close.hover-service:hover,
a:hover .xxl.icon.close.hover-service,
li:hover .xxl.icon.close.hover-service { background-position: -180px -360px; }
.xxl.icon.logout.service,
.xxl.icon.logout.hover-service:hover,
a:hover .xxl.icon.logout.hover-service,
li:hover .xxl.icon.logout.hover-service { background-position: -180px -420px; }
.xxl.icon.search.service,
.xxl.icon.search.hover-service:hover,
a:hover .xxl.icon.search.hover-service,
li:hover .xxl.icon.search.hover-service { background-position: -180px -480px; }
.xxl.icon.person.service,
.xxl.icon.person.hover-service:hover,
a:hover .xxl.icon.person.hover-service,
li:hover .xxl.icon.person.hover-service { background-position: -180px -540px; }
.xxl.icon.basket.service,
.xxl.icon.basket.hover-service:hover,
a:hover .xxl.icon.basket.hover-service,
li:hover .xxl.icon.basket.hover-service { background-position: -180px -600px; }
.xxl.icon.apps.service,
.xxl.icon.apps.hover-service:hover,
a:hover .xxl.icon.apps.hover-service,
li:hover .xxl.icon.apps.hover-service { background-position: -180px -660px; }
.xxl.icon.email.service,
.xxl.icon.email.hover-service:hover,
a:hover .xxl.icon.email.hover-service,
li:hover .xxl.icon.email.hover-service { background-position: -180px -720px; }
.xxl.icon.demail.service,
.xxl.icon.demail.hover-service:hover,
a:hover .xxl.icon.demail.hover-service,
li:hover .xxl.icon.demail.hover-service { background-position: -180px -780px; }
.xxl.icon.mailcheck.service,
.xxl.icon.mailcheck.hover-service:hover,
a:hover .xxl.icon.mailcheck.hover-service,
li:hover .xxl.icon.mailcheck.hover-service { background-position: -180px -840px; }
.xxl.icon.calendar.service,
.xxl.icon.calendar.hover-service:hover,
a:hover .xxl.icon.calendar.hover-service,
li:hover .xxl.icon.calendar.hover-service { background-position: -180px -900px; }
.xxl.icon.clock.service,
.xxl.icon.clock.hover-service:hover,
a:hover .xxl.icon.clock.hover-service,
li:hover .xxl.icon.clock.hover-service { background-position: -180px -960px; }
.xxl.icon.office.service,
.xxl.icon.office.hover-service:hover,
a:hover .xxl.icon.office.hover-service,
li:hover .xxl.icon.office.hover-service { background-position: -180px -1020px; }
.xxl.icon.cloud.service,
.xxl.icon.cloud.hover-service:hover,
a:hover .xxl.icon.cloud.hover-service,
li:hover .xxl.icon.cloud.hover-service { background-position: -180px -1080px; }
.xxl.icon.security.service,
.xxl.icon.security.hover-service:hover,
a:hover .xxl.icon.security.hover-service,
li:hover .xxl.icon.security.hover-service { background-position: -180px -1140px; }
.xxl.icon.overview.service,
.xxl.icon.overview.hover-service:hover,
a:hover .xxl.icon.overview.hover-service,
li:hover .xxl.icon.overview.hover-service { background-position: -180px -1200px; }
.xxl.icon.hint.service,
.xxl.icon.hint.hover-service:hover,
a:hover .xxl.icon.hint.hover-service,
li:hover .xxl.icon.hint.hover-service { background-position: -180px -1260px; }
.xxl.icon.google.service,
.xxl.icon.google.hover-service:hover,
a:hover .xxl.icon.google.hover-service,
li:hover .xxl.icon.google.hover-service { background-position: -180px -1320px; }
.xxl.icon.facebook.service,
.xxl.icon.facebook.hover-service:hover,
a:hover .xxl.icon.facebook.hover-service,
li:hover .xxl.icon.facebook.hover-service { background-position: -180px -1380px; }
.xxl.icon.twitter.service,
.xxl.icon.twitter.hover-service:hover,
a:hover .xxl.icon.twitter.hover-service,
li:hover .xxl.icon.twitter.hover-service { background-position: -180px -1440px; }
.xxl.icon.mail.service,
.xxl.icon.mail.hover-service:hover,
a:hover .xxl.icon.mail.hover-service,
li:hover .xxl.icon.mail.hover-service { background-position: -180px -1500px; }



.xxxl.icon.up,
.xxxl.icon.up.hover-default:hover,
a:hover .xxxl.icon.up.hover-default,
li:hover .xxxl.icon.up.hover-default { background-position: 0px 0px; }
.xxxl.icon.down,
.xxxl.icon.down.hover-default:hover,
a:hover .xxxl.icon.down.hover-default,
li:hover .xxxl.icon.down.hover-default { background-position: 0px -75px; }
.xxxl.icon.back,
.xxxl.icon.back.hover-default:hover,
a:hover .xxxl.icon.back.hover-default,
li:hover .xxxl.icon.back.hover-default { background-position: 0px -150px; }
.xxxl.icon.next,
.xxxl.icon.next.hover-default:hover,
a:hover .xxxl.icon.next.hover-default,
li:hover .xxxl.icon.next.hover-default { background-position: 0px -225px; }
.xxxl.icon.burger,
.xxxl.icon.burger.hover-default:hover,
a:hover .xxxl.icon.burger.hover-default,
li:hover .xxxl.icon.burger.hover-default { background-position: 0px -300px; }
.xxxl.icon.home,
.xxxl.icon.home.hover-default:hover,
a:hover .xxxl.icon.home.hover-default,
li:hover .xxxl.icon.home.hover-default { background-position: 0px -375px; }
.xxxl.icon.close,
.xxxl.icon.close.hover-default:hover,
a:hover .xxxl.icon.close.hover-default,
li:hover .xxxl.icon.close.hover-default { background-position: 0px -450px; }
.xxxl.icon.logout,
.xxxl.icon.logout.hover-default:hover,
a:hover .xxxl.icon.logout.hover-default,
li:hover .xxxl.icon.logout.hover-default { background-position: 0px -525px; }
.xxxl.icon.search,
.xxxl.icon.search.hover-default:hover,
a:hover .xxxl.icon.search.hover-default,
li:hover .xxxl.icon.search.hover-default { background-position: 0px -600px; }
.xxxl.icon.person,
.xxxl.icon.person.hover-default:hover,
a:hover .xxxl.icon.person.hover-default,
li:hover .xxxl.icon.person.hover-default { background-position: 0px -675px; }
.xxxl.icon.basket,
.xxxl.icon.basket.hover-default:hover,
a:hover .xxxl.icon.basket.hover-default,
li:hover .xxxl.icon.basket.hover-default { background-position: 0px -750px; }
.xxxl.icon.apps,
.xxxl.icon.apps.hover-default:hover,
a:hover .xxxl.icon.apps.hover-default,
li:hover .xxxl.icon.apps.hover-default { background-position: 0px -825px; }
.xxxl.icon.email,
.xxxl.icon.email.hover-default:hover,
a:hover .xxxl.icon.email.hover-default,
li:hover .xxxl.icon.email.hover-default { background-position: 0px -900px; }
.xxxl.icon.demail,
.xxxl.icon.demail.hover-default:hover,
a:hover .xxxl.icon.demail.hover-default,
li:hover .xxxl.icon.demail.hover-default { background-position: 0px -975px; }
.xxxl.icon.mailcheck,
.xxxl.icon.mailcheck.hover-default:hover,
a:hover .xxxl.icon.mailcheck.hover-default,
li:hover .xxxl.icon.mailcheck.hover-default { background-position: 0px -1050px; }
.xxxl.icon.calendar,
.xxxl.icon.calendar.hover-default:hover,
a:hover .xxxl.icon.calendar.hover-default,
li:hover .xxxl.icon.calendar.hover-default { background-position: 0px -1125px; }
.xxxl.icon.clock,
.xxxl.icon.clock.hover-default:hover,
a:hover .xxxl.icon.clock.hover-default,
li:hover .xxxl.icon.clock.hover-default { background-position: 0px -1200px; }
.xxxl.icon.office,
.xxxl.icon.office.hover-default:hover,
a:hover .xxxl.icon.office.hover-default,
li:hover .xxxl.icon.office.hover-default { background-position: 0px -1275px; }
.xxxl.icon.cloud,
.xxxl.icon.cloud.hover-default:hover,
a:hover .xxxl.icon.cloud.hover-default,
li:hover .xxxl.icon.cloud.hover-default { background-position: 0px -1350px; }
.xxxl.icon.security,
.xxxl.icon.security.hover-default:hover,
a:hover .xxxl.icon.security.hover-default,
li:hover .xxxl.icon.security.hover-default { background-position: 0px -1425px; }
.xxxl.icon.overview,
.xxxl.icon.overview.hover-default:hover,
a:hover .xxxl.icon.overview.hover-default,
li:hover .xxxl.icon.overview.hover-default { background-position: 0px -1500px; }
.xxxl.icon.hint,
.xxxl.icon.hint.hover-default:hover,
a:hover .xxxl.icon.hint.hover-default,
li:hover .xxxl.icon.hint.hover-default { background-position: 0px -1575px; }
.xxxl.icon.google,
.xxxl.icon.google.hover-default:hover,
a:hover .xxxl.icon.google.hover-default,
li:hover .xxxl.icon.google.hover-default { background-position: 0px -1650px; }
.xxxl.icon.facebook,
.xxxl.icon.facebook.hover-default:hover,
a:hover .xxxl.icon.facebook.hover-default,
li:hover .xxxl.icon.facebook.hover-default { background-position: 0px -1725px; }
.xxxl.icon.twitter,
.xxxl.icon.twitter.hover-default:hover,
a:hover .xxxl.icon.twitter.hover-default,
li:hover .xxxl.icon.twitter.hover-default { background-position: 0px -1800px; }
.xxxl.icon.mail,
.xxxl.icon.mail.hover-default:hover,
a:hover .xxxl.icon.mail.hover-default,
li:hover .xxxl.icon.mail.hover-default { background-position: 0px -1875px; }

.xxxl.icon.success { background-position: 0px -1950px; }
.xxxl.icon.info { background-position: 0px -2025px; }
.xxxl.icon.warning { background-position: 0px -2100px; }
.xxxl.icon.error { background-position: 0px -2175px; }

.xxxl.icon.up.white,
.xxxl.icon.up.hover-white:hover,
a:hover .xxxl.icon.up.hover-white,
li:hover .xxxl.icon.up.hover-white { background-position: -75px 0px; }
.xxxl.icon.down.white,
.xxxl.icon.down.hover-white:hover,
a:hover .xxxl.icon.down.hover-white,
li:hover .xxxl.icon.down.hover-white { background-position: -75px -75px; }
.xxxl.icon.back.white,
.xxxl.icon.back.hover-white:hover,
a:hover .xxxl.icon.back.hover-white,
li:hover .xxxl.icon.back.hover-white { background-position: -75px -150px; }
.xxxl.icon.next.white,
.xxxl.icon.next.hover-white:hover,
a:hover .xxxl.icon.next.hover-white,
li:hover .xxxl.icon.next.hover-white { background-position: -75px -225px; }
.xxxl.icon.burger.white,
.xxxl.icon.burger.hover-white:hover,
a:hover .xxxl.icon.burger.hover-white,
li:hover .xxxl.icon.burger.hover-white { background-position: -75px -300px; }
.xxxl.icon.home.white,
.xxxl.icon.home.hover-white:hover,
a:hover .xxxl.icon.home.hover-white,
li:hover .xxxl.icon.home.hover-white { background-position: -75px -375px; }
.xxxl.icon.close.white,
.xxxl.icon.close.hover-white:hover,
a:hover .xxxl.icon.close.hover-white,
li:hover .xxxl.icon.close.hover-white { background-position: -75px -450px; }
.xxxl.icon.logout.white,
.xxxl.icon.logout.hover-white:hover,
a:hover .xxxl.icon.logout.hover-white,
li:hover .xxxl.icon.logout.hover-white { background-position: -75px -525px; }
.xxxl.icon.search.white,
.xxxl.icon.search.hover-white:hover,
a:hover .xxxl.icon.search.hover-white,
li:hover .xxxl.icon.search.hover-white { background-position: -75px -600px; }
.xxxl.icon.person.white,
.xxxl.icon.person.hover-white:hover,
a:hover .xxxl.icon.person.hover-white,
li:hover .xxxl.icon.person.hover-white { background-position: -75px -675px; }
.xxxl.icon.basket.white,
.xxxl.icon.basket.hover-white:hover,
a:hover .xxxl.icon.basket.hover-white,
li:hover .xxxl.icon.basket.hover-white { background-position: -75px -750px; }
.xxxl.icon.apps.white,
.xxxl.icon.apps.hover-white:hover,
a:hover .xxxl.icon.apps.hover-white,
li:hover .xxxl.icon.apps.hover-white { background-position: -75px -825px; }
.xxxl.icon.email.white,
.xxxl.icon.email.hover-white:hover,
a:hover .xxxl.icon.email.hover-white,
li:hover .xxxl.icon.email.hover-white { background-position: -75px -900px; }
.xxxl.icon.demail.white,
.xxxl.icon.demail.hover-white:hover,
a:hover .xxxl.icon.demail.hover-white,
li:hover .xxxl.icon.demail.hover-white { background-position: -75px -975px; }
.xxxl.icon.mailcheck.white,
.xxxl.icon.mailcheck.hover-white:hover,
a:hover .xxxl.icon.mailcheck.hover-white,
li:hover .xxxl.icon.mailcheck.hover-white { background-position: -75px -1050px; }
.xxxl.icon.calendar.white,
.xxxl.icon.calendar.hover-white:hover,
a:hover .xxxl.icon.calendar.hover-white,
li:hover .xxxl.icon.calendar.hover-white { background-position: -75px -1125px; }
.xxxl.icon.clock.white,
.xxxl.icon.clock.hover-white:hover,
a:hover .xxxl.icon.clock.hover-white,
li:hover .xxxl.icon.clock.hover-white { background-position: -75px -1200px; }
.xxxl.icon.office.white,
.xxxl.icon.office.hover-white:hover,
a:hover .xxxl.icon.office.hover-white,
li:hover .xxxl.icon.office.hover-white { background-position: -75px -1275px; }
.xxxl.icon.cloud.white,
.xxxl.icon.cloud.hover-white:hover,
a:hover .xxxl.icon.cloud.hover-white,
li:hover .xxxl.icon.cloud.hover-white { background-position: -75px -1350px; }
.xxxl.icon.security.white,
.xxxl.icon.security.hover-white:hover,
a:hover .xxxl.icon.security.hover-white,
li:hover .xxxl.icon.security.hover-white { background-position: -75px -1425px; }
.xxxl.icon.overview.white,
.xxxl.icon.overview.hover-white:hover,
a:hover .xxxl.icon.overview.hover-white,
li:hover .xxxl.icon.overview.hover-white { background-position: -75px -1500px; }
.xxxl.icon.hint.white,
.xxxl.icon.hint.hover-white:hover,
a:hover .xxxl.icon.hint.hover-white,
li:hover .xxxl.icon.hint.hover-white { background-position: -75px -1575px; }
.xxxl.icon.google.white,
.xxxl.icon.google.hover-white:hover,
a:hover .xxxl.icon.google.hover-white,
li:hover .xxxl.icon.google.hover-white { background-position: -75px -1650px; }
.xxxl.icon.facebook.white,
.xxxl.icon.facebook.hover-white:hover,
a:hover .xxxl.icon.facebook.hover-white,
li:hover .xxxl.icon.facebook.hover-white { background-position: -75px -1725px; }
.xxxl.icon.twitter.white,
.xxxl.icon.twitter.hover-white:hover,
a:hover .xxxl.icon.twitter.hover-white,
li:hover .xxxl.icon.twitter.hover-white { background-position: -75px -1800px; }
.xxxl.icon.mail.white,
.xxxl.icon.mail.hover-white:hover,
a:hover .xxxl.icon.mail.hover-white,
li:hover .xxxl.icon.mail.hover-white { background-position: -75px -1875px; }

.xxxl.icon.up.inactive,
.xxxl.icon.up.hover-inactive:hover,
a:hover .xxxl.icon.up.hover-inactive,
li:hover .xxxl.icon.up.hover-inactive { background-position: -150px 0px; }
.xxxl.icon.down.inactive,
.xxxl.icon.down.hover-inactive:hover,
a:hover .xxxl.icon.down.hover-inactive,
li:hover .xxxl.icon.down.hover-inactive { background-position: -150px -75px; }
.xxxl.icon.back.inactive,
.xxxl.icon.back.hover-inactive:hover,
a:hover .xxxl.icon.back.hover-inactive,
li:hover .xxxl.icon.back.hover-inactive { background-position: -150px -150px; }
.xxxl.icon.next.inactive,
.xxxl.icon.next.hover-inactive:hover,
a:hover .xxxl.icon.next.hover-inactive,
li:hover .xxxl.icon.next.hover-inactive { background-position: -150px -225px; }
.xxxl.icon.burger.inactive,
.xxxl.icon.burger.hover-inactive:hover,
a:hover .xxxl.icon.burger.hover-inactive,
li:hover .xxxl.icon.burger.hover-inactive { background-position: -150px -300px; }
.xxxl.icon.home.inactive,
.xxxl.icon.home.hover-inactive:hover,
a:hover .xxxl.icon.home.hover-inactive,
li:hover .xxxl.icon.home.hover-inactive { background-position: -150px -375px; }
.xxxl.icon.close.inactive,
.xxxl.icon.close.hover-inactive:hover,
a:hover .xxxl.icon.close.hover-inactive,
li:hover .xxxl.icon.close.hover-inactive { background-position: -150px -450px; }
.xxxl.icon.logout.inactive,
.xxxl.icon.logout.hover-inactive:hover,
a:hover .xxxl.icon.logout.hover-inactive,
li:hover .xxxl.icon.logout.hover-inactive { background-position: -150px -525px; }
.xxxl.icon.search.inactive,
.xxxl.icon.search.hover-inactive:hover,
a:hover .xxxl.icon.search.hover-inactive,
li:hover .xxxl.icon.search.hover-inactive { background-position: -150px -600px; }
.xxxl.icon.person.inactive,
.xxxl.icon.person.hover-inactive:hover,
a:hover .xxxl.icon.person.hover-inactive,
li:hover .xxxl.icon.person.hover-inactive { background-position: -150px -675px; }
.xxxl.icon.basket.inactive,
.xxxl.icon.basket.hover-inactive:hover,
a:hover .xxxl.icon.basket.hover-inactive,
li:hover .xxxl.icon.basket.hover-inactive { background-position: -150px -750px; }
.xxxl.icon.apps.inactive,
.xxxl.icon.apps.hover-inactive:hover,
a:hover .xxxl.icon.apps.hover-inactive,
li:hover .xxxl.icon.apps.hover-inactive { background-position: -150px -825px; }
.xxxl.icon.email.inactive,
.xxxl.icon.email.hover-inactive:hover,
a:hover .xxxl.icon.email.hover-inactive,
li:hover .xxxl.icon.email.hover-inactive { background-position: -150px -900px; }
.xxxl.icon.demail.inactive,
.xxxl.icon.demail.hover-inactive:hover,
a:hover .xxxl.icon.demail.hover-inactive,
li:hover .xxxl.icon.demail.hover-inactive { background-position: -150px -975px; }
.xxxl.icon.mailcheck.inactive,
.xxxl.icon.mailcheck.hover-inactive:hover,
a:hover .xxxl.icon.mailcheck.hover-inactive,
li:hover .xxxl.icon.mailcheck.hover-inactive { background-position: -150px -1050px; }
.xxxl.icon.calendar.inactive,
.xxxl.icon.calendar.hover-inactive:hover,
a:hover .xxxl.icon.calendar.hover-inactive,
li:hover .xxxl.icon.calendar.hover-inactive { background-position: -150px -1125px; }
.xxxl.icon.clock.inactive,
.xxxl.icon.clock.hover-inactive:hover,
a:hover .xxxl.icon.clock.hover-inactive,
li:hover .xxxl.icon.clock.hover-inactive { background-position: -150px -1200px; }
.xxxl.icon.office.inactive,
.xxxl.icon.office.hover-inactive:hover,
a:hover .xxxl.icon.office.hover-inactive,
li:hover .xxxl.icon.office.hover-inactive { background-position: -150px -1275px; }
.xxxl.icon.cloud.inactive,
.xxxl.icon.cloud.hover-inactive:hover,
a:hover .xxxl.icon.cloud.hover-inactive,
li:hover .xxxl.icon.cloud.hover-inactive { background-position: -150px -1350px; }
.xxxl.icon.security.inactive,
.xxxl.icon.security.hover-inactive:hover,
a:hover .xxxl.icon.security.hover-inactive,
li:hover .xxxl.icon.security.hover-inactive { background-position: -150px -1425px; }
.xxxl.icon.overview.inactive,
.xxxl.icon.overview.hover-inactive:hover,
a:hover .xxxl.icon.overview.hover-inactive,
li:hover .xxxl.icon.overview.hover-inactive { background-position: -150px -1500px; }
.xxxl.icon.hint.inactive,
.xxxl.icon.hint.hover-inactive:hover,
a:hover .xxxl.icon.hint.hover-inactive,
li:hover .xxxl.icon.hint.hover-inactive { background-position: -150px -1575px; }
.xxxl.icon.google.inactive,
.xxxl.icon.google.hover-inactive:hover,
a:hover .xxxl.icon.google.hover-inactive,
li:hover .xxxl.icon.google.hover-inactive { background-position: -150px -1650px; }
.xxxl.icon.facebook.inactive,
.xxxl.icon.facebook.hover-inactive:hover,
a:hover .xxxl.icon.facebook.hover-inactive,
li:hover .xxxl.icon.facebook.hover-inactive { background-position: -150px -1725px; }
.xxxl.icon.twitter.inactive,
.xxxl.icon.twitter.hover-inactive:hover,
a:hover .xxxl.icon.twitter.hover-inactive,
li:hover .xxxl.icon.twitter.hover-inactive { background-position: -150px -1800px; }
.xxxl.icon.mail.inactive,
.xxxl.icon.mail.hover-inactive:hover,
a:hover .xxxl.icon.mail.hover-inactive,
li:hover .xxxl.icon.mail.hover-inactive { background-position: -150px -1875px; }

.xxxl.icon.up.service,
.xxxl.icon.up.hover-service:hover,
a:hover .xxxl.icon.up.hover-service,
li:hover .xxxl.icon.up.hover-service { background-position: -225px 0px; }
.xxxl.icon.down.service,
.xxxl.icon.down.hover-service:hover,
a:hover .xxxl.icon.down.hover-service,
li:hover .xxxl.icon.down.hover-service { background-position: -225px -75px; }
.xxxl.icon.back.service,
.xxxl.icon.back.hover-service:hover,
a:hover .xxxl.icon.back.hover-service,
li:hover .xxxl.icon.back.hover-service { background-position: -225px -150px; }
.xxxl.icon.next.service,
.xxxl.icon.next.hover-service:hover,
a:hover .xxxl.icon.next.hover-service,
li:hover .xxxl.icon.next.hover-service { background-position: -225px -225px; }
.xxxl.icon.burger.service,
.xxxl.icon.burger.hover-service:hover,
a:hover .xxxl.icon.burger.hover-service,
li:hover .xxxl.icon.burger.hover-service { background-position: -225px -300px; }
.xxxl.icon.home.service,
.xxxl.icon.home.hover-service:hover,
a:hover .xxxl.icon.home.hover-service,
li:hover .xxxl.icon.home.hover-service { background-position: -225px -375px; }
.xxxl.icon.close.service,
.xxxl.icon.close.hover-service:hover,
a:hover .xxxl.icon.close.hover-service,
li:hover .xxxl.icon.close.hover-service { background-position: -225px -450px; }
.xxxl.icon.logout.service,
.xxxl.icon.logout.hover-service:hover,
a:hover .xxxl.icon.logout.hover-service,
li:hover .xxxl.icon.logout.hover-service { background-position: -225px -525px; }
.xxxl.icon.search.service,
.xxxl.icon.search.hover-service:hover,
a:hover .xxxl.icon.search.hover-service,
li:hover .xxxl.icon.search.hover-service { background-position: -225px -600px; }
.xxxl.icon.person.service,
.xxxl.icon.person.hover-service:hover,
a:hover .xxxl.icon.person.hover-service,
li:hover .xxxl.icon.person.hover-service { background-position: -225px -675px; }
.xxxl.icon.basket.service,
.xxxl.icon.basket.hover-service:hover,
a:hover .xxxl.icon.basket.hover-service,
li:hover .xxxl.icon.basket.hover-service { background-position: -225px -750px; }
.xxxl.icon.apps.service,
.xxxl.icon.apps.hover-service:hover,
a:hover .xxxl.icon.apps.hover-service,
li:hover .xxxl.icon.apps.hover-service { background-position: -225px -825px; }
.xxxl.icon.email.service,
.xxxl.icon.email.hover-service:hover,
a:hover .xxxl.icon.email.hover-service,
li:hover .xxxl.icon.email.hover-service { background-position: -225px -900px; }
.xxxl.icon.demail.service,
.xxxl.icon.demail.hover-service:hover,
a:hover .xxxl.icon.demail.hover-service,
li:hover .xxxl.icon.demail.hover-service { background-position: -225px -975px; }
.xxxl.icon.mailcheck.service,
.xxxl.icon.mailcheck.hover-service:hover,
a:hover .xxxl.icon.mailcheck.hover-service,
li:hover .xxxl.icon.mailcheck.hover-service { background-position: -225px -1050px; }
.xxxl.icon.calendar.service,
.xxxl.icon.calendar.hover-service:hover,
a:hover .xxxl.icon.calendar.hover-service,
li:hover .xxxl.icon.calendar.hover-service { background-position: -225px -1125px; }
.xxxl.icon.clock.service,
.xxxl.icon.clock.hover-service:hover,
a:hover .xxxl.icon.clock.hover-service,
li:hover .xxxl.icon.clock.hover-service { background-position: -225px -1200px; }
.xxxl.icon.office.service,
.xxxl.icon.office.hover-service:hover,
a:hover .xxxl.icon.office.hover-service,
li:hover .xxxl.icon.office.hover-service { background-position: -225px -1275px; }
.xxxl.icon.cloud.service,
.xxxl.icon.cloud.hover-service:hover,
a:hover .xxxl.icon.cloud.hover-service,
li:hover .xxxl.icon.cloud.hover-service { background-position: -225px -1350px; }
.xxxl.icon.security.service,
.xxxl.icon.security.hover-service:hover,
a:hover .xxxl.icon.security.hover-service,
li:hover .xxxl.icon.security.hover-service { background-position: -225px -1425px; }
.xxxl.icon.overview.service,
.xxxl.icon.overview.hover-service:hover,
a:hover .xxxl.icon.overview.hover-service,
li:hover .xxxl.icon.overview.hover-service { background-position: -225px -1500px; }
.xxxl.icon.hint.service,
.xxxl.icon.hint.hover-service:hover,
a:hover .xxxl.icon.hint.hover-service,
li:hover .xxxl.icon.hint.hover-service { background-position: -225px -1575px; }
.xxxl.icon.google.service,
.xxxl.icon.google.hover-service:hover,
a:hover .xxxl.icon.google.hover-service,
li:hover .xxxl.icon.google.hover-service { background-position: -225px -1650px; }
.xxxl.icon.facebook.service,
.xxxl.icon.facebook.hover-service:hover,
a:hover .xxxl.icon.facebook.hover-service,
li:hover .xxxl.icon.facebook.hover-service { background-position: -225px -1725px; }
.xxxl.icon.twitter.service,
.xxxl.icon.twitter.hover-service:hover,
a:hover .xxxl.icon.twitter.hover-service,
li:hover .xxxl.icon.twitter.hover-service { background-position: -225px -1800px; }
.xxxl.icon.mail.service,
.xxxl.icon.mail.hover-service:hover,
a:hover .xxxl.icon.mail.hover-service,
li:hover .xxxl.icon.mail.hover-service { background-position: -225px -1875px; }





.list {
    list-style: none;
}
.list li {
    padding: 5px 0px;
    position: relative;
}
.list li:before {
    content: "";
    display: inline-block;
    background: #F2B600;
}
ul.list {
    padding-left: 24px;
}
ul.list li:before {
    width: 16px;
    height: 16px;
    border-radius: 8px;
    margin: 0px 8px 0px -24px;
    vertical-align: -2px;
}
ul.check.list,
ol.list {
    padding-left: 32px;
    font-family: 'WebdeSans', Arial, sans-serif;
    font-size: 20px;
    line-height: 28px;
}
ul.check.list li:before {
    width: 24px;
    height: 24px;
    border-radius: 12px;
    margin: 0px 8px 0px -32px;
    vertical-align: -4px
}
ul.check.list li:after {
    content: "";
    position: absolute;
    top: 15px;
    left: -29px;
    width: 3px;
    height: 3px;
    background: transparent;
    -webkit-box-shadow: 0px 1px 0px #FFFFFF, 0px 2px 0px #FFFFFF, 0px 4px 0px #FFFFFF, 0px 6px 0px #FFFFFF, 0px 8px 0px #FFFFFF,
                        2px 8px 0px #FFFFFF, 4px 8px 0px #FFFFFF, 6px 8px 0px #FFFFFF, 8px 8px 0px #FFFFFF, 10px 8px 0px #FFFFFF;
    box-shadow: 0px 1px 0px #FFFFFF, 0px 2px 0px #FFFFFF, 0px 4px 0px #FFFFFF, 0px 6px 0px #FFFFFF, 0px 8px 0px #FFFFFF,
                2px 8px 0px #FFFFFF, 4px 8px 0px #FFFFFF, 6px 8px 0px #FFFFFF, 8px 8px 0px #FFFFFF, 10px 8px 0px #FFFFFF;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
ol.list {
    padding-left: 40px;
    counter-reset: section 1;
}
ol.list[start="2"] { counter-reset: section 2; }
ol.list[start="3"] { counter-reset: section 3; }
ol.list[start="4"] { counter-reset: section 4; }
ol.list[start="5"] { counter-reset: section 5; }
ol.list[start="6"] { counter-reset: section 6; }
ol.list[start="7"] { counter-reset: section 7; }
ol.list[start="8"] { counter-reset: section 8; }
ol.list[start="9"] { counter-reset: section 9; }
ol.list[start="10"] { counter-reset: section 10; }
ol.list[start="11"] { counter-reset: section 11; }
ol.list[start="12"] { counter-reset: section 12; }
ol.list[start="13"] { counter-reset: section 13; }
ol.list[start="14"] { counter-reset: section 14; }
ol.list[start="15"] { counter-reset: section 15; }
ol.list[start="16"] { counter-reset: section 16; }
ol.list[start="17"] { counter-reset: section 17; }
ol.list[start="18"] { counter-reset: section 18; }
ol.list[start="19"] { counter-reset: section 19; }
ol.list[start="20"] { counter-reset: section 20; }
ol.list li {
    padding: 7px 0px;
}
ol.list li:before {
    content: counter(section, decimal);
    width: 32px;
    height: 32px;
    border-radius: 16px;
    margin: 0px 8px 0px -40px;
    color: #FFFFFF;
    text-align: center;
    line-height: 32px;
    vertical-align: 1px;
}
ol.list li:after {
    content: "";
    counter-increment: section;
}
ul.text.list {
    padding-left: 0px;
}
ul.text.list li:before {
    content: none;
}
ul.text.list .m.icon:first-child {
    float: left;
    margin: -3px 8px 0px 0px;
}
ul.text.list .s.icon:first-child {
    float: left;
    margin: 1px 8px 0px 4px;
}
ul.inline.list li {
    display: inline;
}
ul.inline-block.list li {
    display: inline-block;
}
ul.horizontal.list li {
    float: left;
}
ul.horizontal.list.align-right {
    float: right;
}
ul.inline.list li,
ul.inline-block.list li,
ul.horizontal.list {
    margin-right: 20px;
}
ul.inline.list.align-center li,
ul.inline-block.list.align-center li {
    margin-left: 10px;
    margin-right: 10px;
}
ul.inline.list.align-right li,
ul.inline-block.list.align-right li,
ul.horizontal.list.align-right li {
    margin-left: 20px;
}
ul.horizontal.index.list li {
    margin-right: 0px;
}
ul.inline.list li:last-child,
ul.inline-block.list li:last-child,
ul.horizontal.list li:last-child {
    margin-right: 0px;
}
@media screen and (max-width: 479px) {
    ul.inline.list li,
    ul.inline-block.list li,
    ul.horizontal.list li {
        margin-right: 10px;
    }
}
ul.single-line.list li {
    white-space: nowrap;
    text-overflow: ellipsis;
}
dl.list dt[class], dd[class] {
  display: inline-block;
  vertical-align: top;
}
dl.list dd[class] {
    margin-left: 0px;
    padding-left: 40px;
    display: inline;
}

.button, .button:hover, .button:visited  {
    margin-left: 0;
    margin-right: 0;
    border: none;
    text-decoration: none;
    cursor: pointer;
    text-align:center;
    white-space:nowrap;
    outline:none;
    display: inline-block;
    padding: 0 20px;
    font-style:normal;
    width:auto;
    letter-spacing:0;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
-webkit-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;
-webkit-transition: background-color 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out;
        transition: background-color 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out;

    /* Vermutlich markenspezifisches CSS*/
    font-weight: 500;
    font-family: 'WebdeSans', Arial, Verdana, sans-serif;
    border: solid 1px;
    border-radius: 5px;
}

[class].ghost.button,
[class].ghost.button[disabled],
[class].ghost.button[disabled]:visited,
[class].ghost.button[disabled]:active,
[class].ghost.button[disabled]:hover,
[class].ghost.button[disabled]:focus,
[class].ghost.button[aria-disabled="true"],
[class].ghost.button[aria-disabled="true"]:visited,
[class].ghost.button[aria-disabled="true"]:active,
[class].ghost.button[aria-disabled="true"]:hover,
[class].ghost.button[aria-disabled="true"]:focus {
    background-color: transparent;
}

/* IOS formatiert den input-Button zwangsweise um, so dass er wie ein IOS-Button aussieht */
input.button {
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Firefox <button> inner spacing: http://stackoverflow.com/questions/5517744/remove-extra-button-spacing-padding-in-firefox */
input.button::-moz-focus-inner,
button.button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

/* Fixt das Fira-Sans line-height Problem und richtet die fira an der Verdana line-height aus* /
.button:before {
    content: '';
    font-family: Arial, Verdana, sans-serif;
}
/**/

.button[disabled],
.button[aria-disabled="true"] { /* IE8 Textcolor issue http://stackoverflow.com/questions/5485642/how-do-you-style-disabled-textarea-in-ie8 */
    cursor: default;
    cursor: not-allowed;
    text-shadow: none;
}

.button:active {
/*-webkit-box-shadow: 0 3px 5px -1px rgba(0,0,0,.4) inset;
        box-shadow: 0 3px 5px -1px rgba(0,0,0,.4) inset;*/
}

.button[aria-disabled="true"]:active,
.button[disabled]:active {
-webkit-box-shadow: none;
        box-shadow: none;
}

/* Buttongröße: L (default) */

.button,
.button.l {
    font-size: 20px;
    line-height: 40px;
    height: 40px;
}

/* Buttongröße: XL */

.button.xl {
/*  font-size: 26px; */
    line-height:50px;
    height: 50px;
}

/* Buttonausprägung: KEY (default) */

/* default */
.button,
.button:visited,
.button:active,
.button:active:hover,
/* key */
.button.key,
.button.key:visited,
.button.key:active,
.button.key:active:hover {
    color: #262626;
    background-color: #FFC800;
    border-color: #FFC800;
    text-decoration: none;
}


/* default */
.button:hover,
.button:focus,
/* key */
.button.key:hover,
.button.key:focus {
    color: #262626;
    background-color: #D9AA00;
    border-color: #D9AA00;
    text-decoration: none;
}

.ghost.button,
.ghost.button.key {
    color: #FFC800;
}

.ghost.button:hover,
.ghost.button:focus,
/* key */
.ghost.button.key:hover,
.ghost.button.key:focus {
    color: #262626;
}

/* default */
.button[disabled],
.button[disabled]:visited,
.button[disabled]:hover,
.button[disabled]:focus,
.button[aria-disabled="true"],
.button[aria-disabled="true"]:hover,
.button[aria-disabled="true"]:visited,
.button[aria-disabled="true"]:focus,
/* key */
.button.key[disabled],
.button.key[disabled]:visited,
.button.key[disabled]:hover,
.button.key[disabled]:focus,
.button.key[aria-disabled="true"],
.button.key[aria-disabled="true"]:visited,
.button.key[aria-disabled="true"]:hover,
.button.key[aria-disabled="true"]:focus {
    color: #D4D4D4;
    background-color: #fff4cc;
    border-color: #fff4cc;
}


/* default */
.ghost.button[disabled],
.ghost.button[disabled]:visited,
.ghost.button[disabled]:hover,
.ghost.button[disabled]:focus,
.ghost.button[aria-disabled="true"],
.ghost.button[aria-disabled="true"]:hover,
.ghost.button[aria-disabled="true"]:visited,
.ghost.button[aria-disabled="true"]:focus,
/* key */
.ghost.button.key[disabled],
.ghost.button.key[disabled]:visited,
.ghost.button.key[disabled]:hover,
.ghost.button.key[disabled]:focus,
.ghost.button.key[aria-disabled="true"],
.ghost.button.key[aria-disabled="true"]:visited,
.ghost.button.key[aria-disabled="true"]:hover,
.ghost.button.key[aria-disabled="true"]:focus {
    color: #fff4cc;
}

/* Buttonausprägung: SERVICE */

.button.service,
.button.service:visited,
.button.service:active,
.button.service:active:hover {
    color: #FFFFFF;
    background-color: #F2B600;
    border-color: #F2B600;
}

.button.service:hover,
.button.service:focus {
    color: #FFFFFF;
    background-color: #DAA400;
    border-color: #DAA400;
}

.ghost.button.service {
    color: #F2B600;
}

.ghost.button.service:hover,
.ghost.button.service:focus {
    color: #FFFFFF;
}

.button.service[disabled],
.button.service[disabled]:visited,
.button.service[disabled]:hover,
.button.service[disabled]:focus,
.button.service[aria-disabled="true"],
.button.service[aria-disabled="true"]:visited,
.button.service[aria-disabled="true"]:hover,
.button.service[aria-disabled="true"]:focus {
    color: #FFFFFF;
    background-color: #DAE7F5;
    border-color: #DAE7F5;
}

.ghost.button.service[disabled],
.ghost.button.service[disabled]:visited,
.ghost.button.service[disabled]:hover,
.ghost.button.service[disabled]:focus,
.ghost.button.service[aria-disabled="true"],
.ghost.button.service[aria-disabled="true"]:visited,
.ghost.button.service[aria-disabled="true"]:hover,
.ghost.button.service[aria-disabled="true"]:focus {
    color: #DAE7F5;
}

/* Buttonausprägung: SECONDARY */

.button.secondary,
.button.secondary:visited,
.button.secondary:active,
.button.secondary:active:hover {
    color: #262626;
    background-color: #e5e5e5;
    border-color: #e5e5e5;
}

.button.secondary:hover,
.button.secondary:focus {
    color: #262626;
    background-color: #c9c9c9;
    border-color: #c9c9c9;
}

.ghost.button.secondary {
    color: #e5e5e5;
}

.ghost.button.secondary:hover,
.ghost.button.secondary:focus {
    color: #262626;
}

.button.secondary[disabled],
.button.secondary[disabled]:visited,
.button.secondary[disabled]:hover,
.button.secondary[disabled]:focus,
.button.secondary[aria-disabled="true"],
.button.secondary[aria-disabled="true"]:visited,
.button.secondary[aria-disabled="true"]:hover,
.button.secondary[aria-disabled="true"]:focus{
    color:#D4D4D4;
    background-color: #F5F5F5;
    border-color: #F5F5F5;
}

.ghost.button.secondary[disabled],
.ghost.button.secondary[disabled]:visited,
.ghost.button.secondary[disabled]:hover,
.ghost.button.secondary[disabled]:focus,
.ghost.button.secondary[aria-disabled="true"],
.ghost.button.secondary[aria-disabled="true"]:visited,
.ghost.button.secondary[aria-disabled="true"]:hover,
.ghost.button.secondary[aria-disabled="true"]:focus{
    color: #c9c9c9;
}


/* Buttonausprägung: LEVEL4 --> Ist das wirklich level 4, oder eigentlich level 3 (tertiary)? */

.button.level4,
.button.level4:visited,
.button.level4:active,
.button.level4:active:hover {
    color: #262626;
    background-color: transparent;
    border:1px solid #c6c6c6;
}

.button.level4:hover,
.button.level4:focus {
    color: #262626;
    background-color: #b2b2b2;
    border-color: #b2b2b2;
}

.ghost.button.level4 {
    color: #262626;
}

.ghost.button.level4:hover,
.ghost.button.level4:focus {
    color: #262626;
}

.button.level4[disabled],
.button.level4[disabled]:visited,
.button.level4[disabled]:hover,
.button.level4[disabled]:focus,
.button.level4[aria-disabled="true"],
.button.level4[aria-disabled="true"]:visited,
.button.level4[aria-disabled="true"]:hover,
.button.level4[aria-disabled="true"]:focus{
    color:#d4d4d4;
    background-color: transparent;
    border-color:#e3e3e3;
}

.ghost.button.level4[disabled],
.ghost.button.level4[disabled]:visited,
.ghost.button.level4[disabled]:hover,
.ghost.button.level4[disabled]:focus,
.ghost.button.level4[aria-disabled="true"],
.ghost.button.level4[aria-disabled="true"]:visited,
.ghost.button.level4[aria-disabled="true"]:hover,
.ghost.button.level4[aria-disabled="true"]:focus{
    color: #b2b2b2;
}

/*.button .icon {
    vertical-align: -5px;
}
.button .l.icon {
    vertical-align: -8px;
}*/

.button .m.icon {
    vertical-align: -4px;
}



form {
	position: relative;
	width: 100%;
	display: block;
}
/* overwrite vor vspace overflow-y in order to not cut any error bubbles */
form[class] {
	overflow: visible;
}
fieldset {
	display: table;
	border: 0px;
	padding: 0px;
	margin-left: 0px;
	margin-right: 0px;
	max-width: 580px;
	width: 100%;
}
@media all and (min-width: 660px) {
	fieldset.inline {margin-left: 16px;}
	fieldset.inline:first-child,
	fieldset.unaligned:first-child {margin-left: 0px;}
}

.xl fieldset,
fieldset.xl {
	max-width: 940px;
}
p > fieldset {
	display: inline-table;
	width: auto;
}
fieldset.unaligned {
	display: inline-block;
	position: relative;
}
@media all and (max-width: 659.9px) {
	fieldset.unaligned { width: 100%; }
}
.field {
	display: block;
	position: relative;
}
fieldset:last-child .field {
	padding-bottom: 0px;
}
fieldset .field {
	display: table-cell;
	vertical-align: bottom;
	width: 580px;
	margin-left: 0px;
}
fieldset .field + .field {
	padding-left: 20px;
}
form > .field {
	box-sizing: border-box;
	max-width: 580px;
}
form.xl > .field,
form > .xl > .field,
form > .field.xl {
	max-width: 940px;
}
fieldset.unaligned .field {
	display: inline-block;
	float: left;
}

fieldset.fix,
.field.fix {
	max-width: none;
}

.field input[type="text"],
.field input[type="password"],
.field input[type="number"],
.field input[type="date"],
.field input[type="month"],
.field input[type="week"],
.field input[type="time"],
.field input[type="datetime"],
.field input[type="datetime-local"],
.field input[type="email"],
.field input[type="search"],
.field input[type="tel"],
.field input[type="color"],
.field select {
	display: block;
	width: 100%;
	box-sizing: border-box;
	border-radius: 3px;
	border: 1px solid #C2C2C2;
	position: relative;
	height: 40px;
	padding: 0px 10px;
	font-size: 16px;
	line-height: 40px;
	color: #333333;
	font-family: WebdeSansRegular, Verdana, sans-serif;
	font-size: 16px;
	box-shadow: none;
}
.field select {
	padding: 8px 0px;
}
.field select, #not#ie8 {
	padding: 0px 10px;
}
.xl .field input[type="text"],
.xl .field input[type="password"],
.xl .field input[type="number"],
.xl .field input[type="date"],
.xl .field input[type="month"],
.xl .field input[type="week"],
.xl .field input[type="time"],
.xl .field input[type="datetime"],
.xl .field input[type="datetime-local"],
.xl .field input[type="email"],
.xl .field input[type="search"],
.xl .field input[type="tel"],
.xl .field input[type="color"],
.xl .field select,
.field.xl input[type="text"],
.field.xl input[type="password"],
.field.xl input[type="number"],
.field.xl input[type="date"],
.field.xl input[type="month"],
.field.xl input[type="week"],
.field.xl input[type="time"],
.field.xl input[type="datetime"],
.field.xl input[type="datetime-local"],
.field.xl input[type="email"],
.field.xl input[type="search"],
.field.xl input[type="tel"],
.field.xl input[type="color"],
.field.xl select {
	height: 48px;
	font-size: 20px;
}
.field.xl select {
	text-indent: 5px;
}
.field textarea {
	display: block;
	width: 100%;
	font-family: Arial, sans-serif;
	box-sizing: border-box;
	border-radius: 3px;
	border: 1px solid #B4B4B4;
	position: relative;
	padding: 10px;
	font-size: 16px;
	resize: vertical;
}
.field.xl select {
	font-size: 20px;
}
/* IE10+: no text-indent in select - use padding instead */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.field select{
	padding-left: 10px;
}
}
/* Webkit-based browsers: replace Select Icon */
@supports (-webkit-appearance:none) {
.field select {
	-webkit-appearance: none;
	line-height: 37px;
}
.field.select:after {
	content: "";
	position: absolute;
	right: 12px;
	bottom: 15px;
	background-color: transparent;
	border-left: 3px solid #333333;
	border-bottom: 3px solid #333333;
	border-radius: 0px 0px 0px 3px;
	width: 12px;
	height: 12px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	pointer-events:none;
}
}
/* IE10+: style Select Icon */
.field.select ::-ms-expand {
	background: none;
	border: none;
	padding-right: 5px;
}
/* Webkit/Firefox: disable spinner on Number fields */
.field input[type="number"]::-webkit-inner-spin-button,
.field input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
}
/* Sarafi (Mac): By default, older versions of Safari will not apply even the most basic CSS styles to <input type="search"> fields. */
.field input[type="search"] {
	-webkit-appearance: none;
}

.field input[type="number"] {
    -moz-appearance:textfield;
}
/* Webkit: disable cancel button in search fields when JS is active */
.js .field input[type="search"]::-webkit-search-cancel-button {
	display: none;
}
/* Format Placeholder - needs one selector each, otherwise the clients disregard the selector as invalid */
.field ::-webkit-input-placeholder {
	font-size: 16px;
}
.field ::-moz-placeholder {
	font-size: 16px;
}
.field :-moz-placeholder {
	font-size: 16px;
}
.field ::-ms-input-placeholder {
	font-size: 16px;
}
.xl .field ::-webkit-input-placeholder {
	font-size: 20px;
	line-height: 40px;
}
.xl .field ::-moz-placeholder {
	font-size: 20px;
	line-height: 40px;
}
.xl .field :-moz-placeholder {
	font-size: 20px;
	line-height: 40px;
}
.xl .field ::-ms-input-placeholder {
	font-size: 20px;
	line-height: 40px;
}
.field {
	width: 100%;
	max-width: 580px;
}
.field.half-size {
	width: 50%;
	max-width: 280px;
	min-width: 140px;
}
.field.quarter-size {
	width: 25%;
	max-width: 130px;
	min-width: 100px;
}
.field.min-size {
	width: 1%;
}

fieldset .field.half-size {
	width: 280px;
}
fieldset .field.custom-size.size-160 	{ width: 160px; }
fieldset .field.custom-size.size-200 	{ width: 200px; }
fieldset .field.custom-size.size-240 	{ width: 240px; }
fieldset .field.custom-size.size-280 	{ width: 280px; }
fieldset .field.custom-size.size-320 	{ width: 320px; }
@media all and (max-width: 659.9px) {
	fieldset .field.custom-size.size-160,
	fieldset .field.custom-size.size-200,
	fieldset .field.custom-size.size-240,
	fieldset .field.custom-size.size-280,
	fieldset .field.custom-size.size-320 	{ width: 100%; }
}
fieldset legend {
	line-height: 40px;
	display: table-header-group;
	margin: 0px;
	padding: 0px;
	font-family: WebdeSansRegular, Verdana, sans-serif;
}
.field label {
	/* Avoid selecting label content instead of focussing input * /
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	/**/
	cursor: pointer;
	display: inline-block;
	line-height: 40px;
	font-family: WebdeSansRegular, Verdana, sans-serif;
}
.field label .note,
fieldset legend .note {
	color: #717171;
}
fieldset legend ~ .field label {
	display: block;
	position: absolute;
	margin-left: -10000px;
}
fieldset.show-labels legend ~ .field label {
	position: relative;
	margin-left: 0px;
}
fieldset legend ~ .field.checkbox input ~ label,
fieldset legend ~ .field.radio input ~ label {
	position: relative;
	margin-left: 0px;
	display: inline-block;
}
fieldset legend ~ .field {
	position: static;
}
fieldset legend ~ .field.error ~ .field.error .error.icon {
	display: none;
}
fieldset legend ~ .field .error,
fieldset legend ~ .field .helper {
	position: absolute;
	top: 0px;
	right: 0px;
}
fieldset legend ~ .field .error + .helper,
fieldset legend ~ .error ~ .field .helper {
	right: 32px;
}
fieldset legend ~ .field .icon + input,
fieldset legend ~ .field .icon + select, #not#ie8 {
	position: relative;
	margin-bottom: -30px;
}
.field label ~ .icon,
.field label ~ .helper,
.field > .icon:first-child,
.field .helper:first-child {
	float: right;
	margin: 5px 0px 0px 10px;
	position: relative;
}
.xl .field label ~ .icon,
.xl .field label ~ .helper,
.xl .field > .icon:first-child,
.xl .field .helper:first-child {
	margin-bottom: 5px;
}
.action.field > .button {
	top: 40px;
}
.action.field.nolabel > .button {
	top: 0px;
}
.action.field > .icon {
	float: right;
	margin: 5px 0px 10px 10px;
	position: relative;
}
.field.radio,
.field.checkbox {
	margin-top: 10px;
}
/* Checkbox/Radio always requires a label */
.field.radio label,
.field.checkbox label {
	margin-left: 0px;
	line-height: 24px;
}
.field.radio label.icon,
.field.checkbox label.icon {
	display: none;
}
.field.radio a.icon,
.field.checkbox a.icon {
	float: right;
	margin-top: 10px;
	position: relative;
}
.field.radio input,
.field.checkbox input {
	float: left;
	margin: 10px 10px 0px 0px;
}
@media all and (min-width: 0px) {
.field.radio,
.field.checkbox {
	padding-left: 45px;
}
.field.radio label,
.field.checkbox label {
	display: inline;
	position: relative;
}
.field.radio.block label,
.field.checkbox.block label {
	display: block;
}
.field.radio input,
.field.checkbox input {
	position: absolute;
	opacity: 0;
}
.field.checkbox input ~ label:before,
.field.radio input ~ label:before {
	content: "";
	display: inline-block;
	vertical-align: 0px;
	border: 1px solid #B4B4B4;
	background: #FFFFFF;
	width: 32px;
	height: 32px;
	left: -45px;
	margin: 2px -35px -10px 0px;
	box-sizing: border-box;
	position: relative;
}
.field.checkbox input ~ label:before {
	border-radius: 3px;
	margin-left: 2px;
}
.field.radio input ~ label:before {
	border-radius: 50%;
}
.field.radio input:checked ~ label:after {
	content: "";
	position: absolute;
	top: 10px;
	left: -37px;
	border-radius: 50%;
	width: 16px;
	height: 16px;
	background: #333333;
}
.field.checkbox input:checked ~ label:after {
	content: "";
	position: absolute;
	top: 3px;
	left: -37px;
	width: 16px;
	height: 6px;
	border-left: 4px solid #333333;
	border-bottom: 4px solid #333333;
	-webkit-transform: rotate(-50deg);
	-moz-transform: rotate(-50deg);
	-ms-transform: rotate(-50deg);
	transform: rotate(-50deg);
}
.field.checkbox.indented input ~ label:after,
.field.radio.indented input ~ label:after {
	left: -37px;
}
.field.checkbox input ~ label ~ label:before,
.field.radio input ~ label ~ label:before,
.field.checkbox input:checked ~ label ~ label:after {
	content: none;
}
}
/* focus */
.field input[type="text"]:focus,
.field input[type="password"]:focus,
.field input[type="number"]:focus,
.field input[type="date"]:focus,
.field input[type="month"]:focus,
.field input[type="week"]:focus,
.field input[type="time"]:focus,
.field input[type="datetime"]:focus,
.field input[type="datetime-local"]:focus,
.field input[type="email"]:focus,
.field input[type="search"]:focus,
.field input[type="tel"]:focus,
.field input[type="color"]:focus,
.field select:focus,
.field textarea:focus {
	outline: none;
	border-color: #1C8AD9;
}
@media all and (min-width: 0px) {
.field.checkbox input:focus + label:before,
.field.radio input:focus + label:before {
	border-color: #1F6A9F;
}
}
/* suggest */
/* IE hides the suggest too early, so we have to resort to an evil animations trick */
-ms-keyframes hide-suggest { 0% {display: block; opacity: 1;} 99% {display: block;} 100% { display: none; opacity: 0;}}
.suggest {
	display: none;
	-ms-animation: hide-suggest 0.25s linear;
	position: absolute;
	width: 100%;
	margin: -1px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background: #FFFFFF;
	box-sizing: border-box;
	z-index: 9999;
	font-family: WebdeSansRegular;
	list-style: none;
}
.suggest-subline {
	display: none;
	padding: 5px 10px;
}
input:focus ~ .suggest,
.suggest:hover {
	display: block;
	animation: none;
}
input:focus ~ .suggest:empty,
.suggest:empty:hover {
	display: none;
}
.suggest > * {
	box-sizing: border-box;
	display: block;
	border: solid #C2C2C2;
	border-width: 0px 1px;
}
.suggest > *:first-child {
	border-top: 1px solid #DADADA;
}
.suggest > *:first-child:before {
	content: "";
	position: absolute;
	left: 0px;
	margin-top: -9px;
	width: 100%;
	height: 3px;
	box-sizing: border-box;
	background: #FFFFFF;
	border: solid #1C8AD9;
	border-width: 0px 1px;
}
.suggest > *:last-child {
	border-width: 0px 1px 1px 1px;
	border-radius: 0px 0px 4px 4px;
}
.js input::-webkit-calendar-picker-indicator {
	display: none;
}
.suggest a {
	text-decoration: none;
	color: #515151;
	display: block;
}
.suggest > a,
.suggest > option,
.suggest > li {
	display: block;
	padding: 5px 10px;
	color: #515151;
	margin: 0px;
	cursor: pointer;
}
.suggest > li > a {
	margin: -5px -10px;
	padding: 5px 10px;
}
.suggest > a:hover,
.suggest > a:focus,
.suggest > option:hover,
.suggest > option:focus,
.suggest > li:hover,
.suggest > li:focus,
.suggest > .active,
.suggest > .active * {
	background: #DADADA;
}
.suggest > * > * {
	display: inline;
}
.suggest strong,
.suggest em {
	font-style: normal;
	font-weight: 700;
}
/* form actions */
form .actions {
	margin-top: 10px;
	overflow: hidden;
}
form .actions .right {
	float: right;
}
/* error */
.field.error input[type="text"],
.field.error input[type="password"],
.field.error input[type="number"],
.field.error input[type="date"],
.field.error input[type="month"],
.field.error input[type="week"],
.field.error input[type="time"],
.field.error input[type="datetime"],
.field.error input[type="datetime-local"],
.field.error input[type="email"],
.field.error input[type="search"],
.field.error input[type="tel"],
.field.error input[type="color"],
.field.error select,
.field.error textarea {
	border-color: #C00030;
	background-color: #F5D1DB;
	box-shadow: none;
}
.field.error input[type="text"]:focus,
.field.error input[type="password"]:focus,
.field.error input[type="number"]:focus,
.field.error input[type="date"]:focus,
.field.error input[type="month"]:focus,
.field.error input[type="week"]:focus,
.field.error input[type="time"]:focus,
.field.error input[type="datetime"]:focus,
.field.error input[type="datetime-local"]:focus,
.field.error input[type="email"]:focus,
.field.error input[type="search"]:focus,
.field.error input[type="tel"]:focus,
.field.error input[type="color"]:focus,
.field.error select:focus,
.field.error textarea:focus {
	background-color: #FFFFFF;
}
/* Format Error Placeholder - needs one selector each, otherwise the clients disregard the selector as invalid */
.field.error ::-webkit-input-placeholder {
	color: #C00030;
}
.field.error :-moz-placeholder {
   color: #C00030;
}
.field.error ::-moz-placeholder {
   color: #C00030;
}
.field.error :-ms-input-placeholder {
   color: #C00030;
}
@media all and (min-width: 0px) {
.field.error.checkbox input + label:before,
.field.error.radio input + label:before {
	border-color: #C00030;
	background-color: #F2CCD5;
}
.field.error.checkbox input:focus + label:before,
.field.error.radio input:focus + label:before {
	background-color: transparent;
}
}
.field.error label,
.error legend,
legend.error {
	color: #C00030;
}
/* error message */
.field .error.message {
	opacity: 0;
	border: 0px;
	background: #C00000;
	border-radius: 5px;
	color: #FFFFFF;
	padding: 10px;
	margin: 10px 20px 0px;
	position: absolute;
	top: 100%;
	min-width: 175px;
	min-height: 0px;
	z-index: 1000;
	font-family: WebdeSansRegular, Verdana, sans-serif;
	transition: opacity 0.12s, transform 0.12s;
	transform-origin: 50% 0px;
	transform: scaleY(0);
        visibility: hidden;
}
fieldset .field + .field .error.message {
	right: -40px;
}
.field input:focus ~ .error.message,
.field select:focus ~ .error.message,
.field textarea:focus ~ .error.message,
.error.message.active {
	opacity: 1;
	transform: scaleY(1);
        visibility: visible;
}
.field .error.message:before {
	content: "";
	position: absolute;
	top: -10px;
	left: 50%;
	margin-left: -10px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 10px 10px 10px;
	border-color: transparent transparent #C00000 transparent;
}
.checkbox.field .error.message,
.radio.field .error.message {
	top: 35px;
	margin-left: -35px;
}
.quarter-size.field:first-child .error.message,
legend + .quarter-size.field .error.message {
	margin-left: 0px;
	left: 20px;
}
.quarter-size.field:first-child + .quarter-size.field .error.message,
legend + .quarter-size.field + .quarter-size.field .error.message {
	left: 25px;
	right: auto;
}
.checkbox.field .error.message:before,
.radio.field .error.message:before,
.quarter-size.field:first-child .error.message:before,
legend + .quarter-size.field .error.message:before {
	left: 15px;
}
/* disabled for radio / checkbox */
.field.checkbox input[disabled] + label:before,
.field.radio input[disabled] + label:before {
	background: #DADADA;
}
/* 2 halfsize fields with long labels for tablets */
@media screen and (max-width: 979.9px) {
	fieldset .field.half-size.long-label,
	fieldset .field.half-size.long-label + .field {
		display: block;
		width: 100%;
		max-width: 580px;
		padding-left: 0px;
	}
}
/* Smartphone size */
@media all and (max-width: 659.9px) {
	fieldset .field + .field {
		padding-left: 10px;
	}
	fieldset .field.half-size,
	fieldset .field.half-size + .field {
		display: block;
		width: 100%;
		max-width: 580px;
		padding-left: 0px;
	}
	fieldset .field.half-size + .action.field {
		margin-top: 10px;
		text-align: right;
	}
	fieldset .field.quarter-size {
		width: 24.5%;
		min-width: 80px;
	}
	/* single button that is wrapped in a new line takes up all the space */
	.half-size + .min-size.action.field button:first-child:last-child {
		width: 100%;
	}
}

form.login .field a {
  line-height: 40px;
}
form.login .action {
  padding-bottom: 40px;
}
form.login .error.field .error.message {
  margin-top: -30px;
  font-family: "WebdeSansRegular", Arial, sans-serif;
  text-shadow: none;
}
@media screen and (max-width: 659px) {
  form.login .field.action button {
    width: 100%;
  }
}


.header {
  padding: 10px 20px 10px 0px;
  display: block;
  line-height: 76px;
  height: 96px;
  box-sizing: border-box;
}
.header[class="header"],
.header[class="vline header"] {
  width: 100%;
}
.header > * {
  display: inline-block;
}
.header.center {
  margin: 0 auto;
}
@media screen and (max-width: 979.9px) and (min-width: 660px) {
    .header.center {
        margin: 0;
        width: 100%;
    }
}
.header > *:first-child {
  color: #515151;
  font-family: WebdeSans, Arial, sans-serif;
  font-size: 32px;
  font-weight: 400;
  display: inline-block;
  line-height: inherit;
}
.header > *:first-child > a,
.header > *:first-child > span {
  display: block;
  background: url(//img.ui-portal.de/club/login/logo.svg) no-repeat 50% 50%;
  background-size: auto 100%;
  color: transparent;
  width: 64px;
  height: 64px;
  overflow: hidden;
  float: left;
  margin: 6px 40px 0px 20px;
}
.header:before {
  content: "";
  position: absolute;
  margin-top: -10px;
  left: 0px;
  width: 100%;
  height: 96px;
  border-top: 4px solid #FFC000;
  border-left: 0px;
  border-right: 0px;
  border-bottom: 0px;
  background: transparent;
  box-sizing: border-box;
  z-index: -1;
}
.header.vline:before {
  border-bottom: 1px solid #C2C2C2;
}
.header .left {
  float: left;
}
.header .right {
  float: right;
}
.header .container,
.header > .module {
  margin: 20px 0px -20px;
}
.header .module {
  line-height: 22px;
}
.header .icon + div {
  margin-top: -10px;
}
@media \\0 screen {
  .header .icon + div {
    margin-top: -2px;
  }
}
.header .icon + div _::-webkit-full-page-media,
.header .icon + div _:future,
:root .header .icon + div {
  margin-top: -2px;
}
.header a div {
  color: #333333;
}
.header a:hover {
  text-decoration: none;
}
.header a .inactive.icon + div,
.header .inactive.icon + div {
  color: #717171;
}
.header a:hover .hover-service.icon + div,
.header .module:hover .hover-service.icon + div {
  color: #1C8AD9;
}
@media screen and (min-width: 980px) {
  .header + .navigation[class][class] {
    margin-top: -1px;
  }
}
@media screen and (max-width: 979.9px) {
  .header {
    height: 72px;
    padding-top: 0px;
    padding-bottom: 0px;
    line-height: 72px;
    float: left;
  }
  .header _::-webkit-full-page-media,
  .header _:future,
  :root .header {
    float: none;
    position: relative;
    z-index: 999;
  }
  .no-flex .header + * {
    float: none;
    display: inline-block;
  }
  .header > *:first-child {
    vertical-align: bottom;
  }
  .header > *:first-child > a,
  .header > *:first-child > span {
    margin-top: 10px;
    /*  */
    width: 48px;
    height: 48px;
  }
  .header ~ .navigation,
  .header ~ .settings {
    position: absolute;
    right: 100%;
    margin-top: 0px;
    top: 0px;
  }
  .no-flex .header ~ .navigation,
  .no-flex .header ~ .settings {
    transform: none;
  }
  .header:before {
    border-top-width: 4px;
    height: 72px;
    margin-top: 0px;
  }
  .header > .module {
    margin-top: 24px;
  }
  .header .container {
    margin-top: 12px;
  }
}
@media screen and (max-width: 979.9px) and \\0 screen {
  .header {
    float: none;
    position: relative;
    z-index: 999;
  }
}
@media screen and (max-width: 659.9px) {
  .header {
    line-height: 48px;
    height: 48px;
  }
  .header > *:first-child {
    text-indent: -1000px;
    margin: 0px;
    width: 0px;
  }
  .header > *:first-child a:hover {
    text-decoration: none;
    color: #333333;
  }
  .header:before,
  .header.vline:before {
    border-top-width: 48px;
    border-bottom: 0px;
  }
  .header > *:first-child > a,
  .header > *:first-child > span {
    width: auto;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    margin: 0px;
    font-size: 18px;
    /*  test */
    text-indent: 0px;
    background: none;
    color: #333333;
    /*  */
  }
  .header .container[class][class],
  .header > .module[class][class] {
    margin: 12px 0px -12px;
  }
  .header .l-1.module {
    min-width: 40px;
    width: auto;
    padding: 0px;
  }
  .header ~ .navigation,
  .header ~ .settings,
  .no-flex .header ~ .navigation,
  .no-flex .header ~ .settings {
    margin-top: 0px;
  }
}
/*  */
.header ~ .settings {
  display: none;
  right: -300px;
  width: 300px;
  overflow: hidden;
  position: absolute;
  flex-grow: 0;
}
@media screen and (max-width: 979.9px) {
  body {
    -webkit-transition: transform 0.12s ease-in-out;
    transition: transform 0.12s ease-in-out;
  }
  .toggle-nav {
    -webkit-transform: translateX(240px);
    transform: translateX(240px);
  }
  .toggle-settings {
    -webkit-transform: translateX(-300px);
    transform: translateX(-300px);
  }
  .toggle-settings .header ~ .settings {
    display: block;
  }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
  .toggle-nav .header:before {
    -webkit-transform: translate(-240px);
    transform: translate(-240px);
  }
  .toggle-settings .header:before {
    -webkit-transform: translate(300px);
    transform: translate(300px);
  }
}
/*  */
/*  */
.header .dialog {
  background: #FFFFFF;
  border-radius: 4px;
  box-sizing: border-box;
  -webkit-box-shadow: 0px 0px 4px 0px #AAAAAA;
  -moz-box-shadow: 0px 0px 4px 0px #AAAAAA;
  box-shadow: 0px 0px 4px 0px #AAAAAA;
  cursor: default;
  position: absolute;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  margin-top: 10px;
  margin-left: 62px;
  z-index: 1100;
  padding: 20px;
}
.header .dialog:before {
  content: "";
  background: #FFFFFF;
  -webkit-box-shadow: -2px -2px 4px -1px #aaaaaa;
  -moz-box-shadow: -2px -2px 4px -1px #aaaaaa;
  box-shadow: -2px -2px 4px -1px #aaaaaa;
  display: block;
  position: absolute;
  margin-top: -26px;
  margin-left: 100%;
  -webkit-transform: translateX(-55px) rotate(45deg);
  -moz-transform: translateX(-55px) rotate(45deg);
  -ms-transform: translateX(-55px) rotate(45deg);
  transform: translateX(-55px) rotate(45deg);
  width: 12px;
  height: 12px;
  z-index: 1;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .header .dialog {
    margin-left: 42px;
  }
}
@media all and (min-width:0\0) and (min-resolution: .001dpcm) {
  .header .dialog {
    -ms-transform: translateX(-118%);
    margin-top: 41px;
  }
}
/*  */


#footer {
    display: block;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -ms-flex-direction: row;
    -ms-flex-wrap: wrap;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}
.no-flex #footer {
    clear: left;
    display: block;
}
.no-flex #footer > .fullwidth {
    width: 100%;
}




.secondary.container { background: #DDEEF8; }
.service.container { background: #F2B600; }
.secondary h1,
.secondary h2,
.secondary h3,
.secondary h4,
.secondary p,
.secondary a,
.service .secondary h1,
.service .secondary h2,
.service .secondary h3,
.service .secondary h4,
.service .secondary p,
.service .secondary a { color: #F2B600; }
.service h1,
.service h2,
.service h3,
.service h4,
.service p,
.service a,
.secondary .service h1,
.secondary .service h2,
.secondary .service h3,
.secondary .service h4,
.secondary .service p,
.secondary .service a { color: #FFFFFF; }
/* undo white color for certain button formats */
.service a.key[role="button"],
.service a.key.button,
.service a.secondary[role="button"],
.service a.secondary.button,
.secondary a.key[role="button"],
.secondary a.key.button,
.secondary a.secondary[role="button"],
.secondary a.secondary.button { color: #262626; }
/* Handling of "invisible" links */
.service p > a,
.secondary p > a { text-decoration: underline; }
.service p > a[role="button"],
.service p > a.button,
.secondary p > a[role="button"],
.secondary p > a.button { text-decoration: none; }

[class][class][class].hidden { display: none; }
[class][class][class].slide-up {
	overflow: hidden;
	display: block;
	height: auto;
	opacity: 1.0;
	will-change: height, opacity;
	-webkit-transition: opacity 0.1s height 0.12s;
	-moz-transition:  opacity 0.1s height 0.12s;
	-ms-transition: opacity 0.1s height 0.12s;
	-o-transition: opacity 0.1s height 0.12s;
	transition: opacity 0.1s height 0.12s;
}
[class][class][class].slide-up.hidden {
	opacity: 0;
	height: 0px;
	border: none;
}
[data-show-nodes],
[data-hide-nodes],
[data-set-nodes],
[data-unset-nodes],
[data-toggle-nodes] {
	cursor: pointer;
}
[data-show-nodes="#empty"],
[data-hide-nodes="#empty"],
[data-set-nodes="#empty"],
[data-unset-nodes="#empty"],
[data-toggle-nodes="#empty"] {
	cursor: default;
}

.hero-container .background {
    overflow: hidden;
}
.hero-container .background img {
	width: auto;
	float: right;
	margin-top: 40px;
	position: relative;
	margin-right: -70px;
}
.no-flex .hero-container .background img {
	height: 300px;
}
@media all and (max-width: 979px) {
	.hero-container .background img {
		height: 240px;
		margin-right: -40px;
	}
}
@media all and (max-width: 659px) {
	form.login {
        width: 300px;
    }
  form.login .field,
	form.login .field + .field {
	 display: block;
	 width: auto;
	 padding-left: 0;
	}
}
.inverted {
    background-color: #999999;
    color: #FFFFFF;
}
.inverted a {
    color: inherit;
}

@media (min-width: 640px) {
    .flex-last {
        order: 9999;
    }
}

/* CI-WEBDE-2019 */
/* Default font-face */
@font-face {
    font-family: 'WebdeSansBold';
    src: url('https://img.ui-portal.de/ci/webde/global/fonts/web.de-sans/web.de-sans-bold.eot');
    src: url('https://img.ui-portal.de/ci/webde/global/fonts/web.de-sans/web.de-sans-bold.eot?#iefix') format('embedded-opentype'),
        url('https://img.ui-portal.de/ci/webde/global/fonts/web.de-sans/web.de-sans-bold.woff') format('woff'),
        url('https://img.ui-portal.de/ci/webde/global/fonts/web.de-sans/web.de-sans-bold.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'WebdeSansMedium';
    src: url('https://img.ui-portal.de/ci/webde/global/fonts/web.de-sans/web.de-sans-medium.eot');
    src: url('https://img.ui-portal.de/ci/webde/global/fonts/web.de-sans/web.de-sans-medium.eot?#iefix') format('embedded-opentype'),
        url('https://img.ui-portal.de/ci/webde/global/fonts/web.de-sans/web.de-sans-medium.woff') format('woff'),
        url('https://img.ui-portal.de/ci/webde/global/fonts/web.de-sans/web.de-sans-medium.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'WebdeSansRegular';
    src: url('https://img.ui-portal.de/ci/webde/global/fonts/web.de-sans/web.de-sans-regular.eot');
    src: url('https://img.ui-portal.de/ci/webde/global/fonts/web.de-sans/web.de-sans-regular.eot?#iefix') format('embedded-opentype'),
        url('https://img.ui-portal.de/ci/webde/global/fonts/web.de-sans/web.de-sans-regular.woff') format('woff'),
        url('https://img.ui-portal.de/ci/webde/global/fonts/web.de-sans/web.de-sans-regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'WebdeSansLight';
    src: url('https://img.ui-portal.de/ci/webde/global/fonts/web.de-sans/web.de-sans-light.eot');
    src: url('https://img.ui-portal.de/ci/webde/global/fonts/web.de-sans/web.de-sans-light.eot?#iefix') format('embedded-opentype'),
        url('https://img.ui-portal.de/ci/webde/global/fonts/web.de-sans/web.de-sans-light.woff') format('woff'),
        url('https://img.ui-portal.de/ci/webde/global/fonts/web.de-sans/web.de-sans-light.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'WebdeScript';
    src: url('https://img.ui-portal.de/ci/webde/global/fonts/web.de-script/web.de-script-regular.eot');
    src: url('https://img.ui-portal.de/ci/webde/global/fonts/web.de-script/web.de-script-regular.eot?#iefix') format('embedded-opentype'),
        url('https://img.ui-portal.de/ci/webde/global/fonts/web.de-script/web.de-script-regular.woff') format('woff'),
        url('https://img.ui-portal.de/ci/webde/global/fonts/web.de-script/web.de-script-regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

.script {
    color: #1C8AD9;
}

/* WEBDE Header font-face */
.header>*:first-child {
    font-family: 'WebdeSansLight', Verdana, sans-serif;
    font-size: 40px;
    font-weight: 400;
    display: inline-block;
    line-height: inherit;
}

/* WEBDE Header line */
.header:before {
    border-top-color: #FFD800;
}

/* WEBDE Header logo */
.header>*:first-child>a,
.header>*:first-child>span {
    background: url(https://img.ui-portal.de/cd/ci/web.de/brand-logo.svg) no-repeat 0 0;
    background-size: auto 56px;
    width: 56px;
    height: 56px;
    text-indent: -1000px;
}

@media screen and (min-width: 660px) and (max-width: 979.9px) {
    .header {
        height: 72px;
        line-height: 76px;
        padding: 0px;
        float: left;
    }

    .header[class]:before {
        border-top-width: 4px;
        height: 72px;
        margin-top: 0px;
    }

    .header _::-webkit-full-page-media,
    .header _:future,
    :root .header:not(.fix, .m-fix) {
        float: none;
        position: relative;
        z-index: 999;
    }

    .header>*:first-child {
        vertical-align: bottom;
        left: 0px;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        margin-left: 20px;
    }

    .header>*:first-child,
    .header>*:first-child>* {
        font-size: 32px;
    }

    .header>*:first-child>*:first-child {
        background: url(https://img.ui-portal.de/cd/ci/web.de/brand-logo-m.svg) no-repeat 0 0;
        background-size: auto 40px;
        color: transparent;
        width: 40px;
        height: 40px;
        margin: 18px 20px 0 0;
    }

    .header>*:first-child+.left {
        margin-left: 10px;
        margin-right: -38px;
    }

    .header>.container,
    .header>.module[class] {
        margin-top: 21px;
    }

    .header>.container.right,
    .header>.module.right {
        margin-top: 18px;
    }

    .header .icon[aria-label]:after {
        bottom: -13px;
    }
}

@media screen and (min-width: 660px) and (max-width: 979.9px) and \\0 screen {
    .header:not(.fix, .m-fix) {
        float: none;
        position: relative;
        z-index: 999;
    }
}

@media screen and (max-width: 659.9px) {
    .header {
        height: 48px;
        line-height: 49px;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .header>*:first-child {
        text-indent: -1000px;
        margin: 0px;
        width: 0px;
    }

    .header>*:first-child a:hover {
        text-decoration: none;
    }

    .header[class]:before {
        border-top-width: 4px;
        height: 48px;
        margin-top: 0px;
    }

    .header>*:first-child>*:first-child {
        width: auto;
        margin: 10px 0 0 16px;
        left: 16px;
        font-family: WebdeSansBold;
        font-size: 24px;
        line-height: 49px;
        color: #333333;
        background: url(https://img.ui-portal.de/cd/ci/web.de/brand-logo-s.svg) no-repeat 0 0;
        background-size: auto 32px;
        height: 32px;
        width: 32px;
    }

    .header>*:first-child>*:first-child~* {
        display: none;
    }

    .header>.container.right[class] {
        margin: 8px 20px 0px 0px;
        min-width: auto;
        width: auto;
    }

    .header>.module.left[class] {
        margin: 8px -38px 0px 10px;
    }

    .header>.container.right[class],
    .header>.module.left[class] {
        margin-top: 10px;
    }

    .header .l-1.module[class][class] {
        min-width: 32px;
        width: auto;
        padding: 0 0 0 8px;
    }
}

#header:before {
    border-bottom: 1px solid #DADADA;
    color: #525252;
}

#header .container.l-1.right,
#header .container.l-1.right .module.l-1 {
    width: 80px;
    max-width: 80px;
    min-width: auto;
}

#header .container.l-1.right .module:hover {
    color: #1C8AD9;
    cursor: pointer;
}

#header .container.l-1.right .module .print.icon {
    background-position: 0px -30px;
    margin-top: 3px;
}

#header .icon+div {
    margin-top: -3px;
}

#header .container.l-1.right .module:hover .print.icon {
    background-position: -30px -30px;
}

/* WEBDE Button color */
.button,
.button:visited,
.button:active,
.button:active:hover,
.button.key,
.button.key:visited,
.button.key:active,
.button.key:active:hover {
    color: #333333;
    background-color: #FFD800;
    border-color: #FFD800;
}

.ghost.button,
.ghost.button.key {
    color: #FFD800;
}