Template:WLXpage/styles.css

/* @charset "UTF-8"; */ .wlx-outer { width: 100%; min-height: calc(100vh - 8em); background-color: #FFF; position: relative; } .wlx { max-width: 76em; min-height: 19em; margin: 0 auto 5em; position: relative; width: 100%; } .wlx, .wlx * { box-sizing: border-box; } .wlx h1, .wlx h2, .wlx h3, .wlx h4, .wlx h5, .wlx h6 { color: #900000; } .wlx h1, .wlx h2, .wlx h3 { font-family: "Linux Libertine", Georgia, serif; font-weight: 400; line-height: 1.1; } .wlx h2 { font-size: 2.2rem; margin-bottom: 1.6rem; } .wlx h3 { font-size: 1.6rem; } .wlx sup, .wlx sub { font-size: .55em; font-weight: bolder; } .wlx .mw-ui-button { margin-bottom: 1em; margin-right: 1em; } .wlx .external { background-image: none; } [dir=ltr] .wlx .external::after { content: '»'; } /* @noflip */ [dir=rtl] .wlx .external::after { content: '«'; } .wlx .plainlinks .external::after { content: none; } .wlx-with-marginal { display: flex; margin-left: 1rem; } .wlx-marginal a { flex: 0 0 auto; min-width: 11rem; white-space: nowrap; } /* Navi */ .wlx-navi a, .wlx-marginal .wlx-button { margin-left: auto; text-align: right; position: relative; display: block; } .wlx-navi-item { color: #900000; text-transform: uppercase; display: block; font-weight: bolder; } .wlx-navi-item:hover { color: #000; } [dir=ltr] .wlx-navi-item::after { content: '»'; } /* @noflip */ [dir=rtl] .wlx-navi-item::after { content: '«'; } .wlx-navi a:not(:last-child) { margin-bottom: .2rem; padding: .2rem; } .wlx-navi a:not(:last-child)::before { content: ; display: block; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background-color: #FFF; } /* Hero */ .wlx-hero { background-color: #e0e0d8; border-radius: 0.3rem; overflow: hidden; } .wlx-hero-image { overflow: hidden; position: relative; display: flex; flex-direction: column-reverse; } @media screen and (min-width: 740px) { .wlx-hero-image { align-items: flex-end; flex-direction: row; background-color: #333; } .wlx-hero-image.wlx-hero-image { height: 56vw; max-height: 36rem; } .wlx-hero-image>span>.mw-file-description { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .wlx-hero-image>span>.mw-file-description>img { height: 100% !important; max-height: 100% !important; } .wlx-hero-image .wlx-hero-label { position: relative; background-color: rgba(255, 255, 255, 0.88); padding: 1.8em; margin: 8rem auto 2rem 0; max-width: 57rem; display: flex; align-items: center; border-radius: 0 0.3rem 0.3rem 0; margin: 8rem auto 2rem 0; background-color: rgba(255, 255, 255, 0.88); padding-top: 1.8em; } } .wlx-hero-image>span>.mw-file-description>img { height: auto; max-height: 24rem; width: 100% !important; display: block; object-fit: cover; } .wlx-hero-label { position: relative; max-width: 57rem; background-color: #FFF; padding: 1.2rem 1.8rem; padding-top: 0; } .wlx-hero-label-logo>a { display: block; width: calc(4rem + 5vw); max-width: 10rem; margin-right: 1.8rem; } .wlx-hero-label-logo>a>img { max-width: 100%; height: auto; } .wlx-hero-pretitle { font-size: 1.125rem; line-height: 1.3em; text-transform: uppercase; } .wlx-hero-title { font-size: calc(1rem + .03 * (100vw - 176px)); font-family: "Linux Libertine", Georgia, serif; color: #900000; line-height: 1.04em; } body.skin-minerva .wlx-hero-title { font-size: calc(1rem + 3vw); } /* process */ .wlx-process { display: flex; flex-direction: row; flex-wrap: wrap; } .wlx-process>p { display: none; } .wlx-process-item { text-align: center; line-height: 1.3; flex-basis: 11rem; flex-grow: 1; margin: 1.6rem 0; } .wlx-process-item>.wlx-process-item-content { width: 100%; display: block; position: relative; } .wlx-process-item>.wlx-process-item-content img { width: 100%; max-width: 6rem !important; height: auto; } .wlx-process-item h5 { display: block; font-weight: bold; color: #900000; } .wlx-process-item h5>* { display: block; } .wlx-process-item:hover>.wlx-process-item-content img { filter: grayscale(100%); } .wlx-process-item:not(:last-child) { margin-right: 1.6rem; } .wlx-process-item:not(:first-child)>.wlx-process-item-content::after { content: ; display: block; width: 1rem; height: 1rem; border: 3.6px solid #900000; border-left: transparent; border-bottom: transparent; position: absolute; right: calc(100% + .8rem); top: 50%; transform: translate(50%, -50%) rotate(45deg); } @media screen and (min-width: 440px) and (max-width: 1023px) { .wlx-process-item { flex-basis: 40%; } } @media screen and (min-width: 1640px) { body.skin-vector-legacy .wlx { transform: translateX(-4rem); } body.skin-vector-legacy .wlx-process, body.skin-monobook .wlx-process { position: absolute; display: block; left: calc(100% + 1.5rem); flex-direction: column; width: 10.5rem; top: 0; } body.skin-vector-legacy .wlx-process-item, body.skin-monobook .wlx-process-item { text-align: left; } body.skin-vector-legacy .wlx-process-item:first-child, body.skin-monobook .wlx-process-item:first-child { margin-top: 0; } body.skin-vector-legacy .wlx-process-item:not(:first-child)>.wlx-process-item-content::after, body.skin-monobook .wlx-process-item:not(:first-child)>.wlx-process-item-content::after { top: -1.5rem; right: auto; left: 2rem; transform: translate(50%, -50%) rotate(135deg); } } @media screen and (min-width: 1800px) { body.skin-vector-legacy .wlx, body.skin-monobook .wlx { transform: translateX(-9rem); } body.skin-vector-legacy .wlx-process, body.skin-monobook .wlx-process { width: 24.5rem; } body.skin-vector-legacy .wlx-process-item, body.skin-monobook .wlx-process-item { display: flex; flex-direction: row; } body.skin-vector-legacy .wlx-process-item>.wlx-process-item-content.image, body.skin-monobook .wlx-process-item>.wlx-process-item-content.image { flex: 0 0 7rem; } } /* Boxes */ [class*=wlx-box-bg-] { padding: 1.2rem 1.8rem; border-radius: 0.3rem; overflow: hidden; } [class*=wlx-box-bg-]:not(.wlx-box-bg-beige) { color: #FFF; } [class*=wlx-box-bg-]:not(.wlx-box-bg-beige) ul { list-style-image: none; margin-left: 1em; } [class*=wlx-box-bg-]:not(.wlx-box-bg-beige) h2, [class*=wlx-box-bg-]:not(.wlx-box-bg-beige) h3, [class*=wlx-box-bg-]:not(.wlx-box-bg-beige) h4, [class*=wlx-box-bg-]:not(.wlx-box-bg-beige) h5, [class*=wlx-box-bg-]:not(.wlx-box-bg-beige) h6 { color: currentColor; } [class*=wlx-box-bg-]:not(.wlx-box-bg-beige) a { color: currentColor; text-decoration: underline; } .wlx-box.wlx-box-bg-image { position: relative; } .wlx-box.wlx-box-bg-image>.image { display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .wlx-box.wlx-box-bg-image>.image>img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; } .wlx-box.wlx-box-bg-image>.wlx-box-inner { position: relative; text-shadow: 2px 2px 0.8em rgba(0, 0, 0, 0.5); text-shadow: 2px 2px 1em black; min-height: 6rem; } .wlx-box.wlx-box-link { position: relative; transition: box-shadow .2s; } .wlx-box.wlx-box-link:hover { box-shadow: 0.2em 0.2em 1rem rgba(0, 0, 0, 0.5); } [dir=ltr] .wlx-box.wlx-box-link h2::after, [dir=ltr] .wlx-box.wlx-box-link h3::after { content: '»'; } /* @noflip */ [dir=rtl] .wlx-box.wlx-box-link h2::after, [dir=rtl] .wlx-box.wlx-box-link h3::after { content: '«'; } .wlx-box .wlx-blanklink>a { position: absolute; display: block; top: 0; left: 0; right: 0; bottom: 0; background: transparent; opacity: 0; text-decoration: none; color: transparent; } .wlx-box> :first-child, .wlx-box>.wlx-box-inner> :first-child { margin-top: 0; } .wlx-box>h1:first-child, .wlx-box>h2:first-child, .wlx-box>h3:first-child, .wlx-box>.wlx-box-inner>h1:first-child, .wlx-box>.wlx-box-inner>h2:first-child, .wlx-box>.wlx-box-inner>h3:first-child { padding-top: 0; } .wlx-box-bg-1 { background-color: #900000; } .wlx-box-bg-2 { background-color: #D47100; } .wlx-box-bg-3 { background-color: #005290; } .wlx-box-bg-4 { background-color: #033500; } /* BreakPoints Desktop */ @media screen and (min-width: 1244px) { .wlx-hero-title { font-size: 3rem; } } /* BreakPoints Mobile */ @media screen and (max-width: 719px) { body.skin-minerva .wlx { width: 100vw; margin: 0 -1rem; } body.skin-minerva .wlx-box { padding: 1.2rem 1.8rem; } body.skin-minerva .wlx-process { padding: 0 0.8rem; } } @media screen and (min-width: 1068px) { body.skin-minerva .wlx-hero-title { font-size: 3rem; } } /* Grid */ .wlx-grid { display: flex; margin-right: -2rem; margin-bottom: -2rem; flex-wrap: wrap; } .wlx-grid>* { flex: 0 0; flex-basis: calc(100% - 2rem); margin-right: 2rem; margin-bottom: 2rem; } .wlx-box-marginal>.wlx-grid { min-height: calc(100% + 2rem); } .wlx-grid-w1 { flex-basis: calc(1 / 12 * (100% - 24rem) + 0rem); } .wlx-grid-w2 { flex-basis: calc(2 / 12 * (100% - 24rem) + 2rem); } .wlx-grid-w3 { flex-basis: calc(3 / 12 * (100% - 24rem) + 4rem); } .wlx-grid-w4 { flex-basis: calc(4 / 12 * (100% - 24rem) + 6rem); } .wlx-grid-w5 { flex-basis: calc(5 / 12 * (100% - 24rem) + 8rem); } .wlx-grid-w6 { flex-basis: calc(6 / 12 * (100% - 24rem) + 10rem); } .wlx-grid-w7 { flex-basis: calc(7 / 12 * (100% - 24rem) + 12rem); } .wlx-grid-w8 { flex-basis: calc(8 / 12 * (100% - 24rem) + 14rem); } .wlx-grid-w9 { flex-basis: calc(9 / 12 * (100% - 24rem) + 16rem); } .wlx-grid-w10 { flex-basis: calc(10 / 12 * (100% - 24rem) + 18rem); } .wlx-grid-w11 { flex-basis: calc(11 / 12 * (100% - 24rem) + 20rem); } .wlx-grid-w12 { flex-basis: calc(12 / 12 * (100% - 24rem) + 22rem); } @media screen and (min-width: 450px) { .wlx-grid-s-w1 { flex-basis: calc(1 / 12 * (100% - 24rem) + 0rem); } .wlx-grid-s-w2 { flex-basis: calc(2 / 12 * (100% - 24rem) + 2rem); } .wlx-grid-s-w3 { flex-basis: calc(3 / 12 * (100% - 24rem) + 4rem); } .wlx-grid-s-w4 { flex-basis: calc(4 / 12 * (100% - 24rem) + 6rem); } .wlx-grid-s-w5 { flex-basis: calc(5 / 12 * (100% - 24rem) + 8rem); } .wlx-grid-s-w6 { flex-basis: calc(6 / 12 * (100% - 24rem) + 10rem); } .wlx-grid-s-w7 { flex-basis: calc(7 / 12 * (100% - 24rem) + 12rem); } .wlx-grid-s-w8 { flex-basis: calc(8 / 12 * (100% - 24rem) + 14rem); } .wlx-grid-s-w9 { flex-basis: calc(9 / 12 * (100% - 24rem) + 16rem); } .wlx-grid-s-w10 { flex-basis: calc(10 / 12 * (100% - 24rem) + 18rem); } .wlx-grid-s-w11 { flex-basis: calc(11 / 12 * (100% - 24rem) + 20rem); } .wlx-grid-s-w12 { flex-basis: calc(12 / 12 * (100% - 24rem) + 22rem); } .wlx-hidden-up-s { display: none !important; } } @media screen and (max-width: 449px) { .wlx-hidden-down-s { display: none !important; } } @media screen and (min-width: 640px) { .wlx-grid-m-w1 { flex-basis: calc(1 / 12 * (100% - 24rem) + 0rem); } .wlx-grid-m-w2 { flex-basis: calc(2 / 12 * (100% - 24rem) + 2rem); } .wlx-grid-m-w3 { flex-basis: calc(3 / 12 * (100% - 24rem) + 4rem); } .wlx-grid-m-w4 { flex-basis: calc(4 / 12 * (100% - 24rem) + 6rem); } .wlx-grid-m-w5 { flex-basis: calc(5 / 12 * (100% - 24rem) + 8rem); } .wlx-grid-m-w6 { flex-basis: calc(6 / 12 * (100% - 24rem) + 10rem); } .wlx-grid-m-w7 { flex-basis: calc(7 / 12 * (100% - 24rem) + 12rem); } .wlx-grid-m-w8 { flex-basis: calc(8 / 12 * (100% - 24rem) + 14rem); } .wlx-grid-m-w9 { flex-basis: calc(9 / 12 * (100% - 24rem) + 16rem); } .wlx-grid-m-w10 { flex-basis: calc(10 / 12 * (100% - 24rem) + 18rem); } .wlx-grid-m-w11 { flex-basis: calc(11 / 12 * (100% - 24rem) + 20rem); } .wlx-grid-m-w12 { flex-basis: calc(12 / 12 * (100% - 24rem) + 22rem); } .wlx-hidden-up-m { display: none !important; } } @media screen and (max-width: 639px) { .wlx-hidden-down-m { display: none !important; } } @media screen and (min-width: 940px) { .wlx-grid-l-w1 { flex-basis: calc(1 / 12 * (100% - 24rem) + 0rem); } .wlx-grid-l-w2 { flex-basis: calc(2 / 12 * (100% - 24rem) + 2rem); } .wlx-grid-l-w3 { flex-basis: calc(3 / 12 * (100% - 24rem) + 4rem); } .wlx-grid-l-w4 { flex-basis: calc(4 / 12 * (100% - 24rem) + 6rem); } .wlx-grid-l-w5 { flex-basis: calc(5 / 12 * (100% - 24rem) + 8rem); } .wlx-grid-l-w6 { flex-basis: calc(6 / 12 * (100% - 24rem) + 10rem); } .wlx-grid-l-w7 { flex-basis: calc(7 / 12 * (100% - 24rem) + 12rem); } .wlx-grid-l-w8 { flex-basis: calc(8 / 12 * (100% - 24rem) + 14rem); } .wlx-grid-l-w9 { flex-basis: calc(9 / 12 * (100% - 24rem) + 16rem); } .wlx-grid-l-w10 { flex-basis: calc(10 / 12 * (100% - 24rem) + 18rem); } .wlx-grid-l-w11 { flex-basis: calc(11 / 12 * (100% - 24rem) + 20rem); } .wlx-grid-l-w12 { flex-basis: calc(12 / 12 * (100% - 24rem) + 22rem); } .wlx-hidden-up-l { display: none !important; } } @media screen and (max-width: 939px) { .wlx-hidden-down-l { display: none !important; } } @media screen and (min-width: 1200px) { .wlx-grid-xl-w1 { flex-basis: calc(1 / 12 * (100% - 24rem) + 0rem); } .wlx-grid-xl-w2 { flex-basis: calc(2 / 12 * (100% - 24rem) + 2rem); } .wlx-grid-xl-w3 { flex-basis: calc(3 / 12 * (100% - 24rem) + 4rem); } .wlx-grid-xl-w4 { flex-basis: calc(4 / 12 * (100% - 24rem) + 6rem); } .wlx-grid-xl-w5 { flex-basis: calc(5 / 12 * (100% - 24rem) + 8rem); } .wlx-grid-xl-w6 { flex-basis: calc(6 / 12 * (100% - 24rem) + 10rem); } .wlx-grid-xl-w7 { flex-basis: calc(7 / 12 * (100% - 24rem) + 12rem); } .wlx-grid-xl-w8 { flex-basis: calc(8 / 12 * (100% - 24rem) + 14rem); } .wlx-grid-xl-w9 { flex-basis: calc(9 / 12 * (100% - 24rem) + 16rem); } .wlx-grid-xl-w10 { flex-basis: calc(10 / 12 * (100% - 24rem) + 18rem); } .wlx-grid-xl-w11 { flex-basis: calc(11 / 12 * (100% - 24rem) + 20rem); } .wlx-grid-xl-w12 { flex-basis: calc(12 / 12 * (100% - 24rem) + 22rem); } .wlx-hidden-up-xl { display: none !important; } } @media screen and (max-width: 1199px) { .wlx-hidden-down-xl { display: none !important; } } .wlx-hidden { display: none !important; }