html,
body {
padding: 0;
margin: 0;
width: 100%;
}
html {
height: 100%;
}
body {
background-color: #FFFFFF;
position: relative;
min-width: 320px;
min-height: 100%;
word-wrap: break-word;
}
.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:not(.icon),
a.left:not(.icon),
p.left,
h1.left,
h2.left,
h3.left,
h4.left,
h5.left,
h6.left {
float: left;
}
span.right:not(.icon),
a.right:not(.icon),
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;
flex-basis: auto;
}
/* */
.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;
}
/* */
/* */
.l-align-center {
text-align: center;
}
.l-align-right {
text-align: right;
}
.l-align-left {
text-align: left;
}
.l-align-justify {
text-align: justify;
}
}
@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;
flex-basis: auto;
}
/* */
.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;
}
.m-align-justify {
text-align: justify;
}
body.no-flex {
max-width: 959.9px;
}
}
@media screen and (max-width: 659.9px) {
.grid > .container {
max-width: 660px;
}
.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;
flex-basis: auto;
}
/* */
.no-flex > .grid {
max-width: 660px;
}
.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;
}
/* */
/* */
.s-align-center {
text-align: center;
}
.s-align-right {
text-align: right;
}
.s-align-left {
text-align: left;
}
.s-align-justify {
text-align: justify;
}
body.no-flex {
max-width: 639.9px;
}
}
/* */
h1,
h2,
h3,
h4,
h5,
h6,
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;
}
.vspace-xxs {
padding-top: 4px;
padding-bottom: 0px;
}
.vspace-xxs > * {
margin-top: 0px;
margin-bottom: 4px;
}
@media screen and (max-width: 979.9px) {
.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-xxs {
padding-top: 4px;
}
.vspace-xxs > * {
margin-bottom: 4px;
}
}
.vspace-top-0 {
padding-top: 0px;
}
.vspace-bottom-0 {
margin-bottom: 0;
}
@media screen and (min-width: 980px) {
.l-vspace-top-0 {
padding-top: 0px;
}
.l-vspace-bottom-0 {
margin-bottom: 0;
}
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
.m-vspace-top-0 {
padding-top: 0px;
}
.m-vspace-bottom-0 {
margin-bottom: 0;
}
}
@media screen and (max-width: 659.9px) {
.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;
}
hr {
border: none;
margin: 0;
height: 10px;
width: 100%;
background-color: #DADADA;
}
hr.thin {
height: 2px;
}
hr.thinnest {
height: 1px;
}
hr.nose.only {
height: 0px;
}
@font-face {
font-family: 'SourceSansProBold';
src: url('../fonts/SourceSansProBold/SourceSansPro-Bold.eot');
src: url('../fonts/SourceSansProBold/SourceSansPro-Bold.eot?#iefix') format('embedded-opentype'),
url('../fonts/SourceSansProBold/SourceSansPro-Bold.woff') format('woff'),
url('../fonts/SourceSansProBold/SourceSansPro-Bold.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'SourceSansProRegular';
src: url('../fonts/SourceSansProRegular/SourceSansPro-Regular.eot');
src: url('../fonts/SourceSansProRegular/SourceSansPro-Regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/SourceSansProRegular/SourceSansPro-Regular.woff') format('woff'),
url('../fonts/SourceSansProRegular/SourceSansPro-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
body {
font-family: "SourceSansProRegular", Verdana, sans-serif;
font-size: 16px;
line-height: 24px;
color: #525252;
}
* {
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
text-size-adjust: none;
}
a,
.link-base {
color: #197cc3;
text-decoration: none;
}
a:active,
a:visited,
.link-visited {
color: #61ade4;
}
a:hover,
a:focus,
.link-base:hover,
.link-hover {
color: #197cc3;
text-decoration: underline;
}
a img {
border: 0px;
}
a.textstyle,
a.textstyle:hover,
a.textstyle:focus {
color: inherit;
text-decoration: inherit;
}
h1,
h2,
h3,
h4,
h5,
h6,
.section-headline > strong,
.group-headline > strong,
.teaser > .content > strong,
.akkordeon .summary > strong,
footer .container > strong.module,
footer .container .module > strong {
font-weight: 400;
}
footer .container .module > strong {
display: block;
}
.subheadline,
[class][class][class].script {
color: #128BDC;
font-family: SourceSansProBold;
}
/* Defaults > können durch setzen der responsiven Size-Klassen überschrieben werden. .[screensize]-size-[headlineformat] */
h1.xxl, [class].size-10 { font-size: ; font-family: ; line-height: ; }
h1.xl, [class].size-9 { font-size: 64px; font-family: SourceSansProBold; line-height: 72px; }
h1, [class].size-8 { font-size: 56px; font-family: SourceSansProBold; line-height: 64px; }
h2.xl, [class].size-7 { font-size: 48px; font-family: SourceSansProBold; line-height: 56px; }
h2, [class].size-6 { font-size: 40px; font-family: SourceSansProBold; line-height: 48px; }
h3.xl, [class].size-5 { font-size: 32px; font-family: SourceSansProBold; line-height: 40px; }
h3, [class].size-4 { font-size: 24px; font-family: SourceSansProBold; line-height: 32px; }
h4, [class].size-3 { font-size: 20px; font-family: SourceSansProBold; line-height: 28px; }
p, [class].size-2 { font-size: 16px; font-family: SourceSansProRegular; line-height: 24px; }
.note, [class].size-1 { font-size: 14px; font-family: SourceSansProRegular; line-height: 22px; }
.icontext, [class].size-0 { font-size: 9px; font-family: SourceSansProRegular; line-height: 16px; }
@media screen and (min-width: 980px) {
[class][class].l-size-10 { font-size: ; font-family: ; line-height: ; }
[class][class].l-size-9 { font-size: 64px; font-family: SourceSansProBold; line-height: 72px; }
[class][class].l-size-8 { font-size: 56px; font-family: SourceSansProBold; line-height: 64px; }
[class][class].l-size-7 { font-size: 48px; font-family: SourceSansProBold; line-height: 56px; }
[class][class].l-size-6 { font-size: 40px; font-family: SourceSansProBold; line-height: 48px; }
[class][class].l-size-5 { font-size: 32px; font-family: SourceSansProBold; line-height: 40px; }
[class][class].l-size-4 { font-size: 24px; font-family: SourceSansProBold; line-height: 32px; }
[class][class].l-size-3 { font-size: 20px; font-family: SourceSansProBold; line-height: 28px; }
[class][class].l-size-2 { font-size: 16px; font-family: SourceSansProRegular; line-height: 24px; }
[class][class].l-size-1 { font-size: 14px; font-family: SourceSansProRegular; line-height: 22px; }
[class][class].l-size-0 { font-size: 9px; font-family: SourceSansProRegular; line-height: 16px; }
}
@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.xxl,[class].size-10 { font-size: 48px; font-family: SourceSansProBold; line-height: 56px; }
h1.xl, [class].size-9 { font-size: 40px; font-family: SourceSansProBold; line-height: 48px; }
h1, [class].size-8 { font-size: 40px; font-family: SourceSansProBold; line-height: 48px; }
h2.xl, [class].size-7 { font-size: 32px; font-family: SourceSansProBold; line-height: 40px; }
h2, [class].size-6 { font-size: 32px; font-family: SourceSansProBold; line-height: 40px; }
h3.xl, [class].size-5 { font-size: 24px; font-family: SourceSansProBold; line-height: 32px; }
h3, [class].size-4 { font-size: 20px; font-family: SourceSansProBold; line-height: 28px; }
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
[class][class].m-size-10 { font-size: ; font-family: ; line-height: ; }
[class][class].m-size-9 { font-size: 64px; font-family: SourceSansProBold; line-height: 72px; }
[class][class].m-size-8 { font-size: 56px; font-family: SourceSansProBold; line-height: 64px; }
[class][class].m-size-7 { font-size: 48px; font-family: SourceSansProBold; line-height: 56px; }
[class][class].m-size-6 { font-size: 40px; font-family: SourceSansProBold; line-height: 48px; }
[class][class].m-size-5 { font-size: 32px; font-family: SourceSansProBold; line-height: 40px; }
[class][class].m-size-4 { font-size: 24px; font-family: SourceSansProBold; line-height: 32px; }
[class][class].m-size-3 { font-size: 20px; font-family: SourceSansProBold; line-height: 28px; }
[class][class].m-size-2 { font-size: 16px; font-family: SourceSansProRegular; line-height: 24px; }
[class][class].m-size-1 { font-size: 14px; font-family: SourceSansProRegular; line-height: 22px; }
[class][class].m-size-0 { font-size: 9px; font-family: SourceSansProRegular; line-height: 16px; }
}
@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.xxl,[class].size-10 { font-size: 40px; font-family: SourceSansProBold; line-height: 48px; }
h1.xl, [class].size-9 { font-size: 32px; font-family: SourceSansProBold; line-height: 40px; }
h1, [class].size-8 { font-size: 32px; font-family: SourceSansProBold; line-height: 40px; }
h2.xl, [class].size-7 { font-size: 32px; font-family: SourceSansProBold; line-height: 40px; }
h2, [class].size-6 { font-size: 32px; font-family: SourceSansProBold; line-height: 40px; }
h3.xl, [class].size-5 { font-size: 24px; font-family: SourceSansProBold; line-height: 32px; }
h3, [class].size-4 { font-size: 20px; font-family: SourceSansProBold; line-height: 28px; }
[class][class].s-size-10 { font-size: ; font-family: ; line-height: ; }
[class][class].s-size-9 { font-size: 64px; font-family: SourceSansProBold; line-height: 72px; }
[class][class].s-size-8 { font-size: 56px; font-family: SourceSansProBold; line-height: 64px; }
[class][class].s-size-7 { font-size: 48px; font-family: SourceSansProBold; line-height: 56px; }
[class][class].s-size-6 { font-size: 40px; font-family: SourceSansProBold; line-height: 48px; }
[class][class].s-size-5 { font-size: 32px; font-family: SourceSansProBold; line-height: 40px; }
[class][class].s-size-4 { font-size: 24px; font-family: SourceSansProBold; line-height: 32px; }
[class][class].s-size-3 { font-size: 20px; font-family: SourceSansProBold; line-height: 28px; }
[class][class].s-size-2 { font-size: 16px; font-family: SourceSansProRegular; line-height: 24px; }
[class][class].s-size-1 { font-size: 14px; font-family: SourceSansProRegular; line-height: 22px; }
[class][class].s-size-0 { font-size: 9px; font-family: SourceSansProRegular; line-height: 16px; }
}
sup, sub {
line-height: 0;
}
.icon {
outline: none;
overflow: hidden;
}
.icon,
.s.icon {
display: inline-block;
width: 16px;
height: 16px;
background: url(../static/icon-s.png) no-repeat;
background: url(../static/icon.svg) no-repeat, none;
background-size: 80px 600px;
padding: 0px;
text-align: left;
text-indent: -10000px;
}
.m.icon {
width: 24px;
height: 24px;
background: url(../static/icon-m.png) no-repeat;
background: url(../static/icon.svg) no-repeat, none;
background-size: 120px 900px;
}
.l.icon {
width: 32px;
height: 32px;
background: url(../static/icon-l.png) no-repeat;
background: url(../static/icon.svg) no-repeat, none;
background-size: 160px 1200px;
}
.xl.icon {
width: 40px;
height: 40px;
background: url(../static/icon-xl.png) no-repeat;
background: url(../static/icon.svg) no-repeat, none;
background-size: 200px 1500px;
}
.xxl.icon {
width: 48px;
height: 48px;
background: url(../static/icon-xxl.png) no-repeat;
background: url(../static/icon.svg) no-repeat, none;
background-size: 240px 1800px;
}
.xxxl.icon {
width: 60px;
height: 60px;
background: url(../static/icon-xxxl.png) no-repeat;
background: url(../static/icon.svg) no-repeat, none;
background-size: 300px 2250px;
}
.xxxxl.icon {
width: 72px;
height: 72px;
background: url(../static/icon-xxxxl.png) no-repeat;
background: url(../static/icon.svg) no-repeat, none;
background-size: 360px 2700px;
}
.no-svg .s.icon { background-image: url(../static/icon-s.png); }
.no-svg .m.icon { background-image: url(../static/icon-m.png); }
.no-svg .l.icon { background-image: url(../static/icon-l.png); }
.no-svg .xl.icon { background-image: url(../static/icon-xl.png); }
.no-svg .xxl.icon { background-image: url(../static/icon-xxl.png); }
.no-svg .xxxl.icon { background-image: url(../static/icon-xxxl.png); }
.no-svg .xxxxl.icon { background-image: url(../static/icon-xxxxl.png); }
.icon.up,
body:not(.touch) .icon.up.hover-default:hover,
body:not(.touch) a:hover > .icon.up.hover-default { background-position: 0% 0%; }
.icon.down,
body:not(.touch) .icon.down.hover-default:hover,
body:not(.touch) a:hover > .icon.down.hover-default { background-position: 0% 3.425%; }
.icon.back,
body:not(.touch) .icon.back.hover-default:hover,
body:not(.touch) a:hover > .icon.back.hover-default { background-position: 0% 6.85%; }
.icon.next,
body:not(.touch) .icon.next.hover-default:hover,
body:not(.touch) a:hover > .icon.next.hover-default { background-position: 0% 10.275%; }
.icon.burger,
body:not(.touch) .icon.burger.hover-default:hover,
body:not(.touch) a:hover > .icon.burger.hover-default { background-position: 0% 13.7%; }
.icon.home,
body:not(.touch) .icon.home.hover-default:hover,
body:not(.touch) a:hover > .icon.home.hover-default { background-position: 0% 17.125%; }
.icon.close,
body:not(.touch) .icon.close.hover-default:hover,
body:not(.touch) a:hover > .icon.close.hover-default { background-position: 0% 20.55%; }
.icon.logout,
body:not(.touch) .icon.logout.hover-default:hover,
body:not(.touch) a:hover > .icon.logout.hover-default { background-position: 0% 23.975%; }
.icon.search,
body:not(.touch) .icon.search.hover-default:hover,
body:not(.touch) a:hover > .icon.search.hover-default { background-position: 0% 27.4%; }
.icon.person,
body:not(.touch) .icon.person.hover-default:hover,
body:not(.touch) a:hover > .icon.person.hover-default { background-position: 0% 30.825%; }
.icon.basket,
body:not(.touch) .icon.basket.hover-default:hover,
body:not(.touch) a:hover > .icon.basket.hover-default { background-position: 0% 34.25%; }
.icon.apps,
body:not(.touch) .icon.apps.hover-default:hover,
body:not(.touch) a:hover > .icon.apps.hover-default { background-position: 0% 37.675%; }
.icon.email,
body:not(.touch) .icon.email.hover-default:hover,
body:not(.touch) a:hover > .icon.email.hover-default { background-position: 0% 41.1%; }
.icon.demail,
body:not(.touch) .icon.demail.hover-default:hover,
body:not(.touch) a:hover > .icon.demail.hover-default { background-position: 0% 44.525%; }
.icon.mailcheck,
body:not(.touch) .icon.mailcheck.hover-default:hover,
body:not(.touch) a:hover > .icon.mailcheck.hover-default { background-position: 0% 47.95%; }
.icon.calendar,
body:not(.touch) .icon.calendar.hover-default:hover,
body:not(.touch) a:hover > .icon.calendar.hover-default { background-position: 0% 51.375%; }
.icon.clock,
body:not(.touch) .icon.clock.hover-default:hover,
body:not(.touch) a:hover > .icon.clock.hover-default { background-position: 0% 54.8%; }
.icon.office,
body:not(.touch) .icon.office.hover-default:hover,
body:not(.touch) a:hover > .icon.office.hover-default { background-position: 0% 58.225%; }
.icon.cloud,
body:not(.touch) .icon.cloud.hover-default:hover,
body:not(.touch) a:hover > .icon.cloud.hover-default { background-position: 0% 61.65%; }
.icon.security,
body:not(.touch) .icon.security.hover-default:hover,
body:not(.touch) a:hover > .icon.security.hover-default { background-position: 0% 65.075%; }
.icon.overview,
body:not(.touch) .icon.overview.hover-default:hover,
body:not(.touch) a:hover > .icon.overview.hover-default { background-position: 0% 68.5%; }
.icon.hint,
body:not(.touch) .icon.hint.hover-default:hover,
body:not(.touch) a:hover > .icon.hint.hover-default { background-position: 0% 71.925%; }
.icon.google,
body:not(.touch) .icon.google.hover-default:hover,
body:not(.touch) a:hover > .icon.google.hover-default { background-position: 0% 75.35%; }
.icon.facebook,
body:not(.touch) .icon.facebook.hover-default:hover,
body:not(.touch) a:hover > .icon.facebook.hover-default { background-position: 0% 78.775%; }
.icon.twitter,
body:not(.touch) .icon.twitter.hover-default:hover,
body:not(.touch) a:hover > .icon.twitter.hover-default { background-position: 0% 82.2%; }
.icon.mail,
body:not(.touch) .icon.mail.hover-default:hover,
body:not(.touch) a:hover > .icon.mail.hover-default { background-position: 0% 85.625%; }
.icon.success { background-position: 0% 89.05%; }
.icon.info { background-position: 0% 92.475%; }
.icon.warning { background-position: 0% 95.9%; }
.icon.error { background-position: 0% 99.325%; }
.icon.up.white,
body:not(.touch) .icon.up.hover-white:hover,
body:not(.touch) a:hover > .icon.up.hover-white { background-position: 31.2% 0%; }
.icon.down.white,
body:not(.touch) .icon.down.hover-white:hover,
body:not(.touch) a:hover > .icon.down.hover-white { background-position: 31.2% 3.425%; }
.icon.back.white,
body:not(.touch) .icon.back.hover-white:hover,
body:not(.touch) a:hover > .icon.back.hover-white { background-position: 31.2% 6.85%; }
.icon.next.white,
body:not(.touch) .icon.next.hover-white:hover,
body:not(.touch) a:hover > .icon.next.hover-white { background-position: 31.2% 10.275%; }
.icon.burger.white,
body:not(.touch) .icon.burger.hover-white:hover,
body:not(.touch) a:hover > .icon.burger.hover-white { background-position: 31.2% 13.7%; }
.icon.home.white,
body:not(.touch) .icon.home.hover-white:hover,
body:not(.touch) a:hover > .icon.home.hover-white { background-position: 31.2% 17.125%; }
.icon.close.white,
body:not(.touch) .icon.close.hover-white:hover,
body:not(.touch) a:hover > .icon.close.hover-white { background-position: 31.2% 20.55%; }
.icon.logout.white,
body:not(.touch) .icon.logout.hover-white:hover,
body:not(.touch) a:hover > .icon.logout.hover-white { background-position: 31.2% 23.975%; }
.icon.search.white,
body:not(.touch) .icon.search.hover-white:hover,
body:not(.touch) a:hover > .icon.search.hover-white { background-position: 31.2% 27.4%; }
.icon.person.white,
body:not(.touch) .icon.person.hover-white:hover,
body:not(.touch) a:hover > .icon.person.hover-white { background-position: 31.2% 30.825%; }
.icon.basket.white,
body:not(.touch) .icon.basket.hover-white:hover,
body:not(.touch) a:hover > .icon.basket.hover-white { background-position: 31.2% 34.25%; }
.icon.apps.white,
body:not(.touch) .icon.apps.hover-white:hover,
body:not(.touch) a:hover > .icon.apps.hover-white { background-position: 31.2% 37.675%; }
.icon.email.white,
body:not(.touch) .icon.email.hover-white:hover,
body:not(.touch) a:hover > .icon.email.hover-white { background-position: 31.2% 41.1%; }
.icon.demail.white,
body:not(.touch) .icon.demail.hover-white:hover,
body:not(.touch) a:hover > .icon.demail.hover-white { background-position: 31.2% 44.525%; }
.icon.mailcheck.white,
body:not(.touch) .icon.mailcheck.hover-white:hover,
body:not(.touch) a:hover > .icon.mailcheck.hover-white { background-position: 31.2% 47.95%; }
.icon.calendar.white,
body:not(.touch) .icon.calendar.hover-white:hover,
body:not(.touch) a:hover > .icon.calendar.hover-white { background-position: 31.2% 51.375%; }
.icon.clock.white,
body:not(.touch) .icon.clock.hover-white:hover,
body:not(.touch) a:hover > .icon.clock.hover-white { background-position: 31.2% 54.8%; }
.icon.office.white,
body:not(.touch) .icon.office.hover-white:hover,
body:not(.touch) a:hover > .icon.office.hover-white { background-position: 31.2% 58.225%; }
.icon.cloud.white,
body:not(.touch) .icon.cloud.hover-white:hover,
body:not(.touch) a:hover > .icon.cloud.hover-white { background-position: 31.2% 61.65%; }
.icon.security.white,
body:not(.touch) .icon.security.hover-white:hover,
body:not(.touch) a:hover > .icon.security.hover-white { background-position: 31.2% 65.075%; }
.icon.overview.white,
body:not(.touch) .icon.overview.hover-white:hover,
body:not(.touch) a:hover > .icon.overview.hover-white { background-position: 31.2% 68.5%; }
.icon.hint.white,
body:not(.touch) .icon.hint.hover-white:hover,
body:not(.touch) a:hover > .icon.hint.hover-white { background-position: 31.2% 71.925%; }
.icon.google.white,
body:not(.touch) .icon.google.hover-white:hover,
body:not(.touch) a:hover > .icon.google.hover-white { background-position: 31.2% 75.35%; }
.icon.facebook.white,
body:not(.touch) .icon.facebook.hover-white:hover,
body:not(.touch) a:hover > .icon.facebook.hover-white { background-position: 31.2% 78.775%; }
.icon.twitter.white,
body:not(.touch) .icon.twitter.hover-white:hover,
body:not(.touch) a:hover > .icon.twitter.hover-white { background-position: 31.2% 82.2%; }
.icon.mail.white,
body:not(.touch) .icon.mail.hover-white:hover,
body:not(.touch) a:hover > .icon.mail.hover-white { background-position: 31.2% 85.625%; }
.icon.up.inactive,
body:not(.touch) .icon.up.hover-inactive:hover,
body:not(.touch) a:hover > .icon.up.hover-inactive { background-position: 62.4% 0%; }
.icon.down.inactive,
body:not(.touch) .icon.down.hover-inactive:hover,
body:not(.touch) a:hover > .icon.down.hover-inactive { background-position: 62.4% 3.425%; }
.icon.back.inactive,
body:not(.touch) .icon.back.hover-inactive:hover,
body:not(.touch) a:hover > .icon.back.hover-inactive { background-position: 62.4% 6.85%; }
.icon.next.inactive,
body:not(.touch) .icon.next.hover-inactive:hover,
body:not(.touch) a:hover > .icon.next.hover-inactive { background-position: 62.4% 10.275%; }
.icon.burger.inactive,
body:not(.touch) .icon.burger.hover-inactive:hover,
body:not(.touch) a:hover > .icon.burger.hover-inactive { background-position: 62.4% 13.7%; }
.icon.home.inactive,
body:not(.touch) .icon.home.hover-inactive:hover,
body:not(.touch) a:hover > .icon.home.hover-inactive { background-position: 62.4% 17.125%; }
.icon.close.inactive,
body:not(.touch) .icon.close.hover-inactive:hover,
body:not(.touch) a:hover > .icon.close.hover-inactive { background-position: 62.4% 20.55%; }
.icon.logout.inactive,
body:not(.touch) .icon.logout.hover-inactive:hover,
body:not(.touch) a:hover > .icon.logout.hover-inactive { background-position: 62.4% 23.975%; }
.icon.search.inactive,
body:not(.touch) .icon.search.hover-inactive:hover,
body:not(.touch) a:hover > .icon.search.hover-inactive { background-position: 62.4% 27.4%; }
.icon.person.inactive,
body:not(.touch) .icon.person.hover-inactive:hover,
body:not(.touch) a:hover > .icon.person.hover-inactive { background-position: 62.4% 30.825%; }
.icon.basket.inactive,
body:not(.touch) .icon.basket.hover-inactive:hover,
body:not(.touch) a:hover > .icon.basket.hover-inactive { background-position: 62.4% 34.25%; }
.icon.apps.inactive,
body:not(.touch) .icon.apps.hover-inactive:hover,
body:not(.touch) a:hover > .icon.apps.hover-inactive { background-position: 62.4% 37.675%; }
.icon.email.inactive,
body:not(.touch) .icon.email.hover-inactive:hover,
body:not(.touch) a:hover > .icon.email.hover-inactive { background-position: 62.4% 41.1%; }
.icon.demail.inactive,
body:not(.touch) .icon.demail.hover-inactive:hover,
body:not(.touch) a:hover > .icon.demail.hover-inactive { background-position: 62.4% 44.525%; }
.icon.mailcheck.inactive,
body:not(.touch) .icon.mailcheck.hover-inactive:hover,
body:not(.touch) a:hover > .icon.mailcheck.hover-inactive { background-position: 62.4% 47.95%; }
.icon.calendar.inactive,
body:not(.touch) .icon.calendar.hover-inactive:hover,
body:not(.touch) a:hover > .icon.calendar.hover-inactive { background-position: 62.4% 51.375%; }
.icon.clock.inactive,
body:not(.touch) .icon.clock.hover-inactive:hover,
body:not(.touch) a:hover > .icon.clock.hover-inactive { background-position: 62.4% 54.8%; }
.icon.office.inactive,
body:not(.touch) .icon.office.hover-inactive:hover,
body:not(.touch) a:hover > .icon.office.hover-inactive { background-position: 62.4% 58.225%; }
.icon.cloud.inactive,
body:not(.touch) .icon.cloud.hover-inactive:hover,
body:not(.touch) a:hover > .icon.cloud.hover-inactive { background-position: 62.4% 61.65%; }
.icon.security.inactive,
body:not(.touch) .icon.security.hover-inactive:hover,
body:not(.touch) a:hover > .icon.security.hover-inactive { background-position: 62.4% 65.075%; }
.icon.overview.inactive,
body:not(.touch) .icon.overview.hover-inactive:hover,
body:not(.touch) a:hover > .icon.overview.hover-inactive { background-position: 62.4% 68.5%; }
.icon.hint.inactive,
body:not(.touch) .icon.hint.hover-inactive:hover,
body:not(.touch) a:hover > .icon.hint.hover-inactive { background-position: 62.4% 71.925%; }
.icon.google.inactive,
body:not(.touch) .icon.google.hover-inactive:hover,
body:not(.touch) a:hover > .icon.google.hover-inactive { background-position: 62.4% 75.35%; }
.icon.facebook.inactive,
body:not(.touch) .icon.facebook.hover-inactive:hover,
body:not(.touch) a:hover > .icon.facebook.hover-inactive { background-position: 62.4% 78.775%; }
.icon.twitter.inactive,
body:not(.touch) .icon.twitter.hover-inactive:hover,
body:not(.touch) a:hover > .icon.twitter.hover-inactive { background-position: 62.4% 82.2%; }
.icon.mail.inactive,
body:not(.touch) .icon.mail.hover-inactive:hover,
body:not(.touch) a:hover > .icon.mail.hover-inactive { background-position: 62.4% 85.625%; }
.icon.up.service,
body:not(.touch) .icon.up.hover-service:hover,
body:not(.touch) a:hover > .icon.up.hover-service { background-position: 93.6% 0%; }
.icon.down.service,
body:not(.touch) .icon.down.hover-service:hover,
body:not(.touch) a:hover > .icon.down.hover-service { background-position: 93.6% 3.425%; }
.icon.back.service,
body:not(.touch) .icon.back.hover-service:hover,
body:not(.touch) a:hover > .icon.back.hover-service { background-position: 93.6% 6.85%; }
.icon.next.service,
body:not(.touch) .icon.next.hover-service:hover,
body:not(.touch) a:hover > .icon.next.hover-service { background-position: 93.6% 10.275%; }
.icon.burger.service,
body:not(.touch) .icon.burger.hover-service:hover,
body:not(.touch) a:hover > .icon.burger.hover-service { background-position: 93.6% 13.7%; }
.icon.home.service,
body:not(.touch) .icon.home.hover-service:hover,
body:not(.touch) a:hover > .icon.home.hover-service { background-position: 93.6% 17.125%; }
.icon.close.service,
body:not(.touch) .icon.close.hover-service:hover,
body:not(.touch) a:hover > .icon.close.hover-service { background-position: 93.6% 20.55%; }
.icon.logout.service,
body:not(.touch) .icon.logout.hover-service:hover,
body:not(.touch) a:hover > .icon.logout.hover-service { background-position: 93.6% 23.975%; }
.icon.search.service,
body:not(.touch) .icon.search.hover-service:hover,
body:not(.touch) a:hover > .icon.search.hover-service { background-position: 93.6% 27.4%; }
.icon.person.service,
body:not(.touch) .icon.person.hover-service:hover,
body:not(.touch) a:hover > .icon.person.hover-service { background-position: 93.6% 30.825%; }
.icon.basket.service,
body:not(.touch) .icon.basket.hover-service:hover,
body:not(.touch) a:hover > .icon.basket.hover-service { background-position: 93.6% 34.25%; }
.icon.apps.service,
body:not(.touch) .icon.apps.hover-service:hover,
body:not(.touch) a:hover > .icon.apps.hover-service { background-position: 93.6% 37.675%; }
.icon.email.service,
body:not(.touch) .icon.email.hover-service:hover,
body:not(.touch) a:hover > .icon.email.hover-service { background-position: 93.6% 41.1%; }
.icon.demail.service,
body:not(.touch) .icon.demail.hover-service:hover,
body:not(.touch) a:hover > .icon.demail.hover-service { background-position: 93.6% 44.525%; }
.icon.mailcheck.service,
body:not(.touch) .icon.mailcheck.hover-service:hover,
body:not(.touch) a:hover > .icon.mailcheck.hover-service { background-position: 93.6% 47.95%; }
.icon.calendar.service,
body:not(.touch) .icon.calendar.hover-service:hover,
body:not(.touch) a:hover > .icon.calendar.hover-service { background-position: 93.6% 51.375%; }
.icon.clock.service,
body:not(.touch) .icon.clock.hover-service:hover,
body:not(.touch) a:hover > .icon.clock.hover-service { background-position: 93.6% 54.8%; }
.icon.office.service,
body:not(.touch) .icon.office.hover-service:hover,
body:not(.touch) a:hover > .icon.office.hover-service { background-position: 93.6% 58.225%; }
.icon.cloud.service,
body:not(.touch) .icon.cloud.hover-service:hover,
body:not(.touch) a:hover > .icon.cloud.hover-service { background-position: 93.6% 61.65%; }
.icon.security.service,
body:not(.touch) .icon.security.hover-service:hover,
body:not(.touch) a:hover > .icon.security.hover-service { background-position: 93.6% 65.075%; }
.icon.overview.service,
body:not(.touch) .icon.overview.hover-service:hover,
body:not(.touch) a:hover > .icon.overview.hover-service { background-position: 93.6% 68.5%; }
.icon.hint.service,
body:not(.touch) .icon.hint.hover-service:hover,
body:not(.touch) a:hover > .icon.hint.hover-service { background-position: 93.6% 71.925%; }
.icon.google.service,
body:not(.touch) .icon.google.hover-service:hover,
body:not(.touch) a:hover > .icon.google.hover-service { background-position: 93.6% 75.35%; }
.icon.facebook.service,
body:not(.touch) .icon.facebook.hover-service:hover,
body:not(.touch) a:hover > .icon.facebook.hover-service { background-position: 93.6% 78.775%; }
.icon.twitter.service,
body:not(.touch) .icon.twitter.hover-service:hover,
body:not(.touch) a:hover > .icon.twitter.hover-service { background-position: 93.6% 82.2%; }
.icon.mail.service,
body:not(.touch) .icon.mail.hover-service:hover,
body:not(.touch) a:hover > .icon.mail.hover-service { background-position: 93.6% 85.625%; }
.icon[aria-label] {
overflow: visible;
position: relative;
}
.icon[aria-label]:after {
content: attr(aria-label);
color: #333333;
display: none;
text-indent: 0px;
font-family: Verdana, sans-serif;
font-size: 9px;
line-height: 16px;
position: absolute;
bottom: -18px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.icon.show-text { margin-bottom: 16px; }
.icon.show-text:after { display: block; }
@media screen and (min-width: 980px) {
.icon.l-show-text { margin-bottom: 16px; }
.icon.l-show-text:after { display: block; }
}
@media screen and (min-width: 680px) and (max-width: 979.9px) {
.icon.m-show-text { margin-bottom: 16px; }
.icon.m-show-text:after { display: block; }
}
@media screen and (max-width: 659.9px) {
.icon.s-show-text { margin-bottom: 16px; }
.icon.s-show-text:after { display: block; }
}
.white.icon[aria-label]:after,
.icon.hover-white[aria-label]:hover:after,
a:hover > .icon.hover-white[aria-label]:after {
color: #FFFFFF;
}
.inactive.icon[aria-label]:after,
.icon.hover-inactive[aria-label]:hover:after,
a:hover > .icon.hover-inactive[aria-label]:after {
color: #707070;
}
.service.icon[aria-label]:after,
.icon.hover-service[aria-label]:hover:after,
a:hover > .icon.hover-service[aria-label]:after {
color: #128BDC;
}
/* basic teaser format */
.teaser {
position: relative;
align-self: flex-start;
}
.teaser.module {
padding-left: 0px;
padding-right: 0px;
}
.row .teaser {
align-self: stretch;
}
.teaser .visual img,
.teaser .visual svg {
width: 100%;
height: auto;
}
.teaser .visual.unscaled img,
.teaser .visual.unscaled svg {
width: auto;
height: auto;
margin-left: auto;
margin-right: auto;
}
.teaser.module .visual.scaled img {
width: 100%;
height: 100%;
}
.teaser .visual.align-center img,
.teaser .visual.align-center svg {
margin-left: auto;
margin-right: auto;
}
@media screen and (min-width: 980px) {
.teaser [class][class].l-center {
float: none;
}
.teaser [class][class].l-left {
float: left;
}
.teaser [class][class].l-right {
float: right;
}
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
.teaser [class][class].m-center {
float: none;
}
.teaser [class][class].m-left {
float: left;
}
.teaser [class][class].m-right {
float: right;
}
}
@media screen and (max-width: 659.9px) {
.teaser [class][class].s-center {
float: none;
}
.teaser [class][class].s-left {
float: left;
}
.teaser [class][class].s-right {
float: right;
}
}
/* apply 100% size only to background img (not for visual) */
.teaser .background img,
.teaser .background svg {
width: 100%;
height: auto;
border-radius: 0px;
}
.teaser .content img:not([class*="l-"]),
.teaser .content svg:not([class*="l-"]) {
width: auto;
}
.teaser .content img[class*="l-"],
.teaser .content svg[class*="l-"] {
height: 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 .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.fix.center {
float: none;
}
.teaser .content .content,
.teaser .unpadded.content {
padding-left: 0px;
padding-right: 0px;
}
.visual > img,
.visual > svg,
.visual > .icon {
display: block;
}
.teaser .top {
height: 50%;
}
.teaser .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;
display: block;
}
.teaser.fullwidth .background[class*="height"] img {
position: relative;
width: auto;
height: 100%;
}
/* add 620 height */
.teaser.fullwidth .background.height-620 { height: 620px; }
/**/
.teaser.fullwidth .background.height-460 { height: 460px; }
.teaser.fullwidth .background.height-300 { height: 300px; }
.teaser.fullwidth .background.height-220 { 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-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: 812px) {
.teaser.fullwidth .background.height-300 img[width="1680"][height="620"] {
width: 100vw;
height: auto;
}
}
@media screen and (min-width: 1095px) {
.teaser.fullwidth .background.height-300 img[width="1680"][height="460"] {
width: 100vw;
height: auto;
}
}
@media screen and (min-width: 1232px) {
.teaser.fullwidth .background.height-220 img[width="1680"][height="300"] {
width: 100vw;
height: auto;
}
}
@media screen and (min-width: 1246px) {
.teaser.fullwidth .background.height-460 img[width="1680"][height="620"] {
width: 100vw;
height: auto;
}
}
@media screen and (min-width: 1280px) {
.teaser.fullwidth .vertical.background.height-460 img[width="1680"][height="460"] {
width: 100vw;
height: auto;
}
}
@media screen and (min-width: 1681px) {
.teaser.fullwidth .background.height-220 img[width="1680"][height="220"],
.teaser.fullwidth .background.height-300 img[width="1680"][height="300"],
.teaser.fullwidth .background.height-460 img[width="1680"][height="460"],
.teaser.fullwidth .background.height-620 img[width="1680"][height="620"] {
width: 100vw;
height: auto;
}
}
@media screen and (min-width: 980px) {
.teaser.fullwidth .background.l-height-460 { height: 460px; }
.teaser.fullwidth .background.l-height-300 { height: 300px; }
.teaser.fullwidth .background.l-height-220 { 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 { height: 620px; }
.teaser.fullwidth .background.m-height-460 { height: 460px; }
.teaser.fullwidth .background.m-height-300 { height: 300px; }
.teaser.fullwidth .background.m-height-220 { 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 { height: 620px; }
.teaser.fullwidth .background.s-height-460 { height: 460px; }
.teaser.fullwidth .background.s-height-300 { height: 300px; }
.teaser.fullwidth .background.s-height-220 { 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%);
}
}
.teaser .linked-content {
color: #525252;
}
.teaser .linked-content:hover {
text-decoration: none;
}
.js .linked.teaser {
cursor: pointer;
}.list {
list-style: none;
}
.list li {
padding: 7px 0px;
position: relative;
}
.list li:before {
content: "";
display: inline-block;
background-color: #128BDC;
}
ul.list {
padding-left: 24px;
}
ul.list li:before {
width: 16px;
height: 16px;
border-radius: 8px;
margin: 0px 8px 0px -24px;
vertical-align: -2px;
}
/* s-List mit Bullets 8px durchmesser */
ul.s.list {
padding-left: 16px;
}
ul.s.list li {
padding: 4px 0px;
}
ul.s.list li:before {
width: 8px;
height: 8px;
border-radius: 4px;
margin: 0px 8px 0px -16px;
vertical-align: 2px;
}
/* */
ul.check.list {
padding-left: 32px;
}
ul.m.check.list {
padding-left: 28px;
}
ul.s.check.list {
padding-left: 24px;
}
ol.list {
padding-left: 40px;
counter-reset: section 1;
}
ul.check.list:not([class*="size-2"]),
ol.list {
font-family: 'SourceSansProBold', Arial, sans-serif;
font-size: 20px;
line-height: 28px;
}
ul.m.check.list {
font-family: 'SourceSansProRegular', Verdana, sans-serif;
font-size: 16px;
line-height: 24px;
}
ul.s.check.list {
font-family: 'SourceSansProRegular', Verdana, sans-serif;
font-size: 16px;
line-height: 24px;
}
ul.check.list:not([class*="size-2"]) li,
ol.list li {
padding: 5px 0px;
}
ul.m.check.list li {
padding: 7px 0px;
}
ul.s.check.list li {
padding: 3px 0px;
}
ul.check.list li:before {
width: 24px;
height: 24px;
border-radius: 12px;
margin: 0px 8px 0px -32px;
vertical-align: -4px
}
ul.m.check.list li:before {
width: 20px;
height: 20px;
border-radius: 10px;
margin: 0px 8px 0px -28px;
vertical-align: -4px
}
ul.s.check.list li:before {
width: 16px;
height: 16px;
border-radius: 8px;
margin: 0px 8px 0px -24px;
vertical-align: -2px
}
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);
}
ul.m.check.list li:after {
content: "";
position: absolute;
top: 16px;
left: -26px;
width: 3px;
height: 3px;
background: transparent;
-webkit-box-shadow: 0px 2px 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 2px 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: scale(0.85) rotate(-45deg);
-ms-transform: scale(0.85) rotate(-45deg);
transform: scale(0.85) rotate(-45deg);
}
ul.s.check.list li:after {
content: "";
position: absolute;
top: 12px;
left: -23px;
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: scale(0.68) rotate(-45deg);
-ms-transform: scale(0.68) rotate(-45deg);
transform: scale(0.68) rotate(-45deg);
}
ul.check.list[class*="size-"] li:before {
vertical-align: -6px
}
ul.check.list[class*="size-"] li:after {
top: 16px;
}
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: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;
}
ol.list li:after {
content: "";
counter-increment: section;
}
ul.text.list,
ol.text.list,
ol.footnotes.list,
ol.default.list {
padding-left: 0px;
}
ol.default.list {
list-style: decimal;
margin-left: 25px;
}
ul.text.list li:before,
ol.text.list li:before,
ol.footnotes.list li:before,
ol.default.list li:before {
content: none;
width: 0px;
height: 0px;
margin: 0px;
}
ol.footnotes.list li {
margin-left: 15px;
padding: 0;
}
ol.footnotes.list li sup {
position: absolute;
left: -15px;
top: 5px;
}
/* Im Firefox Subpixel Rendering Problem, wenn die Y-Position Berechnung mit Kommastelle .5, dann BG (hier Icon) abgeschnitten*/
ul.text.list .m.icon:first-child {
float: left;
height: 25px; /*Quick-Fix abgeschnittenes Icon Problem*/
margin: -1px 8px 0px 0px; /*Ohne Quick-Fix margin-top: 0px*/
}
ul.text.list .s.icon:first-child {
float: left;
height: 17px; /*Quick-Fix abgeschnittenes Icon Problem*/
margin: 3px 8px 0px 0px; /*Ohne Quick-Fix margin-top: 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.horizontal.badge {
float: left;
}
ul.inline.list li,
ul.inline-block.list li,
ul.horizontal.list li {
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:not(.align-center) li:last-child,
ul.inline-block.list:not(.align-center) li:last-child,
ul.horizontal.list:not(.align-center) li:last-child {
margin-right: 0px;
}
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;
}
.akkordeon {
display: block;
overflow: hidden;
padding: 7px 20px;
border-top: 1px solid #DADADA;
border-bottom: 1px solid #DADADA;
}
.fullwidth.akkordeon {
padding-left: 0px;
padding-right: 0px;
}
.akkordeon + .akkordeon {
border-top: none;
}
.akkordeon > *:first-child {
cursor: pointer;
outline: none;
}
.akkordeon[open] > *:first-child,
.akkordeon.open > *:first-child {
display: block;
}
/* Nötig, um vspace direkt in einem'module'-Container anwenden zu können, welcher die Akkordeon-'details'-Container umschließt. */
.vspace-l > .akkordeon,
.vspace-s > .akkordeon,
.vspace-xs > .akkordeon {
margin-bottom: 0px;
}
.vspace-l > .akkordeon:last-child { margin-bottom: 30px; }
.vspace-s > .akkordeon:last-child { margin-bottom: 20px; }
.vspace-xs > .akkordeon:last-child { margin-bottom: 10px; }
/* vspace im Akkordeon */
.akkordeon:not(.open):not([open])[class*=" vspace-"] > *:first-child,
.akkordeon:not(.open):not([open])[class^="vspace-"] > *:first-child {
margin-bottom: 0px !important;
}
.js .akkordeon > *:first-child > *:first-child:before {
content: "";
background: url(../static/icon.svg) no-repeat, none;
background-size: 120px 900px;
background-position: 93.6% 3.425%;
width: 24px;
height: 24px;
display: inline-block;
float: right;
margin-top: 1px;
margin-left: 20px;
color: transparent;
}
.no-svg.js .akkordeon > *:first-child *:first-child:before {
background-image: url(../static/icon-m.png);
}
.js .akkordeon[open] > *:first-child *:first-child:before,
.js .akkordeon.open > *:first-child *:first-child:before {
background-position: 93.6% 0%;
}
.js .akkordeon summary::-webkit-details-marker {
display:none;
}
.js .akkordeon summary::-o-details-marker {
display:none;
}
.js .akkordeon summary::-moz-details-marker {
display:none;
}
.js .akkordeon summary::details-marker {
display:none;
}
@media screen and (min-width: 980px) {
.js .akkordeon:not([open]):not(.l-disable) > *:first-child ~ * {
display: none;
}
.akkordeon.l-disable {
border: none;
}
.akkordeon.l-disable > *:first-child {
cursor: default;
}
.akkordeon.l-disable > *:first-child:focus {
outline: none;
}
.akkordeon.l-disable + .akkordeon {
border-top: 1px solid #DADADA;
}
.akkordeon.l-disable + .akkordeon.l-disable {
border-top: none;
}
.js .akkordeon.l-disable > *:first-child ~ * {
position: relative;
top: auto;
}
.js .akkordeon.l-disable > *:first-child > *:first-child:before {
content: none;
}
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
.js .akkordeon:not([open]):not(.m-disable) > *:first-child ~ * {
display: none;
}
.akkordeon.m-disable {
border: none;
}
.akkordeon.m-disable > *:first-child {
cursor: default;
}
.akkordeon.m-disable > *:first-child:focus {
outline: none;
}
.akkordeon.m-disable + .akkordeon {
border-top: 1px solid #DADADA;
}
.akkordeon.m-disable + .akkordeon.m-disable {
border-top: none;
}
.js .akkordeon.m-disable > *:first-child ~ * {
position: relative;
top: auto;
}
.js .akkordeon.m-disable > *:first-child > *:first-child:before {
content: none;
}
}
@media screen and (max-width: 659.9px) {
.js .akkordeon:not([open]):not(.s-disable) > *:first-child ~ * {
display: none;
}
.akkordeon.s-disable {
border: none;
}
.akkordeon.s-disable > *:first-child {
cursor: default;
}
.akkordeon.s-disable > *:first-child:focus {
outline: none;
}
.akkordeon.s-disable + .akkordeon {
border-top: 1px solid #DADADA;
}
.akkordeon.s-disable + .akkordeon.s-disable {
border-top: none;
}
.js .akkordeon.s-disable > *:first-child ~ * {
position: relative;
top: auto;
}
.js .akkordeon.s-disable > *:first-child > *:first-child:before {
content: none;
}
}
ol.paging {
list-style: none;
position: relative;
overflow: hidden;
padding: 0px;
clear: left;
}
ol.paging li {
float: left;
}
ol.paging li + li > * {
margin-left: 10px;
}
.paging .paging.button[rel="next"] .icon,
.paging .paging.button[rel="last"] .icon {
float: right;
margin-left: 10px;
margin-right: -10px;
}
.paging .paging.button[rel="first"] .icon + .icon,
.paging .paging.button[rel="last"] .icon + .icon {
display: none;
}
/* Default Paging Layout*/
.button.paging:not([aria-disabled]):not(.disabled):hover,
.button.paging:not([aria-disabled]):not(.disabled):focus {
color: #FFFFFF;
border-color: #0E6FB0;
background-color: #0E6FB0;
}
.button.paging[class] {
overflow: visible;
padding: 5px;
min-width: 40px;
color: #128BDC;
}
.button.paging[rel] {
padding-left: 20px;
padding-right: 20px;
}
.button.paging.active,
.button.paging.active:hover,
.button.paging.active:focus,
.button.paging:not([aria-disabled]):not(.disabled)[class]:active {
cursor: default;
color: #FFFFFF;
min-width: 40px;
border-color: #128BDC;
background-color: #128BDC;
}
.button.paging[aria-disabled],
.button.paging.disabled {
color: #D4EAF9;
border-color: #D4EAF9;
cursor: default;
cursor: not-allowed;
}
.button.paging[aria-disabled] .icon,
.button.paging.disabled .icon {
opacity: 0.16;
}
@media all and (max-width: 979.9px) {
ol.paging {
position: relative;
}
a.button.paging[rel] {
display: inline-block;
/*text-indent: -1000px;*/
overflow: hidden;
position: relative;
}
a.button.paging[rel] .paging-text {
display: none;
}
a.button.paging[rel] .icon[class][class] {
display: block;
margin: 2px -12px 0px -12px;
}
a.button.paging[rel="first"] .icon[class] + .icon {
margin-left: 0px;
}
a.button.paging[rel="last"] .icon[class] + .icon {
margin-right: 0px;
}
}
@media screen and (max-width: 659.9px) {
.paging .paging.button[rel="last"],
.paging .paging.button[rel="first"] {
display: none;
}
}
.button {
display: inline-block;
padding: 5px 20px 5px 20px;
border: 1px solid;
min-height: 40px;
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;
border-radius: 4px;
font-family: SourceSansProBold, Arial, sans-serif;
font-size: 20px;
font-weight: 400;
line-height: 28px;
-webkit-appearance: none;
-moz-appearance: none;
}
.fullwidth.button {
width: 100%;
}
.button,
.button:hover,
.button:visited,
.button:focus {
text-decoration: none;
cursor: pointer;
text-align: center;
white-space: nowrap;
outline: none;
}
input.button::-moz-focus-inner,
button.button::-moz-focus-inner {
padding: 0;
border: 0;
}
.button.m,
.button.m:hover,
.button.m:visited {
padding: 3px 20px 1px 20px;
min-height: 32px;
font-family: SourceSansProBold, Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.button.xl,
.button.xl:hover,
.button.xl:visited {
padding: 9px 20px 9px 20px;
min-height: 48px;
}
a.button.m[class],
span.button.m[class] {
padding: 4px 20px 0px 20px;
}
.key.button:hover,
.key.button:focus,
.ghost.key.button[class][class][class]:hover,
.ghost.key.button[class][class][class]:focus {
color: #FFFFFF;
border-color: #0E6FB0;
background-color: #0E6FB0;
}
.service.button:hover,
.service.button:focus,
.ghost.service.button[class][class][class]:hover,
.ghost.service.button[class][class][class]:focus {
color: #FFFFFF;
border-color: #0E6FB0;
background-color: #0E6FB0;
}
.secondary.button:hover,
.secondary.button:focus,
.ghost.secondary.button[class][class][class]:hover,
.ghost.secondary.button[class][class][class]:focus {
color: #FFFFFF;
border-color: #707070;
background-color: #707070;
}
.inverted.button:hover,
.inverted.button:focus,
.ghost.inverted.button[class][class][class]:hover,
.ghost.inverted.button[class][class][class]:focus {
color: #333333;
border-color: #F3F3F3;
background-color: #F3F3F3;
}
.key.button,
.key.button:active,
.ghost.key.button[class][class][class]:active {
border-color: #128BDC;
background-color: #128BDC;
color: #FFFFFF;
}
.service.button,
.service.button:active,
.ghost.service.button[class][class][class]:active {
border-color: #128BDC;
background-color: #128BDC;
color: #FFFFFF;
}
.secondary.button,
.secondary.button:active,
.ghost.secondary.button[class][class][class]:active {
border-color: #999999;
background-color: #999999;
color: #FFFFFF;
}
.inverted.button,
.inverted.button:active,
.ghost.inverted.button[class][class][class]:active {
border-color: #FFFFFF;
background-color: #FFFFFF;
color: #333333;
}
.key.button[disabled][class][class][class],
.key.button[aria-disabled][class][class][class] {
color: #FFFFFF;
background-color: #D4EAF9;
border-color: #D4EAF9;
cursor: default;
cursor: not-allowed;
text-shadow: none;
}
.service.button[disabled][class][class][class],
.service.button[aria-disabled][class][class][class] {
color: #FFFFFF;
background-color: #D4EAF9;
border-color: #D4EAF9;
cursor: default;
cursor: not-allowed;
text-shadow: none;
}
.secondary.button[disabled][class][class][class],
.secondary.button[aria-disabled][class][class][class] {
color: #FFFFFF;
background-color: #DADADA;
border-color: #DADADA;
cursor: default;
cursor: not-allowed;
text-shadow: none;
}
.inverted.button[disabled][class][class][class],
.inverted.button[aria-disabled][class][class][class] {
color: #707070;
background-color: #D4EAF9;
border-color: #D4EAF9;
cursor: default;
cursor: not-allowed;
text-shadow: none;
}
.ghost.key.button[class][class][class] {
color: #128BDC;
background-color: transparent; /* or white? */
}
.ghost.key.button[class][class][class][class][class][disabled],
.ghost.key.button[class][class][class][class][class][aria-disabled] {
color: #D4EAF9;
border-color: #D4EAF9;
background-color: transparent; /* or white? */
}
.ghost.service.button[class][class][class] {
color: #128BDC;
background-color: transparent; /* or white? */
}
.ghost.service.button[class][class][class][class][disabled],
.ghost.service.button[class][class][class][class][aria-disabled] {
color: #D4EAF9;
border-color: #D4EAF9;
background-color: transparent; /* or white? */
}
.ghost.secondary.button[class][class][class] {
color: #999999;
background-color: transparent; /* or white? */
}
.ghost.secondary.button[class][class][class][class][disabled],
.ghost.secondary.button[class][class][class][class][aria-disabled] {
color: #DADADA;
border-color: #DADADA;
background-color: transparent; /* or white? */
}
.ghost.inverted.button[class][class][class] {
color: #FFFFFF;
background-color: transparent;
}
.ghost.inverted.button[class][class][class][class][class][disabled],
.ghost.inverted.button[class][class][class][class][class][aria-disabled] {
border-color: #D4EAF9;
color: #D4EAF9;
background-color: transparent;
}
/* Im Firefox Subpixel Rendering Problem, wenn die Y-Position Berechnung mit Kommastelle .5,
dann BG (hier Icon) abgeschnitten => Höhe des Icons um 1px erhöhen und Margin entsprechend anpassen */
.button.xl .icon.l {
float: left;
margin: -3px 10px -2px -10px;
position: relative;
}
.button.l .icon.m {
float: left;
margin: 1px 10px 2px -10px;
position: relative;
}
.button.m .icon.s {
float: left;
margin: 1px 10px -1px -10px;
position: relative;
}
.tabs {
list-style: none;
padding-left: 0px;
padding-right: 0px;
margin-top: 0px;
position: relative;
margin-left: 0;
margin-right: 0;
}
.tabs.module {
padding-left: 10px;
padding-right: 10px;
margin-top: -10px;
margin-bottom: 0px;
}
.tabs > li {
display: inline;
margin-right: 5px;
}
.tabs > li:last-child {
margin-right: 0px;
}
.tab.button {
background-color: transparent;
color: #128BDC;
border-color: #128BDC;
margin-top: 10px;
}
/*
@media screen and (max-width: 639px) {
.tab.button {
color: ;
background-color: #FFFFFF;
border: 0 none;
}
}
*/
.tab.button:hover,
.tab.button:focus {
color: #FFFFFF;
background-color: #0E6FB0;
border-color: #0E6FB0;
}
.active.tab.button {
color: #FFFFFF;
background-color: #128BDC;
border-color: #128BDC;
position: relative;
cursor: default;
overflow: visible;
}
.active.tab.button:after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #128BDC transparent transparent transparent;
position: absolute;
bottom: -10px;
left: 50%;
margin-left: -10px;
-moz-transform: scale(1.01);
}
.active.tab.button .icon:not(.white),
.tab.button:not(.active) .icon.white {
display: none;
}
.tab.container {
margin-bottom: 0px;
}
.js .tab.module,
.js .tab.container,
.tab.module.nojs,
.tab.container.nojs {
display: none;
}
.js .tab.module.active,
.js .tab.teaser.active,
.tab.module.active.nojs,
.tab.teaser.active.nojs {
display: block;
}
.js .tab.container.active,
.tab.container.active.nojs {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.no-flex.js .tab.container.active,
.no-flex .tab.container.active.nojs {
display: block;
}
@media screen and (min-width: 980px) {
.js .tab.module.l-active,
.js .tab.teaser.l-active,
.tab.module.l-active.nojs,
.tab.teaser.l-active.nojs {
display: block;
}
.js .tab.container.l-active,
.tab.container.l-active.nojs {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
.js .tab.module.m-active,
.js .tab.teaser.m-active,
.tab.module.m-active.nojs,
.tab.teaser.m-active.nojs {
display: block;
}
.js .tab.container.m-active,
.tab.container.m-active.nojs {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
}
@media screen and (max-width: 659.9px) {
.js .tab.module.s-active,
.js .tab.teaser.s-active,
.tab.module.s-active.nojs,
.tab.teaser.s-active.nojs {
display: block;
}
.js .tab.container.s-active,
.tab.container.s-active.nojs {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.tabs,
.tabs.module,
.fixed ~ .grid .tabs.module {
height: 0px;
z-index: 999;
position: relative;
padding-top: 41px;
}
.tabs .tab.button:not(.active) {
border-color: #C2C2C2;
color: #333333;
background-color: #FFFFFF;
font-family: SourceSansProBold;
font-size: 16px;
}
.tabs .tab.button:not(.active):hover,
.tabs .tab.button:not(.active):focus {
background-color: #D4EAF9;
}
.tabs .tab.button.active {
position: absolute;
display: block;
top: 0px;
z-index: -1;
left: 0px;
right: 0px;
}
.tabs.module .tab.button.active {
left: 10px;
right: 10px;
}
.tabs .tab.button.active {
top: 0px;
margin-top: 0px;
padding-bottom: 5px;
}
.tabs .tab.button.active:before {
content: "";
float: right;
display: inline-block;
background: url(../static/icon-m.png) no-repeat;
background: url(../static/icon.svg) no-repeat, none;
background-size: 120px 900px;
background-position: -30px -120px;
width: 24px;
height: 24px;
margin-top: 2px;
}
.tabs li {
display: block;
margin-right: 0px;
}
.tabs .tab.button {
display: none;
text-align: left;
padding: 5px 10px 6px 10px;
margin-top: -1px;
border-width: 0px 1px 1px 1px;
}
.tabs:hover .tab.button.active,
.tabs:focus .tab.button.active {
border-radius: 4px 4px 0px 0px;
}
.tabs:hover .tab.button,
.tabs:focus .tab.button {
display: block;
width: 100%;
border-radius: 0px;
}
.tabs:hover .tab.button.active,
.tabs:focus .tab.button.active {
width: auto;
}
}
/* Demo-Seiten */
.small.tabs .button,
.small.tabs .button.l {
font-size: 12px;
line-height: 24px;
height: 24px;
padding: 0 6px;
}
.small.tabs .active.tab.button:after {
border-width: 6px 6px 0 6px;
bottom: -6px;
margin-left: -6px;
}
@media screen and (max-width: 659.9px) {
.small.tabs {
height: 0px;
z-index: 999;
position: relative;
padding-top: 24px;
background-color: ;
border-radius: 4px;
}
.small.tabs:before {
content: "";
float: right;
display: inline-block;
background: url(../static/icon-m.png) no-repeat;
background: url(../static/icon.svg) no-repeat, none;
background-size: 80px 600px;
background-position: -20px -80px;
width: 16px;
height: 16px;
margin: -19px 6px 0px 0px;
vertical-align: 2px;
}
.small.tabs .tab.button.active:before {
content: none;
}
/*
.tabs:hover .tab.button:not(.active),
.tabs:focus .tab.button:not(.active) {
background-color: #F3F3F3;
}
.tabs:hover .tab.button:not(.active):hover,
.tabs:hover .tab.button:not(.active):focus {
background-color: #128BDC;
}
*/
}/* form.css 1.4 - cat */
form {
position: relative;
width: 100%;
display: block;
}
fieldset {
display: table;
border: 0px;
padding: 0px;
margin-left: 0px;
margin-right: 0px;
max-width: 620px;
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: 620px;
margin-left: 0px;
}
fieldset .field + .field {
padding-left: 20px;
}
form > .field {
box-sizing: border-box;
max-width: 620px;
}
form.xl > .field,
form > .xl > .field,
form > .field.xl {
max-width: 940px;
}
fieldset.unaligned .field {
display: inline-block;
float: left;
min-height: 40px;
}
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: 4px;
border: 1px solid #525252;
position: relative;
height: 40px;
padding: 0px 10px;
line-height: 20px;
background-color: #FFFFFF;
color: #525252;
font-family: "SourceSansProRegular", Verdana, sans-serif;
font-size: 16px;
box-shadow: none;
}
.field select {
padding: 8px 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;
box-shadow: none;
border-radius: 4px;
border: 1px solid #525252;
position: relative;
padding: 10px;
font-size: 16px;
resize: vertical;
}
.field.xl select {
font-size: 20px;
}
/* eye icon for password input field */
.field.password .icon.eye {
position: absolute;
display: inline-block;
right: 8px;
bottom: 8px;
margin-left: 10px;
cursor: pointer;
z-index: 10;
overflow: visible;
background-color: #FFFFFF;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.field.password .icon.eye:before {
content: "";
position: absolute;
width: 40px;
height: 40px;
top: -10px;
right: -10px;
}
/* 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 */
.field select:not(*:root) {
-webkit-appearance: none;
line-height: 24px;
/* fix for android webkit */
outline: none !important;
}
.field.select:not(*:root):before {
content: "";
position: absolute;
right: 12px;
bottom: 15px;
background-color: transparent;
border-left: 3px solid #128BDC;
border-bottom: 3px solid #128BDC;
border-radius: 0px 0px 0px 4px;
width: 12px;
height: 12px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
pointer-events:none;
z-index: 100;
}
/* IE10+: style Select Icon */
.field.select ::-ms-expand {
background: none;
border: none;
padding-right: 2px;
}
/* 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 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;
}
/* IE10+: disable reset button in form fields */
.field input::-ms-clear {
display: none;
}
/* Format Placeholder - needs one selector each, otherwise the clients disregard the selector as invalid */
.field ::-webkit-input-placeholder {
font-size: 16px;
color: #999999;
}
.field ::-moz-placeholder {
font-size: 16px;
color: #999999;
}
.field :-moz-placeholder {
font-size: 16px;
color: #999999;
}
.field :-ms-input-placeholder {
color: #999999 !important;
font-size: 16px;
}
.field .placeholder[class][class] {
color: #999999;
}
.xl .field ::-webkit-input-placeholder {
font-size: 20px;
}
.xl .field ::-moz-placeholder {
font-size: 20px;
}
.xl .field :-moz-placeholder {
font-size: 20px;
}
.xl .field ::-ms-input-placeholder {
font-size: 20px;
}
/* fix the wrong position of the placeholder-text in android 4.x */
.no-flex .field input[type="text"][placeholder],
.no-flex .field input[type="password"][placeholder],
.no-flex .field input[type="number"][placeholder],
.no-flex .field input[type="date"][placeholder],
.no-flex .field input[type="month"][placeholder],
.no-flex .field input[type="week"][placeholder],
.no-flex .field input[type="time"][placeholder],
.no-flex .field input[type="datetime"][placeholder],
.no-flex .field input[type="datetime-local"][placeholder],
.no-flex .field input[type="email"][placeholder],
.no-flex .field input[type="search"][placeholder],
.no-flex .field input[type="tel"][placeholder],
.no-flex .field input[type="color"][placeholder] {
line-height: normal;
}
.field {
width: 100%;
max-width: 620px;
}
.field.half-size {
width: 50%;
max-width: 310px;
min-width: 140px;
}
.field.quarter-size {
width: 22.581%;
max-width: 155px;
min-width: 100px;
}
.field:not(.quarter-size) + .field.quarter-size {
width: 25.808%;
}
.field.min-size {
width: 1%;
}
fieldset .field.half-size {
width: 300px;
}
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%; }
}
.field label,
fieldset legend {
/* 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: block;
line-height: 24px;
padding: 8px 0px;
width: 100%;
font-family: "SourceSansProRegular", Verdana, sans-serif;
}
fieldset legend {
display: table-header-group;
}
.field label .note,
fieldset legend .note {
color: #707070;
}
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: block;
padding: 5px 0px 3px 0px;
}
fieldset legend ~ .select.field {
position: relative;
}
fieldset legend ~ .field {
position: static;
}
fieldset legend ~ .field .helper,
fieldset .text.field + .text.field + .text.field > .helper {
position: absolute;
top: 0px;
right: 0px;
}
fieldset legend ~ .field .helper,
fieldset .text.field + .text.field + .text.field > .helper,
x:-moz-any-link {
top: -40px;
}
.field:not(.error) > .icon:first-child,
.field .helper:first-child {
float: right;
position: relative;
margin-top: 8px;
margin-left: 8px;
}
fieldset legend .helper {
float: right;
position: relative;
margin-top: 0px;
margin-left: 8px;
}
.xl .field label ~ .icon,
.xl .field label ~ .helper,
.xl .field:not(.error) > .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;
}
/* 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: 8px;
position: relative;
}
.field.radio input,
.field.checkbox input {
float: left;
margin: 10px 10px 0px 0px;
}
.no-flex .checkbox.field.inline {
clear: both;
}
/* Checkbox/Radio with Legend */
legend ~ .radio.field input:checked ~ label::after,
legend + .field.checkbox input:checked ~ label::after {
top: 15px;
}
/* Radio - Vertical */
fieldset .radio.field,
fieldset [class][class][class] ~ .radio.field {
display: block;
width: auto;
}
/* Radio - Horizontal */
fieldset .radio.field.horizontal,
fieldset [class][class][class] ~ .radio.field.horizontal {
display: inline-block;
min-width: 50px;
}
@media all and (min-width: 0px) {
.field.radio,
.field.checkbox,
.field.radio + .field.radio,
.field.checkbox + .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 #525252;
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: 4px;
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: #128BDC;
}
.field.checkbox input:checked ~ label:after {
content: "";
position: absolute;
top: 10px;
left: -37px;
width: 16px;
height: 6px;
border-left: 4px solid #128BDC;
border-bottom: 4px solid #128BDC;
-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"][type]:focus,
.field input[type="password"][type]:focus,
.field input[type="number"][type]:focus,
.field input[type="date"][type]:focus,
.field input[type="month"][type]:focus,
.field input[type="week"][type]:focus,
.field input[type="time"][type]:focus,
.field input[type="datetime"][type]:focus,
.field input[type="datetime-local"][type]:focus,
.field input[type="email"][type]:focus,
.field input[type="search"][type]:focus,
.field input[type="tel"][type]:focus,
.field input[type="color"][type]:focus,
.field select[class]:focus,
.field textarea[class]:focus {
outline: none;
border-color: #128BDC;
}
@media all and (min-width: 0px) {
.field.checkbox input[type]:focus + label:before,
.field.radio input[type]:focus + label:before {
border-color: #128BDC;
}
}
/* 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: SourceSansProRegular;
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 #128BDC;
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: #525252;
display: block;
}
.suggest > a,
.suggest > option,
.suggest > li {
display: block;
padding: 5px 10px;
color: #525252;
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 fieldset.actions {
display: block;
}
form .actions {
margin-top: 0px;
overflow: hidden;
}
form .actions .right {
float: right;
}
form *:not(.nolabel) + .actions {
margin-top: 20px;
}
/* error message */
form .error.message {
display: block;
position: relative;
overflow: hidden;
top: -8px;
background-color: transparent;
color: ;
margin-bottom: 0px;
width: auto;
}
form .message.field .icon + *:not(.icon) {
font-weight: 400;
font-family: "SourceSansProRegular", Verdana, sans-serif;
}
/*.field input:not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="range"]):not([type="url"]):not([type="button"]):not([type="radio"]):not([type="checkbox"])[aria-invalid],*/
.field input[type="text"][aria-invalid],
.field input[type="password"][aria-invalid],
.field input[type="number"][aria-invalid],
.field input[type="date"][aria-invalid],
.field input[type="month"][aria-invalid],
.field input[type="week"][aria-invalid],
.field input[type="time"][aria-invalid],
.field input[type="datetime"][aria-invalid],
.field input[type="datetime-local"][aria-invalid],
.field input[type="email"][aria-invalid],
.field input[type="search"][aria-invalid],
.field input[type="tel"][aria-invalid],
.field input[type="color"][aria-invalid],
.field select[aria-invalid], /* added error border color for select as well */
.field textarea[aria-invalid],
/*.field input[aria-invalid],*/
.field.checkbox input[aria-invalid] ~ label::before {
border-color: ;
}
/* 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: 620px;
padding-left: 0px;
}
}
/* Smartphone size */
@media all and (max-width: 659.9px) {
fieldset .field {
width: 300px;
}
fieldset .field + .field {
padding-left: 20px;
}
fieldset .field.half-size,
fieldset .field.half-size + .field {
display: block;
width: 100%;
max-width: 620px;
padding-left: 0px;
}
form.joined fieldset .field.half-size,
form.joined fieldset .field.half-size + .field {
display: table-cell;
}
fieldset .field.half-size + .action.field {
margin-top: 10px;
text-align: right;
}
fieldset .field.quarter-size {
width: 24.5%;
min-width: 86px;
}
.field.quarter-size label ~ .icon, .field.quarter-size label ~ .helper,
.field.quarter-size > .icon:first-child, .field.quarter-size .helper:first-child {
margin-left: 5px;
}
/* single button that is wrapped in a new line takes up all the space */
form:not(.joined) .half-size + .quarter-size.action.field button:first-child:last-child,
form:not(.joined) .half-size + .min-size.action.field button:first-child:last-child {
width: 100%;
}
form:not(.joined) .half-size + .quarter-size.action.field button:first-child:last-child .icon,
form:not(.joined) .half-size + .min-size.action.field button:first-child:last-child .icon {
float: none;
display: inline-block;
margin-right: 5px;
vertical-align: bottom;
}
label.compact,
fieldset legend.compact {
line-height: 24px;
}
.s-oneline fieldset .field.half-size,
.s-oneline fieldset .field.half-size + .field {
display: table-cell;
}
form:not(.joined).s-oneline .half-size + .min-size.action.field button:first-child:last-child {
width: auto;
}
form:not(.joined).s-oneline .half-size + .min-size.action.field {
padding-left: 10px;
}
}
/* info box as tooltip */
.info.message.field {
padding: 20px 35px 20px 20px;
margin-bottom: 3px;
will-change: transform;
width: auto;
border-radius: 4px;
background-color: #128BDC;
border-color: #128BDC;
}
.info.message.field img {
max-width: 260px;
height: auto;
margin-top: 10px;
}
.info.message.field .close.icon {
margin-top: 0px;
position: absolute;
right: 10px;
top: 10px;
}
/* old school - field color */
.field input:disabled,
.field select:disabled {
border-color: #999999;
color: #999999;
background-color: #FFFFFF;
cursor: not-allowed;
}
.field.checkbox input[disabled] + label:before,
.field.radio input[disabled] + label:before {
background: #C2C2C2;
cursor: not-allowed;
}
/* cat - header 1.1.1 */
.header {
padding: 0px;
display: block;
height: 96px;
line-height: 100px;
box-sizing: border-box;
}
.header[class="header"],
.header[class="vline header"] {
width: 100%;
}
.header > * {
display: inline-block;
}
.header.center {
margin: 0 auto;
}
.header > *:first-child,
.header > *:first-child > * {
color: #525252;
font-family: 'SourceSansProBold', Arial, sans-serif;
font-size: ;
font-weight: 400;
display: inline-block;
line-height: inherit;
}
.header > *:first-child > *:first-child {
display: block;
background: url(../static/logo.png) no-repeat 50% 50%;
background-size: auto 100%;
color: transparent;
width: 287px;
height: 64px;
overflow: hidden;
float: left;
margin: 17px 40px 0px 10px;
}
/* */
.header:before {
content: "";
position: absolute;
left: 0px;
right: 0px;
min-width: 100%;
height: 96px;
border-top: 4px solid #128BDC;
border-left: 0px;
border-right: 0px;
border-bottom: 0px;
background: #FFFFFF;
box-sizing: border-box;
z-index: -1;
}
/* */
.header.vline:before {
border-bottom: 1px solid #DADADA;
}
.header.vline,
.header.vline:before {
height: 97px;
}
.header .left {
float: left;
}
.header .right {
float: right;
}
.header > .container,
.header > .module {
margin-top: 28px;
}
.header .module {
line-height: 22px;
}
.header a:hover,
.header a:focus {
text-decoration: none;
}
@media screen and (min-width: 980px) {
.header ~ .navigation[class][class] {
margin-top: -1px;
}
}
/* Dieser Block wurde nicht geprüft oder getestet!!! */
@media screen and (min-width: 980px) {
.header.header-layer {
height: 72px;
line-height: 76px;
padding: 0px;
float: left;
/* */
/* */
}
.header.header-layer[class]:before {
border-top-width: 4px;
height: 72px;
margin-top: 0px;
}
.header.header-layer[class].vline,
.header.header-layer[class].vline:before {
height: 73px;
}
.header.header-layer _::-webkit-full-page-media,
.header.header-layer _:future,
:root .header.header-layer:not(.fix, .m-fix) {
float: none;
position: relative;
z-index: 999;
}
.no-flex .header.header-layer + * {
float: none;
display: inline-block;
}
.header.header-layer > *:first-child {
vertical-align: bottom;
left: 0px;
-webkit-transform: none;
-ms-transform: none;
transform: none;
margin-left: 20px;
}
.header.header-layer > *:first-child,
.header.header-layer > *:first-child > * {
font-size: ;
}
.header.header-layer > *:first-child > *:first-child {
background: url(../static/logo.png) no-repeat 50% 50%;
background-size: 215px 48px;
color: transparent;
width: 215px;
height: 48px;
margin: 13px 16px 0px 0px;
}
.header.header-layer > *:first-child + .left {
margin-left: 10px;
margin-right: -26px;
}
.header.header-layer ~ .navigation,
.header.header-layer ~ .settings,
.header.header-layer ~ .wishlist {
position: absolute;
margin-top: 0px;
top: 0px;
z-index: 9999;
}
.header.header-layer ~ .navigation {
right: 100%;
}
.header.header-layer ~ .settings > .head,
.header.header-layer ~ .wishlist > .head {
height: 72px;
line-height: 76px;
}
.header.header-layer.vline ~ .settings > .head,
.header.header-layer.vline ~ .wishlist > .head {
box-sizing: content-box;
z-index: 9999;
}
.no-flex .header.header-layer ~ .navigation,
.no-flex .header.header-layer ~ .settings,
.no-flex .header.header-layer ~ .wishlist {
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.header.header-layer > .container,
.header.header-layer > .module[class] {
margin-top: 21px;
}
.header.header-layer > .container.right,
.header.header-layer > .module.right {
margin-top: 20px;
}
.header.header-layer .icon[aria-label]:after {
bottom: -14px;
}
.toggle-nav .header.header-layer:before {
left: -300px;
}
.toggle-settings .header.header-layer:before,
.toggle-wishlist .header.header-layer:before {
right: -300px;
}
}
@media screen and (min-width: 980px) and \\0 screen {
.header.header-layer:not(.fix, .m-fix) {
float: none;
position: relative;
z-index: 999;
}
}
@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[class].vline,
.header[class].vline:before {
height: 73px;
}
.header _::-webkit-full-page-media,
.header _:future,
:root .header:not(.fix, .m-fix) {
float: none;
position: relative;
z-index: 999;
}
.no-flex .header + * {
float: none;
display: inline-block;
}
.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: ;
}
.header > *:first-child > *:first-child {
background: url(../static/logo.png) no-repeat 50% 50%;
background-size: 215px 48px;
color: transparent;
width: 215px;
height: 48px;
margin: 13px 16px 0px 0px;
}
.header > *:first-child + .left {
margin-left: 10px;
margin-right: -26px;
}
.header ~ .navigation,
.header ~ .settings,
.header ~ .wishlist {
position: absolute;
margin-top: 0px;
top: 0px;
z-index: 9999;
}
.header ~ .navigation {
right: 100%;
}
.header ~ .settings > .head,
.header ~ .wishlist > .head {
height: 72px;
line-height: 76px;
}
.header.vline ~ .settings > .head,
.header.vline ~ .wishlist > .head {
box-sizing: content-box;
z-index: 9999;
}
.no-flex .header ~ .navigation,
.no-flex .header ~ .settings,
.no-flex .header ~ .wishlist {
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.header > .container,
.header > .module[class] {
margin-top: 21px;
}
.header > .container.right,
.header > .module.right {
margin-top: 20px;
}
.header .icon[aria-label]:after {
bottom: -14px;
}
.toggle-nav .header:before {
left: -300px;
}
.toggle-settings .header:before,
.toggle-wishlist .header:before {
right: -300px;
}
}
@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: 50px;
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:before,
.header.vline,
.header.vline:before {
height: 48px;
margin-top: 0px;
border-top-width: 0px;
border-bottom: 0px;
}
.header > *:first-child > *:first-child {
position: absolute;
top: 0px;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
margin: 0px;
font-size: 20px;
line-height: 50px;
color: #333333;
/* */
background-position: 50% 50%;
background-size: 179px 40px;
height: 48px;
width: 179px;
/* */
}
.header > *:first-child > *:first-child ~ * {
display: none;
}
.header > .container.right[class] {
margin: 7px 26px 0px 0px;
min-width: auto;
width: auto;
}
.header > .module.left[class] {
margin: 8px 0px 0px 16px;
}
.header .l-1.module[class][class] {
min-width: 32px;
width: auto;
padding: 0 0 0 8px;
}
.header ~ .navigation,
.header ~ .settings,
.header ~ .wishlist {
position: absolute;
top: 0px;
}
.header ~ .navigation {
right: 100%;
}
.header ~ .settings > .head,
.header ~ .wishlist > .head {
height: 48px;
line-height: 48px;
}
.header ~ .navigation,
.header ~ .settings,
.header ~ .wishlist,
.no-flex .header ~ .navigation,
.no-flex .header ~ .settings,
.no-flex .header ~ .wishlist {
-webkit-transform: none;
-ms-transform: none;
transform: none;
margin-top: 0px;
}
.toggle-nav .header:before {
left: 0;
}
.toggle-settings .header:before,
.toggle-wishlist .header:before {
right: 0;
}
}
/* */
.header ~ .settings,
.header ~ .wishlist {
display: none;
right: -300px;
width: 300px;
overflow: hidden;
position: absolute;
flex-grow: 0;
}
.header ~ .settings > .head,
.header ~ .wishlist > .head {
position: relative;
box-sizing: border-box;
border-bottom: 1px solid #DADADA;
margin-bottom: 10px;
}
.header ~ .settings > .head .l.icon,
.header ~ .wishlist > .head .l.icon {
margin: -10px 10px -10px 10px;
}
.header ~ .settings > .head .close.icon,
.header ~ .wishlist > .head .close.icon {
position: absolute;
top: 50%;
right: 20px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
body {
-webkit-transition: -webkit-transform 0.12s ease-in-out;
-ms-transition: -ms-transform 0.12s ease-in-out;
transition: transform 0.12s ease-in-out;
}
.toggle-nav {
-webkit-transform: translateX(300px);
-ms-transform: translateX(300px);
transform: translateX(300px);
overflow-x: hidden;
}
@media screen and (max-width: 659.9px) {
.toggle-nav {
-webkit-transform: translateX(256px);
-ms-transform: translateX(256px);
transform: translateX(256px);
}
}
.toggle-settings,
.toggle-wishlist {
-webkit-transform: translateX(-300px);
-ms-transform: translateX(-300px);
transform: translateX(-300px);
overflow-x: hidden;
}
.toggle-settings .header ~ .settings,
.toggle-wishlist .header ~ .wishlist {
display: block;
}
/* */
/* */
.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: 68px;
z-index: 1200;
padding: 20px 10px;
}
.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;
}
.header .dialog button.fullsize {
width: 100%;
}
@media all and (min-width:0\0) and (min-resolution: .001dpcm) {
.header .dialog {
-ms-transform: translateX(-100%) translateX(-44px) translateY(45px);
}
}
/* */
/* Bugfix von Bo aus der Bestellstrecke, damit die Dialog-/Settings-Box keine Skrollbar erzeugt */
/* IE10+ begin: avoid the horizontal scrollbar */
@media screen and (min-width: 660px) {
_:-ms-lang(x),
_:-webkit-full-screen,
body {
overflow-x: hidden;
}
}
@media screen and (-ms-high-contrast: active) and (min-width: 660px), (-ms-high-contrast: none) and (min-width: 660px) {
body {
overflow-x: hidden;
}
}
/* IE10+ end: avoid the horizontal scrollbar */
#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%;
}
#footer .backdrop-c2-light94,
#footer .backdrop-c2-light94 .list a {
color: #707070;
}
#footer ul.inline.list.align-center li,
#footer ul.inline-block.list.align-center li {
margin-left: 16px;
margin-right: 16px;
}
/* DP-13044: Lieferung neues CSS/HTML für Footer Icons (mehr als 2 Logos) */
#footer .horizontal.badge li:nth-child(even) {
margin-right: 0;
}
/* Abstaede nach oben wegnehmen in den footer-linklisten */
@media screen and (min-width: 980px) {
#footer .container.vspace-s.l-4 > h4 + .module.l-4 > ul,
#footer .container.vspace-s.l-8 > .module.l-4 > ul {
margin-top: -7px;
}
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
#footer .container.vspace-s.m-4 > h4 + .module.l-4 > ul,
#footer .container.vspace-s.m-8 > .module.l-4 > ul {
margin-top: -7px;
}
}
@media screen and (max-width: 659.9px) {
#footer .container.vspace-s > h4 + .module.l-4 > ul {
margin-top: -7px;
}
}
#footer .container.vspace-s > .module.l-4 > h4 + ul {
margin-top: -7px;
}
#footer .container.vspace-s > .module.l-4 > h4 + ul.badge {
margin-top: -5px;
}
.secondary.container { background: #D4EAF9; }
.service.container { background: #128BDC; }
.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: #128BDC; }
.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: #333333; }
/* 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; }
/* cat - message-1.2 */
.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;
overflow: visible;
}
.js .message .close.icon {
display: block;
cursor: pointer;
}
/* easier closing for touch-enabled devices */
.touch .message .close.icon:before {
content: "";
position: absolute;
margin: -10px 0px 0px -10px;
width: 36px;
height: 36px;
display: block;
}
.touch .message.big .close.icon:before {
width: 42px;
height: 42px;
}
.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: ;
border-color: ;
}
.message.warning {
background-color: #FCF3D1;
border-color: #FCF3D1;
}
.message.success {
background-color: ;
border-color: ;
}
.message.info {
background-color: ;
border-color: ;
}
.message .icon + *:not(.icon) {
font-family: "SourceSansProBold", Arial, sans-serif;
}
.message:not(.big) .icon + *:not(.icon) {
font-size: 16px;
line-height: 24px;
font-weight: 700;
}
@media all and (min-width: 660px) {
.message .icon + *:not(.icon) {
font-size: 20px;
line-height: 28px;
font-weight: 400;
}
}
.inline.message .icon + *:not(.icon),
.message .icon:not(.close) ~ p {
display: inline;
}
@media all and (max-width: 979.9px) {
.message.big .icon + *:not(.icon) {
font-size: 20px;
line-height: 28px;
}
}
@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 {
width: 1000px;
max-width: 1000px;
min-width: auto;
padding-right: 0;
padding-left: 0;
overflow: hidden;
border-radius: 0;
}
.fullwidth.message > div {
width: 100%;
max-width: 1000px;
min-width: auto;
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;
}
/* animate toggle of info field */
.message.info.field {
max-height: 1000px;
opacity: 1;
-webkit-transition: 0.25s ease-in;
-moz-transition: 0.25s ease-in;
-ms-transition: 0.25s ease-in;
-o-transition: 0.25s ease-in;
transition: 0.25s ease-in;
}
.message.info.hidden {
display: block;
max-height: 0px;
min-height: 0px;
overflow: hidden;
opacity: 0;
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
-webkit-transition: 0.15s ease-out;
-moz-transition: 0.15s ease-out;
-ms-transition: 0.15s ease-out;
-o-transition: 0.15s ease-out;
transition: 0.15s ease-out;
}
[class][class][class].hidden { display: none; }
body [data-show-nodes],
body [data-hide-nodes],
body [data-set-nodes],
body [data-unset-nodes],
body [data-toggle-nodes] {
cursor: pointer;
}
/* alternative attribute value with same behavior but with cursor pointer: #empty-withpointer */
body [data-show-nodes="#empty"],
body [data-hide-nodes="#empty"],
body [data-set-nodes="#empty"],
body [data-unset-nodes="#empty"],
body [data-toggle-nodes="#empty"] {
cursor: default;
}.navigation {
display: block;
overflow: visible;
z-index: 999;
}
.navigation ul {
list-style: none;
margin: 0px;
padding: 0px;
}
/* disable hover state for touch devices and click for unopened submenu */
.touch .navigation a > .icon,
.navigation ul li ul li a {
pointer-events: none;
}
/* re-enable click for opened submenu */
.navigation ul li ul:hover li a {
pointer-events: auto;
}
/* Höhen der Listenpunkte */
.navigation ul li {
min-height: 40px;
padding: 0;
position: relative;
}
.navigation ul li a {
color: #333333;
box-sizing: border-box;
position: relative;
text-decoration: none;
display: inline-block;
line-height: 24px;
padding: 8px 20px 8px 20px;
}
/*l-view*/
@media screen and (min-width: 980px) {
/* Haupt-Navigation (grauer Balken) */
.navigation > ul > li,
.navigation > ul ul li:first-child {
min-height: 48px;
padding: 0;
}
/* Unter-Navigation (Flyouts) */
.navigation > ul > li > a {
padding: 12px 20px 12px 20px;
}
.navigation > ul ul li:first-child a {
padding: 12px 44px 12px 20px;
}
}
/*m-/s-view*/
@media screen and (max-width: 979.9px) {
/* Ohne Icon immer 40px hoch */
.navigation ul li:first-child {
min-height: 40px;
padding: 0;
}
}
/* Open-/Close-Icon */
.navigation ul li ul li:first-child a:after {
content: "";
position: absolute;
right: 20px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
display: inline-block;
width: 16px;
height: 16px;
background: url(../static/icon.svg) no-repeat, none;
background-size: 80px 600px;
background-position: -40px -20px;
}
/* Home-Icon in L-Size und service Farbe (für m-/s-View) */
.navigation > ul > li:first-child a .icon.home {
background-size: 160px 1200px;
background-position: -120px -200px;
width: 32px;
height: 32px;
}
.navigation > ul > li:first-child a:hover .icon.home {
background-position: -120px -200px;
}
/*l-view*/
@media screen and (min-width: 980px) {
.navigation ul li ul:hover li:first-child a:after,
.navigation ul li ul:focus li:first-child a:after {
background-position: -20px -20px;
}
/* Home-Icon in M-Size und inactive Farbe (hover Service-Farbe) */
.navigation > ul > li:first-child a .icon.home {
background-size: 120px 900px;
background-position: -60px -150px;
width: 24px;
height: 24px;
}
.navigation > ul > li:first-child a:hover .icon.home {
background-size: 120px 900px;
background-position: -90px -150px;
}
}
/*m-/s-view*/
@media screen and (max-width: 979.9px) {
.navigation ul li ul:focus li:first-child a:after,
.navigation ul li ul:hover li:first-child a:after {
background-position: -40px 0px;
}
.navigation ul li ul li:first-child a:hover:after {
background-position: -60px 0px;
}
}
/* Icon in Untermenü - Ergänzung zum Icon-CSS */
.navigation ul.list.text li a .m.icon:first-child {
margin-top: 0px;
}
/* ??? hide stray icons in desktop navigation */
.navigation > ul > li + li > ul > li:first-child > a > .icon {
display: none;
}
@media screen and (min-width: 980px) {
.navigation {
clear: left;
height: 48px;
}
/* no other width specified */
[class="navigation"],
[class="vline navigation"] {
width: 100%;
}
.navigation.center {
margin: 0 auto;
}
/* Graue Hinterlegung */
.navigation:before {
content: "";
position: absolute;
background: #F3F3F3;
left: 0px;
width: 100%;
height: 48px;
z-index: -1;
}
.navigation ul li {
float: left;
position: relative;
}
.navigation > ul > li:first-child a {
padding: 0px;
margin: 12px 20px 12px 30px;
}
.navigation li ul li {
float: none;
}
/* Alle bis auf den ersten Navipunkt ds Submenüs ausblenden */
.navigation li ul li + li {
display: none;
}
/* Bei Hover wieder einblenden */
.navigation li ul:hover li + li {
display: block;
}
/* Damit die Breite nicht die Hautnavi aufspannt */
.navigation li ul li + li a {
position: absolute;
width: 300px;
z-index: 9999;
}
/* Grauer Trennstrich */
.navigation > ul > li:first-child:after {
content: "";
height: 20px;
width: 1px;
right: 0;
top: 15px;
position: absolute;
background: #DADADA;
}
/* Alle nötig? */
.navigation > ul > li + li.active > a,
.navigation > ul > li + li > a:hover,
.navigation > ul > li + li > a:focus,
.navigation li ul li:first-child > a:focus,
.navigation li.active ul li:first-child > a {
color: #128BDC;
}
/* Flyout Border + Schatten */
/* IE has problems with box-shadow, so we use a border instead */
/* weiße Hinterlegung der Sub-Listen */
.navigation ul li ul:hover li + li:before {
content: "";
display: block;
position: absolute;
background-color: #FFFFFF;
min-height: 100%;
top: 0px;
left: 0px;
margin-left: -1px;
border-radius: 0px;
z-index: 999;
border-left: 1px solid #DADADA;
border-right: 1px solid #DADADA;
width: 300px;
}
.navigation ul li ul li + li:last-child:before {
border-radius: 0px 0px 4px 4px;
border-bottom: 1px solid #DADADA;
}
/* everything but IE and Safari≤6 gets box shadows */
@media all { @media (min-width: 0px) {
.navigation ul li ul li + li:before {
border: none;
margin-left: 0px;
box-shadow: 0px 3px 3px #DADADA;
}
}}
/* Blaue Hinterlegung */
.navigation li + li > ul:hover > li:first-child > a {
background: #128BDC;
color: #FFFFFF;
border-radius: 3px 3px 0px 0px;
}
/* Blauer Unterstrich */
.navigation > ul > li + li.active > a:before,
.navigation li ul:hover li:first-child > a:before,
.navigation li.active ul li:first-child > a:before {
content: "";
position: absolute;
height: 4px;
bottom: 0px;
left: 20px;
right: 20px;
background: #128BDC;
}
/* nur bei Hover, Breite für 1 spaltige Liste */
.navigation li ul:hover li:first-child > a:before {
border-radius: 0px 4px 0px 0px;
width: 280px;
}
/* Hintergrund bei Hover */
.navigation li ul li + li a:hover,
.navigation li ul li + li a:focus,
.navigation li ul li + li.active a {
background: #D4EAF9;
}
.navigation li ul li:last-child a {
border-radius: 0px 0px 4px 4px;
}
}
/* mobile/tablet view */
@media screen and (max-width: 979.9px) {
.navigation {
position: relative;
left: -300px;
width: 300px;
height: 0px;
}
/* Min-Width ist nötig damit klick auf burger funktioniert */
.navigation > ul {
width: 300px;
min-width: 0px;
}
/* border unter 1. li nötig wegen zu kuezwm a */
.navigation > ul > li:first-child {
padding-right: 50px;
border-bottom: #DADADA solid 1px;
}
.navigation > ul > li:first-child > a {
height: 72px;
/*padding: 25px 0 19px 20px; bei 24px-Icon*/
padding: 21px 0 20px 20px; /* bei 32px Icon */
width: 250px;
border-bottom: solid 0px;
}
/* erster Navipunkt mit Home-Iocn keinen Hinterlegung */
.navigation > ul > li:first-child > a:hover {
background-color: transparent;
}
.navigation > ul > li:first-child > a:after {
content: attr(data-title);
font-size: 20px;
position: relative;
top: -5px; /* top: -2px; bei 24px-Icon */
left: 4px;
}
/* fix for Safari (iOS, desktop) */
_::-webkit-full-page-media, _:future, :root .navigation > ul > li:first-child > a:after {
top: 8px;
}
.navigation li ul li + li {
display: none;
}
.navigation li ul:hover li + li {
display: inline;
}
.navigation ul li a {
display: block;
border-bottom: 1px solid #DADADA;
width: 300px;
}
.navigation ul li.active > a,
.navigation ul li a:focus,
.navigation ul li.active ul li:first-child a {
color: #128BDC;
text-decoration: none;
background: #F3F3F3;
}
.navigation ul li a:hover {
color: #333333;
text-decoration: none;
background: #D4EAF9;
}
.navigation li ul li:last-child > a {
border-bottom: 1px solid #DADADA;
}
.navigation li ul li + li > a,
.navigation li ul:hover li:first-child a {
border-bottom: 0px;
background: #F3F3F3;
}
/* blauer Balken links */
.navigation li.active > a:before,
.navigation li.active ul li:first-child a:before,
.navigation li ul:hover li:first-child a:before {
content: "";
width: 4px;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
background: #128BDC;
}
/* Entfernt blauen Balken im Untermenü */
.navigation li ul li.active > a:before {
background: transparent;
}
/* blaue Hinterlegung bei Hover */
.navigation li ul li a:hover,
.navigation li ul:hover li:first-child a:hover {
background: #D4EAF9;
}
/* blaue Textfarbe */
.navigation li ul li.active > a:focus,
.navigation li ul li.active > a {
color: #128BDC;
background: #F3F3F3;
}
/* graue Textfarbe bei Hover */
.navigation li ul li > a:hover {
color: #333333;
}
/* Größe für mit Icons... */
.navigation li ul li:first-child > a {
xpadding: 10px 20px;
xline-xheight: 52px;
}
/* improve click area for mobile navigation close button */
.navigation .close.icon {
position: absolute;
top: 25px;
xright: 20px;
left: 260px;
cursor: pointer;
z-index: 20;
overflow: visible;
color: transparent;
}
x.navigation .close.icon:before {
content: "";
position: absolute;
display: block;
width: 60px;
xheight: 70px;
margin: -27px 0px 0px -24px;
z-index: 999;
}
}
@media screen and (max-width: 659.9px) {
.navigation {
position: relative;
left: -256px;
width: 256px;
}
.navigation > ul,
.navigation > ul li a {
width: 256px;
}
/* border unter 1. li nötig wegen zu kuezwm a */
.navigation > ul > li:first-child {
padding-right: 56px;
border-bottom: #DADADA solid 1px;
}
.navigation > ul > li:first-child > a {
height: 48px;
padding: 8px 0 8px 16px;
width: 200px;
border-bottom: solid 0px;
}
.navigation > ul > li:first-child > a:after {
top: -7px; /* top: -2px; bei 24px-Icon */
}
.navigation .close.icon {
top: 12px;
xright: 18px;
left: 216px;
}
.navigation .close.icon:before {
xheight: 48px;
xmargin-top: -16px;
}
}
@media screen and (min-width: 980px) {
.navigation li + li > ul.double:hover > li:first-child > a:before {
width: 480px;
}
.navigation .double.text.list li + li a {
width: 250px;
box-shadow: none;
border: 0px;
}
.navigation .double.text.list li + li:nth-of-type(odd) {
min-height: 0px;
}
.navigation .double.text.list li + li:nth-of-type(odd):before {
content: none;
}
.navigation .double.text.list li + li:nth-of-type(even):before {
width: 500px;
}
/* li + li verhindert, dass das erste li jemals ausgewählt */
/* li:nth-of-type(even):last-child => letzter Navipunkt steht links */
/* li:nth-of-type(even):nth-last-child(2) => letzter Navipunkt rechts, aber li links davon wird gewählt */
.navigation .double.text.list li + li:nth-of-type(even):last-child:before,
.navigation .double.text.list li + li:nth-of-type(even):nth-last-child(2):before {
border-bottom: 1px solid #DADADA;
border-radius: 0px 0px 4px 4px;
}
.navigation .double.text.list li + li:nth-of-type(even) a {
border-right: 0px;
}
.navigation .double.text.list li + li:nth-of-type(odd) a {
left: 250px;
margin-top: -40px;
border-left: 0px;
}
.navigation .double.text.list li:last-child a:nth-of-type(odd) {
border-radius: 0px 0px 0px 4px;
}
.navigation .double.text.list li:last-child a:nth-of-type(even) {
border-radius: 0px 0px 4px 0px;
}
}
@media screen and (min-width: 980px) {
/* Linie im aufgeklappten Zustand oben */
.navigation li + li > ul.triple:hover > li:first-child > a:before {
width: 730px;
}
/* weissen Hintergrund aufspannen über die 3 Spalten */
.navigation li + li > ul.triple:hover li + li:before {
width: 750px;
}
.navigation .triple.text.list li + li a {
width: 250px;
box-shadow: none;
border: 0px;
}
/* 2. Spalte */
.navigation .triple.text.list li + li:nth-of-type(3n+3) {
left: 250px;
margin-top: -40px;
}
/* 3. Spalte */
.navigation .triple.text.list li + li:nth-of-type(3n+4) {
left: 500px;
margin-top: -40px;
}
.navigation .triple.text.list li + li:nth-of-type(3n+3):before,
.navigation .triple.text.list li + li:nth-of-type(3n+4):before {
content: none;
}
/* von der letzten Reihe, die Li's => Zugriff immer auf den linken */
.navigation .triple.text.list li + li:nth-of-type(3n-1):last-child:before,
.navigation .triple.text.list li + li:nth-of-type(3n-1):nth-last-child(2):before,
.navigation .triple.text.list li + li:nth-of-type(3n-1):nth-last-child(3):before {
border-bottom: 1px solid #DADADA;
border-radius: 0px 0px 4px 4px;
}
}
/* Noch nicht getestet !!! */
/* m/s-Navigation in l-viewport */
/*
@media screen and (min-width: 980px) {
[class*="l-header-"] .header ~ .navigation[class][class] {
position: absolute;
left: -240px;
width: 240px;
top: 0px;
xheight: 0px;
margin-top: -1px;
z-index: -1;
}
.toggle-nav[class*="l-header-"] .header ~ .navigation[class][class],
.toggle-nav [class*="l-header-"] .header ~ .navigation[class][class] {
z-index: 999;
}
[class*="l-header-"] .header ~ .navigation:before,
[class*="l-header-"] .header ~ .navigation > ul > li > ul:hover > li + li:before,
[class*="l-header-"] .header ~ .navigation > ul > li:first-child:after {
content: none;
}
[class*="l-header-"] .header ~ .navigation ul {
list-style: none;
padding: 0px;
}
[class*="l-header-"] .header ~ .navigation ul[class][class] {
width: auto;
min-width: 0px;
}
[class*="l-header-"] .header ~ .navigation > ul > li {
display: block;
float: none;
padding: 0px;
xheight: auto;
}
[class*="l-header-"] .header ~ .navigation > ul > li:first-child a {
padding-bottom: 9px;
}
.l-header-s .header ~ .navigation > ul > li:first-child a {
xheight: 48px;
line-xheight: 48px;
padding: 0px 20px;
}
[class*="l-header-"] .header ~ .navigation > ul > li:first-child > a:after {
content: attr(data-title);
margin-left: 8px;
}
[class*="l-header-"] .header ~ .navigation ul li a {
display: block;
padding: 10px 20px;
box-sizing: content-box;
line-xheight: 52px;
color: #333333;
border-bottom: 1px solid #DADADA;
position: relative;
width: 200px;
}
[class*="l-header-"] .header ~ .navigation li:first-child a .m.icon:first-child {
margin: 2px 10px -2px 0px;
}
[class*="l-header-"] .header ~ .navigation ul.text.list li + li a .m.icon:first-child {
margin: -2px 8px 2px 0px;
}
[class*="l-header-"] .header ~ .navigation ul li.active > a,
[class*="l-header-"] .header ~ .navigation ul li a:hover,
[class*="l-header-"] .header ~ .navigation ul li a:focus {
color: #128BDC;
text-decoration: none;
background: #D4EAF9;
}
[class*="l-header-"] .header ~ .navigation li ul,
[class*="l-header-"] .header ~ .navigation li ul li {
xheight: auto;
}
[class*="l-header-"] .header ~ .navigation li ul li > a {
padding: 5px 20px 4px;
line-xheight: 30px;
}
[class*="l-header-"] .header ~ .navigation li ul li + li {
display: none;
}
[class*="l-header-"] .header ~ .navigation li ul:hover li + li {
display: inline;
}
[class*="l-header-"] .header ~ .navigation li ul:hover li + li:before {
content: none;
}
[class*="l-header-"] .header ~ .navigation li ul:hover li:first-child a {
color: #128BDC;
background: #F3F3F3;
}
[class*="l-header-"] .header ~ .navigation li ul:hover li:first-child a:before {
content: "";
width: 4px;
xheight: 100%;
position: absolute;
left: 0px;
top: 0px;
background: #128BDC;
}
[class*="l-header-"] .header ~ .navigation li ul:hover li:first-child a:after {
border-color: #128BDC;
}
[class*="l-header-"] .header ~ .navigation li ul li:first-child > a {
padding: 10px 20px;
line-xheight: 52px;
position: relative;
left: 0px;
margin-top: 0px;
}
[class*="l-header-"] .header ~ .navigation ul li ul li:first-child a:after {
width: 12px;
xheight: 12px;
border-width: 0px 0px 3px 3px;
bottom: 32px;
}
*/
/* improve click area for mobile navigation close button */
/* [class*="l-header-"] .header ~ .navigation .close.icon {
position: absolute;
top: 28px;
left: 204px;
cursor: pointer;
z-index: 20;
overflow: visible;
color: transparent;
}
[class*="l-header-"] .header ~ .navigation .close.icon:before {
content: "";
position: absolute;
display: block;
width: 60px;
xheight: 70px;
margin: -27px 0px 0px -24px;
z-index: 999;
}
.l-header-s .header ~ .navigation .close.icon {
top: 16px;
}
.l-header-s .header ~ .navigation .close.icon:before {
xheight: 48px;
margin-top: -16px;
}
[class*="l-header-"] .header ~ .navigation [class*=" l-"][class][class][class],
[class*="l-header-"] .header ~ .navigation [class*=" m-"][class][class][class],
[class*="l-header-"] .header ~ .navigation [class*=" s-"][class][class][class],
[class*="l-header-"] .header ~ .navigation [class^="l-"][class][class][class],
[class*="l-header-"] .header ~ .navigation [class^="m-"][class][class][class],
[class*="l-header-"] .header ~ .navigation [class^="s-"][class][class][class] {
display: flex;
}
.l-header-m .header ~ .navigation .m-0[class][class][class][class],
.l-header-s .header ~ .navigation .s-0[class][class][class][class] {
display: none;
}
}
*/
/* s navigation in m viewport */
/*
@media screen and (min-width: 660px) and (max-width: 979.9px) {
.m-header-s .header ~ .navigation > ul > li:first-child a {
xheight: 48px;
line-xheight: 48px;
padding: 0px 20px;
}
.m-header-s .header ~ .navigation .close.icon {
top: 16px;
}
.m-header-s .header ~ .navigation .close.icon:before {
xheight: 48px;
margin-top: -16px;
}
.m-header-s .header ~ .navigation [class*=" l-"][class][class][class],
.m-header-s .header ~ .navigation [class*=" m-"][class][class][class],
.m-header-s .header ~ .navigation [class*=" s-"][class][class][class],
.m-header-s .header ~ .navigation [class^="l-"][class][class][class],
.m-header-s .header ~ .navigation [class^="m-"][class][class][class],
.m-header-s .header ~ .navigation [class^="s-"][class][class][class] {
display: flex;
}
.m-header-s .header ~ .navigation .s-0[class][class][class][class] {
display: none;
}
}
*/
/* m navigation in s viewport */
/*
@media screen and (max-width: 659.9px) {
.s-header-m .header ~ .navigation > ul > li:first-child a {
line-xheight: 58px;
padding: 5px 20px;
xheight: 72px;
}
.s-header-m .header ~ .navigation .close.icon {
position: absolute;
top: 28px;
left: 204px;
cursor: pointer;
z-index: 20;
overflow: visible;
color: transparent;
}
.s-header-m .header ~ .navigation .close.icon:before {
content: "";
position: absolute;
display: block;
width: 60px;
xheight: 70px;
margin: -27px 0px 0px -24px;
z-index: 999;
}
.s-header-m .header [class*=" l-"][class][class][class],
.s-header-m .header [class*=" m-"][class][class][class],
.s-header-m .header [class*=" s-"][class][class][class],
.s-header-m .header [class^="l-"][class][class][class],
.s-header-m .header [class^="m-"][class][class][class],
.s-header-m .header [class^="s-"][class][class][class] {
display: flex;
}
.s-header-m .header .m-0[class][class][class][class] {
display: none;
}
}
*/
/* */
/*
[class*="l-header-"] .header ~ .navigation .double.text.list li + li a,
[class*="l-header-"] .header ~ .navigation .triple.text.list li + li:nth-of-type(3n+3),
[class*="l-header-"] .header ~ .navigation .triple.text.list li + li:nth-of-type(3n+4) {
left: 0;
margin-top: 0;
width: 200px;
xheight: 30px;
border-bottom: 1px solid #DADADA;
}
*/
/* fix for extra-wide screens */
@media screen and (min-width: 1919.9px) {
.fullwidth.navigation {
width: 100%;
}
.fullwidth.center.navigation ul.l-12.fix,
.fullwidth.center.navigation ul.l-12.l-fix {
display: block;
position: relative;
width: 960px;
margin: 0 auto;
}
}.mejs-offscreen {
/* Accessibility: hide screen reader texts (and prefer "top" for RTL languages). */
position: absolute !important;
top: -10000px;
left: -10000px;
overflow: hidden;
width: 1px;
height: 1px;
}
.mejs-container {
position: relative;
background: #000;
font-family: Helvetica, Arial;
text-align: left;
vertical-align: top;
text-indent: 0;
}
.me-plugin {
position: absolute;
}
.mejs-embed,
.mejs-embed body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: #000;
overflow: hidden;
}
.mejs-fullscreen {
/* set it to not show scroll bars so 100% will work */
overflow: hidden !important;
}
.mejs-container-fullscreen {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 1000;
}
.mejs-container-fullscreen .mejs-mediaelement,
.mejs-container-fullscreen video {
width: 100%;
height: 100%;
}
.mejs-clear {
clear: both;
}
/* Start: LAYERS */
.mejs-background {
position: absolute;
top: 0;
left: 0;
}
.mejs-mediaelement {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.mejs-poster {
position: absolute;
top: 0;
left: 0;
background-size: contain;
background-position: 50% 50% ;
background-repeat: no-repeat;
}
:root .mejs-poster img {
display: none;
}
.mejs-poster img {
padding: 0;
border: 0;
}
.mejs-overlay {
position: absolute;
top: 0;
left: 0;
}
.mejs-overlay-play {
cursor: pointer;
}
.mejs-overlay-button {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
background: url(bigplay.svg) no-repeat;
}
.no-svg .mejs-overlay-button {
background-image: url(bigplay.png);
}
.mejs-overlay:hover .mejs-overlay-button {
background-position: 0 -100px;
}
.mejs-overlay-loading {
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
margin: -40px 0 0 -40px;
background: #333;
background: url(background.png);
background: rgba(0, 0, 0, 0.9);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50, 50, 50, 0.9)), to(rgba(0, 0, 0, 0.9)));
background: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9));
background: -moz-linear-gradient(top, rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9));
background: -o-linear-gradient(top, rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9));
background: -ms-linear-gradient(top, rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9));
background: linear-gradient(rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9));
}
.mejs-overlay-loading span {
display: block;
width: 80px;
height: 80px;
background: transparent url(loading.gif) 50% 50% no-repeat;
}
/* End: LAYERS */
/* Start: CONTROL BAR */
.mejs-container .mejs-controls {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
bottom: 0;
left: 0;
background: url(background.png);
background: rgba(0, 0, 0, 0.7);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50, 50, 50, 0.7)), to(rgba(0, 0, 0, 0.7)));
background: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
background: -moz-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
background: -o-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
background: -ms-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
background: linear-gradient(rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
height: 30px;
width: 100%;
}
.mejs-container .mejs-controls div {
list-style-type: none;
background-image: none;
display: block;
float: left;
margin: 0;
padding: 0;
width: 26px;
height: 26px;
font-size: 11px;
line-height: 11px;
font-family: Helvetica, Arial;
border: 0;
}
.mejs-controls .mejs-button button {
cursor: pointer;
display: block;
font-size: 0;
line-height: 0;
text-decoration: none;
margin: 7px 5px;
padding: 0;
position: absolute;
height: 16px;
width: 16px;
border: 0;
background: transparent url(controls.svg) no-repeat;
}
.no-svg .mejs-controls .mejs-button button {
background-image: url(controls.png);
}
/* :focus for accessibility */
.mejs-controls .mejs-button button:focus {
outline: dotted 1px #999;
}
/* End: CONTROL BAR */
/* Start: Time (Current / Duration) */
.mejs-container .mejs-controls .mejs-time {
color: #fff;
display: block;
height: 17px;
width: auto;
padding: 10px 3px 0 3px ;
overflow: hidden;
text-align: center;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.mejs-container .mejs-controls .mejs-time a {
color: #fff;
font-size: 11px;
line-height: 12px;
display: block;
float: left;
margin: 1px 2px 0 0;
width: auto;
}
/* End: Time (Current / Duration) */
/* Start: Play/Pause/Stop */
.mejs-controls .mejs-play button {
background-position: 0 0;
}
.mejs-controls .mejs-pause button {
background-position: 0 -16px;
}
.mejs-controls .mejs-stop button {
background-position: -112px 0;
}
/* Start: Play/Pause/Stop */
/* Start: Progress Bar */
.mejs-controls div.mejs-time-rail {
direction: ltr;
width: 200px;
padding-top: 5px;
}
.mejs-controls .mejs-time-rail span,
.mejs-controls .mejs-time-rail a {
display: block;
position: absolute;
width: 180px;
height: 10px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
cursor: pointer;
}
.mejs-controls .mejs-time-rail .mejs-time-total {
margin: 5px;
background: #333;
background: rgba(50, 50, 50, 0.8);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30, 30, 30, 0.8)), to(rgba(60, 60, 60, 0.8)));
background: -webkit-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
background: -moz-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
background: -o-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
background: -ms-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
background: linear-gradient(rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
}
.mejs-controls .mejs-time-rail .mejs-time-buffering {
width: 100%;
background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-webkit-background-size: 15px 15px;
-moz-background-size: 15px 15px;
-o-background-size: 15px 15px;
background-size: 15px 15px;
-webkit-animation: buffering-stripes 2s linear infinite;
-moz-animation: buffering-stripes 2s linear infinite;
-ms-animation: buffering-stripes 2s linear infinite;
-o-animation: buffering-stripes 2s linear infinite;
animation: buffering-stripes 2s linear infinite;
}
@-webkit-keyframes buffering-stripes {
from {
background-position: 0 0;
}
to {
background-position: 30px 0;
}
}
@-moz-keyframes buffering-stripes {
from {
background-position: 0 0;
}
to {
background-position: 30px 0;
}
}
@-ms-keyframes buffering-stripes {
from {
background-position: 0 0;
}
to {
background-position: 30px 0;
}
}
@-o-keyframes buffering-stripes {
from {
background-position: 0 0;
}
to {
background-position: 30px 0;
}
}
@keyframes buffering-stripes {
from {
background-position: 0 0;
}
to {
background-position: 30px 0;
}
}
.mejs-controls .mejs-time-rail .mejs-time-loaded {
background: #3caac8;
background: rgba(60, 170, 200, 0.8);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(44, 124, 145, 0.8)), to(rgba(78, 183, 212, 0.8)));
background: -webkit-linear-gradient(top, rgba(44, 124, 145, 0.8), rgba(78, 183, 212, 0.8));
background: -moz-linear-gradient(top, rgba(44, 124, 145, 0.8), rgba(78, 183, 212, 0.8));
background: -o-linear-gradient(top, rgba(44, 124, 145, 0.8), rgba(78, 183, 212, 0.8));
background: -ms-linear-gradient(top, rgba(44, 124, 145, 0.8), rgba(78, 183, 212, 0.8));
background: linear-gradient(rgba(44, 124, 145, 0.8), rgba(78, 183, 212, 0.8));
width: 0;
}
.mejs-controls .mejs-time-rail .mejs-time-current {
background: #fff;
background: rgba(255, 255, 255, 0.8);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.9)), to(rgba(200, 200, 200, 0.8)));
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
background: -o-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
width: 0;
}
.mejs-controls .mejs-time-rail .mejs-time-handle {
display: none;
position: absolute;
margin: 0;
width: 10px;
background: #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
cursor: pointer;
border: solid 2px #333;
top: -2px;
text-align: center;
}
.mejs-controls .mejs-time-rail .mejs-time-float {
position: absolute;
display: none;
background: #eee;
width: 36px;
height: 17px;
border: solid 1px #333;
top: -26px;
margin-left: -18px;
text-align: center;
color: #111;
}
.mejs-controls .mejs-time-rail .mejs-time-float-current {
margin: 2px;
width: 30px;
display: block;
text-align: center;
left: 0;
}
.mejs-controls .mejs-time-rail .mejs-time-float-corner {
position: absolute;
display: block;
width: 0;
height: 0;
line-height: 0;
border: solid 5px #eee;
border-color: #eee transparent transparent transparent;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
top: 15px;
left: 13px;
}
.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float {
width: 48px;
}
.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float-current {
width: 44px;
}
.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float-corner {
left: 18px;
}
/*
.mejs-controls .mejs-time-rail:hover .mejs-time-handle {
visibility:visible;
}
*/
/* End: Progress Bar */
/* Start: Fullscreen */
.mejs-controls .mejs-fullscreen-button button {
background-position: -32px 0;
}
.mejs-controls .mejs-unfullscreen button {
background-position: -32px -16px;
}
/* End: Fullscreen */
/* Start: Mute/Volume */
.mejs-controls .mejs-mute button {
background-position: -16px -16px;
}
.mejs-controls .mejs-unmute button {
background-position: -16px 0;
}
.mejs-controls .mejs-volume-button {
position: relative;
}
.mejs-controls .mejs-volume-button .mejs-volume-slider {
display: none;
height: 115px;
width: 25px;
background: url(background.png);
background: rgba(50, 50, 50, 0.7);
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
top: -115px;
left: 0;
z-index: 1;
position: absolute;
margin: 0;
}
.mejs-controls .mejs-volume-button:hover {
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}
/*
.mejs-controls .mejs-volume-button:hover .mejs-volume-slider {
display: block;
}
*/
.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-total {
position: absolute;
left: 11px;
top: 8px;
width: 2px;
height: 100px;
background: #ddd;
background: rgba(255, 255, 255, 0.5);
margin: 0;
}
.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-current {
position: absolute;
left: 11px;
top: 8px;
width: 2px;
height: 100px;
background: #ddd;
background: rgba(255, 255, 255, 0.9);
margin: 0;
}
.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-handle {
position: absolute;
left: 4px;
top: -3px;
width: 16px;
height: 6px;
background: #ddd;
background: rgba(255, 255, 255, 0.9);
cursor: N-resize;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
margin: 0;
}
/* horizontal version */
.mejs-controls a.mejs-horizontal-volume-slider {
height: 26px;
width: 56px;
position: relative;
display: block;
float: left;
vertical-align: middle;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
position: absolute;
left: 0;
top: 11px;
width: 50px;
height: 8px;
margin: 0;
padding: 0;
font-size: 1px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #333;
background: rgba(50, 50, 50, 0.8);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30, 30, 30, 0.8)), to(rgba(60, 60, 60, 0.8)));
background: -webkit-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
background: -moz-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
background: -o-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
background: -ms-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
background: linear-gradient(rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
position: absolute;
left: 0;
top: 11px;
width: 50px;
height: 8px;
margin: 0;
padding: 0;
font-size: 1px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #fff;
background: rgba(255, 255, 255, 0.8);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.9)), to(rgba(200, 200, 200, 0.8)));
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
background: -o-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {
display: none;
}
/* End: Mute/Volume */
/* Start: Track (Captions and Chapters) */
.mejs-controls .mejs-captions-button {
position: relative;
}
.mejs-controls .mejs-captions-button button {
background-position: -48px 0;
}
.mejs-controls .mejs-captions-button .mejs-captions-selector {
visibility: hidden;
position: absolute;
bottom: 26px;
right: -51px;
width: 85px;
height: 100px;
background: url(background.png);
background: rgba(50, 50, 50, 0.7);
border: solid 1px transparent;
padding: 10px 10px 0 10px;
overflow: hidden;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
/*
.mejs-controls .mejs-captions-button:hover .mejs-captions-selector {
visibility: visible;
}
*/
.mejs-controls .mejs-captions-button .mejs-captions-selector ul {
margin: 0;
padding: 0;
display: block;
list-style-type: none !important;
overflow: hidden;
}
.mejs-controls .mejs-captions-button .mejs-captions-selector ul li {
margin: 0 0 6px 0;
padding: 0;
list-style-type: none !important;
display: block;
color: #fff;
overflow: hidden;
}
.mejs-controls .mejs-captions-button .mejs-captions-selector ul li input {
clear: both;
float: left;
margin: 3px 3px 0 5px;
}
.mejs-controls .mejs-captions-button .mejs-captions-selector ul li label {
width: 55px;
float: left;
padding: 4px 0 0 0;
line-height: 15px;
font-family: helvetica, arial;
font-size: 10px;
}
.mejs-controls .mejs-captions-button .mejs-captions-translations {
font-size: 10px;
margin: 0 0 5px 0;
}
.mejs-chapters {
position: absolute;
top: 0;
left: 0;
-xborder-right: solid 1px #fff;
width: 10000px;
z-index: 1;
}
.mejs-chapters .mejs-chapter {
position: absolute;
float: left;
background: #222;
background: rgba(0, 0, 0, 0.7);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50, 50, 50, 0.7)), to(rgba(0, 0, 0, 0.7)));
background: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
background: -moz-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
background: -o-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
background: -ms-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
background: linear-gradient(rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#323232, endColorstr=#000000);
overflow: hidden;
border: 0;
}
.mejs-chapters .mejs-chapter .mejs-chapter-block {
font-size: 11px;
color: #fff;
padding: 5px;
display: block;
border-right: solid 1px #333;
border-bottom: solid 1px #333;
cursor: pointer;
}
.mejs-chapters .mejs-chapter .mejs-chapter-block-last {
border-right: none;
}
.mejs-chapters .mejs-chapter .mejs-chapter-block:hover {
background: #666;
background: rgba(102, 102, 102, 0.7);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(102, 102, 102, 0.7)), to(rgba(50, 50, 50, 0.6)));
background: -webkit-linear-gradient(top, rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6));
background: -moz-linear-gradient(top, rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6));
background: -o-linear-gradient(top, rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6));
background: -ms-linear-gradient(top, rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6));
background: linear-gradient(rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6));
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#666666, endColorstr=#323232);
}
.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-title {
font-size: 12px;
font-weight: bold;
display: block;
white-space: nowrap;
text-overflow: ellipsis;
margin: 0 0 3px 0;
line-height: 12px;
}
.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-timespan {
font-size: 12px;
line-height: 12px;
margin: 3px 0 4px 0;
display: block;
white-space: nowrap;
text-overflow: ellipsis;
}
.mejs-captions-layer {
position: absolute;
bottom: 0;
left: 0;
text-align: center;
line-height: 20px;
font-size: 16px;
color: #fff;
}
.mejs-captions-layer a {
color: #fff;
text-decoration: underline;
}
.mejs-captions-layer[lang=ar] {
font-size: 20px;
font-weight: normal;
}
.mejs-captions-position {
position: absolute;
width: 100%;
bottom: 15px;
left: 0;
}
.mejs-captions-position-hover {
bottom: 35px;
}
.mejs-captions-text {
padding: 3px 5px;
background: url(background.png);
background: rgba(20, 20, 20, 0.5);
white-space: pre-wrap;
}
/* End: Track (Captions and Chapters) */
/* Start: Error */
.me-cannotplay a {
color: #fff;
font-weight: bold;
}
.me-cannotplay span {
padding: 15px;
display: block;
}
/* End: Error */
/* Start: Loop */
.mejs-controls .mejs-loop-off button {
background-position: -64px -16px;
}
.mejs-controls .mejs-loop-on button {
background-position: -64px 0;
}
/* End: Loop */
/* Start: backlight */
.mejs-controls .mejs-backlight-off button {
background-position: -80px -16px;
}
.mejs-controls .mejs-backlight-on button {
background-position: -80px 0;
}
/* End: backlight */
/* Start: Picture Controls */
.mejs-controls .mejs-picturecontrols-button {
background-position: -96px 0;
}
/* End: Picture Controls */
/* context menu */
.mejs-contextmenu {
position: absolute;
width: 150px;
padding: 10px;
border-radius: 4px;
top: 0;
left: 0;
background: #fff;
border: solid 1px #999;
z-index: 1001;
/* make sure it shows on fullscreen */
}
.mejs-contextmenu .mejs-contextmenu-separator {
height: 1px;
font-size: 0;
margin: 5px 6px;
background: #333;
}
.mejs-contextmenu .mejs-contextmenu-item {
font-family: Helvetica, Arial;
font-size: 12px;
padding: 4px 6px;
cursor: pointer;
color: #333;
}
.mejs-contextmenu .mejs-contextmenu-item:hover {
background: #2C7C91;
color: #fff;
}
/* Start: Source Chooser */
.mejs-controls .mejs-sourcechooser-button {
position: relative;
}
.mejs-controls .mejs-sourcechooser-button button {
background-position: -128px 0;
}
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector {
visibility: hidden;
position: absolute;
bottom: 26px;
right: -10px;
width: 130px;
height: 100px;
background: url(background.png);
background: rgba(50, 50, 50, 0.7);
border: solid 1px transparent;
padding: 10px;
overflow: hidden;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul {
margin: 0;
padding: 0;
display: block;
list-style-type: none !important;
overflow: hidden;
}
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li {
margin: 0 0 6px 0;
padding: 0;
list-style-type: none !important;
display: block;
color: #fff;
overflow: hidden;
}
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input {
clear: both;
float: left;
margin: 3px 3px 0 5px;
}
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li label {
width: 100px;
float: left;
padding: 4px 0 0 0;
line-height: 15px;
font-family: helvetica, arial;
font-size: 10px;
}
/* End: Source Chooser */
/* Start: Postroll */
.mejs-postroll-layer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: url(background.png);
background: rgba(50, 50, 50, 0.7);
z-index: 1000;
overflow: hidden;
}
.mejs-postroll-layer-content {
width: 100%;
height: 100%;
}
.mejs-postroll-close {
position: absolute;
right: 0;
top: 0;
background: url(background.png);
background: rgba(50, 50, 50, 0.7);
color: #fff;
padding: 4px;
z-index: 100;
cursor: pointer;
}
/* End: Postroll */
/* Start: Speed */
div.mejs-speed-button {
width: 46px !important;
position: relative;
}
.mejs-controls .mejs-button.mejs-speed-button button {
background: transparent;
width: 36px;
font-size: 11px;
line-height: normal;
color: #ffffff;
}
.mejs-controls .mejs-speed-button .mejs-speed-selector {
visibility: hidden;
position: absolute;
top: -100px;
left: -10px;
width: 60px;
height: 100px;
background: url(background.png);
background: rgba(50, 50, 50, 0.7);
border: solid 1px transparent;
padding: 0;
overflow: hidden;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.mejs-controls .mejs-speed-button:hover > .mejs-speed-selector {
visibility: visible;
}
.mejs-controls .mejs-speed-button .mejs-speed-selector ul li label.mejs-speed-selected {
color: #21f8f8;
}
.mejs-controls .mejs-speed-button .mejs-speed-selector ul {
margin: 0;
padding: 0;
display: block;
list-style-type: none !important;
overflow: hidden;
}
.mejs-controls .mejs-speed-button .mejs-speed-selector ul li {
margin: 0 0 6px 0;
padding: 0 10px;
list-style-type: none !important;
display: block;
color: #fff;
overflow: hidden;
}
.mejs-controls .mejs-speed-button .mejs-speed-selector ul li input {
clear: both;
float: left;
margin: 3px 3px 0 5px;
display: none;
}
.mejs-controls .mejs-speed-button .mejs-speed-selector ul li label {
width: 60px;
float: left;
padding: 4px 0 0 0;
line-height: 15px;
font-family: helvetica, arial;
font-size: 11.5px;
color: white;
margin-left: 5px;
cursor: pointer;
}
.mejs-controls .mejs-speed-button .mejs-speed-selector ul li:hover {
background-color: #c8c8c8 !important;
background-color: rgba(255, 255, 255, 0.4) !important;
}
/* End: Speed */
/* Start: Skip Back */
.mejs-controls .mejs-button.mejs-skip-back-button {
background: transparent url(skipback.png) no-repeat;
background-position: 3px 3px;
}
.mejs-controls .mejs-button.mejs-skip-back-button button {
background: transparent;
font-size: 9px;
line-height: normal;
color: #ffffff;
}
/* End: Skip Back */
/**
* United Internet Player Skin
* @function: Overwrites default styles, styles for additional plugins. Don't forget the .mejs-ui namespace in front of every selector
* @author: @MoritzGiessmann
*/
/* Hide all controls but the big play button on iPhones */
.mejs-iphone .mejs-controls {
display: none;
}
.mejs-ui .mejs-overlay-loading {
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin: -27px 0 0 -26px;
background: #333;
background: url(background.png);
background: rgba(0, 0, 0, 0.9);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
z-index: 100000;
}
.mejs-ui .mejs-overlay-play {
/*z-index: 2;*/
/* commented due a bug which hid the volume changer on mouseover. I'm not sure which side-effects that could have */
}
.mejs-ui .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector {
visibility: visible;
}
.mejs-ui .mejs-postroll-layer-content {
color: #fff;
}
.mejs-ui .mejs-overlay:hover .mejs-overlay-button {
background-position: 0;
}
.mejs-ui .mejs-overlay-loading {
z-index: 1;
}
.mejs-container.mejs-ui:focus {
outline: 0;
-webkit-box-shadow: 0 0 7px #262626;
box-shadow: 0 0 7px #262626;
}
.mejs-container.mejs-ui .mejs-overlay-loading span {
width: 50px;
height: 50px;
background: transparent url(loading-ui.gif) 50% 50% no-repeat;
}
.mejs-ui .mejs-overlay-button {
background-image: url(bigplay-ui.svg);
}
.mejs-ui.no-svg .mejs-overlay-button {
background-image: url(bigplay-ui.png);
}
.mejs-ui .mejs-controls .mejs-button button {
background-image: url(controls-ui.svg);
}
.mejs-ui.no-svg .mejs-controls .mejs-button button {
background-image: url(controls-ui.png);
}
.mejs-ui .mejs-controls .mejs-fullscreen-button {
display: none\9;
/* Hack: Disable fullscreen mode for IE8, due usability issues */
}
.mejs-ui .mejs-controls .mejs-fullscreen-button:nth-of-type(1n) {
display: block;
/* Hack: Disable IE8 Hack for IE9+ again */
}
.mejs-ui .mejs-controls .mejs-unfullscreen button {
background-position: -32px 0;
}
.mejs-ui .mejs-controls .mejs-time-rail .mejs-time-total {
background: #666666;
}
.mejs-ui .mejs-controls .mejs-time-rail .mejs-time-loaded {
background: #9A9A9A;
}
.mejs-ui .mejs-controls .mejs-time-rail .mejs-time-current {
background: #FFFFFF;
}
.mejs-ui .mejs-controls .mejs-time-rail .mejs-time-buffering {
width: 100%;
background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background: -o-linear-gradient(90deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background: -webkit-gradient(linear, 0 100%, 0 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background: linear-gradient(90deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-webkit-background-size: 3px 3px;
-moz-background-size: 3px 3px;
-o-background-size: 3px 3px;
background-size: 3px 3px;
-webkit-animation: buffering-stripes 2s linear infinite;
-moz-animation: buffering-stripes 2s linear infinite;
-ms-animation: buffering-stripes 2s linear infinite;
-o-animation: buffering-stripes 2s linear infinite;
animation: buffering-stripes 2s linear infinite;
}
.mejs-ui .mejs-controls .mejs-sourcechooser-button button {
background-position: -46px 0;
width: 23px;
margin-left: 0px;
margin-right: 3px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-moz-opacity: 0.5;
opacity: 0.5;
}
.mejs-ui .mejs-controls .mejs-sourcechooser-button button[data-current-video-quality="hd"] {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-moz-opacity: 1;
opacity: 1;
}
.mejs-ui video::-webkit-media-controls-overlay-play-button {
display: none;
}
/* Start: Clickout */
.mejs-ui .mejs-clickout-layer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
z-index: 1000;
overflow: hidden;
}
.mejs-ui .mejs-clickout-layer-content {
width: 100%;
height: 100%;
color: #fff;
}
.mejs-ui .mejs-postroll-layer-content img {
width: 100%;
max-width: 100%;
border: 0;
}
/* End: Clickout */
video {
width: 100%;
height: auto;
}.timeline {
clear: left;
display: block;
padding: 0px;
position: relative;
margin: 0px;
width: 100%;
list-style: none;
counter-reset: timeline 0;
}
.timeline:before {
content: "";
position: absolute;
top: 0px;
left: 39px;
width: 2px;
height: 100%;
background: #C2C2C2;
}
.timeline li {
display: inline-block;
margin: 25px 0px 25px 80px;
padding: 20px;
border-radius: 4px;
background: #F3F3F3;
counter-increment: timeline;
position: relative;
}
.timeline li:before {
content: counter(timeline, decimal);
position: absolute;
left: -40px;
top: 40%;
margin-top: -28px;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
border: 10px solid #FFFFFF;
border-radius: 50%;
min-width: 58px;
height: 58px;
line-height: 18px;
text-align: center;
box-sizing: border-box;
padding: 10px;
background: #F3F3F3;
color: #1C8AD9;
font-size: 24px;
}
.timeline li:after {
content: "";
position: absolute;
top: 40%;
left: -9.5px;
margin-top: -10px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 10px 10px 0px;
border-color: transparent #F3F3F3;
}
.timeline li[data-item-number]:before {
content: attr(data-item-number);
}
@media screen and (min-width: 980px) {
.timeline:before {
left: 50%;
margin-left: -1px;
}
.timeline li {
left: 50%;
margin-left: 40px;
clear: both;
}
.timeline li.left {
float: left;
left: 0%;
margin-right: 50%;
margin-left: 0px;
}
.timeline li.left:before {
left: auto;
right: -98px;
}
.timeline li.left:after {
left: auto;
right: -9.5px;
border-width: 10px 0px 10px 10px;
border-color: transparent transparent transparent #F3F3F3;
}
.timeline li.space-xxxl { margin-bottom: -200px; }
.timeline li.space-xxl { margin-bottom: -140px; }
.timeline li.space-xl { margin-bottom: -100px; }
.timeline li.space-l { margin-bottom: -80px; }
.timeline li.space-m { margin-bottom: -60px; }
.timeline li.space-s { margin-bottom: -40px; }
.timeline li.space-xs { margin-bottom: -20px; }
.timeline li.space-xxs { margin-bottom: -10px; }
}
@media screen and (max-width: 660px) {
.timeline:before {
left: 14px;
}
.timeline li {
margin: 10px 0px 10px 40px;
}
.timeline li:before {
left: -25px;
min-width: 0px;
padding: 5px 8px;
height: auto;
border: 4px solid;
margin-top: -24px;
}
.timeline li:after {
border-width: 16px 16px 16px 0px;
margin-top: -16px;
}
}
/* on service background */
.service .timeline:before {
background: #FFFFFF;
}
.service .timeline li {
background: #FFFFFF;
color: #333333;
}
.service .timeline li:before {
background: #FFFFFF;
border: 10px solid #1C8AD9;
}
.service .timeline li h1,
.service .timeline li h2,
.service .timeline li h3,
.service .timeline li h4,
.service .timeline li p {
color: #333333;
}
.service .timeline li:after {
border-color: transparent #FFFFFF transparent transparent;
}
@media screen and (min-width: 980px) {
.service .timeline li.left:after {
border-color: transparent transparent transparent #FFFFFF;
}
}
.navigation,
.navigation.fullwidth:before {
background: transparent;
}
.navigation.inline {
text-transform: uppercase;
font-family: '', Arial, sans-serif;
font-weight: 700;
}
.navigation.inline > ul > li:first-child:after {
display: none;
}
@media screen and (min-width: 980px) {
.navigation.inline[class][class] {
width: 940px;
margin: -70px auto 0px;
text-align: right;
}
.navigation.inline ul {
display: inline-block;
}
.navigation.inline > ul > li.active:first-child a,
.navigation.inline > ul > li:first-child > a:hover,
.navigation.inline > ul > li:first-child > a:focus {
color: #1C8AD9;
}
.navigation.inline > ul > li + li.active > a:after,
.navigation.inline > ul > li + li > a:hover:after,
.navigation.inline > ul > li + li > a:focus:after,
.navigation.inline li ul li:first-child a:focus:before {
content: none;
}
}
@media screen and (max-width: 979.9px) {
.navigation.inline > ul > li:first-child > a:after {
content: none;
}
}
@media screen and (min-width: 660px) and (max-width: 979.9px) {
.header h1 > a,
.header h1 > span {
margin-top: 14px;
}
}
.block {
display: block;
}
.block img {
max-width: 100%;
height: auto;
}
.uppercase {
text-transform: uppercase;
}
.backdrop-minimal.container {
background: #F9F9F9;
}
.backdrop-regular.container {
background: #B3B3B3;
}
.backdrop-regular.service .timeline li:before {
border: 10px solid #B3B3B3;
}
.nose-white-top {
position: relative;
}
.nose-white-top:before {
content: "";
position: absolute;
top: 0px;
left: 50%;
margin-left: -20px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 20px 20px 0px 20px;
border-color: #ffffff transparent transparent transparent;
}
h1, h2, h3, h4 {
color: #4D4D4D;
}
/* spacer */
.sky-top {
height: 250px;
background: url(../static/sky_top.svg) repeat-x 0px 0px;
z-index: 0;
pointer-events: none;
}
.sky-bottom {
height: 150px;
background: url(../static/sky_bottom.svg) repeat-x 0px 0px;
z-index: 0;
pointer-events: none;
}
/* buttons */
.service.container .ghost.button {
color: #FFFFFF;
border-color: #FFFFFF;
}
.service.container .ghost.button:hover,
.service.container .ghost.button:active {
background-color: #FFFFFF;
color: #128BDC;
}
/* list */
.service .list li:before {
background-color: #FFFFFF;
}
.service .list {
color: #FFFFFF;
}
.check.list p.size-2 {
font-family: 'SourceSansProRegular', Arial, sans-serif;
}
.in-line.list li {
display: inline-block;
margin-right: 60px;
}
/* form */
form.fullwidth fieldset,
form.fullwidth > .field {
max-width: none;
}
fieldset .third-size.field {
min-width: 33.33%;
/* ie */
width: 20%;
}
/* firefox */
fieldset .third-size.field, x:-moz-any-link {
width: 580px;
}
/* chrome */
@supports (-webkit-appearance:none) {
fieldset .third-size.field {
width: 25%;
}
}
@media screen and (max-width: 659px) {
form fieldset .third-size.field {
display: block;
width: 100%;
padding-left: 0px;
}
form fieldset .action.third-size button {
margin-top: 20px;
}
}
/* akkordeon */
.akkordeon {
border: none;
border-radius: 3px;
}
.akkordeon.module {
padding-left: 10px;
padding-right: 10px;
}
.akkordeon:hover,
.akkordeon.open,
.akkordeon[open] {
background-color: #F3F3F3;
}
.akkordeon.open.no-backdrop,
.akkordeon[open].no-backdrop {
background-color: transparent;
}
.akkordeon + .akkordeon {
border: none;
margin-top: 20px;
}
.akkordeon .float-left {
float: left;
margin-right: 20px;
}
.akkordeon .float-right {
float: right;
margin-left: 20px;
}
.akkordeon > *:first-child {
overflow: hidden;
margin-bottom: 0px;
}
.akkordeon > *:first-child + * {
clear: both;
}
.js .akkordeon > *:first-child > div:first-child:before {
margin-top: 20px;
}
/* twitter frame */
.twitter.frame {
background: #FFFFFF;
border-radius: 4px;
position: relative;
min-height: 100px;
}
.twitter.frame:before {
content: "";
position: absolute;
top: 25px;
left: -10px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 10px 10px 0px;
border-color: transparent #ffffff transparent transparent;
}
.twitter.frame:after {
content: "Lade Twitter-Timeline...";
position: absolute;
top: 20px;
left: 20px;
z-index: 0;
}
.twitter.frame iframe {
position: relative !important;
z-index: 1;
}
/* symbol.svg */
.symbol {
display: inline-block;
width: 120px;
height: 100px;
background: url(../static/symbols.svg) no-repeat;
}
.symbol.round {
padding: 60px 50px;
border-radius: 110px;
background-color: #128BDC;
}
.service .symbol.round {
background-color: #FFFFFF;
}
.no-svg .symbol {
background-image: url(../static/symbols-s.png);
}
.symbol.city { background-position: 0px 0px; }
.symbol.company { background-position: -315px 0px; }
.symbol.person { background-position: -625px 0px; }
.round.symbol.city { background-position: 55px 55px; }
.round.symbol.company { background-position: -265px 55px; }
.round.symbol.person { background-position: -585px 55px; }
.white.symbol.city { background-position: 0px -200px; }
.white.symbol.company { background-position: -265px -200px; }
.white.symbol.person { background-position: -585px -205px; }
.round.white.symbol.city { background-position: 55px -145px; }
.round.white.symbol.company { background-position: -265px -145px; }
.round.white.symbol.person { background-position: -585px -145px; }
.small.symbol {
background-size: 367px 150px;
width: 60px;
height: 50px;
}
.symbol.small.city { background-position: 0px 0px; }
.symbol.small.company { background-position: -160px 0px; }
.symbol.small.person { background-position: -320px 0px; }
/* arrow */
.arrows {
position: relative;
}
.arrows:before,
.arrows:after {
content: "";
display: block;
position: absolute;
left: 50%;
top: 50%;
margin-top: -40px;
width: 2px;
height: 220px;
background: #FFFFFF;
}
.arrows:before {
-webkit-transform: translateX(-192px) rotate(38deg);
-ms-transform: translateX(-192px) rotate(38deg);
transform: translateX(-192px) rotate(38deg);
}
.arrows:after {
-webkit-transform: translateX(192px) rotate(-38deg);
-ms-transform: translateX(192px) rotate(-38deg);
transform: translateX(192px) rotate(-38deg);
}
@media (min-width: 660px) and (max-width: 979.9px) {
.arrows:before,
.arrows:after {
height: 150px;
margin-top: 10px;
}
.arrows:before {
-webkit-transform: translateX(192px) rotate(-38deg);
-ms-transform: translateX(-162px) rotate(32deg);
transform: translateX(-162px) rotate(32deg);
}
.arrows:after {
-webkit-transform: translateX(192px) rotate(-38deg);
-ms-transform: translateX(162px) rotate(-32deg);
transform: translateX(162px) rotate(-32deg);
}
}
@media (max-width: 659.9px) {
.arrows:before,
.arrows:after {
content: none;
}
}
/* default in service */
.service .default {
background-color: #FFFFFF;
color: #333333;
border-radius: 4px;
}
.service .default h1,
.service .default h2,
.service .default h3,
.service .default h4,
.service .default p,
.service .default li {
color: #333333;
}
.service .default .list li:before {
background-color: #128BDC;
}
.default.float-left {
float: left;
padding-bottom: 10px;
}
.default.float-right {
float: right;
padding-bottom: 10px;
}
@media screen and (max-width: 659px) {
.default.float-left,
.default.float-right {
float: none;
margin-bottom: 20px;
margin-left: -10px;
}
}
#footer {
margin-bottom: 200px;
}
/* loading animation */
@-webkit-keyframes spinner {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes spinner {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loading {
width: 100%;
min-height: 200px;
position: relative;
}
.loading:before {
content: "";
display: block;
width: 6px;
height: 6px;
border-radius: 3px;
background-color: #FFFFFF;
-webkit-box-shadow: 0px -12px 0px #333333, 10px -6px 0px #36414C, 10px 6px 0px #394F66, 0px 12px 0px #3E668F, -10px 6px 0px #4277AC, -10px -6px #4689CD;
box-shadow: 0px -12px 0px #333333, 10px -6px 0px #36414C, 10px 6px 0px #394F66, 0px 12px 0px #3E668F, -10px 6px 0px #4277AC, -10px -6px #4689CD;
position: absolute;
top: 50%;
left: 50%;
margin: -3px 0px 0px -3px;
-webkit-animation: spinner 2s linear infinite;
animation: spinner 2s linear infinite;
}
/* Header Auswahlseite */
.header.square-logo > strong:first-child > a:first-child {
width: 62px;
background-position: 0px 50%;
}
.header.square-logo + .sky-top {
margin-top: -60px;
z-index: -1;
background-position: 50% 0%;
}
@media screen and (max-width: 979.9px) {
.header.square-logo > strong:first-child > a:first-child {
width: 46px;
}
.header.square-logo + .sky-top {
margin-top: -50px;
background-position: -150px 0%;
}
}
@media screen and (max-width: 659.9px) {
.header.square-logo > strong:first-child > a:first-child {
width: 38px;
}
.header.square-logo + .sky-top {
margin-top: -10px;
background-size: 40px 160px;
height: 100px;
}
}
mark {
background: #DADADA;
color: #333333;
border-radius: 4px;
}
h3 mark {
padding: 1px 0px 0px 0px;
}
.teaser .module img.provider {
display: block;
margin-bottom: 10px;
}
@media screen and (max-width: 979.9px) {
.teaser .module img.provider {
margin-left: 40px;
margin-right: 40px;
width: 220px;
}
}
.divider-header {
border-bottom: 1px solid #999999;
margin: 20px;
}
/* added span.paging-text for Zurück and Weiter by paging in order to fix position of back and next icons in FireFox */
span.paging-text {
float: left;
line-height: 25px;
}
p.quote {
font-weight: 800;
font-style: italic;
}
/* FireFox: this hides the summary arrow, rules above are not enough */
details > summary:first-of-type {
list-style-type: none;
}