@charset "UTF-8"; :root { --logo-color: #222; --font-color: #404756; --font-color-muted: #999; --font-nav-color: #777; --color-primary: #3f8ee9; --border-color: rgba(0, 0, 0, .09); --bg-color: #fff; --bg-color-alpha: rgba(255, 255, 255, .9); } /* .site-header { z-index: z('site-header'); } */ i, em, .italic { font-style: italic; } b, strong, .bold { font-weight: 600; } ::selection { color: rgba(0, 0, 0, 0.7); background: #ffe697; } p { font-size: 1.125rem; margin: 0 0 1rem; } h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0; } h1.serif, h2.serif, h3.serif, h4.serif, h5.serif, h6.serif { font-weight: 400; } h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p { margin-top: 1rem; } h1, .h1 { font-size: 2.5rem; font-size: clamp(2.0rem, 5vw, 4.0rem); line-height: 1.125; } .hx { font-size: clamp(2.75rem, 5vw, 5rem); } h2, .h2 { font-size: 2rem; font-size: clamp(1.875rem, 5vw, 2.875rem); line-height: 1.125; } h3, .h3 { font-size: 1.5rem; font-size: clamp(1.5rem, 5vw, 2rem); line-height: 1.35; } h4, .h4 { font-size: 1.125rem; font-size: clamp(1.125rem, 5vw, 1.3125rem); line-height: 1.35; } h5, .h5 { font-size: 1.125rem; } h6, .h6 { font-size: 0.875rem; } .overline, .tagline { font-size: 0.875rem !important; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: rgba(64, 71, 86, 0.5) !important; } .title { font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-style: normal; font-weight: 400; line-height: 1.125; margin: 0; } .title + .button { margin: 1rem 0 0; } .title a { color: currentColor; } .title a:hover { color: #39a9e0; } .title mark::after { left: -8px; bottom: 0.325em; height: 0.325em; width: calc(100% + 16px); transform: rotate(-0.65deg); } .title em { color: #39a9e0; } @media screen and (min-width: 992px) { .title span { display: block; } } .title_sans { font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-weight: bold; line-height: 1.125; margin: 0; } .title_sans + .button { margin: 1rem 0 0; } .title_sans a { color: currentColor; } .title_sans a:hover { color: #39a9e0; } .title_sans mark::after { left: -8px; bottom: 0.325em; height: 0.325em; width: calc(100% + 16px); transform: rotate(-0.65deg); } .title_sans em { color: #39a9e0; } @media screen and (min-width: 992px) { .title_sans span { display: block; } } .subtitle { font-size: clamp(1rem, 5vw, 1.25rem); font-weight: 400; color: rgba(64, 71, 86, 0.5); margin: 0 0 1rem; } .subtitle a { display: inline-block; color: currentColor; border-bottom: 1px solid rgba(0, 0, 0, 0.09); } .subtitle mark { color: #404756; } .subtitle + p { margin-top: 4vmin; } .heading { display: block; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size: 1.25rem; font-weight: 500; font-style: normal; margin: 0; } .sans { font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-weight: 400; } .serif { font-family: -apple-system-ui-serif, "Vollkorn", "Georgia", serif; font-weight: 400; } .currency { display: inline-block; font-size: 35%; vertical-align: middle; margin-left: 3px; } mark, .mark { position: relative; font-weight: inherit; color: currentColor; white-space: nowrap; background: none; z-index: 10; } mark::after, .mark::after { content: ""; display: inline-block; left: 0; bottom: 0; position: absolute; height: 0.6em; width: 100%; background-color: #ffe385; z-index: -1; } small, .small { font-size: 0.85rem; } blockquote { position: relative; padding: 0 0 0 1.5rem; } blockquote::before { content: ""; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: auto; background: #ddd; border-radius: 8px; width: 8px; } blockquote *:last-child { margin-bottom: 0; } blockquote p { font-size: 1rem; font-style: italic; margin-bottom: 0; } blockquote footer { line-height: 1.5; color: rgba(64, 71, 86, 0.5); } blockquote footer::before { content: ""; display: inline-block; font-family: "Font Awesome 5 Pro"; font-size: 12px; font-weight: 900; margin: 2px 6px 0 0; opacity: 0.8; } blockquote + * { margin-top: 1.5rem; } .terms-ol { list-style: none; counter-reset: my-awesome-counter; margin: 20px 0 0 0; padding: 0; width: 100%; column-count: 2; column-gap: 10px; } .terms-ol li { counter-increment: my-awesome-counter; display: flex; width: 100%; font-size: 1.1rem; margin-bottom: 1rem; padding-right: 20px; } .terms-ol li::before { content: "" counter(my-awesome-counter); font-size: 3rem; font-family: -apple-system-ui-serif, "Vollkorn", "Georgia", serif; margin-right: 1rem; line-height: 1; color: #39a9e0; min-width: 50px; } .specialterms { margin-bottom: 30px; } @media screen and (max-width: 992px) { .terms-ol { column-count: 1; column-gap: 0px; } .terms-ol li { padding-right: 0px; } .terms-ol li::before { font-size: 2rem; min-width: 30px; } } *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } html { font-size: 100%; box-sizing: border-box; background-color: #fff; } body { font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; color: #404756; line-height: 1.5; margin: 0; padding: 0; overflow-x: hidden; background: none; background-color: #222; } section, article, aside, figure, figcaption, header, footer, hgroup, main, menu, nav, details, summary { display: block; } a { color: #39a9e0; text-decoration: none; transition: color 0.3s ease; } a:hover { color: #4fb3e3; } a.currentColor { color: currentColor; } a.currentColor:hover { color: #39a9e0; } button { cursor: pointer; appearance: none; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size: 1rem; text-transform: inherit; padding: 0; border: 0; background: none; outline: none; transition: color 0.3s ease; } figure { position: relative; padding: 0; margin: 0; } figcaption { padding: 0; } img, svg, object, video { display: inline-block; max-width: 100%; height: auto; border: 0; vertical-align: bottom; } address { font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-style: normal; margin: 0 0 1.5rem; } ul, ol { font-size: 1.125rem; line-height: 1.5; padding: 0 0 0 1.5rem; margin: 1.5rem 0; } ul li, ol li { padding: 0; margin: 0; } ul.list-none, ol.list-none { padding: 0; margin: 0; list-style: none; } ul.list-inline, ol.list-inline { padding: 0; margin-bottom: 0; list-style: none; } ul.list-inline-block, ol.list-inline-block { padding: 0; margin: 0; } ul.list-inline-block li, ol.list-inline-block li { display: inline-block; margin: 0 1.5rem 0 0; } ol { list-style: decimal; } dl { display: flex; flex-wrap: wrap; flex-direction: row; margin: 0 0 1.5rem; } dl dt, dl dd { flex: 1 1 50%; padding: 0.5rem 0; } dl dt:not(:last-of-type), dl dd:not(:last-of-type) { border-bottom: 1px solid rgba(0, 0, 0, 0.09); } dl dt { font-weight: 500; } dl dd { text-align: right; margin: 0; } hr { padding: 0; margin: 1.5rem 0; border: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.09); } .row > div { position: relative; } a.logo { position: absolute; left: 50%; display: inline-block; color: var(--logo-color); text-align: center; height: auto; width: 100%; padding: 1.25rem 0; margin-left: -48px; max-width: 96px; } a.logo:hover { color: #39a9e0; } a.logo > svg { max-width: 96px; } a.logo > svg path { fill: currentColor; } @media screen and (min-width: 992px) { a.logo { position: relative; left: auto; text-align: left; margin-left: 0; margin-right: 0.75rem; max-width: 160px; } a.logo > svg { max-width: 110px; } } .nav__container { color: currentColor; line-height: 1; display: none; position: absolute; top: 60px; left: 0; width: 100%; height: calc(100vh - 60px); padding: 1.5rem 0; text-align: center; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(5px); z-index: 100; } @media screen and (min-width: 992px) { .nav__container { position: relative; display: block; top: auto; left: auto; right: auto; bottom: auto; width: auto; height: auto; display: flex; align-items: center; padding: 0; margin: 0 0.75rem; backdrop-filter: none; background: none; } } body.js-nav-open { overflow: hidden; } body.js-nav-open .nav__container { display: flex; flex-direction: column; } @media screen and (min-width: 768px) { body.js-nav-open .nav__container { display: flex; flex-direction: row; } } .nav__main { text-align: left; padding: 0; margin: 0; list-style: none; } .nav__main a, .nav__main button { display: block; font-size: 1.5rem; font-weight: 500; color: currentColor; } .nav__main a:hover, .nav__main a:focus, .nav__main button:hover, .nav__main button:focus { color: #39a9e0; } .nav__main > li { position: relative; padding: 0 1.5rem; margin-bottom: 2rem; } .nav__main > li > a { color: #222; } @media screen and (min-width: 768px) { .nav__main { flex: unset; text-align: center; } .nav__main > li { display: inline-block; padding: 0; margin: 0; } .nav__main > li > a { color: currentColor; } .nav__main a, .nav__main button { font-size: 0.875rem; padding: 1.25rem 1rem; border-radius: 0; border: 0; } } .nav__main ul { padding: 0; margin: 0; list-style: none; } .nav__main ul li { padding: 0; } @media screen and (min-width: 768px) { .nav__main li.separator { padding-bottom: 0.35rem; margin-bottom: 0.35rem; border-bottom: 1px solid #444; } .nav__main li:hover ul { opacity: 1; pointer-events: all; transform: translate(-50%, 0); } .nav__main ul { display: block; position: absolute; top: 3.5rem; left: 50%; color: #fff; line-height: 1.875; padding: 0.75rem 0; border-radius: 3px; background: rgba(0, 0, 0, 0.98); box-shadow: 0 0 10px rgba(0, 0, 0, 0.09); opacity: 0; transition: 0.35s ease; transform: translate(-50%, 5px); pointer-events: none; } .nav__main ul::before { content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); height: 0; width: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid rgba(0, 0, 0, 0.98); } .nav__main ul li { display: block; } .nav__main ul a { display: block; padding: 0 2rem; } } .nav__user { color: currentColor; text-align: right; line-height: 1; max-width: 160px; } .nav__user .userimg { display: inline-block; vertical-align: middle; margin-left: 0.35rem; } @media screen and (min-width: 992px) { .nav__user { margin-left: 0.75rem; } } .nav__button__container { display: block; } @media screen and (min-width: 992px) { .nav__button__container { display: none; } } button.nav__button { position: relative; top: -2px; color: currentColor; line-height: 1; padding: 0; margin: 0; text-align: center; transition: color 0.3s ease; background: none; } button.nav__button:hover, button.nav__button:active { color: currentColor; } button.nav__button.is-active .nav__button__icon { background: none; } button.nav__button.is-active .nav__button__icon::before, button.nav__button.is-active .nav__button__icon::after { top: 0; width: 100%; transform: rotate(45deg); } button.nav__button.is-active .nav__button__icon::after { transform: rotate(-45deg); } .nav__button__icon { position: relative; display: inline-block; color: currentColor; width: 22px; height: 2px; padding: 0; margin: 0; background: currentColor; vertical-align: middle; transition: background 0.3s ease; z-index: 100; } .nav__button__icon::before, .nav__button__icon::after { content: ""; display: block; height: 2px; position: absolute; background: currentColor; transition: background-color 0.3s ease, transform 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55); } .nav__button__icon::before { top: -8px; left: 0; width: 100%; } .nav__button__icon::after { top: 8px; left: 0; width: 80%; } .nav__search { display: block; flex: 1; justify-self: flex-end; padding: 0 1.5rem; } .nav__search .search__input { cursor: pointer; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size: 0.875rem; color: rgba(64, 71, 86, 0.5); text-transform: none; padding: 5px 10px; padding-left: 32px; width: 100%; border: 0; background-position: 10px 48%; background-color: transparent; transition: 0.35s ease; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.09); } .nav__search .search__input:focus { background-color: white; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.09); } .sub__search { display: inline-block; margin-right: 0.5rem; max-width: 14rem; } .sub__search .search__input { border-color: transparent; background-color: #f1f1f1; } .search__results { color: rgba(64, 71, 86, 0.5); font-weight: 500; padding: 0 0 1.5rem; margin: 0; list-style: none; } .search__results li { display: inline-block; margin-right: 1.5rem; } .nav__sub { display: flex; align-items: center; position: relative; list-style: none; text-transform: uppercase; font-size: 0.875rem; font-weight: 500; padding: 0 1.5rem 1.5rem 0; margin: 0.5rem -1.5rem 0 0; white-space: nowrap; overflow-y: hidden; overflow-x: auto; } .nav__sub li { display: inline-block; text-align: center; color: rgba(64, 71, 86, 0.5); padding: 0; margin: 0 0.75rem 0 0; } .nav__sub li.nav__options { flex: 1; text-align: right; align-self: flex-start; margin-right: 1rem; } .nav__sub li.nav__options .sub__search { position: relative; top: 1px; } .nav__sub li:hover, .nav__sub li.active { color: #39a9e0; } .nav__sub a:not(.button) { display: block; color: currentColor; font-size: 0.875rem; line-height: 1.35; padding: 0.5rem 1.125rem; border-radius: 3px; border: 1px solid rgba(51, 51, 51, 0.15); background-color: #fff; } @media screen and (min-width: 768px) { .nav__sub { font-weight: 600; padding: 0; margin: 0.75rem -1rem 0; } .nav__sub li { padding: 0; margin: 0; } .nav__sub li:not(.nav__options)::after { content: ""; display: block; margin: auto; height: 3px; width: 0; background: transparent; transition: width 0.5s ease, background-color 0.5s ease; } .nav__sub li:not(.nav__options):hover::after, .nav__sub li:not(.nav__options).active::after { width: 20px; background: #39a9e0; } .nav__sub li:not(.nav__options).active a { background: none; } .nav__sub li:not(.nav__options) a:not([class]) { line-height: 1.5; padding: 0.5rem 0.875rem; border: 0; background: none; } } .tabs { position: relative; display: flex; flex-wrap: wrap; } .tabs .button--save { top: 0.5rem; } .tabs__label { cursor: pointer; font-size: 1rem; font-weight: 600; color: #888; padding: 0.5rem 0; margin: 0; width: 100%; transition: color 0.1s; } @media (min-width: 768px) { .tabs__label { width: auto; padding: 0; margin: 0 1.5rem 0 0; } .tabs__label::after { content: ""; display: block; margin: 10px auto 0; width: 0; height: 3px; background: transparent; transition: width 0.5s ease, background-color 0.5s ease; } .tabs__label:hover::after { width: 32px; background: #39a9e0; } } .tabs__input { position: absolute; opacity: 0; } .tabs__input:focus + .tabs__label { z-index: 1; } .tabs__input:checked + .tabs__label { color: #39a9e0; } .tabs__input:checked + .tabs__label::after { width: 32px; background: #39a9e0; } .tabs__panel { display: none; padding: 1.5rem 0; background-color: #fff; } @media (min-width: 768px) { .tabs__panel { order: 99; } } .tabs__input:checked + .tabs__label + .tabs__panel { display: block; width: 100%; } @media screen and (max-width: 768px) { .nav__sub { display: block; white-space: normal; padding: 0; margin: 0; margin-block-start: 0em; margin-block-end: 0em; align-items: center; justify-content: center; } .nav__sub a:not(.button) { width: 100%; } .nav__sub li { display: block; margin-bottom: 5px; width: 100%; text-align: center; } } /* .menu { position: absolute; top: 1.5rem; left: 1.5rem; cursor: pointer; display: inline-block; width: 24px; height: 24px; margin-right: 1.5rem; z-index: 400; transition: opacity 0.3s ease; &:hover { .menu__bars { &::before, &::after { width: 24px; } } } &.active { .menu__bars { background: none; &::before, &:after { top: 0; width: 24px; transform: rotate(45deg); background: $color-text; } &::after { transform: rotate(-45deg); } &:hover { transform: scale(1.2); } } } @media screen and (min-width: $screen-md) { display: none; } } .menu__bars { display: block; position: relative; width: 24px; height: 4px; margin: 10px 0; border-radius: 4px; background: $color-primary; transition: all 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55); &::before, &::after { content: ""; display: block; position: absolute; left: 0; width: 24px; height: 4px; border-radius: 4px; background: $color-primary; transition: all 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55); } &::before { top: -8px; width: 20px; } &::after { top: 8px; width: 14px; } } // Panels body { &.show-panel-nav, &.show-panel-notes { overflow: hidden; .shade { opacity: 1; transform: translate3d(0, 0, 0); } } &.show-panel-nav { .panel--nav { transform: translate3d(0, 0, 0); } } &.show-panel-notes { .menu { opacity: 0; pointer-events: none; } .panel--notes { transform: translate3d(0, 0, 0); } } &.show-search { overflow: hidden; .shade { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity 0.15s ease; } .search { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity 0.15s ease; } } } .panel { position: absolute; top: 0; height: 100vh; width: 85vw; background: #fff; transition: 0.3s ease; z-index: 200; &--nav { left: 0; transform: translate3d(-100vw, 0, 0); box-shadow: 10px 2px 17px rgba(0, 0, 0, 0.2); } &--notes { right: 0; transform: translate3d(100vw, 0, 0); box-shadow: -10px -2px 17px rgba(0, 0, 0, 0.2); } @media screen and (min-width: $screen-md) { width: 400px; } } .panel__header { padding: 1.25rem 1.5rem; min-height: 68px; max-height: 68px; border-bottom: 1px solid #eee; } .panel__content { padding: 1.5rem; } .panel__search { padding: 1.5rem 1rem 1rem; .search__input { border: 0; background-color: #f1f1f1; &:focus { background-color: #f1f1f1; } } } .panel__nav { padding: 0; margin: 0; list-style: none; li:not(:first-child) { border-top: 1px solid #eee; } a { display: block; font-size: 1.125rem; color: currentColor; padding: 0.75rem 1.5rem; &:hover { color: $color-primary; } } } // tint the screen while panel is active .shade { position: fixed; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; background-color: rgba(0, 0, 0, 0.8); transform: translate3d(0, -100vh, 0); transition: opacity 0.3s ease; z-index: 150; } @media screen and (min-width: $screen-md) { .button.js-toggle-nav, .nav__mobile { display: none; } } */ .site__header { position: relative; color: var(--font-nav-color); text-align: left; text-transform: uppercase; line-height: 1; padding: 1rem 0; margin: 0; width: 100%; background: var(--bg-color); box-shadow: 0 0 2px 1px var(--border-color); z-index: 100; } .site__header .inner, .site__header .banner__content { display: flex; align-items: center; } .site__header .inner > *, .site__header .banner__content > * { flex: 1; } @media screen and (min-width: 992px) { .site__header { position: fixed; top: 0; left: 0; padding: 0.5rem 0; background: var(--bg-color-alpha); backdrop-filter: blur(5px); } } .site__content { text-align: left; min-height: 100vh; margin: 0 0 0 0 !important; padding: 0 0 0 0 !important; background-color: #fff; word-wrap: break-word; max-width: 100%; } @media screen and (min-width: 992px) { .site__content { padding-top: 77px; } } .site__footer { color: #5f626c; padding: 1.5rem 0 3rem; margin: 0 0 0 0; background-color: #222 !important; } .site__footer .inner, .site__footer .banner__content { width: 80%; } .site__footer [class*=col-] { margin-top: 1.5rem; } .site__footer .list-inline { padding: 0; margin: 0; line-height: 1.2; } .site__footer .list-inline li { list-style: none; display: inline; font-size: 0.8rem; color: #fff; } .site__footer h6 { font-weight: 600; text-transform: uppercase; color: #9599a2; margin-bottom: 0.3rem; } .site__footer a { color: currentColor; } .site__footer a:hover { color: #39a9e0; } .site__footer a.brand:hover { color: #fff; } .site__footer hr { border-color: rgba(0, 0, 0, 0.25); } section, .section { padding-bottom: 8vmin; } section.bg + section, section.bg .section, .section.bg + section, .section.bg .section { padding-top: 8vmin; } .bg { position: relative; padding-top: 8vmin; background-size: cover; background-repeat: no-repeat; background-position: center; background-color: #f2f9ff; background-image: linear-gradient(to bottom, #f2f9ff, #fff); } .bg--gradient { background-color: #e3f2ff; background-image: linear-gradient(to bottom, #f2f9ff 0%, #f9f9f9 100%); } .inner, .banner__content { margin: 0 auto; padding: 0 0.75rem; max-width: 1488px; } .inner--narrow { max-width: 52rem; } .inner--flex { display: flex; align-items: center; } .inner--flex > * { flex: 1; } .inner--center { position: relative; display: flex; height: 100%; } .inner--center > div { margin: auto; } @media screen and (min-width: 480px) { .inner, .banner__content { padding: 0 1.5rem; } } .article { padding: 8vmin 0; } .article .header { padding: 0 0 4vmin; } .article > h3 { margin-top: 4vmin; } .article--grid { column-gap: 3rem; row-gap: 4vmin; grid-template-columns: repeat(4, 1fr); } .article--grid .content { grid-column: 1/4; margin: 0 0 0 0; } .article--grid .content figure { margin-bottom: 1.5rem; } .article--grid .content figure:first-child { margin-bottom: 3rem; } .article--grid .content figure .contestimage { width: 100%; height: auto; } .article--grid .aside { grid-column: 4; min-width: 18rem; } .article--grid .aside .card { margin-bottom: 1.5rem; } @media screen and (min-width: 1280px) { .article--grid { display: grid; } .article--grid .header { grid-column: 1/-1; padding: 0; } .article--grid .content { margin: 0 40px 0 0; } } .contest-create .container-preview { width: 100% !important; } .container-preview .fcx-profile-info { max-width: 180px !important; } .header { padding: 8vmin 0 4vmin; } .header .icon { color: #39a9e0; margin-bottom: 1.5rem; } .header__group { display: flex; align-items: center; } .header__group .userimg { margin: 0 1.5rem 1rem -0.5rem; } .header__group .userimg + .title { margin: 0; } .flexi { display: flex; } .flexi > * { flex: 1 1 50%; } .flexi > *:last-child { margin-left: 2rem; } .flexi figure { flex-basis: 20%; } .flex { display: flex; flex-wrap: wrap; flex-direction: row; align-items: stretch; justify-content: center; margin: 0 -1rem; } .flex--start { justify-content: flex-start; } .flex .flex__item, .flex .item { flex: 1; position: relative; margin: 0 1rem 1rem; } .row--list { margin-top: 8vmin; } @media screen and (max-width: 768px) { .row--list [class*=col-] { margin: 1.5rem 0; } } .row--flex [class*=col-] { display: flex; } .row--gap { margin: -1.5rem; } .row--gap [class*=col-] { padding: 1.5rem; } .col-flex { display: flex; justify-content: center; } .col-flex > .card { margin: auto; max-width: 22rem; } .col-flex > .card .card__content { padding: 2.25rem; } .fcx-profile-info { width: 200px !important; } .static_meta { bottom: 0 !important; } .static_meta .counter__visual { margin-right: 5px; margin-bottom: 2px; } .static_meta .counter__visual p { font-size: 0.8rem; margin: 0 0 5px; text-align: right; } .static_meta .counter__visual .counter__visual__bar span::after { display: none; } @media screen and (max-width: 480px) { .static_meta .fcx-gallery__meta__title { display: none; } #result-page { display: none; } } .my_votes { width: 100%; text-align: right; position: absolute; top: 15px; right: 15px; } .my_votes i { color: #fff; font-size: 1.5rem !important; } .final_votes { flex: 1; padding: 0; min-width: 115px; } .final_votes p { color: #fff; font-size: 0.8rem; margin: 5px 0 0; text-align: right; } .final_votes i { color: #fff; } .voting-backlink { text-align: left; } .voting-backlink p { font-size: 0.8rem; text-transform: uppercase; margin-bottom: 5px; } .voting-backlink p a { color: #888; } .voting_user_proposalinfo { display: flex; flex-direction: row; } .voting_user_proposalinfo .voting-proposalinfo { text-align: right; margin-bottom: 10px; margin-top: 20px; width: 50%; } .voting_user_proposalinfo .voting-proposalinfo p { font-size: 0.85rem; margin: 0; color: #888; line-height: 1.1; } .voting_user_proposalinfo .userimg { width: 50%; } @media screen and (max-width: 992px) { .voting_user_proposalinfo { flex-direction: column; } .voting_user_proposalinfo .voting-proposalinfo { text-align: left; width: 100% !important; } .voting_user_proposalinfo .userimg { width: 100% !important; } } .voting_overlay { position: fixed; display: flex; justify-content: center; top: 0; left: 0; right: 0; bottom: 0; height: 100%; width: 100%; z-index: 101; background-color: rgba(0, 0, 0, 0.5); } .voting_overlay-content { position: absolute; top: 25%; bottom: 50%; background-color: #fff; width: 550px; height: fit-content; box-shadow: 0 0 3px 3px var(--border-color); text-align: center; padding: 50px 40px; } .voting_overlay-content .button--lg { width: 100%; } .voting_overlay-content .button + .button { margin-left: 0rem; } @media screen and (max-width: 992px) { .voting_overlay-content { width: 80%; margin-top: 100px; } } .padding_b_zero { padding-bottom: 0px !important; } .padding_t_zero { padding-top: 0px !important; } @media screen and (min-width: 640px) { .homepagebanner { padding-top: 120px !important; padding-bottom: 80px !important; } .homepagebanner .button { margin-top: 40px; } } .fa-twitter-x-square { background: #5f626c; border-radius: 3px; padding: 0px 3px; } .fa-twitter-x-square img { width: 10px; height: auto; vertical-align: initial; } .fa-twitter-x-square:hover { background: #fff; } form, fieldset { text-align: left; padding: 0; margin: 0; border: 0; } .field, .form__item { width: 100%; margin-bottom: 1.5rem; } .field input, .field select, .field textarea, .form__item input, .form__item select, .form__item textarea { width: 100%; } .form .row { margin-bottom: 1rem; } .form .row .field, .form .row .form__item { margin: 0; } label { display: block; font-size: 0.875rem; font-weight: bold; color: rgba(64, 71, 86, 0.5); margin: 0 0 0.5em; } label .req { color: #E64A19; } ::placeholder { color: rgba(64, 71, 86, 0.5); } input, select, textarea { appearance: none; white-space: nowrap; display: block; font-size: 1rem; color: #888; padding: 0.5rem 0.75rem; margin: 0; border: 1px solid rgba(0, 0, 0, 0.09); border-radius: 3px; background-color: #fff; outline: none; transition: background-color 0.35s ease; } input:focus, select:focus, textarea:focus { background-color: #f2f9ff; } input.disabled, input:disabled, select.disabled, select:disabled, textarea.disabled, textarea:disabled { cursor: default; opacity: 0.7; resize: none; pointer-events: none; user-select: none; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus { border-color: inherit !important; background: #f2f9ff !important; box-shadow: none; } input.no-label, select.no-label, textarea.no-label { margin-top: 1.25rem; } input[type=search] { font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size: 0.875rem; line-height: 2.6; font-weight: 500; max-height: 38px; background-size: 14px; background-position: 14px center; background-repeat: no-repeat; } select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 3rem; min-height: 37px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="%23d1d1d1" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>') center right no-repeat; } select:focus { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="%23a1a5ac" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>'); } textarea { font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size: 1rem; line-height: 1.5; padding: 12px; min-height: 10rem; max-height: 50vh; resize: vertical; overflow-x: hidden; white-space: pre-line; } textarea:focus { background: #fff; } .form-checkboxes label { display: inline-block; margin-right: 1rem; } input[type=checkbox], input[type=radio] { margin: 0 2px 0 0; } @supports (appearance: none) or (-webkit-appearance: none) or (-moz-appearance: none) { input[type=checkbox], input[type=radio] { position: relative; top: 4px; appearance: none; overflow: hidden; outline: none; cursor: pointer; } input[type=checkbox].toggle, input[type=radio].toggle { top: 0px; width: 2rem; height: 1.12rem; margin-right: 0.25rem; background: #bbbbbb; border-radius: 3rem; outline: none; border-color: #bbbbbb; transition: all 0.3s ease; vertical-align: middle; } input[type=checkbox].toggle::after, input[type=radio].toggle::after { content: ""; position: absolute; width: 1rem; height: 1rem; border-radius: 0.75rem; background: #fff; transform: scale(0.83); left: 1px; transition: all 0.2s ease-in-out; margin-bottom: 0.2rem; } input[type=checkbox].toggle:checked, input[type=radio].toggle:checked { background: #39a9e0; border-color: #39a9e0; } input[type=checkbox].toggle:checked::after, input[type=radio].toggle:checked::after { left: calc(100% - 1rem - 2px); } input[type=checkbox].toggle--red:checked, input[type=checkbox].toggle--contra:checked, input[type=radio].toggle--red:checked, input[type=radio].toggle--contra:checked { background: #E64A19; } input[type=checkbox].toggle--green:checked, input[type=checkbox].toggle--pro:checked, input[type=radio].toggle--green:checked, input[type=radio].toggle--pro:checked { background: #00C853; } input[type=checkbox]:not([class])::before, input[type=radio]:not([class])::before { content: ""; display: block; width: 1.125rem; height: 1.125rem; border-radius: 3px; border: 2px solid rgba(0, 0, 0, 0.145); transition: 0.3s ease; } input[type=checkbox]:not([class])::after, input[type=radio]:not([class])::after { content: ""; position: absolute; display: block; transition: 0.3s ease; opacity: 0; } input[type=checkbox]:not([class]):focus::before, input[type=radio]:not([class]):focus::before { border-color: #aaa; } input[type=checkbox]:not([class]):checked::before, input[type=radio]:not([class]):checked::before { border-color: #39a9e0; } input[type=checkbox]:not([class]):checked::after, input[type=radio]:not([class]):checked::after { opacity: 1; } input[type=checkbox]:not([class])::after { top: -1px; left: 6px; width: 6px; height: 10px; transform: rotate(45deg); background-color: transparent; box-shadow: 3px 3px 0px 0px #39a9e0; } input[type=radio]:not([class])::before { border-radius: 50%; } input[type=radio]:not([class])::after { top: 5px; left: 5px; width: 8px; height: 8px; border-radius: 50%; background-color: #39a9e0; } } .form--comment { display: flex; flex-direction: column; margin: 1.5rem 0; } .form--comment .comment--content { width: 100%; display: flex; align-items: flex-start; } .form--comment .comment--content .field { padding: 0.5rem; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.09); margin-bottom: 1rem; } .form--comment .comment--content .userimg + .field--compose { margin-left: 1.5rem; } .form--comment .comment--content textarea { padding: 0; min-height: 80px !important; border-color: transparent; font-size: 0.9rem !important; margin: 5px !important; } .form--comment .foto-comment-button { width: 100%; display: flex; flex-direction: row-reverse; } .form__errors li { font-size: 0.875rem; color: #E64A19; margin: 0.35rem 0; } .field ul { list-style: none; padding: 0; margin: 0 0 0.35rem; } .field li { font-size: 0.875rem; color: #E64A19; } .contestformerror { color: #E64A19; border: 1px solid #E64A19; } .contestformerror-text { color: #E64A19; text-align: right; padding-bottom: 5px; } .button--dropdown { position: relative; display: inline-block; } .button--dropdown i { padding-left: 5px; } .button--dropdown-content { display: none; position: absolute; background-color: #fff; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); padding: 15px 16px 0px 0px; z-index: 5000; margin-top: 10px; margin-left: -20px; } .button--dropdown-content p { font-size: 0.875rem; padding: 0px 20px; } .button--dropdown-content p a { padding: 0px !important; border-radius: none !important; border: none !important; background-color: none !important; } .button--dropdown:hover .button--dropdown-content { display: block; position: fixed; } .galerie_dropdown_pagination { display: flex; justify-content: center; } .galerie_dropdown_pagination span { margin-top: 12px; padding: auto 0; } .dropdownmenu_galerie { margin-left: 10px; } .dd-dropdown a { text-decoration: none; } .dd-dropdown { list-style: none; padding-left: 0; margin: 0 0 10px 0; padding: 0.4rem; } .dd-dropdown .fas { padding-top: 2px !important; margin-left: 5px; font-size: 1rem; float: right; } .dd-dropdown li { font-size: 0.9rem; color: #888; padding: 0.3rem 0.5rem; margin: 0; border: 1px solid rgba(0, 0, 0, 0.09); border-radius: 3px; border-width: 1px 1px 1px 1px; background-color: #fff; display: block; float: left; position: relative; text-decoration: none; transition-duration: 0.5s; width: 240px; } .dd-dropdown li a { color: #404756; } .dd-dropdown li:hover, .dd-dropdown li:focus-within { background-color: #fff; color: #39a9e0; cursor: pointer; } .dd-dropdown li:focus-within a { outline: none; cursor: pointer; } .dd-dropdown li ul { visibility: hidden; opacity: 0; width: 113%; position: absolute; transition: all 0.5s ease; margin-top: 0.4rem; margin-left: -25px; left: 0; display: none; } .dd-dropdown li:hover > ul, .dd-dropdown li:focus-within > ul, .dd-dropdown li ul:hover, .dd-dropdown li ul:focus { visibility: visible; opacity: 1; display: block; z-index: 100; } .dd-dropdown li ul li { clear: both; border-width: 0px 1px 1px 1px !important; border-radius: 0px !important; } .dd-dropdown li ul li:last-child { border-radius-bottom: 3px; } .dd-dropdown li a:hover { color: #39a9e0 !important; } table.table { width: 100%; margin: 1.5rem 0; border-collapse: collapse; border: 0; } table.table tr { transition: background-color 0.3s ease; } table.table tr:hover { background-color: #f2f9ff; } table.table tr:not(:last-child) { border-bottom: 1px solid rgba(0, 0, 0, 0.145); } table.table thead tr:hover { background-color: #fff; } table.table th, table.table td { padding: 0.75rem; } table.table th:last-child, table.table td:last-child { text-align: right; } table.table th { font-size: 0.875rem; font-weight: 500; color: rgba(64, 71, 86, 0.5); vertical-align: middle; border-bottom: 2px solid rgba(0, 0, 0, 0.145); } table.table td { font-size: 0.875rem; color: #404756; vertical-align: top; } @media (max-width: 767px) { table.table--responsive { border-collapse: separate; border: 1px solid #ddd; border-radius: 3px; } table.table--responsive, table.table--responsive tbody, table.table--responsive tr, table.table--responsive td { display: block; overflow: hidden; } table.table--responsive thead, table.table--responsive th { display: none; } table.table--responsive tr { margin: 0; border: 0; border-bottom: 1px solid #ddd; background: #fff; } table.table--responsive tr:first-child { border-top-left-radius: 3px; border-top-right-radius: 3px; } table.table--responsive tr:last-child { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-bottom: 0; } table.table--responsive tr.open { background: #f8f8f8; } table.table--responsive tr.open td[data-label] { display: flex; } table.table--responsive tr.open td:not([data-label]):nth-child(2) { padding-bottom: 10px; margin-bottom: 0; border-bottom: 1px solid #ddd; } table.table--responsive td:not([data-label]) { cursor: pointer; color: #888; text-align: center; background: transparent; padding: 0 10px; margin: -10px 0 10px; } table.table--responsive td:not([data-label]):first-child { margin-top: 10px; } table.table--responsive td:not([data-label]):nth-child(2) { color: #555; } table.table--responsive td[data-label] { display: none; justify-content: flex-start; background-color: #fff; } table.table--responsive td[data-label]:not(:last-child) { border-bottom: 1px solid #ddd; } table.table--responsive td[data-label]::before { content: attr(data-label); min-width: 130px; font-weight: bold; white-space: normal; text-align: left; padding: 10px; margin: -10px 10px -10px -10px; } } .alert { position: fixed; left: 1.5rem; bottom: 1.5rem; color: #404756; text-align: center; font-weight: 500; padding: 1rem 6.5rem 1rem 4rem; margin-right: 1.5rem; max-width: 768px; border-radius: 3px; background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); transition: 0.3s ease; z-index: 10000000; } .alert p { font-size: 1rem; margin: 0; } .alert a { color: currentColor; opacity: 0.7; transition: opacity 0.3s ease; } .alert a:hover { color: currentColor; opacity: 1; } .alert small { opacity: 0.7; } .alert--wide { left: 0; bottom: 0; padding: 1.5rem 15%; margin: 0; width: 100%; max-width: none; border-radius: 0; } .alert--wide-top { top: 0; left: 0; bottom: auto; padding: 1.5rem 15%; margin: 0; width: 100%; max-width: none; border-radius: 0; } .alert--pro .button, .alert--contra .button, .alert--warning .button { color: currentColor; border-color: #fff; background: none; } .alert--pro .button:hover, .alert--contra .button:hover, .alert--warning .button:hover { color: #404756; background: #fff; } .alert--pro { color: #fff; background-color: #00C853; } .alert--contra { color: #fff; background-color: #E64A19; } .alert--warning { color: #fff; background-color: #f8c82e; } .alert--hide { transform: translateY(100px); opacity: 0; } .alert--timeout { animation-name: alertOut; animation-delay: 5s; animation-duration: 0.2s; animation-fill-mode: forwards; } .alert .alert__icon, .alert .js-close { position: absolute; top: 50%; left: 1rem; transform: translateY(-50%); } .alert .alert__icon { font-size: 26px; } .alert .js-close { left: auto; right: 1rem; } .alert .button--circle:hover { color: #404756; background: #fff; } @keyframes alertOut { 0% { transform: translateY(0); } 100% { transform: translateY(100px); opacity: 0; } } .note { padding: 1rem; border-radius: 3px; border: 1px solid #eee; margin-bottom: 1rem; } .date[class*=pull-left] + .bodytext { overflow: hidden; } .banner { display: block; position: relative; padding: 4.5rem 0; background: #f1f1f1; } .banner__content { position: relative; z-index: 10; } .banner__image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0.1; filter: saturate(10%); } .banner__image img { height: 100%; width: 100%; object-fit: cover; } .list.list--events { margin: 0 0 3rem; } .list.list--events .event { padding: 1rem; margin: 0 -1rem 0.5rem; border-radius: 3px; transition: 0.3s ease; } .list.list--events .event:hover { background: #f2f9ff; } .event { display: flex; flex-flow: row; align-items: center; color: currentColor; } .event small { color: rgba(64, 71, 86, 0.5); } .event__info { flex: 2; } .event__dates { flex: 1; border-left: 1px dashed #ddd; padding: 0 1.5rem; } .event__dates > div { display: inline-block; margin-right: 3rem; } .event__participants { flex: 1; text-align: end; } .event__participants .avatar { margin: 0 2px; } .frame { color: #ddd; text-align: center; padding: 4vmin; margin-bottom: 8vmin; background: #222; } figure.frame__image { display: block; } figure.frame__image > img { display: inline-block; max-height: 70vmin; object-fit: cover; object-position: center; } figure.frame__image figcaption { font-size: 1.125rem; color: currentColor; padding: 1.5rem 1.5rem 0; } .frame__options { display: flex; list-style: none; padding: 1.5rem 1.5rem 0; margin: 0 auto; max-width: 52rem; } .frame__options > li { flex: 1; padding: 0 0.25rem; } .frame__options .button { display: block; width: 100%; } .test-vote-contra:hover, .test-vote-contra:focus, .test-vote-contra:active, .test-vote-pro:hover, .test-vote-pro:focus, .test-vote-pro:active, .test-vote-skip:hover, .test-vote-skip:focus, .test-vote-skip:active { color: #fff; background-color: #39a9e0 !important; } .test-vote-contra::before { font-family: "Font Awesome 5 Pro"; font-weight: 900; content: ""; margin-right: 5px; } .test-vote-pro::before { font-family: "Font Awesome 5 Pro"; font-weight: 900; content: ""; margin-right: 5px; } .test-vote-skip::before { font-family: "Font Awesome 5 Pro"; font-weight: 900; content: ""; margin-right: 5px; } @media screen and (max-width: 480px) { .frame__options { margin: 0 !important; padding: 10px 0px !important; } .test-vote-contra::before, .test-vote-pro::before, .test-vote-skip::before { display: none; } } .scroller { display: flex; flex-wrap: nowrap; font-size: 0.875rem; font-weight: 500; text-align: start; padding: 0 0 1rem !important; margin: 0 0 3rem; list-style: none; overflow-x: auto; -webkit-overflow-scrolling: touch; } .scroller li { position: relative; flex-grow: 1; min-width: 250px; margin: 0 1.25rem 0 0; border-radius: 3px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.09); transition: transform 0.7s ease; padding-right: 0px; } .scroller li:hover { transform: translateY(5px); } .scroller li .active { border: 1px solid #39a9e0; color: #39a9e0; } .scroller img { margin-bottom: 4px; } .scroller a { display: block; color: currentColor; padding: 0.5rem; } .scroller a:hover { color: #39a9e0; } .content__title { margin-top: 20px; display: flex; justify-content: space-between; margin-bottom: 1.5rem; } .content__title .content__title_header { flex: 1; position: relative; } .content__title .content__title_header h3 { position: absolute; bottom: 0; } @media screen and (max-width: 480px) { .content__title { flex-direction: column; display: flex; } } .content { margin-bottom: 4rem; } ul.images { display: flex; flex-direction: column; flex-wrap: wrap; padding: 0; margin: 0; list-style: none; } ul.images li { flex-grow: 1; height: 240px; padding: 0; margin: 0 0 1.5rem; } ul.images img { max-height: 100%; min-width: 100%; object-fit: cover; vertical-align: bottom; } @media screen and (min-width: 480px) { ul.images { flex-direction: row; margin: 0 -0.75rem; } ul.images li { margin: 0 0.75rem 1.5rem; } } .counter { display: flex; align-items: center; margin: 3rem 0; } .counter__visual { flex: 1; padding: 0; margin-right: 1.5rem; } .counter__visual__bar { border-radius: 12px; background: #f9f9f9; } .counter__visual__bar span { position: relative; display: block; height: 6px; width: 85%; border-radius: 12px; background: #39a9e0; } .counter__visual__bar span::after { content: ""; position: absolute; display: inline-block; top: -2px; right: -12px; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 12px; background: #39a9e0; } .counter__numbers { font-size: 75%; color: #888; } .counter__numbers span { color: #39a9e0; } .box { padding: 1.5rem; } figure.image { color: #fff; border-radius: 3px; margin: 1rem 0; overflow: hidden; } @media screen and (min-width: 992px) { figure.image { margin: 0; } } figure.image.blur { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25); } figure.image figcaption { position: absolute; display: flex; align-content: center; left: 0; bottom: 0; right: 0; padding: 12px; opacity: 0; background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.45) 100%); pointer-events: none; transition: opacity 0.65s ease; transition-delay: 200ms; } figure.image .button--primary { position: absolute; top: 12px; left: 12px; z-index: 100; } figure.image .caption { flex: 1; text-align: left; line-height: 1; margin-left: 0.875rem; } figure.image h3 { font-size: 0.875rem; margin: 0; } figure.image a { color: currentColor; opacity: 0.8; } figure.image:hover figcaption, figure.image--featured figcaption { opacity: 1; pointer-events: all; } details { text-align: start; padding: 0; } details + details { border-top: 1px solid rgba(0, 0, 0, 0.09); } details:last-of-type { margin-bottom: 1.5rem; } details[open] summary::after { transform: translateY(-50%) rotate(180deg); } details[open] summary ~ * { animation: openDetails 0.7s ease; } details summary { cursor: pointer; display: block; position: relative; font-size: 1.125rem; line-height: 1.35; font-weight: 500; padding: 1rem 2rem; padding-left: 0; outline: none; transition: color 0.35s ease; } details summary::-webkit-details-marker { display: none; } details summary::before, details summary::after { content: ""; position: absolute; top: 50%; right: 0; width: 1rem; height: 2px; background-color: currentColor; text-align: right; transform: translateY(-50%); transition: transform 0.3s ease-in-out; } details summary::after { transform: translateY(-50%) rotate(90deg); } details .details__content { padding: 0 0 1rem; } @keyframes openDetails { 0% { opacity: 0; } 100% { opacity: 1; } } .columns { margin-top: 1.5rem; columns: 2 300px; column-gap: 3rem; } .columns + * { margin-top: 1.5rem; } .columns p, .columns ul, .columns ol { break-inside: avoid-page; break-inside: avoid-column; -webkit-column-break-inside: avoid; } code, pre { font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace; border-radius: 3px; background: #ffe385; } code { display: inline-block; padding: 0 4px; } pre { position: relative; display: block; font-size: 1rem; text-align: start; white-space: pre-wrap; padding: 1rem; margin: 1.5rem 0; overflow-x: auto; } pre[data-lang]::before { position: absolute; top: 0.35rem; right: 0.5rem; content: attr(data-lang); display: block; font-size: 0.75rem; pointer-events: none; } .keywords { text-align: center; padding-top: 0; } .keywords .button { margin: 5px 2px !important; } .history-pro, .history-contra { margin: 0px 3px; } .history-result { font-size: 1rem; } @media screen and (max-width: 480px) { .votingtitle { padding-bottom: 10px; } } .votingtitle { font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-weight: normal; font-style: normal; } .content-vote { background: #222; } .content-vote .frame { margin-bottom: 0 !important; padding: 35px 25px; width: 100%; } .content-vote .frame img { width: auto; max-height: -webkit-calc(95vh - 210px); max-height: calc(95vh - 210px); image-orientation: none; } @media (min-width: 992px) { .content-vote .frame { min-height: -webkit-calc(100vh - 102px); min-height: calc(100vh - 102px); } } .content-vote .content-vote-details { padding-top: 8vmin; background: #fff; } .gridx__title { margin: 3rem 0 1.5rem; } .gridx__title:first-of-type { margin-top: 1.5rem; } .gridx { display: flex; flex-wrap: wrap; margin: 1.5rem -0.75rem 0; } .gridx > * { flex: 1; margin: 0 0.75rem 1.5rem; min-width: calc(25% - 1.5rem); max-width: calc(25% - 1.5rem); } @supports (display: grid) { .gridx { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); grid-auto-rows: auto; gap: 2.5rem; margin: 0; } .gridx > * { flex: none; margin: 0; max-width: unset; min-width: unset; } } .cover { padding: 1rem; } .cover img { width: 100%; margin-bottom: 0.75rem; filter: saturate(0.75); transition: filter 0.65s ease; } .cover:hover img { filter: saturate(1); } .cover figcaption { font-size: 0.875rem; color: #888; } .button { cursor: pointer; display: inline-block; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size: 0.875rem; font-weight: 500; text-align: center; text-transform: uppercase; line-height: 1.35; text-shadow: none; padding: 0.5rem 1.125rem; margin: 0; white-space: nowrap; border: 1px solid transparent; border-radius: 3px !important; background: none; transition: color 0.3s ease, border-color 0.4s ease, background-color 0.3s ease; vertical-align: middle; -webkit-appearance: none; -moz-appearance: none; outline: none; color: #fff; background-color: #39a9e0; } .button + .button { margin-left: 0.35rem; } .button--block { display: block; width: 100%; } .button--xxs { font-size: 0.65rem; font-weight: 600; line-height: 2; padding: 0 8px; } .button--xs { font-size: 0.75rem; font-weight: 700; line-height: 2.5; padding: 0 0.85em; } .button--xs span { display: none; } .button--sm { font-size: 0.75rem; font-weight: 700; } .button--md { font-size: 0.875rem; } .button--lg { font-size: 1rem; margin-top: 0.5rem; will-change: transform; box-shadow: 0 4px 12px rgba(212, 226, 239, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.03); } .button--xlg { font-size: 1.7rem; margin-top: 0.5rem; will-change: transform; box-shadow: 0 4px 12px rgba(212, 226, 239, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.03); } .button--p50 { padding: 0 50px !important; } .button[disabled], .button .disabled { cursor: default; pointer-events: none; user-select: none; } .button:hover, .button:focus, .button:active { color: #fff; background-color: #4fb3e3; opacity: 1 !important; } .button--save { position: absolute; top: 0; right: 0; } .button--upload { color: #fff; min-width: 32px; border-radius: 25px; border-color: transparent; } @media screen and (min-width: 768px) { .button--upload { color: currentColor; background: none; } } .button--rounded { border-radius: 24px; border-color: transparent; } .button--outline { color: rgba(64, 71, 86, 0.5); border-color: rgba(0, 0, 0, 0.1); background: transparent; } .button--outline:hover { color: #4fb3e3; border-color: #4fb3e3; background: transparent; } .button--outline.button--inverted { color: currentColor; border-color: currentColor; opacity: 0.7; transition: 0.3s ease; } .button--outline.button--inverted:hover { opacity: 1; } .button--dark { background-color: rgba(0, 0, 0, 0.7); } .button--dark:hover { background-color: rgba(0, 0, 0, 0.9); } .button--light { color: #404756; background: #fff; } .button--light:hover { color: #39a9e0; background: #fff; } .button--muted { color: rgba(64, 71, 86, 0.5); background-color: #eae9ea; } .button--muted:hover { color: #404756; background-color: #eae9ea; } .button--clear { color: rgba(64, 71, 86, 0.5); background: none; } .button--clear:hover { color: #39a9e0; background: none; } @media screen and (min-width: 768px) { .button--xs span { display: inline; } } .button-cards-placeholder { height: 42px; } .button-cards-placeholder:hover { cursor: default; } .badge { cursor: default; position: relative; display: inline-block; font-size: 0.65rem; font-weight: 500; color: rgba(255, 255, 255, 0.85); text-transform: uppercase; line-height: 1.8; padding: 3px 0.5rem; border-radius: 3px; background: rgba(0, 0, 0, 0.85); transition: 0.3s ease; z-index: 10; } a.badge { cursor: pointer; } a.badge:hover { color: #fff; } .badge i[class^=fa] { margin-right: 2px; } .badge + h1, .badge + h2, .badge + h3, .badge + h4 { margin-top: 1rem; } .badge.badge--blue, .badge.badge--primary { background: rgba(57, 169, 224, 0.75); } .badge.badge--blue:hover, .badge.badge--primary:hover { background: #39a9e0; } .badge.badge--green { background: rgba(0, 200, 83, 0.75); } .badge.badge--green:hover { background: #00C853; } .badge.badge--yellow { background: rgba(248, 200, 46, 0.75); } .badge.badge--yellow:hover { background: #f8c82e; } .badge.badge--red { background: rgba(230, 74, 25, 0.75); } .badge.badge--red:hover { background: #E64A19; } .avatar__outer { position: relative; text-align: center; width: 100%; } .avatar { appearance: none; position: relative; display: inline-block; font-size: 10px; text-align: center; max-width: 48px; vertical-align: middle; padding: 0; border: 0; border-radius: 50%; background-color: #fff; outline: none; } .avatar.pull-left { margin-right: 0.75rem; } .avatar.pull-right { margin-left: 0.75rem; } .avatar__image { display: block; border-radius: 50%; object-fit: cover; vertical-align: bottom; } .avatar--xxs { max-width: 21px; } .avatar--xs { max-width: 28px; } .avatar--sm { max-width: 36px; } .avatar--md { max-width: 48px; } .avatar--lg { max-width: 100px; } .avatar--xl { max-width: 160px; } .avatar--notify::after { content: ""; position: absolute; top: -2px; right: -6px; display: inline-block; height: 12px; width: 12px; border-radius: 50%; border: 2px solid #fff; background: #39a9e0; } .avatar--premium::after { display: inline-block; position: absolute; bottom: -4px; right: -4px; content: ""; font-family: "Font Awesome 5 Pro"; font-weight: 900; text-align: center; color: #39a9e0; padding-top: 3px; height: 18px; width: 18px; border-radius: 50%; background-color: #fff; } .avatar--premium.avatar--sm::after { bottom: -6px; right: -6px; } .avatar--premium.avatar--xl::after { bottom: 6%; right: 6%; } .userimg { display: flex; align-items: center; } .userimg .userimg__image { display: inline-block; font-size: 0.5rem; position: relative; border-radius: 50%; width: 32px; background: #fff; } .userimg .userimg__image > img { border-radius: 50%; } .userimg figcaption, .userimg .caption { font-weight: 500; line-height: 1; margin-left: 1rem; } figcaption.userimg { margin-bottom: 1.5rem; } .userimg small { color: #888; font-weight: normal; } @media screen and (min-width: 768px) { .userimg .userimg__image { width: 42px; } .userimg--small .userimg__image { width: 32px; } .userimg--big .userimg__image { font-size: 0.75rem; width: 72px; } } .userimg[data-premium] .userimg__image::after, .userimg[data-status] .userimg__image::after { content: ""; display: inline-block; position: absolute; bottom: -2px; right: -2px; font-family: "Font Awesome 5 Pro"; font-weight: 700; font-size: 1em; text-align: center; color: #39a9e0; padding-top: 4px; height: 1.875em; width: 1.875em; border: 2px solid #fff; border-radius: 50%; background: #39a9e0; } .userimg[data-status=online] .userimg__image::after { background-color: #00C853; } .userimg[data-status=idle] .userimg__image::after { background-color: #f8c82e; } .userimg[data-premium="1"] .userimg__image::after { content: ""; border: 0; background: #fff; } .userimg[data-premium="1"][data-status=online] .userimg__image::after { color: #00C853; } .userimg[data-premium="0"] .userimg__image::after { content: none !important; border: 0; background: none !important; } .userimg + h1.title { margin-top: 4vmin; } .list__faces { display: none; text-align: center; padding: 0; margin: 0; } .list__faces li { display: inline-block; margin: 0 0.75rem 1rem; } .list__faces figure { max-width: 148px; } .list__faces figure:hover img { transform: scale(1.1); } .list__faces img { max-width: 100%; border: 8px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.09); transform: translate3d(0); transition: transform 0.3s ease; } .list__faces figcaption { font-family: -apple-system-ui-serif, "Vollkorn", "Georgia", serif; font-style: italic; font-size: 1.25rem; color: #666; margin-top: 1rem; } @media screen and (min-width: 768px) { .list__faces { display: block; } } .gallery { position: relative; z-index: 10; } .gallery--simple { display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: center; align-items: center; text-align: center; margin: 0 -0.5rem; } .gallery--simple .gallery__item { margin: 0.5rem; } .gallery--simple .gallery__image { position: absolute; vertical-align: bottom; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .gallery--simple .gallery__pusher { display: block; } .gallery--grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); grid-auto-rows: 0; grid-auto-flow: dense; grid-gap: 1rem; overflow: hidden; } .gallery--grid .gallery__item { grid-column-start: auto; grid-row-start: auto; } .gallery--grid .gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; } .gallery--grid .gallery__item.landscape.featured { grid-column: span 2; grid-row: span 2; } .gallery--grid .gallery__item.portrait { display: none; grid-row: span 2; } .gallery--grid .gallery__item.square.featured { grid-column: span 2; grid-row: span 3; } .gallery--grid .gallery__image { height: 100%; width: 100%; min-height: 0; object-fit: cover; object-position: center; border-radius: 3px; } @media screen and (min-width: 768px) { .gallery--grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-template-rows: auto; grid-auto-rows: minmax(150px, auto); } .gallery--grid .gallery__item.portrait { display: block; } } @media screen and (min-width: 992px) { .gallery--grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } } .card { display: flex; position: relative; flex-direction: column; text-align: left; color: #404756; border-radius: 3px; background-color: #fff; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.09); } .card__title { text-align: center; padding: 1.5rem; padding-bottom: 0; } .card__preview { padding: 5px; width: 100%; } .card__preview img { width: 100%; max-height: 180px; object-fit: cover; border-radius: 3px; } .card__preview .static_meta { position: absolute; bottom: 43px !important; width: 97%; } .card__preview figcaption { margin-top: -1rem; padding: 0 1rem; } .card__preview .userimg__image { box-shadow: 0 0 0 2px white; } .card__preview + .card__content { padding-top: 0.75rem; } .card__preview + .card__content .date { margin: -2.125rem 0 1rem; } .card__image { position: relative; padding: 5px; padding-bottom: 0; margin: 0; } .card__image > img { border-radius: 3px; } .card__image figcaption { position: absolute; left: 5px; right: 5px; bottom: 0; text-align: left; color: #fff; padding: 1.5rem 14px 10px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.25) 100%); transition: 0.7s ease; } .card__image figcaption a { color: currentColor; } .card__image .userimg { margin: 0 6px 0 0; } .card__content { position: relative; padding: 1.5rem; } .card__content .tagline { margin-bottom: 0.75rem; } .card__content small, .card__content .small { color: rgba(64, 71, 86, 0.5); } .card__content small strong, .card__content .small strong { color: #404756; } .card__content p:not[class], .card__content address { font-size: 1rem; line-height: 1.35; margin-top: 0.5rem; } .card__content p:not[class]:last-of-type, .card__content address:last-of-type { margin-bottom: 0; } .card__content dl { font-size: 0.875rem; margin: 0; } .card__content .cardinfo { color: #E64A19; font-size: 16px; font-weight: 200; padding: 10px; border: 1px solid #E64A19; } .card__section { padding: 1.5rem; } .card__section .tagline { margin: 0; } .card__section:first-child { padding: 0.75rem 1.5rem; border-bottom: 1px solid rgba(0, 0, 0, 0.09); } .card__section:last-child { padding: 0.75rem 1.5rem; margin-top: auto; border-top: 1px solid rgba(0, 0, 0, 0.09); } .card__buttons { display: flex; margin-top: auto; text-align: center; padding: 0; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top: 1px solid rgba(0, 0, 0, 0.09); overflow: hidden; } .card__buttons .button { flex: 1; color: rgba(64, 71, 86, 0.5); padding: 0.75rem 0.5rem; margin: 0; border: 0; border-radius: 0; background: #fff; } .card__buttons .button + .button { border-left: 1px solid rgba(0, 0, 0, 0.09); } .card__buttons .button:hover { color: #39a9e0; } .card__buttons .button a { color: rgba(64, 71, 86, 0.5); } .card blockquote { padding: 1.5rem; margin: 0; } .card blockquote::before { display: none; } blockquote.card { flex: 1; display: flex; flex-direction: column; font-style: normal; min-width: 45%; max-width: none; padding: 1.5rem; } blockquote.card::before { display: none; } blockquote.card p { font-size: 1.125rem; font-style: normal; line-height: 1.35; margin-top: 0; } blockquote.card strong { font-weight: normal; color: #404756; } blockquote.card cite { display: block; font-size: 0.875rem; font-style: normal; color: #404756; } blockquote.card cite a { color: #404756; } blockquote.card cite a:hover { color: #39a9e0; } blockquote.card footer { display: flex; align-items: center; justify-content: space-between; line-height: 1.2; padding-top: 0.5rem; margin-top: auto; } blockquote.card footer::before { display: none; } @media screen and (min-width: 992px) { blockquote.card { min-width: auto; } } .card.card--plan { display: flex; color: rgba(64, 71, 86, 0.5); text-align: center; } .card.card--plan .card__content { width: 100%; padding: 2rem 1.5rem 1rem; } .card.card--plan .heading { color: #404756; } .card.card--plan .price { color: #39a9e0; } .card.card--plan small { display: block; margin: 0.5rem 0 1.5rem; } .card.card--center { max-width: 340px; } .card.card--center .card__footer { padding-bottom: 3rem; } .card.card--flat { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.09); } .card.card--float { box-shadow: 0 6px 21px rgba(0, 0, 0, 0.11), 0 0 0 1px rgba(0, 0, 0, 0.04); } .card.card--lift { transition: transform 0.65s ease, box-shadow 0.65s ease; } .card.card--lift:hover { transform: translateY(-0.25rem); box-shadow: 0 4px 17px 0 rgba(33, 33, 33, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.09); } .card__buttons_form { width: 100%; display: flex; } .card__voting-status { background-color: #bbbbbb; margin-top: -3px; } .card__voting-status p { text-align: right; text-transform: uppercase; color: #fff; font-size: 0.875rem; padding: 2px 10px 2px 0px; } .card__voting-status-current { background-color: #39a9e0; } .card__voting-status-finished { background-color: #000; } .date { display: inline-block; color: rgba(64, 71, 86, 0.5); text-align: center; padding: 2px; margin: 0 1.5rem 1.5rem 0; min-width: 3.25rem; background: #fff; border-radius: 3px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.05); } .date span { display: block; } .date .date__month { font-size: 0.75rem; text-transform: uppercase; font-weight: 500; color: rgba(255, 255, 255, 0.85); padding: 3px 0.65rem; border-top-left-radius: 3px; border-top-right-radius: 3px; background: #39a9e0; } .date .date__day { font-size: 1.25rem; font-weight: 500; color: #404756; padding: 2px 0; } .date--open .date__month, .date--green .date__month { background: #00C853; } .date--closed .date__month, .date--red .date__month { background: #E64A19; } /* calendar sheet */ .calendar-color-finished { background-color: #E64A19; } .calendar-color-active { background-color: #00C853; } .calendar-color-upcoming { background-color: #3f8ee9; } .calendar-sheet { position: relative; display: inline-block; border-radius: 3px; border: none !important; background: #fff; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.35); } .calendar-sheet__month { font-size: 13px; width: 100%; color: #fff; padding: 6px 12px; } .calendar-sheet__day { font-size: 21px; width: 100%; padding: 4px; text-align: center; } body.body--display { overflow: hidden; } body.body--display .site__content { position: relative; padding: 0; background-color: #222; } .display__options { position: fixed; top: 0; right: 0; text-align: right; padding: 1.5rem; z-index: 200; } .display { display: flex; height: 100%; width: 100%; transform: translateX(0); transform: translate3d(0, 0, 0); backface-visibility: hidden; transition: 0.3s ease; } .display--sidebar { transform: translateX(-400px); transform: translate3d(-400px, 0, 0); } .display__canvas { flex: 1; display: flex; width: 100%; height: 100vh; padding: 2rem; overflow: auto; } .display__canvas--zoom { padding: 0; } .display__canvas--zoom .display__media { width: 100%; border-radius: 0; box-shadow: none; cursor: url(/assets/icons/zoom-minus.png) 20 20, auto; } .display__canvas--zoom .display__media img { height: auto; width: auto; max-height: unset; max-width: unset; } .display__media { display: block; margin: auto; border-radius: 3px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5); cursor: url(/assets/icons/zoom-plus.png) 20 20, auto; } .display__media img { height: auto; width: auto; max-height: calc(100vh - 4rem); max-width: 100%; } .display__sidebar { display: block; position: absolute; top: 0; right: -400px; width: 400px; height: 100%; color: #fff; padding: 4rem 1.5rem 1.5rem; border-left: 1px solid #333; background: #222; overflow: hidden; } .display__sidebar hr { border-bottom-color: #333; } .display__sidebar .comment__list { margin-top: 3rem; } #section-list img { height: 150px; width: 100%; object-fit: cover; object-position: center; } .comment__list { padding: 0; margin: 0; list-style: none; } .comment { display: flex; align-items: flex-start; } .comment:not(:last-of-type) { margin-bottom: 1.5rem; } .userimg + .comment__content { margin-left: 1.5rem; } .comment__content p { font-size: 0.875rem; } .comment__meta { font-size: 0.875rem; color: var(--font-color-muted); margin-bottom: 0.25rem; } .comment__meta { display: flex; justify-content: space-between; } .comment__meta .comment__delete a { color: #888; } .comment__meta .comment__delete far { font-size: 0.8rem; } @media screen and (max-width: 768px) { body.body--index .gallery .gallery__item:not(.featured) { display: none; } } #section__learn__comments .poster__comments { display: none; } #section__learn__comments .poster__more { display: block !important; } #section__learn__comments .poster__more .poster__comments__list { padding: 0px; } #section__learn__comments .poster__more .comment__content { margin-left: 0rem; } @media screen and (min-width: 992px) { #section__learn__comments { margin: 6rem 0; } #section__learn__comments .poster__comments { display: block; } #section__learn__comments .poster__more { max-width: 800px; } #section__learn__comments .poster__more .poster__comments__list { padding: 0 2.5rem; } #section__learn__comments .poster__more .poster__comments__image { width: 800px !important; top: -4rem; } } .site__content section.outer { background-color: #fff; } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { #section__testimonials { margin-top: -1rem; } } .outer { padding: 4rem 0; } .outer.outer--bg { position: relative; background-size: cover; background-repeat: no-repeat; background-position: center; background-color: #f2f9ff; background-image: linear-gradient(to bottom, #f2f9ff, #fff); } .outer.gradient--new { background-color: #e3f2ff; background-image: linear-gradient(to top, #fff 60%, #ddd 100%) !important; } .outer.gradient--new > * { position: relative; z-index: 10; } .outer.gradient--new::before, .outer.gradient--new::after { content: ""; display: block; position: absolute; } .outer.gradient--new::before { top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 50%); } .outer.gradient--new::after { left: 0; bottom: 0; width: 100%; height: 6rem; background-image: linear-gradient(-2deg, white 50%, rgba(255, 255, 255, 0) 50.1%); } @media screen and (min-width: 768px) { .poster__text.card-xl { max-width: 600px !important; width: 600px !important; } } .poster__text.card-xl { max-width: 100% !important; } #section__podcast h3 a { color: #404756; } #section__podcast p a { color: rgba(64, 71, 86, 0.5); } #section__podcast .poster { flex-direction: column-reverse; } .poster__text .button img { width: 20px; height: auto; vertical-align: none !important; margin-bottom: 8px; } /* Homepagestyles 2022 Steffi */ .display-none-mobile { display: none !important; } @media screen and (min-width: 992px) { .display-none-mobile { display: block !important; } } .display-none-desk { display: block !important; } @media screen and (min-width: 992px) { .display-none-desk { display: none !important; } } .ps-buttons div { width: 33%; } .pictureshow { display: none; } @media screen and (min-width: 992px) { .pictureshow { display: block; display: flex; flex-direction: row; align-items: stretch; margin: 10px 50px; justify-content: space-between; } .pictureshow .pictureshow-box { height: 120px; color: #fff; width: 100%; } .pictureshow .pictureshow-box h4 { margin: 0px !important; } .pictureshow .pictureshow-box p { margin: 10px 0px 0px 0px !important; } .pictureshow .pictureshow-box a { color: #fff; } .pictureshow .pictureshow-box .button { color: #404756; float: right; margin: 0px !important; } .pictureshow .userbox { width: auto; display: flex; } .pictureshow div { display: inline-block; position: relative; margin: 10px; } .pictureshow div .usercopyright { position: absolute; bottom: 0; right: 0; z-index: 50; padding: 5px; margin: 0px; background: linear-gradient(to bottom, transparent, black 100%); } .pictureshow :first-child { margin-left: 0px; } .pictureshow :last-child { margin-right: 0px; } } .aktuelle-podcast-folge { padding: 20px 50px; display: flex; flex-direction: raw; } .aktuelle-podcast-folge p { margin: 0px 0px 0px 10px !important; font-size: 1rem; line-height: 1rem; } .aktuelle-podcast-folge small { margin: 0px 0px 0px 10px !important; line-height: 0.6rem; } .aktuelle-podcast-folge a { color: #fff; } .aktuelle-podcast-folge img { width: 100px; height: 100px; } @media screen and (min-width: 992px) { .aktuelle-podcast-folge { flex-direction: row; } .aktuelle-podcast-folge p { margin: 0px 0px 0px 10px !important; font-size: 1.5rem; line-height: 1.8rem; } .aktuelle-podcast-folge small { margin: 0px 0px 0px 10px !important; } .aktuelle-podcast-folge a { color: #fff; } .aktuelle-podcast-folge img { width: 100px; height: 100px; } } @keyframes einblenden { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes einblenden { /* Für Firefox */ from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes einblenden { /* Für Safari und Chrome */ from { opacity: 0; } to { opacity: 1; } } @-o-keyframes einblenden { /* Für Opera */ from { opacity: 0; } to { opacity: 1; } } .outer-no-padding { padding-top: 0px !important; padding-bottom: 0px !important; } .homepage_section { display: flex; flex-direction: column; } .homepage_section h1.title { font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-style: normal; margin-left: 50px; animation: einblenden 1.5s; -moz-animation: einblenden 1.5s; /* Für Firefox */ -webkit-animation: einblenden 1.5s; /* Für Safari und Chrome */ -o-animation: einblenden 1.5s; /* Für Opera */ } .homepage_section h2.title { font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size: 2rem; font-weight: normal; font-style: normal; } .homepage_section h3.title { font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size: 1.5rem; font-weight: normal; font-style: normal; } .homepage_section h4.title { font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-stretch: condensed; font-style: normal; font-weight: normal; } .homepage_section .icons img { width: 100px; height: 100px; margin-bottom: 20px; } .homepage_section p { font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; } .homepage_section .fullfield p, .homepage_section .fullfield h4 { margin: 20px 50px; } .homepage_section .fullfield .button { white-space: normal !important; line-height: initial; padding-top: 10px !important; padding-bottom: 10px !important; } .homepage_section .fullfield .button:hover, .homepage_section .fullfield .button:focus, .homepage_section .fullfield .button:active { color: #000; background-color: #fff; opacity: 1 !important; } @media screen and (min-width: 992px) { .homepage_section .fullfield .button { font-size: 1.2rem; } } .homepage_sectionstyle_01 { margin: 45px 0px 0px 0px !important; padding: 0px; max-width: 100% !important; text-align: center; } @media screen and (min-width: 992px) { .homepage_sectionstyle_01 { margin: 0px 0px 60px 0px !important; } } .homepage_sectionstyle_01 .button-imagefield { margin: 20px 50px; font-size: 1rem; font-weight: normal; background-color: #fff; color: #404756; } @media screen and (min-width: 992px) { .homepage_sectionstyle_01 .button-imagefield { font-size: 1.5rem; margin: 20px auto; } } .homepage_sectionstyle_01 .imagefield { height: 350px; background: url("../../assets/images/_pages/fullpages/winter2024.jpg") no-repeat; background-position: top center !important; background-size: cover; background-position: center; } @media screen and (min-width: 992px) { .homepage_sectionstyle_01 .imagefield { background-position: top center !important; height: 650px; } } .homepage_sectionstyle_01 .imagefield h1 { font-size: 2.5rem; font-weight: normal; color: #fff; margin-top: 50px; margin-left: 10px; margin-right: 10px; text-align: center; } @media screen and (min-width: 992px) { .homepage_sectionstyle_01 .imagefield h1 { font-size: 5rem; margin-top: 180px; } } .homepage_sectionstyle_01 .imagefield .xmas_h1 { font-size: 1.5rem; font-weight: bold; color: #fff; margin-top: 50px; text-align: center; text-shadow: 5px 3px 5px #060E30; } @media screen and (min-width: 992px) { .homepage_sectionstyle_01 .imagefield .xmas_h1 { margin-left: 100px; margin-right: 100px; font-size: 4rem; margin-top: 100px; } } .homepage_sectionstyle_01 .fullfield::before { content: ""; background: url("../../assets/images/_pages/wellen/welle_weiss.png") no-repeat; background-position: left top !important; background-size: 100% 100%; width: 100%; height: 60px; left: 0px; display: block; margin-top: -60px; } .homepage_sectionstyle_01 .fullfield { background-color: #fff; } .homepage_sectionstyle_01 .fullfield .fullfield_content { max-width: 1488px; margin: 0px auto 0px auto; text-align: center !important; } @media screen and (min-width: 992px) { .homepage_sectionstyle_01 .fullfield .fullfield_content { margin: 20px auto 0px auto; } } .homepage_sectionstyle_01 .fullfield .trustmobile h3 { color: #222 !important; } .homepage_sectionstyle_01 .fullfield h1 { font-size: 1.9rem; color: #404756 !important; margin-left: 50px !important; margin-top: 20px; } @media screen and (min-width: 992px) { .homepage_sectionstyle_01 .fullfield h1 { font-size: 4rem; } } .homepage_sectionstyle_01 .fullfield h4 { margin-top: 40px; color: #404756; font-stretch: normal; font-size: 1rem; font-weight: normal; text-align: center; } @media screen and (min-width: 992px) { .homepage_sectionstyle_01 .fullfield h4 { font-size: 1.8rem; margin: 20px 50px 20px 20px; } } .homepage_sectionstyle_01 .fullfield .button { margin: 0px 50px; display: flex; justify-content: center; float: none; font-size: 1rem; } .homepage_sectionstyle_01 .fullfield .button a { color: #404756; } @media screen and (min-width: 992px) { .homepage_sectionstyle_01 .fullfield .button { margin: 30px 20px 50px 50px; float: right; font-size: 1.5rem; padding: 0 20px; } } .site__content_free .homepage_sectionstyle_01 { margin-top: 100px !important; } @media screen and (min-width: 992px) { .site__content_free .homepage_sectionstyle_01 { margin-top: 50px !important; } } .homepage_sectionstyle_02 { margin-top: 10px !important; } .homepage_sectionstyle_02 .imagefield { height: 350px; background: url("../../assets/images/_pages/fullpages/the-last-reflection-0a361200-6ffe-45a5-8da5-4e22be1b9403.jpeg") no-repeat; background-position: center !important; background-size: cover; background-position: center; } @media screen and (min-width: 992px) { .homepage_sectionstyle_02 .imagefield { height: 400px; } } .homepage_sectionstyle_02 .imagefield h1 { font-size: 1.9rem; color: #fff; margin-top: 50px; } @media screen and (min-width: 992px) { .homepage_sectionstyle_02 .imagefield h1 { font-size: 4rem; } } .homepage_sectionstyle_02 .fullfield::before { content: ""; background: url("../../assets/images/_pages/wellen/welle_04.png") no-repeat; background-position: left top !important; background-size: 100% 100%; width: 100%; height: 60px; left: 0px; display: block; margin-top: -60px; } .homepage_sectionstyle_02 .fullfield { background-color: #222; } .homepage_sectionstyle_02 .fullfield h1 { font-size: 1.9rem; color: #fff; font-weight: normal; margin-left: 50px; margin-top: 20px; } @media screen and (min-width: 992px) { .homepage_sectionstyle_02 .fullfield h1 { font-size: 4rem; } } .homepage_sectionstyle_02 .fullfield h4 { margin-top: 40px; color: #fff; font-stretch: normal; font-size: 1rem; } @media screen and (min-width: 992px) { .homepage_sectionstyle_02 .fullfield h4 { font-size: 1.5rem; } } .homepage_sectionstyle_02 .fullfield .button { margin: 30px 50px 50px 50px; display: flex; justify-content: center; float: none; } .homepage_sectionstyle_02 .fullfield .button a { color: #404756; } @media screen and (min-width: 992px) { .homepage_sectionstyle_02 .fullfield .button { float: right; } } .homepage_sectionstyle_03 { margin-top: 10px !important; } .homepage_sectionstyle_03 .imagefield { height: 350px; background: url("../../assets/images/_pages/fullpages/face2face-5e5bbbf8-786c-4696-a775-1a9d9c256fd7.jpeg") no-repeat; background-position: center center !important; background-size: cover; background-position: center; } @media screen and (min-width: 992px) { .homepage_sectionstyle_03 .imagefield { height: 400px; } } .homepage_sectionstyle_03 .imagefield h1 { font-size: 1.9rem; color: #fff; font-weight: normal; margin-top: 50px; } @media screen and (min-width: 992px) { .homepage_sectionstyle_03 .imagefield h1 { font-size: 4rem; } } .homepage_sectionstyle_03 .fullfield::before { content: ""; background: url("../../assets/images/_pages/wellen/welle_08.png") no-repeat; background-position: left top !important; background-size: 100% 100%; width: 100%; height: 60px; left: 0px; display: block; margin-top: -60px; } .homepage_sectionstyle_03 .fullfield { background-color: #7BC22F; } .homepage_sectionstyle_03 .fullfield h1 { font-size: 1.9rem; color: #fff; font-weight: normal; margin-left: 50px; margin-top: 20px; } @media screen and (min-width: 992px) { .homepage_sectionstyle_03 .fullfield h1 { font-size: 4rem; } } .homepage_sectionstyle_03 .fullfield h4 { margin-top: 40px; color: #fff; font-stretch: normal; font-size: 1rem; } @media screen and (min-width: 992px) { .homepage_sectionstyle_03 .fullfield h4 { font-size: 1.5rem; } } .homepage_sectionstyle_03 .fullfield .button { margin: 30px 50px 50px 50px; display: flex; justify-content: center; float: none; } .homepage_sectionstyle_03 .fullfield .button a { color: #404756; } @media screen and (min-width: 992px) { .homepage_sectionstyle_03 .fullfield .button { float: right; } } .homepage_sectionstyle_04 { margin-top: 10px !important; } .homepage_sectionstyle_04 .imagefield { height: 350px; background: url("../../assets/images/_pages/fullpages/fotoschule6.jpg") no-repeat; background-position: center !important; background-size: cover; } @media screen and (min-width: 992px) { .homepage_sectionstyle_04 .imagefield { height: 400px; } } .homepage_sectionstyle_04 .imagefield h1 { font-size: 1.9rem; color: #404756; font-weight: normal; margin-top: 190px; text-shadow: 1px 1px #404756; } @media screen and (min-width: 992px) { .homepage_sectionstyle_04 .imagefield h1 { font-size: 4rem; margin-top: 50px; } } .homepage_sectionstyle_04 .fullfield::before { content: ""; background: url("../../assets/images/_pages/wellen/welle_04.png") no-repeat; background-position: left top !important; background-size: 100% 100%; width: 100%; height: 60px; left: 0px; display: block; margin-top: -60px; } .homepage_sectionstyle_04 .fullfield { background-color: #222; } .homepage_sectionstyle_04 .fullfield h1 { font-size: 1.9rem; color: #fff; font-weight: normal; margin-left: 50px; margin-top: 20px; } @media screen and (min-width: 992px) { .homepage_sectionstyle_04 .fullfield h1 { font-size: 4rem; } } .homepage_sectionstyle_04 .fullfield h4 { margin-top: 40px; color: #fff; font-size: 1rem; font-stretch: normal; } @media screen and (min-width: 992px) { .homepage_sectionstyle_04 .fullfield h4 { font-size: 1.5rem; } } .homepage_sectionstyle_04 .fullfield .button { margin: 30px 50px 50px 50px; display: flex; justify-content: center; float: none; } .homepage_sectionstyle_04 .fullfield .button a { color: #404756; } @media screen and (min-width: 992px) { .homepage_sectionstyle_04 .fullfield .button { float: right; } } .homepage_sectionstyle_05 { margin-top: 10px !important; } .homepage_sectionstyle_05 .imagefield { display: flex; flex-direction: column; height: 350px; background: url("../../assets/images/_pages/fullpages/episodeheader.jpg") no-repeat; background-position: center center !important; background-size: cover; background-position: center; } .homepage_sectionstyle_05 .imagefield img { margin: 20px auto 0 auto; width: 180px; width: 180px; filter: drop-shadow(2px 10px 10px #404756); } @media screen and (min-width: 992px) { .homepage_sectionstyle_05 .imagefield img { width: 280px; height: 280px; } } .homepage_sectionstyle_05 .imagefield .picons { display: flex; flex-direction: row; justify-content: center; margin-bottom: 50px; margin-top: 20px; text-align: center; } .homepage_sectionstyle_05 .imagefield .picons img { width: 50px; height: 50px; margin: 10px; } .homepage_sectionstyle_05 .imagefield .picons p { font-size: 0.6rem; color: #fff; text-align: center; } @media screen and (min-width: 992px) { .homepage_sectionstyle_05 .imagefield .picons { justify-content: left; margin-left: 35px; margin-top: 0px; } .homepage_sectionstyle_05 .imagefield .picons img { width: 50px; height: 50px; margin: 10px 10px 2px 10px; filter: none; } } @media screen and (min-width: 992px) { .homepage_sectionstyle_05 .imagefield { height: 400px; } } .homepage_sectionstyle_05 .imagefield h1 { font-size: 1.9rem; color: #fff; font-weight: normal; margin-top: 50px; text-shadow: 15px 5px 15px #404756; } @media screen and (min-width: 992px) { .homepage_sectionstyle_05 .imagefield h1 { position: absolute; font-size: 4rem; margin-left: 50px; } } .homepage_sectionstyle_05 .fullfield { background-color: #531C1C; display: flex; flex-direction: column; justify-content: space-between; } .homepage_sectionstyle_05 .fullfield h1 { font-size: 1.9rem; color: #fff; font-weight: normal; margin-left: 50px; margin-top: 20px; } @media screen and (min-width: 992px) { .homepage_sectionstyle_05 .fullfield h1 { font-size: 4rem; } } .homepage_sectionstyle_05 .fullfield .aktuelle-podcast-folge small { color: #fff; } @media screen and (min-width: 992px) { .homepage_sectionstyle_05 .fullfield { flex-direction: row; } .homepage_sectionstyle_05 .fullfield .aktuelle-podcast-folge { width: 720px; margin-top: 20px; } } .homepage_sectionstyle_05 .fullfield h4 { margin-top: 40px; color: #fff; font-size: 1rem; font-stretch: normal; } @media screen and (min-width: 992px) { .homepage_sectionstyle_05 .fullfield h4 { font-size: 1.5rem; } } .homepage_sectionstyle_05 .fullfield .button { margin: 30px 50px 50px 50px; display: flex; justify-content: center; float: none; } .homepage_sectionstyle_05 .fullfield .button a { color: #404756; } @media screen and (min-width: 992px) { .homepage_sectionstyle_05 .fullfield .button { float: right; } } .homepage_sectionstyle_06 { margin-top: 10px !important; } .homepage_sectionstyle_06 .imagefield { height: 350px; background: url("../../assets/images/_pages/fullpages/fotografieren-lernen-fotokurse.jpeg") no-repeat; background-position: center !important; background-size: cover; background-position: center; } @media screen and (min-width: 992px) { .homepage_sectionstyle_06 .imagefield { height: 400px; } } .homepage_sectionstyle_06 .imagefield h1 { font-size: 1.9rem; color: #fff; font-weight: normal; margin-top: 50px; } @media screen and (min-width: 992px) { .homepage_sectionstyle_06 .imagefield h1 { font-size: 4rem; } } .homepage_sectionstyle_06 .fullfield { background-color: #222; } .homepage_sectionstyle_06 .fullfield h1 { font-size: 1.9rem; color: #fff; font-weight: normal; margin-left: 50px; margin-top: 20px; } @media screen and (min-width: 992px) { .homepage_sectionstyle_06 .fullfield h1 { font-size: 4rem; } } .homepage_sectionstyle_06 .fullfield h4 { margin-top: 40px; color: #fff; font-size: 1rem; font-stretch: normal; } @media screen and (min-width: 992px) { .homepage_sectionstyle_06 .fullfield h4 { font-size: 1.5rem; } } .homepage_sectionstyle_06 .fullfield .button { margin: 30px 50px 50px 50px; display: flex; justify-content: center; float: none; } .homepage_sectionstyle_06 .fullfield .button a { color: #404756; } @media screen and (min-width: 992px) { .homepage_sectionstyle_06 .fullfield .button { float: right; } } .homepage_sectionstyle_07 { margin-top: 10px !important; } .homepage_sectionstyle_07 .imagefield { height: 350px; background: url("../../assets/images/_pages/fullpages/bellezas-de-cuba_fotowettwerbe.jpeg") no-repeat; background-position: top !important; background-size: cover; background-position: center; } @media screen and (min-width: 992px) { .homepage_sectionstyle_07 .imagefield { height: 400px; } } .homepage_sectionstyle_07 .imagefield h1 { font-size: 1.9rem; color: #fff; font-weight: normal; margin-top: 50px; } @media screen and (min-width: 992px) { .homepage_sectionstyle_07 .imagefield h1 { font-size: 4rem; } } .homepage_sectionstyle_07 .fullfield::before { content: ""; background: url("../../assets/images/_pages/wellen/welle_03.png") no-repeat; background-position: left top !important; background-size: 100% 100%; width: 100%; height: 60px; left: 0px; display: block; margin-top: -60px; } .homepage_sectionstyle_07 .fullfield { background-color: #222; } .homepage_sectionstyle_07 .fullfield h1 { font-size: 1.9rem; color: #fff; font-weight: normal; margin-left: 50px; margin-top: 20px; } @media screen and (min-width: 992px) { .homepage_sectionstyle_07 .fullfield h1 { font-size: 4rem; } } .homepage_sectionstyle_07 .fullfield h4 { margin-top: 40px; color: #fff; font-size: 1rem; font-stretch: normal; } @media screen and (min-width: 992px) { .homepage_sectionstyle_07 .fullfield h4 { font-size: 1.5rem; } } .homepage_sectionstyle_07 .fullfield .button { margin: 30px 50px 50px 50px; display: flex; justify-content: center; float: none; } .homepage_sectionstyle_07 .fullfield .button a { color: #404756; } @media screen and (min-width: 992px) { .homepage_sectionstyle_07 .fullfield .button { float: right; } } .homepage_sectionstyle_08 { margin-top: 10px !important; } .homepage_sectionstyle_08 .imagefield { display: flex; height: 350px; background: url("../../assets/images/_pages/fullpages/news3.jpg") no-repeat; background-position: top center !important; background-size: cover; } @media screen and (min-width: 992px) { .homepage_sectionstyle_08 .imagefield { background-position: center right !important; } } .homepage_sectionstyle_08 .imagefield img { margin: 20px auto 0 auto; width: 200px; height: 200px; } @media screen and (min-width: 992px) { .homepage_sectionstyle_08 .imagefield img { width: 300px; height: 300px; } } @media screen and (min-width: 992px) { .homepage_sectionstyle_08 .imagefield { height: 400px; } } .homepage_sectionstyle_08 .imagefield h1 { font-size: 1.9rem; color: #404756; font-weight: normal; margin-top: 200px; } @media screen and (min-width: 992px) { .homepage_sectionstyle_08 .imagefield h1 { font-size: 4rem; margin-top: 50px; } } .homepage_sectionstyle_08 .fullfield::before { content: ""; background: url("../../assets/images/_pages/wellen/welle_01.png") no-repeat; background-position: left top !important; background-size: 100% 100%; width: 100%; height: 60px; left: 0px; display: block; margin-top: -60px; } .homepage_sectionstyle_08 .fullfield { background-color: #39a9e0; } .homepage_sectionstyle_08 .fullfield h1 { font-size: 1.9rem; color: #fff; font-weight: normal; margin-left: 50px; margin-top: 20px; } @media screen and (min-width: 992px) { .homepage_sectionstyle_08 .fullfield h1 { font-size: 4rem; } } .homepage_sectionstyle_08 .fullfield h4 { margin-top: 40px; color: #fff; font-size: 1rem; font-stretch: normal; } @media screen and (min-width: 992px) { .homepage_sectionstyle_08 .fullfield h4 { font-size: 1.5rem; } } .homepage_sectionstyle_08 .fullfield .button { margin: 30px 50px 50px 50px; display: flex; justify-content: center; float: none; } .homepage_sectionstyle_08 .fullfield .button a { color: #404756; } @media screen and (min-width: 992px) { .homepage_sectionstyle_08 .fullfield .button { float: right; } } .homepage_sectionstyle_09 { margin-top: 10px !important; } .homepage_sectionstyle_09 .imagefield { height: 350px; background: url("../../assets/images/_pages/fullpages/premium2024.jpg") no-repeat; background-position: center !important; background-size: cover; background-position: center; } @media screen and (min-width: 992px) { .homepage_sectionstyle_09 .imagefield { background-position: top right !important; } } .homepage_sectionstyle_09 .imagefield img { width: 100px; height: 100px; margin: 50px auto; } @media screen and (min-width: 992px) { .homepage_sectionstyle_09 .imagefield img { width: 60px; height: 60px; margin: 0px; } } @media screen and (min-width: 992px) { .homepage_sectionstyle_09 .imagefield { height: 400px; } } .homepage_sectionstyle_09 .imagefield h1 { font-size: 1.9rem; color: #fff; font-weight: normal; margin-top: 190px; } @media screen and (min-width: 992px) { .homepage_sectionstyle_09 .imagefield h1 { font-size: 4rem; margin-top: 50px; } } .homepage_sectionstyle_09 .fullfield::before { content: ""; background: url("../../assets/images/_pages/wellen/welle_pb.png") no-repeat; background-position: left top !important; background-size: 100% 100%; width: 100%; height: 60px; left: 0px; display: block; margin-top: -60px; } .homepage_sectionstyle_09 .fullfield { background-color: #c3a24f; } .homepage_sectionstyle_09 .fullfield h1 { font-size: 1.9rem; color: #fff; font-weight: normal; margin-left: 50px; margin-top: 20px; } @media screen and (min-width: 992px) { .homepage_sectionstyle_09 .fullfield h1 { font-size: 4rem; } } .homepage_sectionstyle_09 .fullfield h4 { margin-top: 40px; color: #fff; font-size: 1rem; font-stretch: normal; } @media screen and (min-width: 992px) { .homepage_sectionstyle_09 .fullfield h4 { font-size: 1.5rem; } } .homepage_sectionstyle_09 .fullfield .button { margin: 30px 50px 50px 50px; display: flex; justify-content: center; float: none; } .homepage_sectionstyle_09 .fullfield .button a { color: #404756; } @media screen and (min-width: 992px) { .homepage_sectionstyle_09 .fullfield .button { margin: 30px 50px 50px 50px; float: right; } } .header_homepage { position: fixed; top: 0; left: 0; width: 100%; height: 100px; background-color: #222; z-index: 100; } .header_homepage li { list-style: none; } .header_homepage .navbar-form { border: 0px !important; background: #3b3b3b; } .header_homepage form { padding: 0px; margin-right: 5px; background: #3b3b3b; margin-top: 10px; border-color: #222; height: 27px; } .header_homepage form .input-group-btn:last-child > .btn { height: 30px; background: #3b3b3b; border-top-right-radius: 9px !important; border-bottom-right-radius: 9px !important; } .header_homepage form input[type=search] { max-height: 30px; border-radius: 8px; } .header_homepage .input-group { width: 150px; background-color: #222; margin-bottom: -1px; } .header_homepage .header_homepage_content { display: flex; flex-direction: row; justify-content: space-between; } .header_homepage .header_homepage_content .iconnavi { display: flex; flex-direction: row; justify-content: space-between; width: 100%; } .header_homepage .header_homepage_content .iconnavi .icons { display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; width: 50px; } .header_homepage .header_homepage_content .iconnavi .icons p { color: #fff; margin: 0px; font-size: 0.5rem; text-transform: uppercase; } .header_homepage .header_homepage_content .iconnavi .icons p a { color: #fff; margin: 0px; } .header_homepage .header_homepage_content .iconnavi .icons img { width: 25px; margin: 5px 0px; } @media screen and (min-width: 992px) { .header_homepage .header_homepage_content .iconnavi .icons img { width: 30px; margin: 0px; } } .header_homepage .header_homepage_content .iconnavi :last-child { margin-right: 5px; } .header_homepage .logo { margin-top: 18px; width: 110px; height: auto; } @media screen and (min-width: 992px) { .header_homepage .logo { margin-top: 20px; width: 200px; } } .cta2022 { margin-bottom: -4rem; } .cta { text-align: center; min-height: 18rem; padding-top: 3rem; background-color: #fff; background-image: url("/styleguide/img/bg-cta.jpg"); background-position: bottom center; background-repeat: no-repeat; background-size: cover; overflow: hidden; } .cta { padding-bottom: 56px; } @media screen and (min-width: 640px) { .cta { padding-bottom: calc(13.75vw - 32px); } } @media screen and (min-width: 2560px) { .cta { padding-bottom: 320px; } } .cta__content { padding: 0 1.5rem; margin: 0 auto; } .usercopyright { width: 100%; text-align: right; padding-top: 10px; padding-right: 10px; } .usercopyright a { font-size: 0.6rem; color: #fff; } .homepage_sectionstyle_10 { margin-top: 10px !important; } .homepage_sectionstyle_10 .imagefield { height: 350px; background: url("../../assets/images/_pages/fullpages/melis-kleine-fotoschule-ab65d058-fe3a-4fa3-9bf7-35277a21ce83.jpeg") no-repeat; background-position: center !important; background-size: cover; } @media screen and (min-width: 992px) { .homepage_sectionstyle_10 .imagefield { height: 400px; } } .homepage_sectionstyle_10 .imagefield h1 { font-size: 1.9rem; color: #fff; font-weight: normal; margin-top: 190px; text-shadow: 15px 5px 15px #404756; } @media screen and (min-width: 992px) { .homepage_sectionstyle_10 .imagefield h1 { font-size: 4rem; margin-top: 50px; } } .homepage_sectionstyle_10 .fullfield { background-color: #920b0b; padding-bottom: 40px; } .homepage_sectionstyle_10 .fullfield p { color: #fff; } .homepage_sectionstyle_10 .fullfield h1 { font-size: 1.9rem; color: #fff; font-weight: normal; margin-left: 50px; margin-top: 20px; } @media screen and (min-width: 992px) { .homepage_sectionstyle_10 .fullfield h1 { font-size: 4rem; } } .homepage_sectionstyle_10 .fullfield h4 { margin-top: 40px; color: #fff; font-weight: normal; font-size: 1rem; } .homepage_sectionstyle_10 .fullfield h4 a { font-weight: normal; } @media screen and (min-width: 992px) { .homepage_sectionstyle_10 .fullfield h4 { font-size: 1.5rem; } } .homepage_sectionstyle_10 .fullfield .usertitlemobile { font-size: 1.5rem; font-weight: bold; color: #fff; margin: 10px 50px 0px 50px; } .homepage_sectionstyle_10 .fullfield .usertitlemobile a { color: #fff; } .homepage_sectionstyle_10 .fullfield .usertitlemobile a img { width: 20px; height: 20px; margin-bottom: 7px; } .homepage_sectionstyle_10 .fullfield .usertextmobile { margin: 5px 50px 20px 50px; } .homepage_sectionstyle_10 .fullfield .usertextmobile a { color: #fff; } .homepage_sectionstyle_10 .fullfield .subtitle-user { font-size: 2rem; font-weight: bold; } .homepage_sectionstyle_10 .fullfield .button { margin: 10px 50px; display: flex; justify-content: center; float: none; } .homepage_sectionstyle_10 .fullfield .button a { color: #404756; } @media screen and (min-width: 992px) { .homepage_sectionstyle_10 .fullfield .button { margin: 20px 0px 0px 0px; float: right; } } .trustmobile { display: flex; flex-direction: row; text-align: center; margin: 50px 10px 50px 10px; justify-content: space-between; } .trustmobile img { width: 50px !important; height: 50px !important; margin-bottom: 10px !important; } .trustmobile h3 { font-size: 0.7rem !important; color: #fff; } @media screen and (min-width: 992px) { .trustmobile { display: none; } } .hp-flags .icons img { width: 50px; height: 50px; margin-bottom: 10px; margin-top: 10px; } .hp-flags h3 { font-size: 1.2rem !important; } @media screen and (min-width: 992px) { .hp-flags .icons img { width: 100px; height: 100px; margin-bottom: 20px; margin-top: 0px; } .hp-flags h3 { font-size: 1.5rem !important; } } nav.navbar .fcx-mobile-register { margin: 0px; } .ad_block { background-color: #000; padding: 0px 0px 0px 50px; color: #fff; display: flex; flex-direction: column-reverse; } @media screen and (min-width: 992px) { .ad_block { flex-direction: row; align-items: stretch; } } .ad_block .ad_text { padding: 50px 50px 50px 0px; } .ad_block .ad_text h4 { color: #39a9e0; } .ad_block .ad_text h1 { font-weight: bold; } .ad_block .ad_text .logoleiste { max-height: 63px; } .ad_block .ad_text .logoleiste2 { max-height: 50px; } .ad_block .ad_image { text-align: right; } .ad_block .ad_image img { max-width: 100%; } @media screen and (min-width: 992px) { .ad_block .ad_image img { max-width: 500px; } } .ad_sectionstyle_01 { margin-top: 10px !important; } .ad_sectionstyle_01 .imagefield { height: 350px; background: url("../../assets/images/_pages/fullpages/photopia_fc_banner_startseite.jpg") no-repeat; background-size: cover; background-position: top right !important; } @media screen and (min-width: 992px) { .ad_sectionstyle_01 .imagefield { background-position: top right !important; } } .ad_sectionstyle_01 .imagefield img { margin-left: 50px; margin-top: 20px; width: 700px; height: auto; } @media screen and (min-width: 992px) { .ad_sectionstyle_01 .imagefield { height: 400px; } } .ad_sectionstyle_01 .imagefield h1 { font-size: 1.9rem; color: #fff; font-weight: normal; margin-top: 190px; } @media screen and (min-width: 992px) { .ad_sectionstyle_01 .imagefield h1 { font-size: 4rem; margin-top: 50px; } } .ad_sectionstyle_01 .imagefield h2 { font-size: 1.5rem; color: #fff; margin-left: 50px; } @media screen and (min-width: 992px) { .ad_sectionstyle_01 .imagefield h2 { font-size: 3rem; } } .ad_sectionstyle_01 .imagefield h4 { font-size: 0.8rem; color: #fff; margin-left: 50px; } @media screen and (min-width: 992px) { .ad_sectionstyle_01 .imagefield h4 { font-size: 1.8rem; } } .ad_sectionstyle_01 .fullfield { background-color: #0D2435; } .ad_sectionstyle_01 .fullfield h1 { font-size: 1.9rem; color: #fff; font-weight: normal; margin-left: 50px; margin-top: 20px; } @media screen and (min-width: 992px) { .ad_sectionstyle_01 .fullfield h1 { font-size: 4rem; } } .ad_sectionstyle_01 .fullfield h2 { color: #fff; margin-left: 50px; font-size: 1.5rem; } @media screen and (min-width: 992px) { .ad_sectionstyle_01 .fullfield h2 { font-size: 3rem; } } .ad_sectionstyle_01 .fullfield h4 { margin-top: 40px; color: #fff; font-size: 1rem; } @media screen and (min-width: 992px) { .ad_sectionstyle_01 .fullfield h4 { font-size: 1.5rem; } } .ad_sectionstyle_01 .fullfield img { margin-left: 50px; margin-top: 20px; width: 300px; height: auto; } .ad_sectionstyle_01 .fullfield .button { margin: 30px 50px 50px 50px; display: flex; justify-content: center; float: none; } .ad_sectionstyle_01 .fullfield .button a { color: #404756; } @media screen and (min-width: 992px) { .ad_sectionstyle_01 .fullfield .button { margin: 30px 50px 50px 50px; float: right; } } .ad-logo-block { background-color: #000; margin-top: -20px; padding-bottom: 20px; text-align: center; } .ad-logo-block img { margin-left: auto !important; margin-right: auto; margin-top: 0px !important; } .ad_sectionstyle_22jahre { margin-top: 10px !important; } .ad_sectionstyle_22jahre .imagefield { height: 350px; background: url("../../assets/images/_pages/fullpages/startseite_22jahre.jpg") no-repeat; background-size: cover; background-position: top left !important; border: 3px solid #BF9C38; } @media screen and (min-width: 992px) { .ad_sectionstyle_22jahre .imagefield { background-position: top right !important; } } .ad_sectionstyle_22jahre .imagefield img { margin-left: 50px; margin-top: 20px; width: 700px; height: auto; } @media screen and (min-width: 992px) { .ad_sectionstyle_22jahre .imagefield { height: 400px; } } .ad_sectionstyle_22jahre .imagefield h1 { font-size: 1.9rem; color: #BF9C38; font-weight: normal; margin-top: 130px; } @media screen and (min-width: 992px) { .ad_sectionstyle_22jahre .imagefield h1 { font-size: 4rem; text-align: center !important; } } .ad_sectionstyle_22jahre .imagefield h2 { font-size: 1.5rem; color: #000; margin-left: 50px; } @media screen and (min-width: 992px) { .ad_sectionstyle_22jahre .imagefield h2 { font-size: 2.5rem; text-align: center !important; } } .ad_sectionstyle_22jahre .imagefield h4 { font-size: 0.8rem; color: #fff; margin-left: 50px; } @media screen and (min-width: 992px) { .ad_sectionstyle_22jahre .imagefield h4 { font-size: 1.8rem; } } .ad_sectionstyle_22jahre .fullfield { background-color: #BF9C38; } .ad_sectionstyle_22jahre .fullfield h1 { font-size: 1.9rem; color: #fff; font-weight: normal; margin-top: 100px; } @media screen and (min-width: 992px) { .ad_sectionstyle_22jahre .fullfield h1 { font-size: 4rem; } } .ad_sectionstyle_22jahre .fullfield h2 { color: #fff; margin-left: 50px; font-size: 1.9rem; margin-top: 20px; } @media screen and (min-width: 992px) { .ad_sectionstyle_22jahre .fullfield h2 { font-size: 3rem; } } .ad_sectionstyle_22jahre .fullfield h3 { color: #fff; margin-left: 50px; font-size: 1.3rem; margin-top: 20px; font-weight: bold; } @media screen and (min-width: 992px) { .ad_sectionstyle_22jahre .fullfield h3 { font-size: 1.8rem; margin-top: 20px; } } .ad_sectionstyle_22jahre .fullfield h4 { margin-top: 20px; color: #fff; font-size: 1rem; } @media screen and (min-width: 992px) { .ad_sectionstyle_22jahre .fullfield h4 { font-size: 1.5rem; } } .ad_sectionstyle_22jahre .fullfield img { margin-left: 50px; margin-top: 20px; width: 300px; height: auto; } .ad_sectionstyle_22jahre .fullfield .button { margin: 30px 50px 50px 50px; background-color: #D55500; display: flex; justify-content: center; float: none; } .ad_sectionstyle_22jahre .fullfield .button a { color: #404756; } @media screen and (min-width: 992px) { .ad_sectionstyle_22jahre .fullfield .button { margin: 30px 50px 50px 50px; float: left; font-size: 1.5rem; } } .ad_sectionstyle_22jahre .fullfield .ad_two_options { display: flex; flex-direction: column; } @media screen and (min-width: 992px) { .ad_sectionstyle_22jahre .fullfield .ad_two_options { flex-direction: row; flex-grow: 2; } } @media screen and (min-width: 992px) { .ad_sectionstyle_22jahre .fullfield .ad_two_options div { width: 50%; } } .adfree-infoblog { text-align: center; padding: 50px 0px; width: 75%; } @media screen and (min-width: 992px) { .adfree-infoblog { padding: 50px !important; width: 100%; } } .adfree-infoblog h1 { padding-bottom: 30px; margin-left: 0px !important; font-weight: normal; } .adfree-infoblog h2.title { font-size: 1.2rem; font-weight: normal; } @media screen and (min-width: 992px) { .adfree-infoblog h2.title { font-size: 1.5rem; } } .adfree-infoblog h3.title { font-size: 1.2rem; } @media screen and (min-width: 992px) { .adfree-infoblog h3.title { font-size: 1.5rem; } } .homepage_sectionstyle_adfree_start { margin-top: 45px !important; } @media screen and (min-width: 992px) { .homepage_sectionstyle_adfree_start { margin-top: 0px !important; } } .homepage_sectionstyle_adfree_start .imagefield { height: 350px; background: url("../../assets/images/_pages/fullpages/adfree_header.jpg") no-repeat; background-position: top center !important; background-size: cover; background-position: center; } @media screen and (min-width: 992px) { .homepage_sectionstyle_adfree_start .imagefield { height: 480px; } } .homepage_sectionstyle_adfree_start .imagefield h1 { font-size: 1.9rem; font-weight: normal; color: #fff; margin-top: 50px; margin-left: 10px; margin-right: 10px; text-align: center; } @media screen and (min-width: 992px) { .homepage_sectionstyle_adfree_start .imagefield h1 { font-size: 4.5rem; margin-top: 260px; } } .homepage_sectionstyle_adfree_start .fullfield::before { content: ""; background: url("../../assets/images/_pages/wellen/welle_09.png") no-repeat; background-position: left top !important; background-size: 100% 100%; width: 100%; height: 60px; left: 0px; display: block; margin-top: -60px; } .homepage_sectionstyle_adfree_start .fullfield { background-color: #8A2124; } .homepage_sectionstyle_adfree_start .fullfield h1 { font-size: 1.9rem; color: #fff !important; margin-left: 50px !important; font-weight: normal; margin-top: 20px; } @media screen and (min-width: 992px) { .homepage_sectionstyle_adfree_start .fullfield h1 { font-size: 4rem; } } .homepage_sectionstyle_adfree_start .fullfield h4 { margin-top: 40px; color: #fff; font-size: 1rem; } @media screen and (min-width: 992px) { .homepage_sectionstyle_adfree_start .fullfield h4 { font-size: 1.5rem; } } .homepage_sectionstyle_adfree_start .fullfield .button { margin: 30px 50px 20px 50px; display: flex; justify-content: center; float: none; } .homepage_sectionstyle_adfree_start .fullfield .button img { margin-right: 5px; } .homepage_sectionstyle_adfree_start .fullfield .button a { color: #404756; } @media screen and (min-width: 992px) { .homepage_sectionstyle_adfree_start .fullfield .button { margin: 30px 50px 50px 50px; float: right; font-size: 1.8rem; padding: 0 20px; } } .titel-clean-01 { background-color: #0D2435; padding: 20px 0px; } .titel-clean-01 h1 { color: #fff; } .homepage_sectionstyle_adfree_01 { margin-top: 10px !important; } .homepage_sectionstyle_adfree_01 .imagefield { height: 350px; background: url("../../assets/images/_pages/fullpages/adfree_panorama.png") no-repeat; background-position: bottom center !important; background-size: cover; } @media screen and (min-width: 992px) { .homepage_sectionstyle_adfree_01 .imagefield { height: 400px; } } .homepage_sectionstyle_adfree_01 .imagefield h1 { font-size: 1.9rem; color: #fff; margin-top: 190px; text-shadow: 15px 5px 15px #404756; } @media screen and (min-width: 992px) { .homepage_sectionstyle_adfree_01 .imagefield h1 { font-size: 4rem; margin-top: 50px; } } .homepage_sectionstyle_adfree_01 .fullfield { background-color: #0D2435; padding-bottom: 40px; } .homepage_sectionstyle_adfree_01 .fullfield p { color: #fff; } .homepage_sectionstyle_adfree_01 .fullfield h1 { font-size: 1.9rem; color: #fff; margin-left: 50px; margin-top: 20px; } @media screen and (min-width: 992px) { .homepage_sectionstyle_adfree_01 .fullfield h1 { font-size: 4rem; } } .homepage_sectionstyle_adfree_01 .fullfield h4 { margin-top: 40px; color: #fff; font-size: 1rem; } @media screen and (min-width: 992px) { .homepage_sectionstyle_adfree_01 .fullfield h4 { font-size: 1.5rem; } } .homepage_sectionstyle_adfree_01 .fullfield .usertitlemobile { font-size: 1.5rem; font-weight: bold; color: #fff; margin: 10px 50px 0px 50px; } .homepage_sectionstyle_adfree_01 .fullfield .usertitlemobile a { color: #fff; } .homepage_sectionstyle_adfree_01 .fullfield .usertitlemobile a img { width: 20px; height: 20px; margin-bottom: 7px; } .homepage_sectionstyle_adfree_01 .fullfield .usertextmobile { margin: 5px 50px 20px 50px; } .homepage_sectionstyle_adfree_01 .fullfield .usertextmobile a { color: #fff; } .homepage_sectionstyle_adfree_01 .fullfield .subtitle-user { font-size: 2rem; font-weight: bold; } .homepage_sectionstyle_adfree_01 .fullfield .button { margin: 30px 50px 15px 50px; display: flex; justify-content: center; float: none; } .homepage_sectionstyle_adfree_01 .fullfield .button a { color: #404756; } @media screen and (min-width: 992px) { .homepage_sectionstyle_adfree_01 .fullfield .button { float: right; } } .homepage_sectionstyle_adfree_02 { margin-top: 10px !important; } .homepage_sectionstyle_adfree_02 .imagefield { display: flex; height: 350px; background: url("../../assets/images/_pages/fullpages/professional2.png") no-repeat; background-position: top center !important; background-size: cover; } @media screen and (min-width: 992px) { .homepage_sectionstyle_adfree_02 .imagefield { background-position: center right !important; } } .homepage_sectionstyle_adfree_02 .imagefield img { margin: 20px auto 0 auto; width: 200px; height: 200px; } @media screen and (min-width: 992px) { .homepage_sectionstyle_adfree_02 .imagefield img { width: 300px; height: 300px; } } @media screen and (min-width: 992px) { .homepage_sectionstyle_adfree_02 .imagefield { height: 400px; } } .homepage_sectionstyle_adfree_02 .imagefield h1 { font-size: 1.9rem; color: #fff; margin-top: 200px; text-shadow: 15px 5px 15px #404756; } @media screen and (min-width: 992px) { .homepage_sectionstyle_adfree_02 .imagefield h1 { font-size: 4rem; margin-top: 50px; } } .homepage_sectionstyle_adfree_02 .fullfield::before { content: ""; background: url("../../assets/images/_pages/wellen/welle_01.png") no-repeat; background-position: left top !important; background-size: 100% 100%; width: 100%; height: 60px; left: 0px; display: block; margin-top: -60px; } .homepage_sectionstyle_adfree_02 .fullfield { background-color: #39a9e0; } .homepage_sectionstyle_adfree_02 .fullfield h1 { font-size: 1.9rem; color: #fff; margin-left: 50px; margin-top: 20px; } @media screen and (min-width: 992px) { .homepage_sectionstyle_adfree_02 .fullfield h1 { font-size: 4rem; } } .homepage_sectionstyle_adfree_02 .fullfield h4 { margin-top: 40px; color: #fff; font-size: 1rem; } @media screen and (min-width: 992px) { .homepage_sectionstyle_adfree_02 .fullfield h4 { font-size: 1.5rem; } } .homepage_sectionstyle_adfree_02 .fullfield .button { margin: 30px 50px 50px 50px; display: flex; justify-content: center; float: none; } .homepage_sectionstyle_adfree_02 .fullfield .button a { color: #404756; } @media screen and (min-width: 992px) { .homepage_sectionstyle_adfree_02 .fullfield .button { float: right; } } .adfree-trust { text-align: center; padding: 0px 0px; width: 75%; } @media screen and (min-width: 992px) { .adfree-trust { padding: 50px !important; width: 100%; } } .adfree-trust h1 { padding-bottom: 30px; margin-left: 0px !important; } .adfree-trust h3.title { font-size: 1rem; } @media screen and (min-width: 992px) { .adfree-trust h3.title { font-size: 1.5rem; } } .homepage_cta_button { text-align: center !important; } .homepage_cta_button .button { margin: 30px 0px; justify-content: center; font-size: 1rem; max-width: 800px; } .homepage_cta_button .button img { float: left; margin-right: 5px; margin-top: 5px; } .homepage_cta_button .button a { color: #404756; } @media screen and (min-width: 992px) { .homepage_cta_button .button { margin: 30px 50px 50px 50px; font-size: 1.8rem; padding: 10px 20px; } } .homepage_cta_button_2 { text-align: center !important; } .homepage_cta_button_2 .button { margin: 30px 0px; justify-content: center; font-size: 1rem; max-width: 80%; } .homepage_cta_button_2 .button img { float: left; margin-right: 5px; margin-top: 5px; } .homepage_cta_button_2 .button a { color: #404756; } @media screen and (min-width: 992px) { .homepage_cta_button_2 .button { margin: 30px 50px 50px 50px; font-size: 1.8rem; padding: 10px 20px; max-width: 900px; } } .adfree-benefits { margin: 20px 0px; display: flex; flex-direction: column; justify-content: center; } @media screen and (min-width: 992px) { .adfree-benefits { margin: 50px 0px; flex-direction: row; } } .adfree-benefits h2.title { font-size: 1.2rem; font-weight: bold; } @media screen and (min-width: 992px) { .adfree-benefits h2.title { font-size: 3rem; margin: 80px 0px; } } .adfree-benefits h2.title img { box-shadow: none !important; transform: rotate(0deg) !important; margin: 20px 0px 20px 0px; } .adfree-benefits img { max-width: 100%; box-shadow: 8px 8px 8px 8px rgba(64, 71, 86, 0.5); margin: 20px 0px 0px 0px; } @media screen and (min-width: 992px) { .adfree-benefits img { max-width: 600px; max-height: 420px; margin: 20px 0px 20px 50px; } } .ad_sectionstyle_xiaomi .imagefield { max-height: 600px; background: url("../../assets/images/_pages/fullpages/xiaomi.png") repeat; } .ad_sectionstyle_xiaomi .imagefield a:hover { cursor: pointer !important; } .ad_sectionstyle_xiaomi .imagefield .mi-logo { margin: 15px; width: 100%; } .ad_sectionstyle_xiaomi .imagefield .mi-logo img { width: 7%; height: auto; } .ad_sectionstyle_xiaomi .imagefield .xiaomi-slogan-smart { margin: 15px auto; text-align: center; } .ad_sectionstyle_xiaomi .imagefield .xiaomi-visual { text-align: center; } .ad_sectionstyle_xiaomi .imagefield .ad_content { display: flex !important; flex-direction: column; justify-content: center; width: 100%; } @media screen and (min-width: 992px) { .ad_sectionstyle_xiaomi .imagefield { height: 420px; background: url("../../assets/images/_pages/fullpages/xiaomi.png") no-repeat; } .ad_sectionstyle_xiaomi .imagefield .mi-logo { margin: 15px; width: 100%; } .ad_sectionstyle_xiaomi .imagefield .mi-logo img { width: 3% !important; height: auto; } .ad_sectionstyle_xiaomi .imagefield .xiaomi-slogan-desk { margin-left: auto; margin-right: auto; } .ad_sectionstyle_xiaomi .imagefield .xiaomi-visual { text-align: right; } .ad_sectionstyle_xiaomi .imagefield .ad_content { display: flex !important; flex-direction: row; justify-content: space-between; width: 100%; margin-top: 23px; } } .ad_sectionstyle_easter23 a { display: block; position: absolute; height: 100%; } .ad_sectionstyle_easter23 .easter_logo { max-width: 280px; } .ad_sectionstyle_easter23 .imagefield { background: url("../../assets/images/_pages/fullpages/easter23.png") no-repeat, #9889CB; background-position: top right; } @media screen and (min-width: 1079px) { .ad_sectionstyle_easter23 .imagefield { height: 420px; } .ad_sectionstyle_easter23 .imagefield .easter_logo { max-width: 400px; } } .ad_sectionstyle_easter23 .imagefield .ad_content { display: flex !important; flex-direction: column; width: 100%; height: 100%; } .ad_sectionstyle_easter23 .imagefield .ad_content h2 { color: #fff; font-size: 3rem; text-transform: uppercase; font-weight: bold; padding: 480px 10px 0 0; } .ad_sectionstyle_easter23 .imagefield .ad_content p { color: #fff; font-size: 1.2rem; margin: 0.5rem 0; padding-left: 10px; } .ad_sectionstyle_easter23 .imagefield .ad_content a { color: #FFD355; font-size: 1.2rem; margin: 0 0 2.5rem 0; position: relative; padding-left: 10px; } @media screen and (min-width: 1079px) { .ad_sectionstyle_easter23 .imagefield .ad_content { width: 100%; } .ad_sectionstyle_easter23 .imagefield .ad_content h2 { padding-top: 110px; } .ad_sectionstyle_easter23 .imagefield .ad_content p { font-size: 1.5rem; } .ad_sectionstyle_easter23 .imagefield .ad_content a { font-size: 1.5rem; margin: 0 0 0.5rem 0; padding-left: 100px; } } .ad_sectionstyle_easter23 span { text-decoration: line-through; } .ad_sectionstyle_excire a { display: block; height: 100%; } .ad_sectionstyle_excire .cfoto_logo { max-width: 200px; margin-bottom: 5px; } @media screen and (min-width: 1079px) { .ad_sectionstyle_excire .cfoto_logo { max-width: 300px; } } .ad_sectionstyle_excire .imagefield { background: url("../../assets/images/_pages/fullpages/Excire_startseite_back.jpg"); background-position: bottom left; display: flex; flex-direction: column-reverse; width: 100%; padding-left: 20px; } @media screen and (min-width: 1079px) { .ad_sectionstyle_excire .imagefield { background-position: bottom center; height: 420px; padding-left: 50px; flex-direction: row; } } .ad_sectionstyle_excire .imagefield .ad_content { display: flex !important; flex-direction: column; width: 100%; height: 100%; padding-bottom: 100px; } .ad_sectionstyle_excire .imagefield .ad_content h2 { color: #000; font-size: 1.7rem; text-transform: uppercase; font-weight: bold; padding: 20px 10px 0 0; } .ad_sectionstyle_excire .imagefield .ad_content h3 { color: #E2061A; font-size: 1.5rem; text-transform: uppercase; font-weight: bold; } .ad_sectionstyle_excire .imagefield .ad_content p { color: #000; font-size: 1.2rem; margin-top: 0px; } .ad_sectionstyle_excire .imagefield .ad_content a { color: #FFD355; font-size: 1.2rem; margin: 0 0 2.5rem 0; position: relative; padding-left: 10px; } .ad_sectionstyle_excire .imagefield .ad_content .button { background-color: #E2061A; color: #fff; max-width: 300px; } @media screen and (min-width: 1079px) { .ad_sectionstyle_excire .imagefield .ad_content { width: 100%; padding-bottom: 0px; } .ad_sectionstyle_excire .imagefield .ad_content h2 { font-size: 3rem; padding-top: 80px; } .ad_sectionstyle_excire .imagefield .ad_content h3 { font-size: 2.2rem; } .ad_sectionstyle_excire .imagefield .ad_content p { font-size: 1.5rem; } } .ad_sectionstyle_excire .imagefield .excire_product { padding: 75px 100px 0 0; text-align: center; } .ad_sectionstyle_excire .imagefield .excire_product img { max-height: 300px; } @media screen and (min-width: 1079px) { .ad_sectionstyle_excire .imagefield .excire_product img { max-height: 450px; } } .ad_sectionstyle_excire span { text-decoration: line-through; } .ad_sectionstyle_photopia23 a { display: block; height: 100%; } .ad_sectionstyle_photopia23 .imagefield { background: url("../../assets/images/_pages/banner/photopia_gruen.jpg") no-repeat; background-color: #161616; background-position: bottom center; background-size: 150%; display: flex; flex-direction: column-reverse; width: 100%; padding-left: 20px; padding-right: 20px; height: 600px; } .ad_sectionstyle_photopia23 .imagefield .ph23_top { margin-top: 20px; width: 100%; display: flex; flex-direction: column-reverse; } .ad_sectionstyle_photopia23 .imagefield .ph23_top .ph23_date img { margin-top: 20px; } .ad_sectionstyle_photopia23 .imagefield .ph23_bottom { width: 100%; text-align: right; vertical-align: bottom; margin-bottom: 20px; } .ad_sectionstyle_photopia23 .imagefield .ph23_bottom img { max-width: 100px; } @media screen and (min-width: 1079px) { .ad_sectionstyle_photopia23 .imagefield { background-position: top center !important; background-size: 100%; height: 420px; padding-left: 50px; padding-right: 50px; flex-direction: row; } .ad_sectionstyle_photopia23 .imagefield .ph23_top { flex-direction: row; justify-content: space-between; margin-top: 50px; } .ad_sectionstyle_photopia23 .imagefield .ph23_top .ph23_date img { margin-top: 0px; margin-bottom: 30px; } } .ad_sectionstyle_photopia23 .imagefield .ad_content { display: flex !important; flex-direction: column; width: 100%; height: 100%; justify-content: space-between; } .ad_sectionstyle_photopia23 .imagefield .ad_content h2 { color: #000; font-size: 1.7rem; text-transform: uppercase; font-weight: bold; padding: 20px 10px 0 0; } .ad_sectionstyle_photopia23 .imagefield .ad_content h3 { color: #E2061A; font-size: 1.5rem; text-transform: uppercase; font-weight: bold; } .ad_sectionstyle_photopia23 .imagefield .ad_content p { color: #000; font-size: 1.2rem; margin-top: 0px; } .ad_sectionstyle_photopia23 .imagefield .ad_content a { color: #FFD355; font-size: 1.2rem; margin: 0 0 2.5rem 0; position: relative; padding-left: 10px; } .ad_sectionstyle_photopia23 .imagefield .ad_content .button { background-color: #E2061A; color: #fff; max-width: 300px; } @media screen and (min-width: 1079px) { .ad_sectionstyle_photopia23 .imagefield .ad_content { width: 100%; padding-bottom: 0px; } .ad_sectionstyle_photopia23 .imagefield .ad_content h2 { font-size: 3rem; padding-top: 80px; } .ad_sectionstyle_photopia23 .imagefield .ad_content h3 { font-size: 2.2rem; } .ad_sectionstyle_photopia23 .imagefield .ad_content p { font-size: 1.5rem; } } .ad_sectionstyle_photopia23 .imagefield .excire_product { padding: 75px 100px 0 0; text-align: center; } .ad_sectionstyle_photopia23 .imagefield .excire_product img { max-height: 300px; } @media screen and (min-width: 1079px) { .ad_sectionstyle_photopia23 .imagefield .excire_product img { max-height: 450px; } } .ad_sectionstyle_photopia23 span { text-decoration: line-through; } .logout_content { text-align: center; margin: 40px 0px; } .logout_content .title { font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif !important; color: #404756; font-weight: bold; font-style: normal; } .logout_content p { font-size: 1.2rem; color: #39a9e0; font-weight: bold; margin: 10px 0px; } .logout_tipp { font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif !important; color: #404756; font-weight: bold; font-style: normal; } .ad_sectionstyle_viewfindr a { display: block; height: 100%; } .ad_sectionstyle_viewfindr .cfoto_logo { max-width: 200px; margin-bottom: 5px; } @media screen and (min-width: 1079px) { .ad_sectionstyle_viewfindr .cfoto_logo { max-width: 300px; } } .ad_sectionstyle_viewfindr .imagefield { background: url("../../assets/images/_pages/banner/viewfindr_wetter.jpg"); background-position: bottom center; display: flex; flex-direction: column-reverse; width: 100%; padding-left: 20px; } @media screen and (min-width: 1079px) { .ad_sectionstyle_viewfindr .imagefield { background-position: bottom center; height: 420px; padding-left: 50px; flex-direction: row; } } .ad_sectionstyle_viewfindr .imagefield .ad_content { display: flex !important; flex-direction: column; width: 100%; height: 100%; padding-bottom: 100px; } .ad_sectionstyle_viewfindr .imagefield .ad_content h2 { color: #000; font-size: 1.7rem; text-transform: uppercase; font-weight: bold; padding: 20px 10px 0 0; } .ad_sectionstyle_viewfindr .imagefield .ad_content h3 { color: #E2061A; font-size: 1.5rem; text-transform: uppercase; font-weight: bold; } .ad_sectionstyle_viewfindr .imagefield .ad_content p { color: #fff; font-size: 1.2rem; margin-top: 0px; } .ad_sectionstyle_viewfindr .imagefield .ad_content a { color: #FFD355; font-size: 1.2rem; margin: 0 0 2.5rem 0; position: relative; padding-left: 10px; } .ad_sectionstyle_viewfindr .imagefield .ad_content .button { background-color: #E2061A; color: #fff; max-width: 300px; } .ad_sectionstyle_viewfindr .imagefield .ad_content .viewfindr_header { padding-top: 20px; padding-bottom: 20px; max-width: 300px; } @media screen and (min-width: 1079px) { .ad_sectionstyle_viewfindr .imagefield .ad_content .viewfindr_header { padding-top: 80px; max-width: 600px; } } @media screen and (min-width: 1079px) { .ad_sectionstyle_viewfindr .imagefield .ad_content { width: 100%; padding-bottom: 0px; } .ad_sectionstyle_viewfindr .imagefield .ad_content h2 { font-size: 3rem; padding-top: 80px; } .ad_sectionstyle_viewfindr .imagefield .ad_content h3 { font-size: 2.2rem; } .ad_sectionstyle_viewfindr .imagefield .ad_content p { font-size: 1.5rem; } } .ad_sectionstyle_viewfindr .imagefield .viewfindr_stoerer { padding: 50px 0 0 0; text-align: center; } .ad_sectionstyle_viewfindr .imagefield .viewfindr_stoerer img { max-height: 300px; } @media screen and (min-width: 1079px) { .ad_sectionstyle_viewfindr .imagefield .viewfindr_stoerer { padding: 20px 100px 0 0; } .ad_sectionstyle_viewfindr .imagefield .viewfindr_stoerer img { max-height: 550px; } } .ad_sectionstyle_viewfindr span { text-decoration: line-through; } .ad_sectionstyle_blackfriday23 a { display: block; position: relative; height: 100%; } .ad_sectionstyle_blackfriday23 .color-gelb { color: #F3A500 !important; text-decoration: none; } .ad_sectionstyle_blackfriday23 .bf_logo { max-width: 180px; padding-top: 50px; padding-bottom: 10px; } @media screen and (min-width: 1079px) { .ad_sectionstyle_blackfriday23 .bf_logo { max-width: 280px; padding-top: 0; padding-bottom: 0; } } .ad_sectionstyle_blackfriday23 .bf_steorer { max-width: 250px; } .ad_sectionstyle_blackfriday23 .imagefield { background: url("../../assets/images/_pages/fullpages/blackfriday2023_teaser.jpg") no-repeat, #000; background-position: top left; } @media screen and (min-width: 1079px) { .ad_sectionstyle_blackfriday23 .imagefield { height: 420px; } .ad_sectionstyle_blackfriday23 .imagefield .bf_logo { max-width: 250px; } } .ad_sectionstyle_blackfriday23 .imagefield .ad_content { padding: 50px; display: flex !important; flex-direction: column-reverse; width: 100%; height: 100%; } @media screen and (min-width: 700px) { .ad_sectionstyle_blackfriday23 .imagefield .ad_content { flex-direction: row; justify-content: space-between; padding-left: 50px; padding-top: 100px; } } @media screen and (min-width: 1079px) { .ad_sectionstyle_blackfriday23 .imagefield .ad_content { flex-direction: row; justify-content: space-between; padding-left: 150px; padding-top: 100px; } } .ad_sectionstyle_blackfriday23 .imagefield .ad_content h2 { color: #fff; font-size: 4rem; text-transform: uppercase; font-weight: bold; line-height: 0.9; } @media screen and (min-width: 1079px) { .ad_sectionstyle_blackfriday23 .imagefield .ad_content h2 { font-size: 5.2rem; } } .ad_sectionstyle_blackfriday23 .imagefield .ad_content p { color: #fff; font-size: 1.2rem; margin: 0.5rem 0; } .ad_sectionstyle_blackfriday23 .imagefield .ad_content a { color: #FFD355; font-size: 1.2rem; margin: 0 0 2.5rem 0; position: relative; padding-left: 10px; } @media screen and (min-width: 1079px) { .ad_sectionstyle_blackfriday23 .imagefield .ad_content { width: 100%; } .ad_sectionstyle_blackfriday23 .imagefield .ad_content h2 { padding-top: 10px; } .ad_sectionstyle_blackfriday23 .imagefield .ad_content p { font-size: 1.5rem; } .ad_sectionstyle_blackfriday23 .imagefield .ad_content a { font-size: 1.5rem; margin: 0 0 0.5rem 0; } } .ad_sectionstyle_blackfriday23 span { text-decoration: line-through; } .ad_sectionstyle_finnlines a { display: block; height: 100%; } .ad_sectionstyle_finnlines .imagefield { background: url("../../assets/images/_pages/banner/finnlines.jpeg"); background-position: bottom center; width: 100%; } @media screen and (min-width: 1079px) { .ad_sectionstyle_finnlines .imagefield { height: 500px; flex-direction: row; } } .ad_sectionstyle_finnlines .imagefield .welle_finnlines { background-image: url("../../assets/images/_pages/banner/welle_finnlines.png"); background-repeat: no-repeat; background-position: bottom center; padding-left: 20px; height: 120px; } @media screen and (min-width: 1079px) { .ad_sectionstyle_finnlines .imagefield .welle_finnlines { padding-left: 50px; height: 150px; } } .ad_sectionstyle_finnlines .imagefield .welle_finnlines .finnlines_header { padding-top: 20px; padding-bottom: 20px; max-width: 150px; } @media screen and (min-width: 1079px) { .ad_sectionstyle_finnlines .imagefield .welle_finnlines .finnlines_header { padding-top: 50px; max-width: 200px; } } .ad_sectionstyle_finnlines .imagefield .content_finnlines { display: flex; padding-left: 20px; flex-direction: column-reverse; } @media screen and (min-width: 1079px) { .ad_sectionstyle_finnlines .imagefield .content_finnlines { flex-direction: row; padding-left: 50px; } } .ad_sectionstyle_finnlines .imagefield .ad_content { display: flex !important; flex-direction: column; width: 100%; height: 100%; padding-bottom: 100px; } .ad_sectionstyle_finnlines .imagefield .ad_content h4 { color: #fff; font-size: 1.7rem; font-weight: normal; text-shadow: 10px 5px 5px #4f2d14; } .ad_sectionstyle_finnlines .imagefield .ad_content p { color: #fff; font-size: 1.2rem; margin-top: 0px; text-shadow: 10px 5px 5px #4f2d14; } .ad_sectionstyle_finnlines .imagefield .ad_content a { color: #FFD355; font-size: 1.2rem; margin: 0 0 2.5rem 0; position: relative; padding-left: 10px; } .ad_sectionstyle_finnlines .imagefield .ad_content .button { background-color: #2A4E9D; color: #fff; max-width: 300px; } @media screen and (min-width: 1079px) { .ad_sectionstyle_finnlines .imagefield .ad_content { width: 100%; padding-bottom: 0px; } .ad_sectionstyle_finnlines .imagefield .ad_content h4 { margin-top: 15px; color: #fff; font-size: 3rem; line-height: 2.8rem; font-weight: normal; } .ad_sectionstyle_finnlines .imagefield .ad_content p { margin-top: 15px; font-size: 2rem; line-height: 2rem; } } .ad_sectionstyle_finnlines .imagefield .finnlines_stoerer { padding: 0px 0 10px 0; text-align: center; } .ad_sectionstyle_finnlines .imagefield .finnlines_stoerer img { height: 150px; } @media screen and (min-width: 1079px) { .ad_sectionstyle_finnlines .imagefield .finnlines_stoerer { padding: 0px 150px 0 0; } .ad_sectionstyle_finnlines .imagefield .finnlines_stoerer img { height: 300px; } } .ad_sectionstyle_finnlines span { text-decoration: line-through; } .ad_sectionstyle_RCEfoto a { display: block; height: 100%; } .ad_sectionstyle_RCEfoto .imagefield { background: url("../../assets/images/_pages/fullpages/RCE_back_mobile.jpg"); background-position: bottom right; background-size: cover; width: 100%; display: flex; flex-direction: column-reverse; } @media screen and (min-width: 900px) { .ad_sectionstyle_RCEfoto .imagefield { background: url("../../assets/images/_pages/fullpages/RCE_back.jpeg"); background-position: bottom right; height: 500px; flex-direction: row; justify-content: space-between; } } .ad_sectionstyle_RCEfoto .imagefield .RCEred { color: #F49A39; } .ad_sectionstyle_RCEfoto .imagefield .rce_logo { width: 100px; height: 100px; margin: 20px 20px 0px 20px; } @media screen and (min-width: 900px) { .ad_sectionstyle_RCEfoto .imagefield .rce_logo { width: 150px; height: 150px; margin: 50px; } } .ad_sectionstyle_RCEfoto .imagefield p { font-family: "Arial Narrow", Arial, sans-serif; font-weight: bold; font-size: 1.5rem; line-height: 1.7rem; text-transform: uppercase; color: #fff; margin: 20px 20px 220px 20px; text-shadow: 10px 5px 10px #000; } @media screen and (min-width: 900px) { .ad_sectionstyle_RCEfoto .imagefield p { font-size: 2rem; line-height: 2rem; max-width: 800px; margin: 50px; } } @media screen and (min-width: 992px) { .ad_sectionstyle_RCEfoto .imagefield p { font-size: 4rem; line-height: 4.2rem; max-width: 800px; margin: 50px; } } .ad_sectionstyle_RCEfoto2 a { display: block; height: 100%; } .ad_sectionstyle_RCEfoto2 .imagefield { border: 1px solid #888; background: url("../../assets/images/_pages/fullpages/RCE_back_mobile_02.jpg"); background-position: bottom right; background-size: cover; width: 100%; display: flex; flex-direction: column-reverse; } @media screen and (min-width: 900px) { .ad_sectionstyle_RCEfoto2 .imagefield { background: url("../../assets/images/_pages/fullpages/RCE_back_02.jpg"); background-position: bottom right; height: 500px; flex-direction: row; justify-content: space-between; } } .ad_sectionstyle_RCEfoto2 .imagefield .RCEred { color: #FE0201; } .ad_sectionstyle_RCEfoto2 .imagefield .rce_logo { width: 100px; height: 100px; margin: 20px 20px 0px 20px; } @media screen and (min-width: 900px) { .ad_sectionstyle_RCEfoto2 .imagefield .rce_logo { width: 150px; height: 150px; margin: 50px; } } .ad_sectionstyle_RCEfoto2 .imagefield p { font-family: "Arial Narrow", Arial, sans-serif; font-weight: bold; font-size: 1.5rem; line-height: 1.7rem; text-transform: uppercase; color: #000; margin: 20px 20px 220px 20px; text-shadow: 10px 5px 10px #fff; } @media screen and (min-width: 900px) { .ad_sectionstyle_RCEfoto2 .imagefield p { font-size: 2rem; line-height: 2rem; max-width: 800px; margin: 50px; } } @media screen and (min-width: 992px) { .ad_sectionstyle_RCEfoto2 .imagefield p { font-size: 4rem; line-height: 4.2rem; max-width: 800px; margin: 50px; } } .ad_sectionstyle_em2024 a { display: block; height: 100%; } .ad_sectionstyle_em2024 .imagefield { background: url("../../assets/images/_pages/premium/em2024_mobile.jpg") !important; background-position: bottom right; background-size: cover !important; width: 100%; display: flex; flex-direction: column-reverse; } @media screen and (min-width: 992px) { .ad_sectionstyle_em2024 .imagefield { background: url("../../assets/images/_pages/premium/em2024_hp.jpg") !important; background-position: bottom center; background-size: cover !important; height: 500px; flex-direction: row; justify-content: space-between; } } .ad_sectionstyle_em2024 .imagefield img { display: block; max-width: 200px; margin: 30px 0px 0px 150px; } @media screen and (min-width: 900px) { .ad_sectionstyle_em2024 .imagefield img { margin: 30px 0px 0px 300px; max-width: 300px; } } @media screen and (min-width: 900px) { .ad_sectionstyle_em2024 .imagefield img { display: none; } } @media screen and (min-width: 1400px) { .ad_sectionstyle_em2024 .imagefield img { display: block; margin: 50px 50px 0px 0px; max-width: 400px; } } .ad_sectionstyle_em2024 .imagefield .fc_logo_ad { max-width: 120px; margin: 30px 20px 0px 20px; } @media screen and (min-width: 1220px) { .ad_sectionstyle_em2024 .imagefield .fc_logo_ad { margin: 0px 20px 0px 300px; } } @media screen and (min-width: 992px) { .ad_sectionstyle_em2024 .imagefield .fc_logo_ad { max-width: 200px; margin: 30px 50px 0px 50px; } } .ad_sectionstyle_em2024 .imagefield h1 { color: #fff; font-weight: normal; font-size: 3rem; line-height: 2.8rem; margin: 20px 20px 10px 20px; text-transform: uppercase; } @media screen and (min-width: 1220px) { .ad_sectionstyle_em2024 .imagefield h1 { margin: 50px 0px 20px 300px; font-size: 4rem; line-height: 3.5rem; } } @media screen and (min-width: 992px) { .ad_sectionstyle_em2024 .imagefield h1 { margin: 50px 0px 20px 450px; font-size: 5rem; line-height: 4.5rem; } } .ad_sectionstyle_em2024 .imagefield p { font-weight: normal; font-size: 1.4rem; line-height: 1.6rem; color: #fff; margin: 20px 20px 50px 20px; } @media screen and (min-width: 1220px) { .ad_sectionstyle_em2024 .imagefield p { font-size: 1.7rem; line-height: 1.7rem; margin: 0px 20px 0px 300px; } } @media screen and (min-width: 992px) { .ad_sectionstyle_em2024 .imagefield p { font-size: 2rem; line-height: 2rem; margin: 0px 20px 0px 450px; } } .logout_sectionstyle_01 { margin-top: 10px !important; } .logout_sectionstyle_01 .imagefield { height: 350px; background: url("../../assets/images/_pages/logout/fotoschule_01.jpg") no-repeat transparent; background-position: center !important; background-size: cover; } @media screen and (min-width: 992px) { .logout_sectionstyle_01 .imagefield { height: 400px; } } .logout_sectionstyle_01 .imagefield h1 { font-size: 1.9rem; color: #fff; margin-top: 190px; text-shadow: 10px 5px 10px #404756; } @media screen and (min-width: 992px) { .logout_sectionstyle_01 .imagefield h1 { font-size: 4rem; margin-top: 50px; } } .logout_sectionstyle_01 .fullfield::before { content: ""; background: url("../../assets/images/_pages/wellen/welle_04.png") no-repeat; background-position: left top !important; background-size: 100% 100%; width: 100%; height: 60px; left: 0px; display: block; margin-top: -60px; } .logout_sectionstyle_01 .fullfield { background-color: #222; } .logout_sectionstyle_01 .fullfield h1 { font-size: 1.9rem; color: #fff; margin-left: 50px; margin-top: 20px; } @media screen and (min-width: 992px) { .logout_sectionstyle_01 .fullfield h1 { font-size: 4rem; } } .logout_sectionstyle_01 .fullfield h4 { margin-top: 40px; color: #fff; font-size: 1rem; } @media screen and (min-width: 992px) { .logout_sectionstyle_01 .fullfield h4 { font-size: 1.5rem; } } .logout_sectionstyle_01 .fullfield .button { margin: 30px 50px 50px 50px; display: flex; justify-content: center; float: none; } .logout_sectionstyle_01 .fullfield .button a { color: #404756; } @media screen and (min-width: 992px) { .logout_sectionstyle_01 .fullfield .button { float: right; } } .logout_sectionstyle_02 { margin-top: 10px !important; } .logout_sectionstyle_02 .imagefield { height: 350px; background: url("../../assets/images/_pages/logout/playboy_02.jpg") no-repeat; background-position: right; background-size: cover; } @media screen and (min-width: 992px) { .logout_sectionstyle_02 .imagefield { height: 400px; background-position: top center; } } .logout_sectionstyle_02 .imagefield h1 { font-size: 1.9rem; color: #fff; font-weight: normal !important; margin-top: 190px; } @media screen and (min-width: 992px) { .logout_sectionstyle_02 .imagefield h1 { font-size: 4rem; margin-top: 50px; font-weight: normal !important; } } .logout_sectionstyle_02 .imagefield h4 { color: #fff; font-size: 1.2rem; margin-left: 50px; margin-top: 15px; } @media screen and (min-width: 992px) { .logout_sectionstyle_02 .imagefield h4 { font-size: 1.8rem; } } .logout_sectionstyle_02 .fullfield::before { content: ""; background: url("../../assets/images/_pages/wellen/welle_pb.png") no-repeat; background-position: left top !important; background-size: 100% 100%; width: 100%; height: 60px; left: 0px; display: block; margin-top: -60px; } .logout_sectionstyle_02 .fullfield { background-color: #c3a24f; } .logout_sectionstyle_02 .fullfield h1 { font-size: 1.9rem; color: #fff; font-weight: normal; margin-left: 50px; margin-top: 20px; } @media screen and (min-width: 992px) { .logout_sectionstyle_02 .fullfield h1 { font-size: 4rem; } } .logout_sectionstyle_02 .fullfield h4 { margin-top: 20px; color: #fff; font-size: 1rem; } @media screen and (min-width: 992px) { .logout_sectionstyle_02 .fullfield h4 { margin-top: 40px; font-size: 1.5rem; } } .logout_sectionstyle_02 .fullfield .button { margin: 30px 50px 50px 50px; display: flex; justify-content: center; float: none; } .logout_sectionstyle_02 .fullfield .button a { color: #404756; } @media screen and (min-width: 992px) { .logout_sectionstyle_02 .fullfield .button { float: right; } } .logout_sectionstyle_03 { margin-top: 10px !important; } .logout_sectionstyle_03 .imagefield { height: 350px; background: url("../../assets/images/_pages/logout/voting_banner.jpg") no-repeat; background-position: right; background-size: cover; } @media screen and (min-width: 992px) { .logout_sectionstyle_03 .imagefield { height: 400px; background-position: top center; } } .logout_sectionstyle_03 .imagefield h1 { font-size: 1.9rem; color: #fff; margin-top: 190px; text-shadow: 15px 5px 15px #404756; } @media screen and (min-width: 992px) { .logout_sectionstyle_03 .imagefield h1 { font-size: 4rem; margin-top: 50px; } } .logout_sectionstyle_03 .imagefield h4 { color: #fff; font-size: 1.2rem; margin-left: 50px; margin-top: 15px; } @media screen and (min-width: 992px) { .logout_sectionstyle_03 .imagefield h4 { font-size: 1.8rem; } } .logout_sectionstyle_03 .fullfield::before { content: ""; background: url("../../assets/images/_pages/wellen/welle_sonnengelb.png") no-repeat; background-position: left top !important; background-size: 100% 100%; width: 100%; height: 60px; left: 0px; display: block; margin-top: -60px; } .logout_sectionstyle_03 .fullfield { background-color: #F3A500; } .logout_sectionstyle_03 .fullfield h1 { font-size: 1.9rem; color: #fff; margin-left: 50px; margin-top: 20px; } @media screen and (min-width: 992px) { .logout_sectionstyle_03 .fullfield h1 { font-size: 4rem; } } .logout_sectionstyle_03 .fullfield h4 { margin-top: 20px; color: #fff; font-size: 1rem; } @media screen and (min-width: 992px) { .logout_sectionstyle_03 .fullfield h4 { margin-top: 40px; font-size: 1.5rem; } } .logout_sectionstyle_03 .fullfield .button { margin: 30px 50px 50px 50px; display: flex; justify-content: center; float: none; } .logout_sectionstyle_03 .fullfield .button a { color: #404756; } @media screen and (min-width: 992px) { .logout_sectionstyle_03 .fullfield .button { float: right; } } .logout_sectionstyle_04 { margin-top: 10px !important; } .logout_sectionstyle_04 .imagefield { height: 350px; background: url("../../assets/images/_pages/fullpages/herbstsale.jpg") no-repeat; background-position: left; background-size: cover; } .logout_sectionstyle_04 .imagefield .stoerer_right { float: right; top: 0; right: 0; max-width: 200px; } @media screen and (min-width: 992px) { .logout_sectionstyle_04 .imagefield .stoerer_right { max-width: 280px; } } @media screen and (min-width: 992px) { .logout_sectionstyle_04 .imagefield { height: 400px; background-position: top left; } } .logout_sectionstyle_04 .imagefield h1 { font-size: 1.9rem; color: #fff; margin-top: 190px; } @media screen and (min-width: 992px) { .logout_sectionstyle_04 .imagefield h1 { font-size: 4rem; margin-top: 50px; text-shadow: 10px 3px 10px #5A482F; } } .logout_sectionstyle_04 .imagefield h4 { color: #fff; font-size: 1.2rem; margin-left: 50px; margin-top: 15px; } @media screen and (min-width: 992px) { .logout_sectionstyle_04 .imagefield h4 { font-size: 1.8rem; text-shadow: 10px 3px 10px #5A482F; } } .logout_sectionstyle_04 .fullfield::before { content: ""; background: url("../../assets/images/_pages/wellen/welle_sonnengelb.png") no-repeat; background-position: left top !important; background-size: 100% 100%; width: 100%; height: 60px; left: 0px; display: block; margin-top: -60px; } .logout_sectionstyle_04 .fullfield { background-color: #F3A500; } .logout_sectionstyle_04 .fullfield h1 { font-size: 1.9rem; color: #fff; margin-left: 50px; margin-top: 20px; } @media screen and (min-width: 992px) { .logout_sectionstyle_04 .fullfield h1 { font-size: 4rem; } } .logout_sectionstyle_04 .fullfield h4 { margin-top: 20px; color: #fff; font-size: 1rem; } @media screen and (min-width: 992px) { .logout_sectionstyle_04 .fullfield h4 { margin-top: 40px; font-size: 1.5rem; } } .logout_sectionstyle_04 .fullfield .button { margin: 30px 50px 50px 50px; display: flex; justify-content: center; float: none; } .logout_sectionstyle_04 .fullfield .button a { color: #404756; } @media screen and (min-width: 992px) { .logout_sectionstyle_04 .fullfield .button { float: right; } } .link_all { display: contents; } .homepage_sectionstyle_app { margin-top: 10px !important; } .homepage_sectionstyle_app .imagefield { height: 350px; background: url("../../assets/images/_pages/fullpages/fc_app.jpg") no-repeat; background-position: bottom right; background-size: cover; } .homepage_sectionstyle_app .imagefield .stoerer_right { float: right; top: 0; right: 0; max-width: 200px; } @media screen and (min-width: 992px) { .homepage_sectionstyle_app .imagefield .stoerer_right { max-width: 280px; } } @media screen and (min-width: 992px) { .homepage_sectionstyle_app .imagefield { height: 400px; background-position: top left; } } .homepage_sectionstyle_app .imagefield h1 { font-size: 1.9rem; color: #fff; font-weight: normal; margin-top: 190px; } @media screen and (min-width: 992px) { .homepage_sectionstyle_app .imagefield h1 { font-size: 4rem; margin-top: 50px; text-shadow: 10px 3px 10px #5A482F; } } .homepage_sectionstyle_app .imagefield h4 { color: #fff; font-size: 1.2rem; margin-left: 50px; margin-top: 15px; font-stretch: normal; } @media screen and (min-width: 992px) { .homepage_sectionstyle_app .imagefield h4 { font-size: 1.8rem; text-shadow: 10px 3px 10px #5A482F; } } .homepage_sectionstyle_app .fullfield::before { content: ""; background: url("../../assets/images/_pages/wellen/welle_sonnengelb.png") no-repeat; background-position: left top !important; background-size: 100% 100%; width: 100%; height: 60px; left: 0px; display: block; margin-top: -60px; } .homepage_sectionstyle_app .fullfield { background-color: #F3A500; } .homepage_sectionstyle_app .fullfield h1 { font-size: 1.9rem; color: #fff; font-weight: normal; margin-left: 50px; margin-top: 20px; } @media screen and (min-width: 992px) { .homepage_sectionstyle_app .fullfield h1 { font-size: 4rem; } } .homepage_sectionstyle_app .fullfield h4 { margin-top: 20px; color: #fff; font-size: 1rem; font-stretch: normal; } @media screen and (min-width: 992px) { .homepage_sectionstyle_app .fullfield h4 { margin-top: 40px; font-size: 1.5rem; } } .homepage_sectionstyle_app .fullfield .button { margin: 30px 50px 50px 50px; display: flex; justify-content: center; float: none; } .homepage_sectionstyle_app .fullfield .button a { color: #404756; } @media screen and (min-width: 992px) { .homepage_sectionstyle_app .fullfield .button { float: right; } } .homepage_sectionstyle_app .fullfield .appstores { margin: 10px 50px 0px 50px; display: flex; flex-direction: column; } .homepage_sectionstyle_app .fullfield .appstores h4 { margin-left: 0px; margin-right: 0px; } @media screen and (min-width: 992px) { .homepage_sectionstyle_app .fullfield .appstores { margin: 10px 30px 0px 50px; display: flex; flex-direction: row; } } .homepage_sectionstyle_app .fullfield .appstores img { min-width: 134px; } @media screen and (min-width: 992px) { .homepage_sectionstyle_app .fullfield .appstores .apple-qr { margin-right: 15px; } } .homepage_sectionstyle_app .fullfield .appstores .apphand { max-width: 200px; } .homepage_sectionstyle_app .fullfield .appstores .appbutton_mobile { display: flex; flex-direction: row; } .homepage_sectionstyle_app .fullfield .appstores .appbutton_mobile img { height: 40px; min-width: auto !important; } .ad_gutschein_xmas a { display: block; height: 100%; } .ad_gutschein_xmas .fotoschule_logo { margin-top: 50px; max-width: 200px; margin-bottom: 5px; filter: drop-shadow(#000 3px 3px 8px); } @media screen and (min-width: 1079px) { .ad_gutschein_xmas .fotoschule_logo { max-width: 300px; margin-top: 100px; } } .ad_gutschein_xmas .imagefield { background: url("../../assets/images/_pages/fullpages/gutscheine_xmas2023.jpg"); background-position: top center; display: flex; flex-direction: column-reverse; width: 100%; padding-left: 20px; } @media screen and (min-width: 1079px) { .ad_gutschein_xmas .imagefield { background-position: center center; height: 420px; padding-left: 150px; flex-direction: row; } } .ad_gutschein_xmas .imagefield .ad_content { display: flex !important; flex-direction: column; width: 100%; height: 100%; padding-bottom: 50px; } .ad_gutschein_xmas .imagefield .ad_content h2 { color: #fff; font-size: 1.7rem; text-transform: uppercase; font-weight: bold; padding: 20px 10px 0 0; } .ad_gutschein_xmas .imagefield .ad_content h3 { margin-top: 10px; color: #fff; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size: 2.5rem !important; line-height: 3rem; text-transform: uppercase; font-weight: bold; text-shadow: 10px 3px 10px #222; } @media screen and (min-width: 750px) { .ad_gutschein_xmas .imagefield .ad_content h3 { font-size: 3.5rem !important; line-height: 3rem; } } @media screen and (min-width: 1079px) { .ad_gutschein_xmas .imagefield .ad_content h3 { font-size: 4.5rem !important; line-height: 4rem; } } .ad_gutschein_xmas .imagefield .ad_content p { color: #fff; font-size: 2rem !important; margin-top: 0px; text-shadow: 10px 3px 10px #222; } .ad_gutschein_xmas .imagefield .ad_content a { color: #fff; font-size: 1.2rem; margin: 0 0 2.5rem 0; position: relative; padding-left: 10px; } @media screen and (min-width: 1079px) { .ad_gutschein_xmas .imagefield .ad_content { width: 100%; padding-bottom: 0px; } .ad_gutschein_xmas .imagefield .ad_content h2 { font-size: 3rem; padding-top: 80px; } .ad_gutschein_xmas .imagefield .ad_content h3 { font-size: 2.2rem; } .ad_gutschein_xmas .imagefield .ad_content p { font-size: 1.5rem; } } .ad_gutschein_xmas .imagefield .stars { padding: 80px 0px 0 0; text-align: center; filter: drop-shadow(#000 3px 3px 8px); } .ad_gutschein_xmas .imagefield .stars img { max-width: 300px; } @media screen and (min-width: 790px) { .ad_gutschein_xmas .imagefield .stars { padding: 30px 0px 0 0; } .ad_gutschein_xmas .imagefield .stars img { max-width: 450px; } } @media screen and (min-width: 1079px) { .ad_gutschein_xmas .imagefield .stars { padding: 50px 130px 0 0; } .ad_gutschein_xmas .imagefield .stars img { max-width: 600px; } } .ad_gutschein_xmas span { text-decoration: line-through; } .ad_gutschein_xmas_sale a { display: block; height: 100%; } .ad_gutschein_xmas_sale .fotoschule_logo { margin-top: 0px; max-width: 150px; margin-bottom: 5px; } @media screen and (min-width: 1079px) { .ad_gutschein_xmas_sale .fotoschule_logo { margin-top: 160px !important; max-width: 200px; } } .ad_gutschein_xmas_sale .imagefield { background: url("../../assets/images/_pages/fullpages/sale_xmas2023.png"); background-position: top center; display: flex; flex-direction: column-reverse; width: 100%; padding-left: 20px; } @media screen and (min-width: 1079px) { .ad_gutschein_xmas_sale .imagefield { height: 420px; padding-left: 150px; flex-direction: row; } } .ad_gutschein_xmas_sale .imagefield .ad_content { display: flex !important; flex-direction: column; width: 100%; height: 100%; padding-bottom: 50px; } .ad_gutschein_xmas_sale .imagefield .ad_content h2 { color: #fff; font-size: 1.7rem; text-transform: uppercase; font-weight: bold; padding: 20px 10px 0 0; } .ad_gutschein_xmas_sale .imagefield .ad_content h3 { margin-top: 10px; color: #fff; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size: 3.6rem !important; line-height: 3.3rem; font-weight: bold; } @media screen and (min-width: 750px) { .ad_gutschein_xmas_sale .imagefield .ad_content h3 { font-size: 3.6rem !important; line-height: 3rem; } } @media screen and (min-width: 1079px) { .ad_gutschein_xmas_sale .imagefield .ad_content h3 { font-size: 4.6rem !important; line-height: 4rem; } } .ad_gutschein_xmas_sale .imagefield .ad_content p { color: #fff; font-size: 1.5rem !important; line-height: 1.5rem; font-weight: normal; margin-top: 10px; margin-right: 15px; } .ad_gutschein_xmas_sale .imagefield .ad_content a { color: #fff; font-size: 1.2rem; margin: 0 0 2.5rem 0; position: relative; padding-left: 10px; } @media screen and (min-width: 1079px) { .ad_gutschein_xmas_sale .imagefield .ad_content { width: 100%; padding-bottom: 0px; } .ad_gutschein_xmas_sale .imagefield .ad_content h2 { font-size: 3rem; padding-top: 80px; } .ad_gutschein_xmas_sale .imagefield .ad_content h3 { font-size: 2.2rem; } .ad_gutschein_xmas_sale .imagefield .ad_content p { font-size: 2.2rem !important; line-height: 2.2rem; } } .ad_gutschein_xmas_sale .imagefield .sale_kugel { padding: 0px 40px 0 0; text-align: right; } .ad_gutschein_xmas_sale .imagefield .sale_kugel img { max-width: 150px; } @media screen and (min-width: 790px) { .ad_gutschein_xmas_sale .imagefield .sale_kugel { padding: 0px 40px 0 0; } .ad_gutschein_xmas_sale .imagefield .sale_kugel img { max-width: 200px; } } @media screen and (min-width: 1079px) { .ad_gutschein_xmas_sale .imagefield .sale_kugel { padding: 0px 130px 0 0; text-align: center; } .ad_gutschein_xmas_sale .imagefield .sale_kugel img { max-width: 200px !important; } } .ad_gutschein_xmas_sale span { text-decoration: line-through; } .ad_gutschein_xmas_sale::after { content: ""; background: url("../../assets/images/_pages/wellen/welle_neu.png") no-repeat; background-position: left top !important; background-size: 100% 100%; width: 101%; height: 90px; left: 0px; display: block; margin-top: -90px; } .ad_verlosung_xmas a { display: block; height: 100%; } .ad_verlosung_xmas .fotoschule_logo { margin-top: 0px; max-width: 150px; margin-bottom: 5px; } @media screen and (min-width: 1079px) { .ad_verlosung_xmas .fotoschule_logo { margin-top: 100px !important; max-width: 200px; } } .ad_verlosung_xmas .imagefield { background: url("../../assets/images/_pages/fullpages/verlosung_xmas.jpg"); background-position: center; display: flex; flex-direction: column-reverse; width: 100%; padding-left: 20px; } @media screen and (min-width: 1079px) { .ad_verlosung_xmas .imagefield { height: 420px; padding-left: 150px; flex-direction: row; } } .ad_verlosung_xmas .imagefield .ad_content { display: flex !important; flex-direction: column; width: 100%; height: 100%; padding-bottom: 50px; } .ad_verlosung_xmas .imagefield .ad_content h2 { color: #fff; font-size: 1.3rem; text-transform: uppercase; font-weight: bold; padding: 20px 10px 0 0; } .ad_verlosung_xmas .imagefield .ad_content h3 { margin-top: 10px; color: #C3A24F; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size: 3rem !important; line-height: 3.3rem; font-weight: bold; } @media screen and (min-width: 750px) { .ad_verlosung_xmas .imagefield .ad_content h3 { font-size: 3rem !important; line-height: 3rem; } } @media screen and (min-width: 1079px) { .ad_verlosung_xmas .imagefield .ad_content h3 { font-size: 4rem !important; line-height: 4rem; } } .ad_verlosung_xmas .imagefield .ad_content p { color: #fff; font-size: 1.2rem !important; line-height: 1.5rem; font-weight: normal; margin-top: 10px; margin-right: 15px; } .ad_verlosung_xmas .imagefield .ad_content a { color: #fff; font-size: 1.2rem; margin: 0 0 2.5rem 0; position: relative; padding-left: 10px; } @media screen and (min-width: 1079px) { .ad_verlosung_xmas .imagefield .ad_content { width: 100%; padding-bottom: 0px; } .ad_verlosung_xmas .imagefield .ad_content h2 { font-size: 3rem; padding-top: 80px; } .ad_verlosung_xmas .imagefield .ad_content h3 { font-size: 2.2rem; } .ad_verlosung_xmas .imagefield .ad_content p { font-size: 1.8rem !important; line-height: 1.8rem; } } .ad_verlosung_xmas .imagefield .sale_kugel { padding: 0px 40px 0 0; text-align: right; } .ad_verlosung_xmas .imagefield .sale_kugel img { max-width: 150px; } @media screen and (min-width: 790px) { .ad_verlosung_xmas .imagefield .sale_kugel { padding: 0px 40px 0 0; } .ad_verlosung_xmas .imagefield .sale_kugel img { max-width: 200px; } } @media screen and (min-width: 1079px) { .ad_verlosung_xmas .imagefield .sale_kugel { padding: 0px 130px 0 0; text-align: center; } .ad_verlosung_xmas .imagefield .sale_kugel img { max-width: 200px !important; } } .ad_verlosung_xmas span { text-decoration: line-through; } .standarts h1, .standarts h2, .standarts h3, .standarts h4, .standarts .title { font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-style: normal; font-weight: normal; } .standarts p { font-size: 1.125rem; } .homepage_sectionstyle_artificial_start { margin: 0px 0px 0px 0px !important; padding: 0px; max-width: 100% !important; text-align: center; } @media screen and (min-width: 992px) { .homepage_sectionstyle_artificial_start { margin: 0px 0px 60px 0px !important; } } .homepage_sectionstyle_artificial_start .button-imagefield { margin: 20px 50px; font-size: 1rem; font-weight: normal; background-color: #fff; color: #404756; } @media screen and (min-width: 992px) { .homepage_sectionstyle_artificial_start .button-imagefield { font-size: 1.5rem; margin: 20px auto; } } .homepage_sectionstyle_artificial_start .imagefield { height: 350px; background: url("../../assets/images/_pages/artificial/header_ki.jpeg") no-repeat; background-position: center !important; background-size: cover; background-position: center; } @media screen and (min-width: 992px) { .homepage_sectionstyle_artificial_start .imagefield { background-position: center !important; height: 550px; } } .homepage_sectionstyle_artificial_start .imagefield h1 { font-size: 2.5rem; font-weight: normal; color: #fff; margin-top: 50px; margin-left: 10px; margin-right: 10px; text-align: center; text-shadow: 10px 3px 10px #404756; } @media screen and (min-width: 992px) { .homepage_sectionstyle_artificial_start .imagefield h1 { font-size: 5rem; margin-top: 200px; } } .homepage_sectionstyle_artificial_start .fullfield::before { content: ""; background: url("../../assets/images/_pages/wellen/welle_weiss.png") no-repeat; background-position: left top !important; background-size: 100% 100%; width: 100%; height: 60px; left: 0px; display: block; margin-top: -60px; } .homepage_sectionstyle_artificial_start .fullfield { background-color: #fff; } .homepage_sectionstyle_artificial_start .fullfield .fullfield_content { max-width: 1488px; margin: 0px auto 0px auto; text-align: center !important; } @media screen and (min-width: 992px) { .homepage_sectionstyle_artificial_start .fullfield .fullfield_content { margin: 20px auto 0px auto; } } .homepage_sectionstyle_artificial_start .fullfield .trustmobile h3 { color: #222 !important; } .homepage_sectionstyle_artificial_start .fullfield h1 { font-size: 1.9rem; color: #404756 !important; margin-left: 50px !important; margin-top: 20px; } @media screen and (min-width: 992px) { .homepage_sectionstyle_artificial_start .fullfield h1 { font-size: 4rem; } } .homepage_sectionstyle_artificial_start .fullfield h4 { margin-top: 40px; color: #404756; font-stretch: normal; font-size: 1rem; font-weight: normal; text-align: center; } @media screen and (min-width: 992px) { .homepage_sectionstyle_artificial_start .fullfield h4 { font-size: 1.8rem; margin: 20px 50px 20px 20px; } } .homepage_sectionstyle_artificial_start .fullfield .button { margin: 0px 50px; display: flex; justify-content: center; float: none; font-size: 1rem; } .homepage_sectionstyle_artificial_start .fullfield .button a { color: #404756; } @media screen and (min-width: 992px) { .homepage_sectionstyle_artificial_start .fullfield .button { margin: 30px 20px 50px 50px; float: right; font-size: 1.5rem; padding: 0 20px; } } .title-ki { font-size: 2rem; } @media screen and (min-width: 992px) { .title-ki { font-size: 4.5rem !important; } } .artificial-infoblog { text-align: center; padding: 20px 0px; width: 75%; } @media screen and (min-width: 992px) { .artificial-infoblog { padding: 50px !important; width: 100%; } } .artificial-infoblog h1 { padding-bottom: 30px; margin-left: 0px !important; font-weight: normal; } @media screen and (min-width: 992px) { .artificial-infoblog h1 { font-size: 3rem; } } .artificial-infoblog h2.title { font-size: 1rem; font-weight: normal; } @media screen and (min-width: 992px) { .artificial-infoblog h2.title { font-size: 2rem; } } .artificial-infoblog h3.title { font-size: 1.2rem; } @media screen and (min-width: 992px) { .artificial-infoblog h3.title { font-size: 1.5rem; } } .artificial-galerie { display: flex; flex-direction: column; margin-bottom: 50px; } @media screen and (min-width: 992px) { .artificial-galerie { flex-direction: row; flex-wrap: wrap; } } .artificial-galerie .ki-artist { width: 100%; min-height: 250px; } @media screen and (min-width: 992px) { .artificial-galerie .ki-artist { width: 50%; min-height: 500px; } } .artificial-galerie .img_01 { background: url("../../assets/images/_pages/artificial/galerie_01.jpg") no-repeat; background-position: top center !important; background-size: cover; background-position: center; } .artificial-galerie .img_02 { background: url("../../assets/images/_pages/artificial/galerie_02.jpg") no-repeat; background-position: top center !important; background-size: cover; background-position: center; } .artificial-galerie .img_03 { background: url("../../assets/images/_pages/artificial/galerie_03.jpg") no-repeat; background-position: top center !important; background-size: cover; background-position: center; } .artificial-galerie .img_04 { background: url("../../assets/images/_pages/artificial/galerie_04.jpg") no-repeat; background-position: top center !important; background-size: cover; background-position: center; } .artificial-galerie .img_05 { background: url("../../assets/images/_pages/artificial/galerie_05.jpeg") no-repeat; background-position: top center !important; background-size: cover; background-position: center; } .artificial-galerie .img_06 { background: url("../../assets/images/_pages/artificial/galerie_06.jpeg") no-repeat; background-position: top center !important; background-size: cover; background-position: center; } .homepage_ad_TDF2 .imagefield { height: 350px; background: url("../../assets/images/_pages/fullpages/TagDF_homepage_mobile.jpg") no-repeat; background-position: top center !important; background-size: cover; background-position: center; border-top: 1px solid #000; border-left: 1px solid #000; border-right: 1px solid #000; } @media screen and (min-width: 992px) { .homepage_ad_TDF2 .imagefield { background: url("../../assets/images/_pages/fullpages/TagDF_homepage3.jpg") no-repeat; background-position: top center !important; height: 400px; } } .homepage_ad_TDF2 .imagefield h1 { font-size: 1.9rem; color: #000; margin-top: 50px; text-transform: uppercase; } @media screen and (min-width: 992px) { .homepage_ad_TDF2 .imagefield h1 { font-size: 3.6rem; } } .homepage_ad_TDF2 .fullfield::before { content: ""; background: url("../../assets/images/_pages/wellen/welle_weiss.png") no-repeat; background-position: left top !important; background-size: 100% 100%; width: 100%; height: 60px; left: 0px; display: block; margin-top: -60px; } .homepage_ad_TDF2 .fullfield { background-color: #fff; border-bottom: 1px solid #000; border-left: 1px solid #000; border-right: 1px solid #000; } .homepage_ad_TDF2 .fullfield h1 { font-size: 1.7rem; color: #000; font-weight: normal; margin-left: 50px; margin-top: 20px; text-transform: uppercase; } @media screen and (min-width: 992px) { .homepage_ad_TDF2 .fullfield h1 { font-size: 4rem; } } .homepage_ad_TDF2 .fullfield h4 { margin-top: 20px; color: #000; font-stretch: normal; font-size: 1rem; } @media screen and (min-width: 992px) { .homepage_ad_TDF2 .fullfield h4 { margin-top: 10px; font-size: 2.5rem; } } .homepage_ad_TDF2 .fullfield .button { margin: 30px 50px 50px 50px; display: flex; justify-content: center; float: none; background-color: #F7B500; } .homepage_ad_TDF2 .fullfield .button a { color: #404756; } @media screen and (min-width: 992px) { .homepage_ad_TDF2 .fullfield .button { float: right; } } .homepage_ad_TDF2 .fullfield .button:hover { background-color: #000 !important; color: #fff !important; } .ad_sectionstyle_aiarty a { display: block; height: 100%; } .ad_sectionstyle_aiarty .imagefield { height: 153px; background: url("../../assets/images/_pages/fullpages/aiartycompare2_mob.jpg"); background-position: top center; background-size: cover; width: 100%; display: flex; flex-direction: row; } @media screen and (min-width: 992px) { .ad_sectionstyle_aiarty .imagefield { height: 500px; background-image: url("../../assets/images/_pages/fullpages/aiartycompare3.jpg") !important; } } .ad_sectionstyle_aiarty .imagefield h2 { font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-weight: bold; font-size: 1.8rem; text-transform: uppercase; line-height: 1.9rem; color: #fff; margin: 0px 20px; text-shadow: 2px 3px 3px #000; } @media screen and (min-width: 992px) { .ad_sectionstyle_aiarty .imagefield h2 { font-size: 3rem; line-height: 3rem; margin: 100px 50px 0px 50px; max-width: 50%; } } .ad_sectionstyle_aiarty .imagefield .button { margin-top: 20px; margin-left: 50px; background-color: #3F2182; color: #fff; font-size: 1.5rem; line-height: 1.5rem; } .ad_sectionstyle_aiarty .imagefield .logo_ai { max-width: 50px; height: 80px; margin: 70px 20px 20px 20px; } @media screen and (min-width: 992px) { .ad_sectionstyle_aiarty .imagefield .logo_ai { max-width: 100px; height: 100px; margin: 20px 50px; } } .ad_sectionstyle_aiarty .fullfield { background-color: #000; padding: 20px 0px 30px 0px; display: flex; flex-direction: column-reverse; } @media screen and (min-width: 992px) { .ad_sectionstyle_aiarty .fullfield { flex-direction: row; justify-content: space-between; } } .ad_sectionstyle_aiarty .fullfield .logo_ai { max-width: 70px; height: 100px; margin: 0px 20px 0px 20px; } .ad_sectionstyle_aiarty .fullfield h4 { font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-weight: bold; font-size: 1.8rem; line-height: 1.9rem; color: #fff; margin: 0px 20px; } @media screen and (min-width: 992px) { .ad_sectionstyle_aiarty .fullfield h4 { font-size: 3rem; line-height: 3rem; margin: 10px 50px 0px 50px; } } .ad_sectionstyle_aiarty .fullfield .button { background-color: #3F2182; color: #fff; font-size: 1.2rem; line-height: 1.2rem; } .ad_sectionstyle_aiarty .fullfield .stoerer_ai { max-width: 100px; margin-right: 20px; margin-top: -50px; } @media screen and (min-width: 992px) { .ad_sectionstyle_aiarty .fullfield .stoerer_ai { max-width: 150px; margin-right: 50px; margin-top: 0px; } } .ad_sectionstyle_aiarty .fullfield .stoerer_div { text-align: right; } .ad_sectionstyle_aiarty .fullfield p { font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-weight: bold; font-size: 1.8rem; line-height: 1.8rem; color: #fff; margin: 20px 20px 0px 20px; } @media screen and (min-width: 992px) { .ad_sectionstyle_aiarty .fullfield p { font-size: 2rem; line-height: 2rem; margin: 20px 50px 0px 50px; } } .homepage_ad_autumn a { display: block; height: 100%; } .homepage_ad_autumn .imagefield { height: 600px; background: url("../../assets/images/_pages/fullpages/herbst2024.jpg"); background-position: top center; background-size: cover; width: 100%; display: flex; flex-direction: column-reverse; justify-content: flex-end; } @media screen and (min-width: 900px) { .homepage_ad_autumn .imagefield { flex-direction: row; justify-content: space-between; height: 500px; } } .homepage_ad_autumn .imagefield img { width: 250px; height: 250px; margin: 20px 20px 0px 0px; } @media screen and (min-width: 900px) { .homepage_ad_autumn .imagefield img { margin: 40px 20px 0px 20px; width: 350px; height: 350px; } } .homepage_ad_autumn .imagefield .autumn_content { margin-left: 20px; } @media screen and (min-width: 900px) { .homepage_ad_autumn .imagefield .autumn_content { margin-top: 100px; margin-left: 50px; } } .homepage_ad_autumn .imagefield h1, .homepage_ad_autumn .imagefield h3 { font-weight: normal; color: #8a3104; text-shadow: 2px 3px 3px #EDD276; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; } .homepage_ad_autumn .imagefield h3 { font-size: 1.5rem; line-height: 1.5rem; } @media screen and (min-width: 900px) { .homepage_ad_autumn .imagefield h3 { font-size: 2rem; line-height: 2rem; } } .homepage_ad_adobe_max a { display: block; height: 100%; } .homepage_ad_adobe_max .imagefield { height: 600px; background-color: #eb1000; width: 100%; display: flex; flex-direction: column-reverse; justify-content: flex-end; } @media screen and (min-width: 900px) { .homepage_ad_adobe_max .imagefield { flex-direction: row; justify-content: space-between; height: 500px; } } .homepage_ad_adobe_max .imagefield .adobe-font { margin: 20px auto 20px auto; width: 300px; height: 275px; } @media screen and (min-width: 900px) { .homepage_ad_adobe_max .imagefield .adobe-font { margin: 50px 20px 0px 50px; width: 400px; height: 375px; } } .homepage_ad_adobe_max .imagefield .adobe-visual { margin: 20px auto 20px auto; width: 300px; height: 240px; } @media screen and (min-width: 900px) { .homepage_ad_adobe_max .imagefield .adobe-visual { margin: 50px 100px 0px 50px; width: 450px; height: 390px; } } .homepage_ad_adobe_max .imagefield .autumn_content { margin-left: 20px; } @media screen and (min-width: 900px) { .homepage_ad_adobe_max .imagefield .autumn_content { margin-top: 100px; margin-left: 50px; } } .homepage_ad_adobe_max .imagefield h1, .homepage_ad_adobe_max .imagefield h3 { font-weight: normal; color: #8a3104; text-shadow: 2px 3px 3px #EDD276; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; } .homepage_ad_adobe_max .imagefield h3 { font-size: 1.5rem; line-height: 1.5rem; } @media screen and (min-width: 900px) { .homepage_ad_adobe_max .imagefield h3 { font-size: 2rem; line-height: 2rem; } } .copyright_dark { width: 100%; display: flex; justify-content: right; } .copyright_dark a { color: #0d3349; font-size: 0.6rem; width: 100%; text-align: right; padding-top: 10px; padding-right: 10px; } .copyright_white { width: 100%; display: flex; justify-content: right; } .copyright_white a { color: #fff; font-size: 0.6rem; width: 100%; text-align: right; padding-top: 10px; padding-right: 10px; } .site__content:has(.ratgeber_all) { padding-top: 50px !important; } .rg_logo img { padding-left: 20px; } @media screen and (min-width: 992px) { .rg_logo img { padding-left: 0px; } } .ratgeber_all { background: url("../../assets/images/_pages/fullpages/ratgeber2024_2.jpg") no-repeat; background-position: center left !important; background-size: cover; min-height: 100vh; width: 100%; padding: 0px; max-width: 100% !important; } .ratgeber_all .firstheader { font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; color: #fff; text-align: center; font-size: 2rem; font-weight: normal; margin-top: 30px; } @media screen and (min-width: 992px) { .ratgeber_all .firstheader { font-size: 4rem; margin-top: 120px; } } .ratgeber_all .button { font-size: 1.2rem; font-weight: normal; margin-left: auto; margin-right: auto; display: block; width: 100%; } .ratgeber_all .error_message_nl_ratgeber { display: block; color: #E64A19; font-weight: bold; font-size: 1.1rem; line-height: 1.1rem; text-align: center; } .ratgeber_all .input_nl_ratgeber { margin: 0px auto; width: 100%; } .ratgeber_all .ratgeber_small { text-align: left; font-size: 0.6rem; line-height: 0.6rem; font-weight: normal; margin-top: 10px; margin-bottom: 0px; } .ratgeber_all .ratgeber-header { font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; color: #0d3349; text-align: center; font-size: 1.3rem; font-weight: normal !important; } @media screen and (min-width: 992px) { .ratgeber_all .ratgeber-header { font-size: 2.8rem; line-height: 2.8rem; } } .ratgeber_all .ratgeber-sub { font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; color: #0d3349; text-align: center; font-size: 1rem; font-weight: normal !important; margin-top: 0px; margin-bottom: 10px; } @media screen and (min-width: 992px) { .ratgeber_all .ratgeber-sub { font-size: 1.2rem; margin-bottom: 30px; } } .ratgeber_all .ratgeberfield { background-color: #ffffff98; margin-left: 20px; margin-right: 20px; padding: 10px; color: #000; text-align: center; display: flex; flex-direction: column; margin-top: 20px; } @media screen and (min-width: 992px) { .ratgeber_all .ratgeberfield { padding: 30px; margin-left: auto; margin-right: auto; margin-top: 50px; max-width: 900px; } } .ratgeber_all .ratgeberfield .ratgeber-form { background-color: #fff; padding: 20px; width: 100%; } .ratgeber_all .ratgeberfield .ratgeber-hero { width: 100%; padding-right: 0px; } @media screen and (min-width: 992px) { .ratgeber_all .ratgeberfield .ratgeber-hero { padding-right: 20px; } } .ratgeber_all .ratgeberfield .ratgeber-hero .ratgeber-p { font-size: 0.9rem; line-height: 1rem; font-weight: normal; text-align: left; } @media screen and (min-width: 992px) { .ratgeber_all .ratgeberfield .ratgeber-hero .ratgeber-p { font-size: 1.2rem; line-height: 1.4rem; } } .ratgeber_all .ratgeberfield .usercopyright { padding-top: 0px; padding-right: 0px; } .ratgeber_all .ratgeberfield .card.card--auto { max-width: 24rem; } .ratgeber_all .ratgeberfield .card__title { font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; padding-top: 0; border-bottom: none; font-weight: bold !important; text-align: left; margin-bottom: 10px; } .ratgeber_all .ratgeberfield .security__icons { margin: 0px !important; } .ratgeber_fail { background: url("../../assets/images/_pages/fullpages/fail_03.jpg") no-repeat !important; background-position: left center !important; background-size: cover !important; min-height: 100vh; width: 100%; padding: 0px; max-width: 100% !important; } .ratgeber_fail .ratgeber-header { font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; color: #0d3349; text-align: center; font-size: 2rem; font-weight: normal !important; } @media screen and (min-width: 992px) { .ratgeber_fail .ratgeber-header { font-size: 2.5rem; line-height: 2.5rem; } } .ratgeber_fail .ratgeberfield { background-color: #ffffff98; margin-left: 20px; margin-right: 20px; padding: 10px; color: #000; text-align: center; display: flex; flex-direction: column; margin-top: 30px; } .ratgeber_fail .ratgeberfield a { color: #0d3349; } @media screen and (min-width: 992px) { .ratgeber_fail .ratgeberfield { padding: 40px; margin-left: auto; margin-right: auto; margin-top: 100px; max-width: 500px; } } .ratgeber_fail .ratgeberfield .ratgeber-form { background-color: #fff; padding: 20px; width: 100%; } .ratgeber_fail .ratgeberfield .ratgeber-hero { width: 100%; padding-right: 0px; } @media screen and (min-width: 992px) { .ratgeber_fail .ratgeberfield .ratgeber-hero { padding-right: 20px; } } .ratgeber_fail .ratgeberfield .ratgeber-hero .ratgeber-p { font-size: 0.9rem; line-height: 1rem; font-weight: normal; text-align: left; } @media screen and (min-width: 992px) { .ratgeber_fail .ratgeberfield .ratgeber-hero .ratgeber-p { font-size: 1rem; line-height: 1.2rem; } } .ratgeber_fail .ratgeberfield .ratgeber-hero ul { font-size: 0.9rem; line-height: 1rem; font-weight: normal; text-align: left; } @media screen and (min-width: 992px) { .ratgeber_fail .ratgeberfield .ratgeber-hero ul { font-size: 1rem; line-height: 1.2rem; } } .ratgeber_fail .ratgeberfield .usercopyright { padding-top: 0px; padding-right: 0px; } .ratgeber_fail .ratgeberfield .card.card--auto { max-width: 24rem; } .ratgeber_fail .ratgeberfield .card__title { font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; padding-top: 0; border-bottom: none; font-weight: bold !important; text-align: left; margin-bottom: 10px; } .ratgeber_fail .ratgeberfield .security__icons { margin: 0px !important; } .ratgebercontent_01 { padding: 50px 20px; flex-direction: column; } @media screen and (min-width: 992px) { .ratgebercontent_01 { flex-direction: row; justify-content: space-between; } } .ratgebercontent_01 .ratgeberimage_01 { width: 250px; height: 250px; border-radius: 60% 92% 70% 86%/92% 35% 115% 70%; background: url("../../assets/images/_pages/fullpages/ratgeber_03_2.jpg") no-repeat; background-size: cover; background-position: center top; margin: 20px auto 0px auto; } @media screen and (min-width: 992px) { .ratgebercontent_01 .ratgeberimage_01 { margin: auto 0px; width: 900px; height: 500px; margin-right: 50px; } } .ratgebercontent_01 h2 { margin-top: 50px; font-size: 1.2rem; font-weight: normal; color: #0d3349; } @media screen and (min-width: 992px) { .ratgebercontent_01 h2 { font-size: 2.1rem; } } .ratgebercontent_01 li { list-style-type: "➥ "; margin-left: 10px; font-size: 1rem; line-height: 1rem; padding-bottom: 10px; color: #0d3349; } @media screen and (min-width: 992px) { .ratgebercontent_01 li { font-size: 1.6rem; line-height: 1.8rem; padding-bottom: 15px; width: 900px; } } .outer:has(.ratgebercontent_02) { background-color: #0d3349 !important; } .ratgebercontent_02 { padding: 50px 20px; color: #fff; flex-direction: column-reverse; } .ratgebercontent_02 .fotograf_bubble { color: #ffffff; font-size: 0.6rem; width: 200px; } @media screen and (min-width: 992px) { .ratgebercontent_02 { flex-direction: row; justify-content: space-between; } } .ratgebercontent_02 .ratgeberimage_02 { width: 250px; height: 250px; border-radius: 70% 30% 30% 70%/60% 40% 60% 40%; background: url("../../assets/images/_pages/fullpages/ratgeber_01_4.jpg") no-repeat; background-size: cover; background-position: center; margin: 20px auto 0px auto; } @media screen and (min-width: 992px) { .ratgebercontent_02 .ratgeberimage_02 { margin: auto 0px; width: 550px; height: 400px; } } .ratgebercontent_02 h2 { margin-top: 50px; font-size: 1.2rem; font-weight: normal; } @media screen and (min-width: 992px) { .ratgebercontent_02 h2 { font-size: 2.1rem; } } .ratgebercontent_02 li { list-style-type: "✔ "; font-size: 1rem; line-height: 1rem; margin-left: 10px; padding-bottom: 10px; } @media screen and (min-width: 992px) { .ratgebercontent_02 li { font-size: 1.6rem; line-height: 1.8rem; padding-bottom: 15px; width: 760px; } } .ratgebercontent_03 { padding: 50px 20px; } @media screen and (min-width: 992px) { .ratgebercontent_03 { padding: 100px 0px; } } .ratgebercontent_03 h2 { font-size: 1.2rem; font-weight: normal; text-align: center; color: #0d3349; } @media screen and (min-width: 992px) { .ratgebercontent_03 h2 { font-size: 2.1rem; } } .ratgeber_all2 { background: url("../../assets/images/_pages/fullpages/ratgeber2024.jpg") no-repeat; background-position: center left !important; background-size: cover; background-position: center; min-height: 600px; width: 100%; padding: 0px; max-width: 100% !important; } .ratgeber_all2 .button { font-size: 1.2rem; font-weight: normal; margin-left: auto; margin-right: auto; width: 100%; word-break: keep-all; word-wrap: break-word; } .ratgeber_all2 .error_message_nl_ratgeber { display: block; color: #0d3349; font-weight: bold; font-size: 1rem; line-height: 1rem; text-align: center; } .ratgeber_all2 .input_nl_ratgeber { margin: 0px auto; width: 100%; } .ratgeber_all2 .ratgeber_small { text-align: left; font-size: 0.6rem; line-height: 0.6rem; font-weight: normal; margin-top: 10px; margin-bottom: 0px; } .ratgeber_all2 .ratgeber-header { font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; color: #fff; text-align: center; font-size: 2rem; font-weight: normal !important; margin-top: 30px; padding: 0px 20px; } @media screen and (min-width: 992px) { .ratgeber_all2 .ratgeber-header { font-size: 4rem; margin-top: 100px; } } .ratgeber_all2 .ratgeberfield { background-color: #ffffff98; margin-left: 20px; margin-right: 20px; padding: 10px; color: #000; text-align: center; display: flex; flex-direction: column; margin-top: 20px; } @media screen and (min-width: 992px) { .ratgeber_all2 .ratgeberfield { padding: 20px 30px 30px 30px; margin-left: auto; margin-right: auto; margin-top: 30px; max-width: 600px; } } .ratgeber_all2 .ratgeberfield .ratgeber-form { background-color: #fff; padding: 20px; width: 100%; } .ratgeber_all2 .ratgeberfield .ratgeber-hero { width: 100%; padding-right: 0px; } @media screen and (min-width: 992px) { .ratgeber_all2 .ratgeberfield .ratgeber-hero { padding-right: 20px; } } .ratgeber_all2 .ratgeberfield .ratgeber-hero .ratgeber-p { font-size: 1.5rem; line-height: 1.5rem; font-weight: normal; text-align: center; color: #0d3349; } @media screen and (min-width: 992px) { .ratgeber_all2 .ratgeberfield .ratgeber-hero .ratgeber-p { font-size: 2.5rem !important; line-height: 2.5rem !important; } } .ratgeber_all2 .ratgeberfield .ratgeber-hero .usercopyright { padding-top: 0px; padding-right: 0px; } .ratgeber_all2 .ratgeberfield .ratgeber-hero .card.card--auto { max-width: 24rem; } .ratgeber_all2 .ratgeberfield .ratgeber-hero .card__title { font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; padding-top: 0; border-bottom: none; font-weight: bold !important; text-align: left; margin-bottom: 10px; } .ratgeber_all2 .ratgeberfield .ratgeber-hero .security__icons { margin: 0px !important; } /*BLACK WEEK*/ .homepage_ad_blackweek { margin-top: 10px; } @media screen and (min-width: 992px) { .homepage_ad_blackweek { margin-top: 0px; } } .homepage_ad_blackweek a { display: block; height: 100%; } .homepage_ad_blackweek .imagefield { background: url("../../assets/images/_pages/premium/xmas_header_24_mobile2.jpg"); background-position: center bottom; background-size: cover; text-align: left; height: 650px; } @media screen and (min-width: 992px) { .homepage_ad_blackweek .imagefield { background: url("../../assets/images/_pages/premium/fullback_blackweek_final.jpg") !important; background-position: center center !important; background-size: cover !important; width: 100%; } } @media screen and (min-width: 900px) { .homepage_ad_blackweek .imagefield { height: 500px; } } .homepage_ad_blackweek .imagefield img { width: 120px; margin: 20px; } @media screen and (min-width: 900px) { .homepage_ad_blackweek .imagefield img { margin: 50px; width: 200px; } } .homepage_ad_blackweek .imagefield .autumn_content { margin-left: 20px; } @media screen and (min-width: 900px) { .homepage_ad_blackweek .imagefield .autumn_content { margin-top: 80px; margin-left: 50px; } } .homepage_ad_blackweek .imagefield h1 { font-size: 1.8rem; line-height: 1.8rem; font-weight: normal; color: #000; text-align: center; text-shadow: 10px 0px 10px #c3a24f; } @media screen and (min-width: 992px) { .homepage_ad_blackweek .imagefield h1 { text-align: left; font-size: 3.3rem; line-height: 3.3rem; } } .homepage_ad_blackweek .imagefield .top_h1 { font-size: 4rem; line-height: 3.5rem; font-weight: bold; } @media screen and (min-width: 992px) { .homepage_ad_blackweek .imagefield .top_h1 { font-size: 5.5rem; line-height: 5rem; margin: 50px 0px 90px 0px; } } .homepage_ad_blackweek .imagefield .h1_bigger { font-size: 2rem; color: #000; font-weight: bold; } @media screen and (min-width: 992px) { .homepage_ad_blackweek .imagefield .h1_bigger { font-size: 4.3rem; } } .homepage_ad_blackweek .imagefield h3 { font-size: 1.3rem; line-height: 1.3rem; font-weight: normal; margin-top: 20px; text-align: center; color: #000; margin-left: 0px; text-shadow: 10px 0px 10px #c3a24f; } @media screen and (min-width: 992px) { .homepage_ad_blackweek .imagefield h3 { font-size: 1.7rem; line-height: 1.7rem; text-align: left; } } .homepage_ad_blackweek .imagefield .top_h1 { font-size: 4rem; line-height: 3.5rem; font-weight: bold; } @media screen and (min-width: 992px) { .homepage_ad_blackweek .imagefield .top_h1 { font-size: 5rem; line-height: 5rem; margin: 50px 0px 60px 0px; } } .homepage_ad_blackweek .imagefield h3 { font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size: 1.3rem; line-height: 1.3rem; font-weight: normal; margin-top: 20px; text-align: center; color: #000; margin-left: 0px; text-shadow: 10px 0px 10px #c3a24f; } @media screen and (min-width: 992px) { .homepage_ad_blackweek .imagefield h3 { font-size: 1.7rem; line-height: 1.7rem; text-align: left; } } /* Xmas24 */ .homepage_ad_xmas24 a { display: block; height: 100%; } .homepage_ad_xmas24 .imagefield { height: 500px; background: url("../../assets/images/_pages/fullpages/xmas24_mobile.jpg"); background-position: top center; background-size: cover; width: 100%; display: flex; flex-direction: column-reverse; justify-content: flex-end; } @media screen and (min-width: 992px) { .homepage_ad_xmas24 .imagefield { background: url("../../assets/images/_pages/fullpages/xmas24_desktop2.jpg"); background-position: top right; flex-direction: row; justify-content: space-between; height: 450px; } } .homepage_ad_xmas24 .imagefield .fc_logo { width: 150px; } @media screen and (min-width: 992px) { .homepage_ad_xmas24 .imagefield .fc_logo { width: 250px; } } .homepage_ad_xmas24 .imagefield .stoerer_xmas { text-align: right; } .homepage_ad_xmas24 .imagefield .stoerer_xmas img { width: 150px; height: 165px; margin: 50px 20px 0px 0px; } @media screen and (min-width: 900px) { .homepage_ad_xmas24 .imagefield .stoerer_xmas img { margin: 40px 20px 0px -30px; width: 250px; height: 240px; } } @media screen and (min-width: 1488px) { .homepage_ad_xmas24 .imagefield .stoerer_xmas img { text-align: left; margin: 40px 160px 0px 20px; width: 300px; height: 330px; } } .homepage_ad_xmas24 .imagefield .autumn_content { margin-left: 20px; } @media screen and (min-width: 992px) { .homepage_ad_xmas24 .imagefield .autumn_content { margin-top: 50px; margin-left: 50px; } } .homepage_ad_xmas24 .imagefield h1, .homepage_ad_xmas24 .imagefield h3 { font-weight: lighter; color: #fff; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; } .homepage_ad_xmas24 .imagefield h1 { margin-top: 30px; font-size: 3rem; line-height: 3rem; } @media screen and (min-width: 900px) { .homepage_ad_xmas24 .imagefield h1 { margin-top: 110px; font-size: 4rem; line-height: 4rem; } } @media screen and (min-width: 1488px) { .homepage_ad_xmas24 .imagefield h1 { margin-top: 120px; font-size: 5rem !important; line-height: 5rem !important; } } .homepage_ad_xmas24 .imagefield h3 { font-size: 1.8rem; line-height: 2rem; } @media screen and (min-width: 900px) { .homepage_ad_xmas24 .imagefield h3 { font-size: 2.5rem; line-height: 2.5rem; } } @media screen and (min-width: 1488px) { .homepage_ad_xmas24 .imagefield h3 { font-size: 3rem; line-height: 3rem; } } .homepage_ad_xmas24 .imagefield h3 span { font-size: 2.5rem; line-height: 2rem; } @media screen and (min-width: 900px) { .homepage_ad_xmas24 .imagefield h3 span { font-size: 3.2rem; line-height: 2.5rem; } } @media screen and (min-width: 1488px) { .homepage_ad_xmas24 .imagefield h3 span { font-size: 4rem; line-height: 3rem; } } .pull-left { float: left; } .pull-right { float: right; } @media screen and (min-width: 992px) { .pull-left-md { float: left; } .pull-right-md { float: right; } } .cf::after { content: ""; display: table; clear: both; } .position-relative { position: relative; } .position-sticky { position: sticky; top: 0; } .position-absolute { position: absolute; } .position-fixed { position: fixed; } .display-inline { display: inline; } .display-inlineblock { display: inline-block; } .display-block { display: block; } .align-v { position: relative; top: 50%; transform: translateY(-50%); } .align-h { position: relative; left: 50%; transform: translateX(-50%); } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } @media screen and (min-width: 768px) { .text-left-sm { text-align: left; } .text-center-sm { text-align: center; } .text-right-sm { text-align: right; } } @media screen and (min-width: 992px) { .text-left-md { text-align: left; } .text-center-md { text-align: center; } .text-right-md { text-align: right; } } .capitalize { text-transform: capitalize; } .upper { text-transform: uppercase; } .lower { text-transform: lowercase; } .color-default { color: #404756; } .color-primary { color: #39a9e0; } .color-light { color: #888; } .color-grey { color: #ddd; } .color-blue { color: #39a9e0; } .color-green { color: #00C853; } .color-yellow { color: #f8c82e; } .color-red { color: #E64A19; } .color-twitter { color: #5ea0ef; } .color-facebook { color: #475995; } .color-google { color: #cb4539; } .color-googleplus { color: #dd4b39; } .color-youtube { color: #db0000; } .color-pinterest { color: #bd091c; } .color-instagram { color: #405de6; } .no-padding { padding: 0 !important; } .no-margin { margin: 0 !important; } .ma { margin: auto; } .m0a { margin: 0 auto; } .p0 { padding: 0; } .pt0 { padding-top: 0; } .pb0 { padding-bottom: 0; } .pv0 { padding-top: 0; padding-bottom: 0; } .m0 { margin: 0; } .mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; } .mv0 { margin-top: 0; margin-bottom: 0; } .p2 { padding: 3%; } .pt2 { padding-top: 3%; } .pb2 { padding-bottom: 3%; } .pv2 { padding-top: 3%; padding-bottom: 3%; } .m2 { margin: 3%; } .mt2 { margin-top: 3%; } .mb2 { margin-bottom: 3%; } .mv2 { margin-top: 3%; margin-bottom: 3%; } .p3 { padding: 2%; } .pt3 { padding-top: 2%; } .pb3 { padding-bottom: 2%; } .pv3 { padding-top: 2%; padding-bottom: 2%; } .m3 { margin: 2%; } .mt3 { margin-top: 2%; } .mb3 { margin-bottom: 2%; } .mv3 { margin-top: 2%; margin-bottom: 2%; } .pxs { padding: 1.5rem; } .ptxs { padding-top: 1.5rem; } .pbxs { padding-bottom: 1.5rem; } .pvxs { padding-top: 1.5rem; padding-bottom: 1.5rem; } .mxs { margin: 1.5rem; } .mtxs { margin-top: 1.5rem; } .mbxs { margin-bottom: 1.5rem; } .mvxs { margin-top: 1.5rem; margin-bottom: 1.5rem; } .ps { padding: 3rem; } .pts { padding-top: 3rem; } .pbs { padding-bottom: 3rem; } .pvs { padding-top: 3rem; padding-bottom: 3rem; } .ms { margin: 3rem; } .mts { margin-top: 3rem; } .mbs { margin-bottom: 3rem; } .mvs { margin-top: 3rem; margin-bottom: 3rem; } .pm { padding: 6%; } .ptm { padding-top: 6%; } .pbm { padding-bottom: 6%; } .pvm { padding-top: 6%; padding-bottom: 6%; } .mm { margin: 6%; } .mtm { margin-top: 6%; } .mbm { margin-bottom: 6%; } .mvm { margin-top: 6%; margin-bottom: 6%; } .pl { padding: 9%; } .ptl { padding-top: 9%; } .pbl { padding-bottom: 9%; } .pvl { padding-top: 9%; padding-bottom: 9%; } .ml { margin: 9%; } .mtl { margin-top: 9%; } .mbl { margin-bottom: 9%; } .mvl { margin-top: 9%; margin-bottom: 9%; } .ph { padding: 12%; } .pth { padding-top: 12%; } .pbh { padding-bottom: 12%; } .pvh { padding-top: 12%; padding-bottom: 12%; } .mh { margin: 12%; } .mth { margin-top: 12%; } .mbh { margin-bottom: 12%; } .mvh { margin-top: 12%; margin-bottom: 12%; } .img-circle { border-radius: 50%; } .group { display: flex; } .group > * { flex: 1; } .dev { padding: 1rem; border: 2px solid blue; background: #f1f1f1; } nav.navbar .fcx-mobile-message-icons { margin-top: 0px !important; } .nav > li > a > img.img-rounded { margin-bottom: 8px; } .navbar-login-session a.btn-success img { margin-bottom: 3px; } input[type=search]:focus { background-color: #3b3b3b; } .bootstrap-tagsinput input { padding: 0px; font-size: 0.85rem; } #myNavmenu .dropdown-toggle { font-size: 0.88rem; } .site__content { padding-top: 50px !important; } @media screen and (max-width: 768px) { .site__content { padding-top: 55px !important; } } .fcx-search-result-list .container-fluid { padding-left: 0px; padding-right: 0px; } .fcx-search-result-list { padding-top: 20px; } footer .footer-list a { font-size: 13px !important; } .footer-list h4 { font-size: 18px; } footer small, .small { font-size: 10px; line-height: 6px; } .fcx-dropdown-column { font-size: 0.9rem; } ul.list-inline, ol.list-inline { list-style: inside; } .list-inline { font-size: 1rem; } .list-inline > li { padding-left: 0px; display: block; } nav.navbar .badge-notification { padding: 0px 5px !important; line-height: 1.4 !important; font-weight: bold; } .fcx-mobile-list-button .btn-success img { margin-bottom: 8px !important; } .overlay { display: flex; position: absolute; width: 100%; min-height: 100%; height: auto !important; height: 100%; background-color: #222 60%; backdrop-filter: blur(2px); backdrop-filter: brightness(60%); backdrop-filter: contrast(40%); justify-content: center; align-items: first; z-index: 10000 !important; } .uploadbox--contest { display: block; width: 800px; height: max-content; background-color: #222; color: #888; text-align: center; } .uploadbox--contest p { color: #888; margin: 0 0 0.5rem; } .uploadbox--contest .uploadbox--header { padding: 20px; } .uploadbox--contest .uploadbox--header .title, .uploadbox--contest .uploadbox--header p { text-align: center; padding-right: 20px; } .uploadbox--contest .uploadbox--header .userimg { text-align: center; } .uploadbox--contest .uploadbox--image { display: flex; margin: 10px 20px 0px 20px; background-color: #000; min-height: 400px; justify-content: center; align-items: center !important; } .uploadbox--contest .upload-image { justify-content: center; align-items: center !important; } .uploadbox--contest .upload-image i { padding-bottom: 15px; color: #888 !important; width: 100%; text-align: center; } .uploadbox--contest .uploadbox--content { padding: 20px; } .uploadbox--contest .uploadbox--content .row { padding-bottom: 10px; } .uploadbox--contest .uploadbox--content input { color: #888 !important; background-color: #000; width: 100%; } .uploadbox--contest .uploadbox--content .button--dark { line-height: 1.7; } .uploadbox--contest .uploadbox--footer { border-top: 1px solid #000; } .uploadbox--contest .uploadbox--footer .uploadbox--teilnahme { padding: 10px 20px; text-align: left; display: flex; align-items: center; justify-content: center; } .uploadbox--contest .uploadbox--footer .uploadbox--teilnahme p { margin: 0px; padding: 0 0 0 5px; font-size: 0.98rem; } .uploadbox--contest .uploadbox--footer .uploadbox--teilnahme input[type=checkbox] { border: none !important; top: 0px; width: 15px !important; height: 15px !important; background-color: #000; color: #fff; } .uploadbox--contest .uploadbox--footer .uploadbox--teilnahme input[type=checkbox]:focus { outline: none !important; } .uploadbox--contest .uploadbox--footer .uploadbox--teilnahme input[type=checkbox]:checked { background-color: #fff; } .uploadbox--contest .uploadbox--footer .footnote { border-top: 1px solid #000; padding: 10px 0px; display: flex; align-items: center; justify-content: center; } .uploadbox--contest .uploadbox--footer .footnote p { font-size: 13px !important; text-align: center; } @media screen and (max-width: 768px) { #imagetags { margin-top: 10px; } } .uploadbox--contest .uploadbox--content input::placeholder { color: #888 !important; width: 100%; } .uploadbox--contest .uploadbox--header .userimg__image { width: 75px !important; height: auto; } @media screen and (max-width: 768px) { .uploadbox--contest .uploadbox--header .userimg__image { vertical-align: center; margin-bottom: 10px; } .uploadbox--contest .uploadbox--header .userimg { display: block; } .uploadbox--header { display: flex; flex-direction: column; } .uploadbox--header :nth-child(1) { order: 2; } .uploadbox--header :nth-child(2) { order: 3; } .uploadbox--header :nth-child(3) { order: 1; } } #js-contest-close-upload-modal i { float: right; } #js-contest-close-upload-modal i:hover { cursor: pointer; } .uploadbox--contest-finish .uploadbox--content { min-height: 400px; display: flex; align-items: center; justify-content: center; } .uploadbox--contest-finish .uploadbox--content h3 { color: #fff !important; } .uploadbox--contest-finish .uploadbox--content p { padding-bottom: 20px; } .contest-create { background-color: #eeeeee; margin-bottom: -80px; } .contest-create p { font-size: 16px; } .contest-create p, .contest-create h1, .contest-create h2, .contest-create h3, .contest-create h4 { color: #404756; } .contest-create .card { max-width: 320px; } /* contest create */ .disabled_blur { -webkit-filter: blur(3px); filter: blur(3px); } .contest-create__date-row { width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .contest-create__date-row .vdatetime:first-of-type { width: 100%; } .contest-create__date-row { margin: 12px 0 8px; } .contest-create__with-jury-voting { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } #contest-create { -webkit-transition: opacity 200ms; -o-transition: opacity 200ms; transition: opacity 200ms; color: #6d7278; margin: 0 0 -40px; padding-bottom: 50px; } #contest-create__head { margin: 0 50px 50px; padding-top: 50px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } #contest-create__body { margin: 0 50px; } button#contest_create_create { height: 45px; background-color: #39a9e0; color: #fff; border: 1px solid #39a9e0; border-radius: 3px; -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; font-size: 20px; font-weight: 600; padding: 0 30px; } .contest_create__is-anonym, .contest-create__with-jury-voting { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .contest_create__is-anonym label, .contest-create__with-jury-voting label { margin: 2px 0 0 8px; } .contest-create__step--right input[type=text], .contest-create__step--left input[type=text], .contest-create__step--right textarea, .contest-create__step--left textarea, .contest-create__step--right select, .contest-create__step--left select { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 3px; background-color: #fff; width: 100%; min-height: 30px; margin: 8px 0 16px; color: #404756; padding: 3px 10px; } .contest-create__step--right .vdatetime-input, .contest-create__step--left .vdatetime-input { margin: 0 0 12px !important; } .contest-create__step--right textarea, .contest-create__step--left textarea { min-height: 180px; color: #404756; } .contest-create__step--right label, .contest-create__step--left label { display: block; color: #404756; font-size: 16px; font-weight: normal; letter-spacing: 0; line-height: 19px; } .contest-create__step--right input, .contest-create__step--left input { color: #404756; } #contest-create__cat-ppu { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } #contest-create__cat-ppu select:first-of-type { width: 50%; } #contest-create__cat-ppu label { text-align: end; width: 30%; padding-top: 14px; margin-left: 16px; padding-right: 16px; } #contest-create__cat-ppu select:last-of-type { width: 20%; } .contest-create__step--left, .contest-create__step--right { padding: 25px 25px 0 0; } .grid-container__contest-create { display: grid; grid-template-columns: 100px 1fr; grid-template-rows: 2fr 2fr 2fr 1fr; grid-gap: 1px 1px; grid-template-areas: "contest-create__step--one contest-create__step-one" "contest-create__step--two contest-create__step-two" "contest-create__step--three contest-create__step-three" "contest-create__step--four contest-create__step-four"; grid-template-rows: max-content; } .contest-create__step--circle { width: 56px; height: 56px; margin: 15px 25px; background-color: #39a9e0; border-radius: 50%; color: #fff; font-size: 25px; line-height: 30px; padding: 13px; text-align: center; } .contest-create__step--vl { grid-area: contest-create__step--vl; } .contest-create__step--vl { border-left: 3px solid #39a9e0; height: inherit; margin-left: 50px; top: 0; } .contest-create__step--one { display: grid; grid-template-columns: 1fr; grid-template-rows: 100px 1fr; grid-template-areas: "." "contest-create__step--vl"; grid-area: contest-create__step--one; margin-bottom: 10px; } .contest-create__step--two { display: grid; grid-template-columns: 1fr; grid-template-rows: 100px 1fr; grid-template-areas: "." "contest-create__step--vl"; grid-area: contest-create__step--two; } .contest-create__step--three { display: grid; grid-template-columns: 1fr; grid-template-rows: 100px 1fr; grid-template-areas: "." "contest-create__step--vl"; grid-area: contest-create__step--three; } .contest-create__step--four { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100px 1fr; grid-template-areas: "." "."; grid-area: contest-create__step--four; } .contest-create__step--one, .contest-create__step--two, .contest-create__step--three, .contest-create__step--four { margin-bottom: 20px; } .contest-create__step-one, .contest-create__step-two, .contest-create__step-three, .contest-create__step-four { margin-bottom: 20px; padding-bottom: 30px; } .contest-create__step-one { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100px 1fr; grid-template-areas: "contest-create__step-one--headline contest-create__step-one--headline" "contest-create__step-one--left contest-create__step-one--right"; grid-area: contest-create__step-one; } .contest-create__step--headline span, .contest-create__step--headline p { color: #222; font-size: 16px; letter-spacing: 0; margin: 0px 0 10px 0 !important; } .contest-create__step-one--headline { grid-area: contest-create__step-one--headline; } .contest-create__step-one--left { grid-area: contest-create__step-one--left; } .contest-create__step-one--right { grid-area: contest-create__step-one--right; } .contest-create__step-two { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100px 1fr; grid-template-areas: "contest-create__step-two--headline contest-create__step-two--headline" "contest-create__step-two--left contest-create__step-two--right"; grid-area: contest-create__step-two; } .contest-create__step-two--headline { grid-area: contest-create__step-two--headline; } .contest-create__step-two--left { grid-area: contest-create__step-two--left; } .contest-create__step-two--right { grid-area: contest-create__step-two--right; } .contest-create__step-three { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100px 50px 1fr; grid-template-areas: "contest-create__step-three--headline contest-create__step-three--headline" "contest-create__step-three--slider contest-create__step-three--slider" "contest-create__step-three--left contest-create__step-three--right"; grid-area: contest-create__step-three; } .contest-create__step-three--headline { grid-area: contest-create__step-three--headline; } .contest-create__step-three--slider { grid-area: contest-create__step-three--slider; } .contest-create__step-three--left { grid-area: contest-create__step-three--left; } .contest-create__step-three--right { grid-area: contest-create__step-three--right; } .contest-create__step-four { display: grid; grid-template-columns: 1fr; grid-template-rows: 100px 1fr 1fr; grid-template-areas: "contest-create__step-four--headline" "contest-create__step-four--info" "contest-create__step-four--buttons"; grid-area: contest-create__step-four; } .contest-create__step-four--headline { grid-area: contest-create__step-four--headline; } .contest-create__step-four--info { grid-area: contest-create__step-four--info; color: #222; font-size: 16px; letter-spacing: 0; line-height: 22px; max-width: 800px; } .contest-create__step-four--buttons { grid-area: contest-create__step-four--buttons; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; padding: 0 0 25px 0; } [v-cloak] { display: none; } #contest-create .btn-primary { color: #fff; background: #39a9e0; border: 1px solid #39a9e0; } .switch-container { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; height: 44px; width: 318px; border: 1px solid #39a9e0; border-radius: 22px; background-color: #fff; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; vertical-align: middle; } .switch { display: block; margin: 3px 3px 0 0; color: #6d7278; height: 36px; width: 154px; border-radius: 18px; font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0; line-height: 36px; text-align: center; -webkit-transition: margin 200ms; -o-transition: margin 200ms; transition: margin 200ms; cursor: pointer; } .switch__slider { background-color: #39a9e0; color: #fff; position: absolute; margin-left: -150px; } .switch__slider_active { margin-left: 156px; } #contest-preview { border: 8px solid #39a9e0; padding-bottom: 50px; background-color: #fff; } .contest-preview__images { display: grid; grid-template-columns: 10fr 4fr 6fr 8fr; grid-template-rows: 1fr; grid-gap: 0 18px; grid-template-areas: ". . . ."; } .contest-view__photos { margin: 0 20px; } .contest-preview__img-placeholder { height: 185px; border-radius: 3px; background-color: #d8d8d8; } .contest-container h1 { font-family: "Vollkorn"; font-size: 52px; line-height: 73px; color: #222; margin: 0; } .h2--contest { font-family: "Vollkorn"; font-style: italic; font-size: 28px; line-height: 28px; letter-spacing: normal; color: #333; margin-top: 50px; } .contest-container h3 { font-family: "Vollkorn"; font-style: italic; color: #333; } #contest-preview > h2 { background-color: #39a9e0; color: #fff; color: #fff; margin: 0; width: 100%; min-height: 75px; text-align: center; padding-top: 10px; } .contest-view__contest_info--grid-container { display: grid; grid-template-columns: 3fr 1fr; grid-template-rows: 1fr 4fr; grid-gap: 18px 50px; grid-template-areas: "contest-view__tab-header contest-view__tab-header" "contest-view__image contest-view__status-box" "contest-view__image contest-view__initiator-box"; } .contest-view__tab-header { grid-area: contest-view__tab-header; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; } .contest-view__image { grid-area: contest-view__image; border-radius: 3px; -webkit-box-shadow: 0 20px 32px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 20px 32px 0 rgba(0, 0, 0, 0.25); } .contest-view__status-box { grid-area: contest-view__status-box; } .contest-view__initiator-box { grid-area: contest-view__initiator-box; } .fcx-gallery__item { border: 3px solid transparent; border-radius: 3px; } .fcx-gallery__item:hover { border: 3px solid #39a9e0; } .contest-placement { display: block; color: #fff; font-size: 21px; font-weight: 500; letter-spacing: 0; line-height: 25px; padding-top: 17px; text-align: center; vertical-align: center; background-color: rgba(0, 0, 0, 0.4); border: 2px solid #fff; height: 62px; width: 62px; border-radius: 31px; position: absolute; content: "1"; margin-left: -webkit-calc(50% - 30px); margin-left: calc(50% - 30px); -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; } /* initiator_box */ .initiator-box { padding: 0 24px 4px; width: 320px; border: 1px solid #e7e7e7; border-radius: 3px; border-bottom: none; -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.35); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.35); } .initiator-box__header { width: 100%; padding-top: 25px; } .initiator-box__header h1 { width: 100%; margin: 8px 0 0; } .initiator-box__header img { width: 100%; } .initiator-box__header h3 { width: 100%; margin: 0; } .initiator-box__body { padding-top: 25px; color: #888; font-size: 16px; letter-spacing: 0; line-height: 25px; } p.initiator-box__body--user-text { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; } .initiator-box__footer { padding: 24px 0; } .initiator-box__footer a { width: 100px; padding: 9px 16px; border: 1px solid #dedede; border-radius: 3px; color: #888; } #fcx-info-photographer { display: none; } .fcx-section-header { margin-top: 24px; padding: 0 10px 0 0; background-color: unset; border-bottom: unset; } #fcx-main > div.content > div:nth-child(2) > div.initiator-box > div.initiator-box__header > div > div > div > div.col-xs-12.col-md-6.text-center.text-left-md { padding-left: unset; } /* status box */ .status-box { width: 320px; border: 1px solid #e7e7e7; border-radius: 3px; border-bottom: none; -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.35); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.35); background: #fff; } .status-box__head { background-color: #fafafa; width: 100%; height: 58px; margin-bottom: 62px; } .status-box__head .calendar-sheet { margin-top: 20px; margin-left: 24px; } .status-box__body { padding: 0 24px 4px; font-size: 21px; } .status-box__status { list-style: none; padding: unset; } .status-box__status h3 { color: #333; } .status-box__status li { -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; color: #888; font-weight: 200; font-size: 16px; letter-spacing: 0; line-height: 36px; background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, #ddd), color-stop(0%, rgba(255, 255, 255, 0))); background-image: -webkit-linear-gradient(left, #ddd 50%, rgba(255, 255, 255, 0) 0%); background-image: -o-linear-gradient(left, #ddd 50%, rgba(255, 255, 255, 0) 0%); background-image: linear-gradient(to right, #ddd 50%, rgba(255, 255, 255, 0) 0%); background-position: bottom; background-size: 10px 1px; background-repeat: repeat-x; } .status-box__status li:last-of-type { background-image: none; } .status-box__status li::after { margin-right: 8px; } li.status-box__status--done::after { content: ""; font-family: "Font Awesome 5 Pro"; font-weight: 500; color: #6dd400; } li.status-box__status--open::after { content: ""; font-family: "Font Awesome 5 Pro"; font-weight: 500; color: #39a9e0; } li.status-box__status--finished { font-weight: 500; color: #333; } /* winner photos */ .winner-cards { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; } .winner-card { position: relative; height: 420px; width: 400px; margin-right: 18px; border: 1px solid #e7e7e7; border-radius: 3px; border-bottom: none; -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.35); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.35); } .winner-card__photo { display: block; height: 244px; margin: 18px; border-radius: 3px; background-color: #fafafa; background-position: center; background-repeat: no-repeat; overflow: hidden; } .winner-card_user-photo { background-repeat: no-repeat; background-position: center; background-size: cover; border: 4px solid #fff; height: 82px; width: 82px; border-radius: 41px; display: block; position: absolute; margin-top: -59px; margin-left: 158px; } .winner-card__footer { position: absolute; width: 100%; text-align: center; bottom: 0; padding-bottom: 36px; } .winner-card__footer * { display: block; } /* calendar sheet */ .calendar-color-finished { background-color: #e64a19; } .calendar-color-active { background-color: #00c853; } .calendar-color-upcoming { background-color: #39a9e0; } .calendar-sheet { position: relative; display: inline-block; border-radius: 3px; border: 2px solid #fff; background: #fff; -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.35); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.35); } .calendar-sheet__month { font-size: 13px; width: 100%; color: #fff; padding: 6px 12px; } .calendar-sheet__day { font-size: 21px; width: 100%; padding: 4px; text-align: center; } /* preview-card */ .contestcard__title { padding: 0 24px; } .contestcard__header { position: relative; text-align: left; margin: -16px -16px 0; margin: -1rem -1rem 0; overflow: hidden; } .contestcard__header .calendar-sheet { margin-top: 120px; margin-left: 24px; } .contestcard__image { position: absolute; top: 0; left: 0; width: 100%; height: 160px; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom: 1px solid #eee; background-color: #fafafa; background-position: center; background-repeat: no-repeat; background-size: 132%; overflow: hidden; } .card--contest { display: inline-block; width: 100%; padding: 16px 16px 64px; -webkit-transition: 0.3s -webkit-filter ease; -o-transition: 0.3s filter ease; transition: 0.3s filter ease, 0.3s -webkit-filter ease; } .contestcard__footer { position: absolute; text-align: center; left: 0; bottom: 0; width: 100%; } .contestcard__button { width: 50%; text-align: center; vertical-align: middle; color: #aaa; border-top: 1px solid #e7e7e7; padding: 1em; } .contestcard__button:first-of-type { border-right: 1px solid #e7e7e7; } /* calenadar-sheet */ .calendar-color-finished { background-color: #e64a19; } .calendar-color-active { background-color: #00c853; } .calendar-color-upcoming { background-color: #39a9e0; } .calendar-sheet { position: relative; display: inline-block; border-radius: 3px; border: 2px solid #fff; background: #fff; -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.35); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.35); } .calendar-sheet__month { font-size: 13px; width: 100%; color: #fff; padding: 6px 12px; } .calendar-sheet__day { font-size: 21px; width: 100%; padding: 4px; text-align: center; } /* calendar-sheet-icon */ .calendar-sheet-icon { height: 30px; width: 36px; border: 1px solid #d8d8d8; border-radius: 2px; background-color: #fff; padding: 1px; text-align: center; margin: 0 16px 0 8px; } .calendar-sheet-icon > div { background-color: #39a9e0; border-radius: 2px 2px 0 0; width: 100%; height: 8px; } .calendar-sheet-icon span { height: 18px; width: 26px; color: #333; font-size: 16px; letter-spacing: 0; line-height: 20px; } .calendar-sheet-icon--clock::after { content: ""; font-family: "Font Awesome 5 Pro"; font-weight: 500; } .spaceNone { margin-top: 0; } .spaceVeryTiny { margin-top: 3px; } .spaceTiny { margin-top: 6px; } .spaceSmall { margin-top: 10px; } .spaceMedium { margin-top: 20px; } .spaceBig { margin-top: 40px; } .spaceHuge { margin-top: 80px; } .spaceBottomNone { margin-bottom: 0; } .spaceBottomVeryTiny { margin-bottom: 3px; } .spaceBottomTiny { margin-bottom: 6px; } .spaceBottomSmall { margin-bottom: 10px; } .spaceBottomMedium { margin-bottom: 20px; } .spaceBottomBig { margin-bottom: 40px; } .spaceBottomHuge { margin-bottom: 80px; } /*! * Datepicker for Bootstrap v1.5.1 (https://github.com/eternicode/bootstrap-datepicker) * * Copyright 2012 Stefan Petre * Improvements by Andrew Rowls * Licensed under the Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0) */ .datepicker-dropdown:after, .datepicker-dropdown:before { content: ""; display: inline-block; border-top: 0; position: absolute; } .datepicker { border-radius: 4px; direction: ltr; } .datepicker-inline { width: 220px; } .datepicker.datepicker-rtl { direction: rtl; } .datepicker.datepicker-rtl table tr td span { float: right; } .datepicker-dropdown { top: 0; left: 0; padding: 4px; } .datepicker-dropdown:before { border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid rgba(0, 0, 0, 0.15); border-bottom-color: rgba(0, 0, 0, 0.2); } .datepicker-dropdown:after { border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #fff; } .datepicker-dropdown.datepicker-orient-left:before { left: 6px; } .datepicker-dropdown.datepicker-orient-left:after { left: 7px; } .datepicker-dropdown.datepicker-orient-right:before { right: 6px; } .datepicker-dropdown.datepicker-orient-right:after { right: 7px; } .datepicker-dropdown.datepicker-orient-bottom:before { top: -7px; } .datepicker-dropdown.datepicker-orient-bottom:after { top: -6px; } .datepicker-dropdown.datepicker-orient-top:before { bottom: -7px; border-bottom: 0; border-top: 7px solid rgba(0, 0, 0, 0.15); } .datepicker-dropdown.datepicker-orient-top:after { bottom: -6px; border-bottom: 0; border-top: 6px solid #fff; } .datepicker > div { display: none; } .datepicker table { margin: 0; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .datepicker table tr td, .datepicker table tr th { text-align: center; width: 30px; height: 30px; border-radius: 4px; border: none; } .table-striped .datepicker table tr td, .table-striped .datepicker table tr th { background-color: transparent; } .datepicker table tr td.new, .datepicker table tr td.old { color: #999; } .datepicker table tr td.day:hover, .datepicker table tr td.focused { background: #eee; cursor: pointer; } .datepicker table tr td.disabled, .datepicker table tr td.disabled:hover { background: 0 0; color: #999; cursor: default; } .datepicker table tr td.highlighted { color: #000; background-color: #d9edf7; border-color: #85c5e5; border-radius: 0; } .datepicker table tr td.highlighted.focus, .datepicker table tr td.highlighted:focus { color: #000; background-color: #afd9ee; border-color: #298fc2; } .datepicker table tr td.highlighted.active, .datepicker table tr td.highlighted:active, .datepicker table tr td.highlighted:hover, .open > .dropdown-toggle.datepicker table tr td.highlighted { color: #000; background-color: #afd9ee; border-color: #52addb; } .datepicker table tr td.highlighted.active.focus, .datepicker table tr td.highlighted.active:focus, .datepicker table tr td.highlighted.active:hover, .datepicker table tr td.highlighted:active.focus, .datepicker table tr td.highlighted:active:focus, .datepicker table tr td.highlighted:active:hover, .open > .dropdown-toggle.datepicker table tr td.highlighted.focus, .open > .dropdown-toggle.datepicker table tr td.highlighted:focus, .open > .dropdown-toggle.datepicker table tr td.highlighted:hover { color: #000; background-color: #91cbe8; border-color: #298fc2; } .datepicker table tr td.highlighted.active, .datepicker table tr td.highlighted:active, .open > .dropdown-toggle.datepicker table tr td.highlighted { background-image: none; } .datepicker table tr td.highlighted.disabled.focus, .datepicker table tr td.highlighted.disabled:focus, .datepicker table tr td.highlighted.disabled:hover, .datepicker table tr td.highlighted[disabled].focus, .datepicker table tr td.highlighted[disabled]:focus, .datepicker table tr td.highlighted[disabled]:hover, fieldset[disabled] .datepicker table tr td.highlighted.focus, fieldset[disabled] .datepicker table tr td.highlighted:focus, fieldset[disabled] .datepicker table tr td.highlighted:hover { background-color: #d9edf7; border-color: #85c5e5; } .datepicker table tr td.highlighted.focused { background: #afd9ee; } .datepicker table tr td.highlighted.disabled, .datepicker table tr td.highlighted.disabled:active { background: #d9edf7; color: #999; } .datepicker table tr td.today { color: #000; background-color: #ffdb99; border-color: #ffb733; } .datepicker table tr td.today.focus, .datepicker table tr td.today:focus { color: #000; background-color: #ffc966; border-color: #b37400; } .datepicker table tr td.today.active, .datepicker table tr td.today:active, .datepicker table tr td.today:hover, .open > .dropdown-toggle.datepicker table tr td.today { color: #000; background-color: #ffc966; border-color: #f59e00; } .datepicker table tr td.today.active.focus, .datepicker table tr td.today.active:focus, .datepicker table tr td.today.active:hover, .datepicker table tr td.today:active.focus, .datepicker table tr td.today:active:focus, .datepicker table tr td.today:active:hover, .open > .dropdown-toggle.datepicker table tr td.today.focus, .open > .dropdown-toggle.datepicker table tr td.today:focus, .open > .dropdown-toggle.datepicker table tr td.today:hover { color: #000; background-color: #ffbc42; border-color: #b37400; } .datepicker table tr td.today.active, .datepicker table tr td.today:active, .open > .dropdown-toggle.datepicker table tr td.today { background-image: none; } .datepicker table tr td.today.disabled.focus, .datepicker table tr td.today.disabled:focus, .datepicker table tr td.today.disabled:hover, .datepicker table tr td.today[disabled].focus, .datepicker table tr td.today[disabled]:focus, .datepicker table tr td.today[disabled]:hover, fieldset[disabled] .datepicker table tr td.today.focus, fieldset[disabled] .datepicker table tr td.today:focus, fieldset[disabled] .datepicker table tr td.today:hover { background-color: #ffdb99; border-color: #ffb733; } .datepicker table tr td.today.focused { background: #ffc966; } .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:active { background: #ffdb99; color: #999; } .datepicker table tr td.range { color: #000; background-color: #eee; border-color: #bbb; border-radius: 0; } .datepicker table tr td.range.focus, .datepicker table tr td.range:focus { color: #000; background-color: #d5d5d5; border-color: #7c7c7c; } .datepicker table tr td.range.active, .datepicker table tr td.range:active, .datepicker table tr td.range:hover, .open > .dropdown-toggle.datepicker table tr td.range { color: #000; background-color: #d5d5d5; border-color: #9d9d9d; } .datepicker table tr td.range.active.focus, .datepicker table tr td.range.active:focus, .datepicker table tr td.range.active:hover, .datepicker table tr td.range:active.focus, .datepicker table tr td.range:active:focus, .datepicker table tr td.range:active:hover, .open > .dropdown-toggle.datepicker table tr td.range.focus, .open > .dropdown-toggle.datepicker table tr td.range:focus, .open > .dropdown-toggle.datepicker table tr td.range:hover { color: #000; background-color: #c3c3c3; border-color: #7c7c7c; } .datepicker table tr td.range.active, .datepicker table tr td.range:active, .open > .dropdown-toggle.datepicker table tr td.range { background-image: none; } .datepicker table tr td.range.disabled.focus, .datepicker table tr td.range.disabled:focus, .datepicker table tr td.range.disabled:hover, .datepicker table tr td.range[disabled].focus, .datepicker table tr td.range[disabled]:focus, .datepicker table tr td.range[disabled]:hover, fieldset[disabled] .datepicker table tr td.range.focus, fieldset[disabled] .datepicker table tr td.range:focus, fieldset[disabled] .datepicker table tr td.range:hover { background-color: #eee; border-color: #bbb; } .datepicker table tr td.range.focused { background: #d5d5d5; } .datepicker table tr td.range.disabled, .datepicker table tr td.range.disabled:active { background: #eee; color: #999; } .datepicker table tr td.range.highlighted { color: #000; background-color: #e4eef3; border-color: #9dc1d3; } .datepicker table tr td.range.highlighted.focus, .datepicker table tr td.range.highlighted:focus { color: #000; background-color: #c1d7e3; border-color: #4b88a6; } .datepicker table tr td.range.highlighted.active, .datepicker table tr td.range.highlighted:active, .datepicker table tr td.range.highlighted:hover, .open > .dropdown-toggle.datepicker table tr td.range.highlighted { color: #000; background-color: #c1d7e3; border-color: #73a6c0; } .datepicker table tr td.range.highlighted.active.focus, .datepicker table tr td.range.highlighted.active:focus, .datepicker table tr td.range.highlighted.active:hover, .datepicker table tr td.range.highlighted:active.focus, .datepicker table tr td.range.highlighted:active:focus, .datepicker table tr td.range.highlighted:active:hover, .open > .dropdown-toggle.datepicker table tr td.range.highlighted.focus, .open > .dropdown-toggle.datepicker table tr td.range.highlighted:focus, .open > .dropdown-toggle.datepicker table tr td.range.highlighted:hover { color: #000; background-color: #a8c8d8; border-color: #4b88a6; } .datepicker table tr td.range.highlighted.active, .datepicker table tr td.range.highlighted:active, .open > .dropdown-toggle.datepicker table tr td.range.highlighted { background-image: none; } .datepicker table tr td.range.highlighted.disabled.focus, .datepicker table tr td.range.highlighted.disabled:focus, .datepicker table tr td.range.highlighted.disabled:hover, .datepicker table tr td.range.highlighted[disabled].focus, .datepicker table tr td.range.highlighted[disabled]:focus, .datepicker table tr td.range.highlighted[disabled]:hover, fieldset[disabled] .datepicker table tr td.range.highlighted.focus, fieldset[disabled] .datepicker table tr td.range.highlighted:focus, fieldset[disabled] .datepicker table tr td.range.highlighted:hover { background-color: #e4eef3; border-color: #9dc1d3; } .datepicker table tr td.range.highlighted.focused { background: #c1d7e3; } .datepicker table tr td.range.highlighted.disabled, .datepicker table tr td.range.highlighted.disabled:active { background: #e4eef3; color: #999; } .datepicker table tr td.range.today { color: #000; background-color: #f7ca77; border-color: #f1a417; } .datepicker table tr td.range.today.focus, .datepicker table tr td.range.today:focus { color: #000; background-color: #f4b747; border-color: #815608; } .datepicker table tr td.range.today.active, .datepicker table tr td.range.today:active, .datepicker table tr td.range.today:hover, .open > .dropdown-toggle.datepicker table tr td.range.today { color: #000; background-color: #f4b747; border-color: #bf800c; } .datepicker table tr td.range.today.active.focus, .datepicker table tr td.range.today.active:focus, .datepicker table tr td.range.today.active:hover, .datepicker table tr td.range.today:active.focus, .datepicker table tr td.range.today:active:focus, .datepicker table tr td.range.today:active:hover, .open > .dropdown-toggle.datepicker table tr td.range.today.focus, .open > .dropdown-toggle.datepicker table tr td.range.today:focus, .open > .dropdown-toggle.datepicker table tr td.range.today:hover { color: #000; background-color: #f2aa25; border-color: #815608; } .datepicker table tr td.range.today.active, .datepicker table tr td.range.today:active, .open > .dropdown-toggle.datepicker table tr td.range.today { background-image: none; } .datepicker table tr td.range.today.disabled.focus, .datepicker table tr td.range.today.disabled:focus, .datepicker table tr td.range.today.disabled:hover, .datepicker table tr td.range.today[disabled].focus, .datepicker table tr td.range.today[disabled]:focus, .datepicker table tr td.range.today[disabled]:hover, fieldset[disabled] .datepicker table tr td.range.today.focus, fieldset[disabled] .datepicker table tr td.range.today:focus, fieldset[disabled] .datepicker table tr td.range.today:hover { background-color: #f7ca77; border-color: #f1a417; } .datepicker table tr td.range.today.disabled, .datepicker table tr td.range.today.disabled:active { background: #f7ca77; color: #999; } .datepicker table tr td.active.active, .datepicker table tr td.active.highlighted.active, .datepicker table tr td.active.highlighted:active, .datepicker table tr td.active:active, .datepicker table tr td.selected.active, .datepicker table tr td.selected.highlighted.active, .datepicker table tr td.selected.highlighted:active, .datepicker table tr td.selected:active, .open > .dropdown-toggle.datepicker table tr td.active, .open > .dropdown-toggle.datepicker table tr td.active.highlighted, .open > .dropdown-toggle.datepicker table tr td.selected, .open > .dropdown-toggle.datepicker table tr td.selected.highlighted { background-image: none; } .datepicker table tr td.selected, .datepicker table tr td.selected.highlighted { color: #fff; background-color: #999; border-color: #555; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .datepicker table tr td.selected.focus, .datepicker table tr td.selected.highlighted.focus, .datepicker table tr td.selected.highlighted:focus, .datepicker table tr td.selected:focus { color: #fff; background-color: grey; border-color: #161616; } .datepicker table tr td.selected.active, .datepicker table tr td.selected.highlighted.active, .datepicker table tr td.selected.highlighted:active, .datepicker table tr td.selected.highlighted:hover, .datepicker table tr td.selected:active, .datepicker table tr td.selected:hover, .open > .dropdown-toggle.datepicker table tr td.selected, .open > .dropdown-toggle.datepicker table tr td.selected.highlighted { color: #fff; background-color: grey; border-color: #373737; } .datepicker table tr td.selected.active.focus, .datepicker table tr td.selected.active:focus, .datepicker table tr td.selected.active:hover, .datepicker table tr td.selected.highlighted.active.focus, .datepicker table tr td.selected.highlighted.active:focus, .datepicker table tr td.selected.highlighted.active:hover, .datepicker table tr td.selected.highlighted:active.focus, .datepicker table tr td.selected.highlighted:active:focus, .datepicker table tr td.selected.highlighted:active:hover, .datepicker table tr td.selected:active.focus, .datepicker table tr td.selected:active:focus, .datepicker table tr td.selected:active:hover, .open > .dropdown-toggle.datepicker table tr td.selected.focus, .open > .dropdown-toggle.datepicker table tr td.selected.highlighted.focus, .open > .dropdown-toggle.datepicker table tr td.selected.highlighted:focus, .open > .dropdown-toggle.datepicker table tr td.selected.highlighted:hover, .open > .dropdown-toggle.datepicker table tr td.selected:focus, .open > .dropdown-toggle.datepicker table tr td.selected:hover { color: #fff; background-color: #6e6e6e; border-color: #161616; } .datepicker table tr td.selected.disabled.focus, .datepicker table tr td.selected.disabled:focus, .datepicker table tr td.selected.disabled:hover, .datepicker table tr td.selected.highlighted.disabled.focus, .datepicker table tr td.selected.highlighted.disabled:focus, .datepicker table tr td.selected.highlighted.disabled:hover, .datepicker table tr td.selected.highlighted[disabled].focus, .datepicker table tr td.selected.highlighted[disabled]:focus, .datepicker table tr td.selected.highlighted[disabled]:hover, .datepicker table tr td.selected[disabled].focus, .datepicker table tr td.selected[disabled]:focus, .datepicker table tr td.selected[disabled]:hover, fieldset[disabled] .datepicker table tr td.selected.focus, fieldset[disabled] .datepicker table tr td.selected.highlighted.focus, fieldset[disabled] .datepicker table tr td.selected.highlighted:focus, fieldset[disabled] .datepicker table tr td.selected.highlighted:hover, fieldset[disabled] .datepicker table tr td.selected:focus, fieldset[disabled] .datepicker table tr td.selected:hover { background-color: #999; border-color: #555; } .datepicker table tr td.active, .datepicker table tr td.active.highlighted { color: #fff; background-color: #428bca; border-color: #357ebd; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .datepicker table tr td.active.focus, .datepicker table tr td.active.highlighted.focus, .datepicker table tr td.active.highlighted:focus, .datepicker table tr td.active:focus { color: #fff; background-color: #3071a9; border-color: #193c5a; } .datepicker table tr td.active.active, .datepicker table tr td.active.highlighted.active, .datepicker table tr td.active.highlighted:active, .datepicker table tr td.active.highlighted:hover, .datepicker table tr td.active:active, .datepicker table tr td.active:hover, .open > .dropdown-toggle.datepicker table tr td.active, .open > .dropdown-toggle.datepicker table tr td.active.highlighted { color: #fff; background-color: #3071a9; border-color: #285e8e; } .datepicker table tr td.active.active.focus, .datepicker table tr td.active.active:focus, .datepicker table tr td.active.active:hover, .datepicker table tr td.active.highlighted.active.focus, .datepicker table tr td.active.highlighted.active:focus, .datepicker table tr td.active.highlighted.active:hover, .datepicker table tr td.active.highlighted:active.focus, .datepicker table tr td.active.highlighted:active:focus, .datepicker table tr td.active.highlighted:active:hover, .datepicker table tr td.active:active.focus, .datepicker table tr td.active:active:focus, .datepicker table tr td.active:active:hover, .open > .dropdown-toggle.datepicker table tr td.active.focus, .open > .dropdown-toggle.datepicker table tr td.active.highlighted.focus, .open > .dropdown-toggle.datepicker table tr td.active.highlighted:focus, .open > .dropdown-toggle.datepicker table tr td.active.highlighted:hover, .open > .dropdown-toggle.datepicker table tr td.active:focus, .open > .dropdown-toggle.datepicker table tr td.active:hover { color: #fff; background-color: #285e8e; border-color: #193c5a; } .datepicker table tr td.active.disabled.focus, .datepicker table tr td.active.disabled:focus, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active.highlighted.disabled.focus, .datepicker table tr td.active.highlighted.disabled:focus, .datepicker table tr td.active.highlighted.disabled:hover, .datepicker table tr td.active.highlighted[disabled].focus, .datepicker table tr td.active.highlighted[disabled]:focus, .datepicker table tr td.active.highlighted[disabled]:hover, .datepicker table tr td.active[disabled].focus, .datepicker table tr td.active[disabled]:focus, .datepicker table tr td.active[disabled]:hover, fieldset[disabled] .datepicker table tr td.active.focus, fieldset[disabled] .datepicker table tr td.active.highlighted.focus, fieldset[disabled] .datepicker table tr td.active.highlighted:focus, fieldset[disabled] .datepicker table tr td.active.highlighted:hover, fieldset[disabled] .datepicker table tr td.active:focus, fieldset[disabled] .datepicker table tr td.active:hover { background-color: #428bca; border-color: #357ebd; } .datepicker table tr td span { display: block; width: 23%; height: 54px; line-height: 54px; float: left; margin: 1%; cursor: pointer; border-radius: 4px; } .datepicker table tr td span:hover { background: #eee; } .datepicker table tr td span.disabled, .datepicker table tr td span.disabled:hover { background: 0 0; color: #999; cursor: default; } .datepicker .datepicker-switch, .datepicker .next, .datepicker .prev, .datepicker tfoot tr th, .input-group.date .input-group-addon { cursor: pointer; } .datepicker table tr td span.active, .datepicker table tr td span.active.disabled, .datepicker table tr td span.active.disabled:hover, .datepicker table tr td span.active:hover { color: #fff; background-color: #428bca; border-color: #357ebd; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .datepicker table tr td span.active.disabled.focus, .datepicker table tr td span.active.disabled:focus, .datepicker table tr td span.active.disabled:hover.focus, .datepicker table tr td span.active.disabled:hover:focus, .datepicker table tr td span.active.focus, .datepicker table tr td span.active:focus, .datepicker table tr td span.active:hover.focus, .datepicker table tr td span.active:hover:focus { color: #fff; background-color: #3071a9; border-color: #193c5a; } .datepicker table tr td span.active.active, .datepicker table tr td span.active.disabled.active, .datepicker table tr td span.active.disabled:active, .datepicker table tr td span.active.disabled:hover, .datepicker table tr td span.active.disabled:hover.active, .datepicker table tr td span.active.disabled:hover:active, .datepicker table tr td span.active.disabled:hover:hover, .datepicker table tr td span.active:active, .datepicker table tr td span.active:hover, .datepicker table tr td span.active:hover.active, .datepicker table tr td span.active:hover:active, .datepicker table tr td span.active:hover:hover, .open > .dropdown-toggle.datepicker table tr td span.active, .open > .dropdown-toggle.datepicker table tr td span.active.disabled, .open > .dropdown-toggle.datepicker table tr td span.active.disabled:hover, .open > .dropdown-toggle.datepicker table tr td span.active:hover { color: #fff; background-color: #3071a9; border-color: #285e8e; } .datepicker table tr td span.active.active.focus, .datepicker table tr td span.active.active:focus, .datepicker table tr td span.active.active:hover, .datepicker table tr td span.active.disabled.active.focus, .datepicker table tr td span.active.disabled.active:focus, .datepicker table tr td span.active.disabled.active:hover, .datepicker table tr td span.active.disabled:active.focus, .datepicker table tr td span.active.disabled:active:focus, .datepicker table tr td span.active.disabled:active:hover, .datepicker table tr td span.active.disabled:hover.active.focus, .datepicker table tr td span.active.disabled:hover.active:focus, .datepicker table tr td span.active.disabled:hover.active:hover, .datepicker table tr td span.active.disabled:hover:active.focus, .datepicker table tr td span.active.disabled:hover:active:focus, .datepicker table tr td span.active.disabled:hover:active:hover, .datepicker table tr td span.active:active.focus, .datepicker table tr td span.active:active:focus, .datepicker table tr td span.active:active:hover, .datepicker table tr td span.active:hover.active.focus, .datepicker table tr td span.active:hover.active:focus, .datepicker table tr td span.active:hover.active:hover, .datepicker table tr td span.active:hover:active.focus, .datepicker table tr td span.active:hover:active:focus, .datepicker table tr td span.active:hover:active:hover, .open > .dropdown-toggle.datepicker table tr td span.active.disabled.focus, .open > .dropdown-toggle.datepicker table tr td span.active.disabled:focus, .open > .dropdown-toggle.datepicker table tr td span.active.disabled:hover, .open > .dropdown-toggle.datepicker table tr td span.active.disabled:hover.focus, .open > .dropdown-toggle.datepicker table tr td span.active.disabled:hover:focus, .open > .dropdown-toggle.datepicker table tr td span.active.disabled:hover:hover, .open > .dropdown-toggle.datepicker table tr td span.active.focus, .open > .dropdown-toggle.datepicker table tr td span.active:focus, .open > .dropdown-toggle.datepicker table tr td span.active:hover, .open > .dropdown-toggle.datepicker table tr td span.active:hover.focus, .open > .dropdown-toggle.datepicker table tr td span.active:hover:focus, .open > .dropdown-toggle.datepicker table tr td span.active:hover:hover { color: #fff; background-color: #285e8e; border-color: #193c5a; } .datepicker table tr td span.active.active, .datepicker table tr td span.active.disabled.active, .datepicker table tr td span.active.disabled:active, .datepicker table tr td span.active.disabled:hover.active, .datepicker table tr td span.active.disabled:hover:active, .datepicker table tr td span.active:active, .datepicker table tr td span.active:hover.active, .datepicker table tr td span.active:hover:active, .open > .dropdown-toggle.datepicker table tr td span.active, .open > .dropdown-toggle.datepicker table tr td span.active.disabled, .open > .dropdown-toggle.datepicker table tr td span.active.disabled:hover, .open > .dropdown-toggle.datepicker table tr td span.active:hover { background-image: none; } .datepicker table tr td span.active.disabled.disabled.focus, .datepicker table tr td span.active.disabled.disabled:focus, .datepicker table tr td span.active.disabled.disabled:hover, .datepicker table tr td span.active.disabled.focus, .datepicker table tr td span.active.disabled:focus, .datepicker table tr td span.active.disabled:hover, .datepicker table tr td span.active.disabled:hover.disabled.focus, .datepicker table tr td span.active.disabled:hover.disabled:focus, .datepicker table tr td span.active.disabled:hover.disabled:hover, .datepicker table tr td span.active.disabled:hover[disabled].focus, .datepicker table tr td span.active.disabled:hover[disabled]:focus, .datepicker table tr td span.active.disabled:hover[disabled]:hover, .datepicker table tr td span.active.disabled[disabled].focus, .datepicker table tr td span.active.disabled[disabled]:focus, .datepicker table tr td span.active.disabled[disabled]:hover, .datepicker table tr td span.active:hover.disabled.focus, .datepicker table tr td span.active:hover.disabled:focus, .datepicker table tr td span.active:hover.disabled:hover, .datepicker table tr td span.active:hover[disabled].focus, .datepicker table tr td span.active:hover[disabled]:focus, .datepicker table tr td span.active:hover[disabled]:hover, .datepicker table tr td span.active[disabled].focus, .datepicker table tr td span.active[disabled]:focus, .datepicker table tr td span.active[disabled]:hover, fieldset[disabled] .datepicker table tr td span.active.disabled.focus, fieldset[disabled] .datepicker table tr td span.active.disabled:focus, fieldset[disabled] .datepicker table tr td span.active.disabled:hover, fieldset[disabled] .datepicker table tr td span.active.disabled:hover.focus, fieldset[disabled] .datepicker table tr td span.active.disabled:hover:focus, fieldset[disabled] .datepicker table tr td span.active.disabled:hover:hover, fieldset[disabled] .datepicker table tr td span.active.focus, fieldset[disabled] .datepicker table tr td span.active:focus, fieldset[disabled] .datepicker table tr td span.active:hover, fieldset[disabled] .datepicker table tr td span.active:hover.focus, fieldset[disabled] .datepicker table tr td span.active:hover:focus, fieldset[disabled] .datepicker table tr td span.active:hover:hover { background-color: #428bca; border-color: #357ebd; } .datepicker table tr td span.new, .datepicker table tr td span.old { color: #999; } .datepicker .datepicker-switch { width: 145px; } .datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover { background: #eee; } .datepicker .cw { font-size: 10px; width: 12px; padding: 0 2px 0 5px; vertical-align: middle; } .input-daterange { width: 100%; } .input-daterange input { text-align: center; } .input-daterange input:first-child { border-radius: 3px 0 0 3px; } .input-daterange input:last-child { border-radius: 0 3px 3px 0; } .input-daterange .input-group-addon { width: auto; min-width: 16px; padding: 4px 5px; font-weight: 400; line-height: 1.42857143; text-align: center; text-shadow: 0 1px 0 #fff; vertical-align: middle; background-color: #eee; border: solid #ccc; border-width: 1px 0; margin-left: -5px; margin-right: -5px; } .fcx-btn-filter { margin-top: 4px; } .fcx-btn-filter .btn-default { position: relative; background: none; border-color: transparent; } .fcx-btn-filter .btn-default:hover { border-color: #ccc; } .fcx-btn-filter .btn-default:focus, .fcx-btn-filter .btn-default:active { border-color: #ccc; background: none; outline: none !important; } .fcx-btn-filter .btn-default[data-toggle=collapse]:not(.collapsed) { border-color: #ccc; } .fcx-btn-filter #fcx-filter-clear { border-color: #ccc; } .fcx-btn-filter .btn-dropdown, .fcx-btn-filter .dropdown-toggle { padding-right: 25px; } .fcx-btn-filter .bs-caret .caret { position: absolute; top: 50%; right: 12px; margin-top: -2px; vertical-align: middle; } .fcx-btn-filter .btn-group.open .dropdown-toggle { -webkit-box-shadow: 0 0 0; box-shadow: 0 0 0; border-color: #ccc; background: none; } .fcx-btn-filter .sort .dropdown-menu { left: auto; right: 0; } #filter-container .form-control { margin-bottom: 6px; } #filter-container .checkbox, #filter-container .radio { padding-left: 15px; } #filter h5 { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #ddd; } #filter .form-group:not(:first-of-type) { padding-top: 5px; border-top: 1px solid #ddd; } .fcx-datepicker { text-align: left; width: 100%; margin-bottom: 10px; overflow: hidden; background: #fff; } .fcx-datepicker .caption { display: inline; } .fcx-datepicker-spacer { display: none; text-align: center; padding-top: 4px; } .flexbox #fcx-datepicker { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin-bottom: 16px; } .flexbox #fcx-datepicker .fcx-datepicker { -webkit-box-flex: 2; -webkit-flex: 2; -ms-flex: 2; flex: 2; width: auto; margin-bottom: 0; } .flexbox #fcx-datepicker .fcx-datepicker-spacer { display: block; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .filter-select { margin-top: 20px; } .fcx-categories { margin: 0 0 10px; padding: 0; width: 100%; } .fcx-categories .col-xs-3 { padding-left: 0; padding-right: 0; } .fcx-categories label.btn-default { background: #eee; border: 1px solid #ccc; margin: 5px; padding: 3px; -webkit-transition: background 250ms ease, color 250ms ease, border 250ms ease; -o-transition: background 250ms ease, color 250ms ease, border 250ms ease; transition: background 250ms ease, color 250ms ease, border 250ms ease; } .fcx-categories label.btn-default:hover { background-color: #fff; border: 1px solid #39a9e0; } .fcx-categories label.btn-default.active { background-color: #39a9e0; color: #fff; border: 1px solid #1f90c7; } .fcx-categories label.btn-default.active.partial { background-color: #91cfee; border: 1px solid #65bce7; } .fcx-categories label h5 { margin: 6px 0 2px; font-size: 12px; } .personalfilter { width: 300px; padding: 0 10px; } .btn-personalfilter { display: block; position: fixed; right: -1px; top: 50%; z-index: 500; border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; padding: 15px 2px; } .my-photos .badge-feature { margin-bottom: 0; } .btn-lg small { display: block; font-size: 11px; padding-bottom: 5px; } .search-profile { width: 100% !important; } .search-profile .input-group-btn { width: 1% !important; } .tags .btn-primary { background: none; color: #39a9e0; margin-bottom: 5px; } .tags .btn-primary.active { padding: 1px 20px 1px 8px; background: #39a9e0; color: #fff; } .tags .btn-primary.active::after { position: absolute; font-family: "fcx-icons"; content: ""; padding-left: 4px; } .tags .btn-primary.active:hover { border-color: #39a9e0; } .add-tag-filter .bootstrap-tagsinput { background: #fff; width: 100%; border: 1px solid #ccc; } .add-tag-filter .bootstrap-tagsinput:focus { border: 1px solid #39a9e0; -webkit-box-shadow: none; box-shadow: none; } .fcx-search-titles { font-size: 12px; color: #666; padding-top: 2px; } /* * jQuery File Upload Plugin CSS * https://github.com/blueimp/jQuery-File-Upload * * Copyright 2013, Sebastian Tschan * https://blueimp.net * * Licensed under the MIT license: * https://opensource.org/licenses/MIT */ .fileinput-button { position: relative; overflow: hidden; display: inline-block; } .fileinput-button input { position: absolute; top: 0; right: 0; margin: 0; opacity: 0; -ms-filter: "alpha(opacity=0)"; font-size: 200px !important; direction: ltr; cursor: pointer; } /* Fixes for IE < 8 */ @media screen\9 { .fileinput-button input { filter: alpha(opacity=0); font-size: 100%; height: 100%; } } .dropzone, .dropzone * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .clearfix { *zoom: 1; } .clearfix::after { clear: both; } .clearfix::before, .clearfix::after { content: " "; display: table; } #fcx-upload { padding-top: 96px; padding-top: 6rem; padding-bottom: 32px; padding-bottom: 2rem; } .fcx-dropzone-options { position: relative; margin: 0 0 32px; margin: 0 0 2rem; } .fcx-dropzone-options .btn:not(.pull-right), .fcx-dropzone-options .fcx-settings-field:not(.pull-right) { margin-right: 4px; } .fcx-dropzone-options select[name=folder] + .bootstrap-select { margin-right: 4px; } .fcx-dropzone-options.fcx-dropzone-options-bottom { margin-top: 32px; margin-top: 2rem; } .fcx-dropzone-wrapper { padding: 6px; border-radius: 3px; border: 1px dashed #ddd; overflow: hidden; } .dz-preview { position: relative; display: block; margin: 0; border: none; vertical-align: top; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .dz-preview:hover { z-index: 1000; } .dz-preview.fcx-hidden { display: none !important; } .dz-preview .dz-image { float: left; position: relative; display: block; overflow: hidden; width: 80px; border-radius: 3px; border: 3px solid #fff; background: none; background-color: #fff; background-image: url(../images/photo/fallback/default-image.png); background-repeat: no-repeat; background-position: center; z-index: 10; } .dz-preview .dz-image::before { content: ""; display: block; padding-top: 100%; } .dz-preview .dz-image canvas { position: absolute; top: 0; left: 0; width: 100% !important; } :root .dz-preview .dz-image { border-color: #ddd \0 ; } .dz-preview .dz-progress { opacity: 1; z-index: 1000; pointer-events: none; position: absolute; width: 100px; height: 20px; left: 50%; top: 50%; margin: -25px 0 0 -50px; background: rgba(255, 255, 255, 0.9); -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); border-radius: 8px; overflow: hidden; } .dz-preview .dz-progress .progress { margin: 0; } .dz-preview .dz-progress .dz-upload { background: #333; background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#444)); background: -webkit-linear-gradient(top, #666, #444); background: -o-linear-gradient(top, #666, #444); background: linear-gradient(to bottom, #666, #444); position: absolute; top: 0; left: 0; bottom: 0; width: 0; -webkit-transition: width 300ms ease-in-out; -o-transition: width 300ms ease-in-out; transition: width 300ms ease-in-out; } .dz-preview.dz-processing .dz-progress { opacity: 1; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; } .dz-preview.dz-complete .dz-progress { opacity: 0; -webkit-transition: opacity 0.4s ease-in; -o-transition: opacity 0.4s ease-in; transition: opacity 0.4s ease-in; } .dz-preview:not(.dz-processing) .dz-progress { -webkit-animation: pulse 6s ease infinite; animation: pulse 6s ease infinite; } .dz-preview .dz-remove { font-size: 14px; text-align: center; display: block; cursor: pointer; border: none; } .dz-preview .dz-remove:hover { text-decoration: underline; } .dz-preview.dz-error .dz-error-message { display: block; } .dz-preview.dz-error:hover .dz-error-message { opacity: 1; pointer-events: auto; } .dz-preview .dz-error-message { position: absolute; top: 130px; left: -10px; display: none; opacity: 0; font-size: 13px; color: white; padding: 0.5em 1.2em; width: 140px; border-radius: 8px; background: #be2626; background: -webkit-gradient(linear, left top, left bottom, from(#be2626), to(#a92222)); background: -webkit-linear-gradient(top, #be2626, #a92222); background: -o-linear-gradient(top, #be2626, #a92222); background: linear-gradient(to bottom, #be2626, #a92222); -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; pointer-events: none; z-index: 1000; } .dz-preview .dz-error-message::after { content: ""; position: absolute; top: -6px; left: 64px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #be2626; } .dz-preview .dz-success-mark, .dz-preview .dz-error-mark { position: absolute; display: block; pointer-events: none; color: #fff; text-align: center; opacity: 0; z-index: 500; top: 60%; left: 21px; margin-top: -40px; } .dz-preview.dz-success .dz-success-mark { -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); } .dz-preview.dz-error .dz-error-mark { opacity: 1; -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); } @media screen and (min-width: 512px) { .dz-preview { float: left; width: 33.33333333%; margin: 0; } .dz-preview .dz-image { width: 100%; } .dz-preview .dz-success-mark, .dz-preview .dz-error-mark { left: 50%; margin-top: -58px; margin-left: -29px; } } @media screen and (min-width: 992px) { .dz-preview { width: 25%; } } @media screen and (min-width: 1200px) { .dz-preview { min-width: 155px; } } .upload__info { text-align: center; padding: 24px; padding: 1.5rem; color: rgba(0, 0, 0, 0.5); background: #fafafa; } .upload__info p { margin: 24px 0 0; margin: 1.5rem 0 0; } .upload__info span { display: block; } .upload__info strong { color: #333; } .upload__info small { font-size: 12px; } .upload__info__quota .btn, .upload__info__quota + .btn { margin-top: 24px; margin-top: 1.5rem; } .dz-preview.dz-upload-button { text-align: center; padding: 0; margin: 0; } .fileinput-button button { display: inline-block; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; background: none; -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .fileinput-button button.upload-on { color: #39a9e0; } .fileinput-button button.upload-off { color: #ff8746; } .fileinput-button button.upload-off .fa-arrow-to-top { color: #333; } .fileinput-button input[type=file] { width: 100%; height: 100%; } .fileinput-button:hover button { opacity: 0.7; } .fileinput-button.disabled { pointer-events: none; } .fileinput-button.disabled button { cursor: default; } .fileinput-button.disabled input[type=file] { display: none; pointer-events: none; tab-index: -1; } .active .upload__info { display: none; } .active .fileinput-button { color: #777; padding: 5px 10px !important; width: 100%; border: 1px solid #ddd; background-color: #fff; } .active .fileinput-button:hover, .active .fileinput-button:focus { background: #eee; } .active .fileinput-button.upload-is-empty, .active .fileinput-button.disabled { display: none; } .active .dz-preview { *zoom: 1; padding: 10px; } .active .dz-preview::after { clear: both; } .active .dz-preview::before, .active .dz-preview::after { content: " "; display: table; } .inactive .fcx-files { padding: 20vh 0; height: 100%; } .inactive .dz-preview.dz-upload-button { width: 100%; padding: 0 32px; padding: 0 2rem; } .inactive .fileinput-button { display: block; position: absolute; text-align: center; top: 50%; left: 50%; width: 160px; width: 10rem; height: 160px; height: 10rem; margin: -100px 0 0 -80px; margin: -100px 0 0 -5rem; } .inactive .fileinput-button button.upload-on { display: inline-block; } .inactive .fileinput-button button.upload-off { display: none; } .inactive .fileinput-button.disabled .upload-on { display: none; } .inactive .fileinput-button.disabled .upload-off { display: inline-block; } .dropzone { -webkit-transition: opacity 0.25s ease; -o-transition: opacity 0.25s ease; transition: opacity 0.25s ease; } .dropzone.fcx-hidden { opacity: 0; } .dropzone.dz-clickable * { cursor: pointer; } .dropzone.dz-drag-hover { border: none; } .dz-preview.dz-message { text-align: center; padding: 0 32px; padding: 0 2rem; width: 100%; } .dz-preview.dz-message h3 { margin-top: 0; } .dz-preview.dz-message small { font-size: 13px; color: #777; } .dz-preview.dz-message #fcx-options-error-bar { margin: 0 auto; } .dz-preview.dz-message .progress.fcx-usage-bar { margin-bottom: 10px; } .dropzone .dz-data span:not(.title) { display: none; } .dropzone .dz-data span.title { cursor: pointer; padding: 2px 10px; margin-top: 4px; border-radius: 3px; display: inline-block; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .dropzone .dz-data span.title[contenteditable=true] { cursor: text; } .dropzone .dz-data span.title[contenteditable=true]:hover, .dropzone .dz-data span.title[contenteditable=true]:focus { border: 1px dotted #39a9e0; outline: none !important; } @media screen and (min-width: 512px) { .dropzone .dz-data span.title { text-align: center; width: 100%; } } .dz-edit-mode { position: absolute; right: 13px; top: 13px; color: #333; border-bottom-left-radius: 3px; z-index: 20; } .dz-edit-mode .fa-square { display: inline-block; } .dz-edit-mode .fa-check-square { display: none; margin-right: -1px; } .dz-preview.selected .dz-edit-mode .fa-square { display: none; } .dz-preview.selected .dz-edit-mode .fa-check-square { display: inline-block; } @media screen and (min-width: 512px) { .dz-edit-mode { color: #fff; padding: 0 0 2px 5px; text-shadow: 0 0 4px rgba(0, 0, 0, 0.4); } } .dz-publish-state { cursor: pointer; position: absolute; bottom: 46px; left: 21px; color: #fff; z-index: 20; opacity: 0; -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .dz-preview[data-publish="1"] .dz-publish-state { opacity: 1; } .fcx-files { *zoom: 1; margin: 0; padding: 0; } .fcx-files::after { clear: both; } .fcx-files::before, .fcx-files::after { content: " "; display: table; } .fcx-files + .fcx-files { margin-top: 48px; margin-top: 3rem; min-height: 0; } #fcx-upload-images-btn { display: none; } #fcx-uploader.inactive .fcx-dropzone-options { display: none; } #fcx-uploader.inactive #fcx-images-wrapper { left: 0; width: 100%; } #fcx-uploader .dz-preview .dz-image { border: 3px solid #fff; } #fcx-uploader .dz-preview:hover .dz-image { cursor: pointer; border-color: #ccc; } #fcx-uploader .dz-preview.dz-success[data-has-meta-error="0"] .dz-image { border-color: #5cb85c; } #fcx-uploader .dz-preview.dz-success[data-has-meta-error="0"]:hover .dz-image { border-color: #80c780; } @media screen and (min-width: 512px) { #fcx-uploader .dz-preview.dz-success[data-has-meta-error="0"] .dz-edit-mode { background: #5cb85c; } #fcx-uploader .dz-preview.dz-success[data-has-meta-error="0"]:hover .dz-edit-mode { background: #80c780; } } #fcx-uploader .dz-preview.dz-meta-error .dz-image { border-color: #ff8746; } #fcx-uploader .dz-preview.dz-meta-error:hover .dz-image { border-color: #ffa879; } @media screen and (min-width: 512px) { #fcx-uploader .dz-preview.dz-meta-error .dz-edit-mode { background: #ff8746; } #fcx-uploader .dz-preview.dz-meta-error:hover .dz-edit-mode { background: #ffa879; } } #fcx-uploader .dz-preview.selected { background: #edf9ff; } #fcx-uploader .dz-preview.selected .dz-image { border-color: #ddd; } #fcx-uploader .dz-preview.selected.dz-success[data-has-meta-error="0"] .dz-image { border-color: #5cb85c; } #fcx-uploader .dz-preview.selected.dz-meta-error .dz-image { border-color: #ff8746; } @media screen and (min-width: 512px) { #fcx-uploader .dz-preview.selected { background: none; } #fcx-uploader .dz-preview.selected .title { background: #ddd; } #fcx-uploader .dz-preview.selected .dz-edit-mode { background-color: #ddd; } #fcx-uploader .dz-preview.selected.dz-success[data-has-meta-error="0"] .dz-edit-mode { background: #5cb85c; } #fcx-uploader .dz-preview.selected.dz-meta-error .dz-edit-mode { background: #ff8746; } } #fcx-uploader .dz-preview .error { pointer-events: none; position: absolute; display: none; opacity: 0; font-size: 13px; color: white; top: 130px; left: 20px; width: 140px; padding: 0.5em 1.2em; border-radius: 8px; background: #be2626; background: -webkit-gradient(linear, left top, left bottom, from(#be2626), to(#a92222)); background: -webkit-linear-gradient(top, #be2626, #a92222); background: -o-linear-gradient(top, #be2626, #a92222); background: linear-gradient(to bottom, #be2626, #a92222); -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; z-index: 1000; } #fcx-uploader .dz-preview .error::after { content: ""; position: absolute; top: -6px; left: 64px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #be2626; } #fcx-uploader .dz-preview.dz-error { opacity: 0.5; } #fcx-uploader .dz-preview.dz-error .error { display: block; } #fcx-uploader .dz-preview.dz-error:hover .dz-image { border: 3px solid #fff; cursor: default; } #fcx-uploader .dz-preview.dz-error:hover .error { opacity: 1; pointer-events: auto; } #fcx-uploader .dz-preview.dz-done { opacity: 0.5; } #fcx-uploader .dz-preview.dz-done:hover .dz-image { -webkit-filter: greyscale; filter: greyscale; cursor: default; border: 3px solid #fff; } #fcx-uploader .dz-preview.dz-done .dz-success-mark { opacity: 1; } #fcx-uploader .dz-preview.dz-done.dz-upload-success .dz-error-mark { opacity: 0; } #fcx-uploader .dz-preview.dz-done.dz-upload-success .dz-success-mark { opacity: 1; } #fcx-uploader .dz-preview.dz-done.dz-upload-success .dz-success-mark i { color: #5cb85c; } #fcx-uploader .dz-preview.dz-done.dz-upload-error .dz-success-mark { opacity: 0; } #fcx-uploader .dz-preview.dz-done.dz-upload-error .dz-error-mark { opacity: 1; } #fcx-uploader .dz-preview.dz-done.dz-upload-error .dz-error-mark i { color: #ff8746; } #fcx-uploader .dz-preview .dz-success-mark, #fcx-uploader .dz-preview .dz-error-mark { width: 58px; height: 58px; } #fcx-uploader .dz-preview .dz-success-mark i, #fcx-uploader .dz-preview .dz-error-mark i { font-size: 56px; color: #fff; } #fcx-uploader .dz-error .fcx-error-click-btn, #fcx-uploader .dz-done .fcx-done-click-btn { position: absolute; top: 50%; left: 50%; height: 56px; width: 56px; border-radius: 50%; z-index: 1001; margin: -21px 0 0 -28px; cursor: pointer; } #fcx-options-bar, #fcx-settings { display: none; } #fcx-options-bar .progress, #fcx-settings .progress { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } #fcx-options-bar .progress .progress-bar, #fcx-settings .progress .progress-bar { width: 0%; overflow: hidden; } #fcx-options-bar .progress .progress-bar .fcx-caption, #fcx-settings .progress .progress-bar .fcx-caption { white-space: nowrap; } #fcx-options-bar .progress .progress-bar .fcx-caption-template, #fcx-settings .progress .progress-bar .fcx-caption-template, #fcx-options-bar .progress .progress-bar .fcx-tooltip-template, #fcx-settings .progress .progress-bar .fcx-tooltip-template { display: none; } #fcx-settings { margin-top: 48px; margin-top: 3rem; } @media screen and (min-width: 992px) { #fcx-settings { margin-top: 0; } } #fcx-settings h5 { font-size: 13px; margin: 20px 0 5px; } #fcx-settings h6 { color: #999; } #fcx-settings hr { border-color: #999; } #fcx-settings a[data-toggle=collapse] { color: #333; font-size: 13px; margin-bottom: 5px; display: inline-block; } #fcx-settings a[data-toggle=collapse] i[class^=fa] { color: #999; font-size: 15px; } #fcx-settings a[data-toggle=collapse]:hover { color: #39a9e0; } #fcx-settings .container { padding-bottom: 6px; -webkit-transition: opacity 0.25s ease; -o-transition: opacity 0.25s ease; transition: opacity 0.25s ease; } #fcx-settings.inactive .container { opacity: 0.4; } #fcx-settings .bootstrap-select { display: block; } #fcx-settings .form-control, #fcx-settings .progress { margin-bottom: 6px; } #fcx-settings .tag { color: #39a9e0; padding-right: 20px; background: #fff; max-width: 120px; display: inline-block; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #fcx-settings .tag.partial { border-style: dashed; } #fcx-settings .tag:hover { color: #39a9e0; background: #fff; } #fcx-settings .fcx-add-tag-filter { padding-bottom: 6px; } #fcx-settings .fcx-add-tag-filter .bootstrap-tagsinput { width: 100%; border: 1px solid #ccc; background: #fff; overflow: hidden; } #fcx-settings .fcx-add-tag-filter:focus { border: 1px solid #39a9e0; -webkit-box-shadow: none; box-shadow: none; } #fcx-settings .fcx-add-tag-filter input { margin: 0; } #fcx-settings .bootstrap-select { width: 100%; } #fcx-settings .bootstrap-select button { margin-bottom: 6px; } #fcx-settings .fcx-checkbox { font-size: 13px; font-weight: normal; } #fcx-settings .fcx-checkbox input { margin-right: 3px; } #fcx-settings .fcx-info-box { margin-top: 30px; padding: 10px; background-color: #ededed; border: 1px solid #e1e1e1; } #fcx-settings ul.fcx-galleries { list-style: none; padding-left: 0; } #fcx-settings ul.fcx-galleries li { border-bottom: 1px solid #e1e1e1; position: relative; } #fcx-settings ul.fcx-galleries li:first-of-type { border-top: 1px solid #e1e1e1; } #fcx-settings ul.fcx-galleries li.fcx-selected a, #fcx-settings ul.fcx-galleries li.fcx-selected span { background-color: #39a9e0 !important; color: #fff !important; } #fcx-settings ul.fcx-galleries li.fcx-selected .icon { display: inline-block; } #fcx-settings ul.fcx-galleries li a { display: block; padding: 10px 6px; } #fcx-settings ul.fcx-galleries li a:hover { background-color: #fafafa; } #fcx-settings ul.fcx-galleries li a:hover .icon { display: inline-block; } #fcx-settings .fcx-hints { padding: 15px; margin-bottom: 32px; margin-bottom: 2rem; min-height: 100px; border-radius: 3px; border: 1px solid #ddd; background-color: #fafafa; } #fcx-settings .fcx-hints .upper { text-transform: uppercase; } #fcx-settings .fcx-hints-list { padding: 0; margin: 0 0 0 15px; } #fcx-settings .fcx-inner-settings { position: relative; } #fcx-settings .fcx-settings-overlay { display: block; margin-bottom: 32px; margin-bottom: 2rem; } #fcx-settings .fcx-settings-overlay .list-group { border-radius: 3px; border: 1px solid #aeddf5; } #fcx-settings .fcx-settings-overlay .list-group-item { padding: 15px; vertical-align: top; border: 0; } #fcx-settings .fcx-settings-overlay .text { overflow: hidden; } #fcx-settings .keypad { display: inline-block; text-align: center; color: #fff; font-size: 32px; font-size: 2rem; line-height: 2.5; height: 80px; height: 5rem; width: 80px; width: 5rem; border-radius: 6px; background: rgba(0, 0, 0, 0.6); border-bottom: 1px solid rgba(0, 0, 0, 0.4); } #fcx-settings .keypad.key--ctrl { font-size: 16px; font-size: 1rem; line-height: 5; } #fcx-settings .fcx-settings-overlay .keypad { float: left; margin: 0 32px 32px 0; margin: 0 2rem 2rem 0; } .no-touchevents .no--touch { display: block; } .no-touchevents .is--touch { display: none; } .touchevents .no--touch { display: none; } .touchevents .is--touch { display: block; } #fcx-options-error-bar { width: 100%; max-width: 650px; } #fcx-options-bar .dropdown-menu a:hover span, #fcx-options-error-bar .dropdown-menu a:hover span { color: #fff; } #fcx-options-bar button, #fcx-options-error-bar button { -webkit-transition: color 0.2s ease; -o-transition: color 0.2s ease; transition: color 0.2s ease; } #fcx-options-bar button#fcx-delete-images-btn:hover, #fcx-options-error-bar button#fcx-delete-images-btn:hover { color: #ff8746; } #fcx-options-bar button:hover, #fcx-options-error-bar button:hover { color: #39a9e0; } #fcx-options-bar button.disabled, #fcx-options-error-bar button.disabled { color: #ccc !important; opacity: 1; } #fcx-options-bar button.disabled:hover, #fcx-options-error-bar button.disabled:hover { color: #ccc; } #fcx-options-bar .progress .progress-bar[data-keyname=no-more-uploads], #fcx-options-error-bar .progress .progress-bar[data-keyname=no-more-uploads] { background: -webkit-gradient(linear, left top, left bottom, from(#ed4c33), to(#eb371c)); background: -webkit-linear-gradient(top, #ed4c33 0%, #eb371c 100%); background: -o-linear-gradient(top, #ed4c33 0%, #eb371c 100%); background: linear-gradient(to bottom, #ed4c33 0%, #eb371c 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffED4C33", endColorstr="#deED4C33", GradientType=0); } #fcx-options-bar .progress .progress-bar[data-keyname=dropzone], #fcx-options-error-bar .progress .progress-bar[data-keyname=dropzone], #fcx-organizer #fcx-options-bar .progress .progress-bar.fcx-published-current-week, #fcx-organizer #fcx-options-error-bar .progress .progress-bar.fcx-published-current-week { background: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#eea236)); background: -webkit-linear-gradient(top, #f0ad4e 0%, #eea236 100%); background: -o-linear-gradient(top, #f0ad4e 0%, #eea236 100%); background: linear-gradient(to bottom, #f0ad4e 0%, #eea236 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffF0AD4E", endColorstr="#deF0AD4E", GradientType=0); } #fcx-options-bar .progress .progress-bar[data-keyname=published], #fcx-options-error-bar .progress .progress-bar[data-keyname=published] { background: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#4cae4c)); background: -webkit-linear-gradient(top, #5cb85c 0%, #4cae4c 100%); background: -o-linear-gradient(top, #5cb85c 0%, #4cae4c 100%); background: linear-gradient(to bottom, #5cb85c 0%, #4cae4c 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff5CB85C", endColorstr="#de5CB85C", GradientType=0); } #fcx-options-bar .progress .progress-bar[data-keyname=published].fcx-zero, #fcx-options-error-bar .progress .progress-bar[data-keyname=published].fcx-zero { background: -webkit-gradient(linear, left top, left bottom, from(#ed4c33), to(#eb371c)); background: -webkit-linear-gradient(top, #ed4c33 0%, #eb371c 100%); background: -o-linear-gradient(top, #ed4c33 0%, #eb371c 100%); background: linear-gradient(to bottom, #ed4c33 0%, #eb371c 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffED4C33", endColorstr="#deED4C33", GradientType=0); } #fcx-options-bar .progress .progress-bar[data-keyname=info], #fcx-options-error-bar .progress .progress-bar[data-keyname=info] { background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#373737)); background: -webkit-linear-gradient(top, #444 0%, #373737 100%); background: -o-linear-gradient(top, #444 0%, #373737 100%); background: linear-gradient(to bottom, #444 0%, #373737 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff444444", endColorstr="#de444444", GradientType=0); } #fcx-options-bar .progress .progress-bar[data-keyname=info] + .tooltip .tooltip-arrow[style], #fcx-options-error-bar .progress .progress-bar[data-keyname=info] + .tooltip .tooltip-arrow[style] { left: 48px !important; left: 3rem !important; } #fcx-options-bar .progress .progress-bar[data-keyname=info] + .tooltip .tooltip-inner, #fcx-options-error-bar .progress .progress-bar[data-keyname=info] + .tooltip .tooltip-inner { padding: 8px 12px; } #fcx-options-bar .progress .progress-bar[data-keyname=info] + .tooltip th, #fcx-options-error-bar .progress .progress-bar[data-keyname=info] + .tooltip th, #fcx-options-bar .progress .progress-bar[data-keyname=info] + .tooltip td, #fcx-options-error-bar .progress .progress-bar[data-keyname=info] + .tooltip td { text-align: right; font-weight: normal; white-space: nowrap; } #fcx-options-bar .progress .progress-bar[data-keyname=info] + .tooltip td, #fcx-options-error-bar .progress .progress-bar[data-keyname=info] + .tooltip td { padding: 2px 2px 2px 15px; } #fcx-images h4 span.label { font-size: 11px; vertical-align: 2px; font-weight: normal; } #fcx-images h4 span:first-of-type { margin-left: 6px; } #fcx-images .fcx-functions { padding-top: 6px; } #fcx-images .fcx-functions .icon { font-size: 18px; padding: 2px; cursor: pointer; -webkit-transition: color 0.25s ease; -o-transition: color 0.25s ease; transition: color 0.25s ease; } #fcx-images .fcx-functions .fa-folder { color: #39a9e0; } #fcx-images .fcx-functions .fa-folder:hover { color: #65bce7; } #fcx-images .fcx-functions .fa-trash-alt { color: #ff8746; } #fcx-images .fcx-functions .fa-trash-alt:hover { color: #ffa879; } #fcx-images .fcx-functions.inactive i[class^=fa] { color: #ccc; cursor: default; } #fcx-h-edit { display: none; } #fcx-h-selected { color: #39a9e0; font-size: 18px; } .fcx-no-upload { margin-bottom: -30px; } .fcx-no-upload .fcx-info { background-color: #fafafa; border-left: 1px solid #ededed; border-right: 1px solid #ededed; color: #39a9e0; font-size: 24px; line-height: 2; padding: 3em 15px 6em; text-align: center; } .fcx-no-upload .fcx-info small { color: #bbb; font-size: 85%; } .fcx-tags .btn-primary { color: #999; border: 1px solid #ddd; -webkit-transition: 0.3s ease; -o-transition: 0.3s ease; transition: 0.3s ease; max-width: 120px; display: inline-block; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .fcx-tags .btn-primary:hover { color: #39a9e0; border-color: #39a9e0; background: #fff; } .fcx-upload-publish-success { border-radius: 3px; padding: 8px 15px 1px; border: 1px solid rgba(0, 0, 0, 0.1); background: #eaf6ea; } .fcx-limit-overall-exceeded a, .fcx-remaining_current_week-exceeded a { margin: -3px 0 0 0; } .fcx-limit-overall-exceeded.fcx-hidden, .fcx-remaining_current_week-exceeded.fcx-hidden { display: none; } #fcx-settings-form { margin-bottom: 32px; margin-bottom: 2rem; } #fcx-settings-form .fcx-settings-errormessage { display: none; } #fcx-settings-form .fcx-settings-errormessage span { color: #ff8746; } #fcx-settings-form .fcx-settings-field.fcx-settings-error .fcx-settings-errormessage { display: block; } #fcx-settings-form .fcx-settings-field.fcx-settings-error select[name=category] + .bootstrap-select > button, #fcx-settings-form .fcx-settings-field.fcx-settings-error select[name=license] + .bootstrap-select > button, #fcx-settings-form .fcx-settings-field.fcx-settings-error select[name=sale] + .bootstrap-select > button, #fcx-settings-form .fcx-settings-field.fcx-settings-error div.bootstrap-tagsinput, #fcx-settings-form .fcx-settings-field.fcx-settings-error input[name=title], #fcx-settings-form .fcx-settings-field.fcx-settings-error textarea[name=description] { border: 1px solid #ff8746; } .fcx-new-modal .modal-content { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 20px 40px; min-height: 300px; font-size: 16px; } .fcx-new-modal .modal-body { width: 100%; } .fcx-new-modal .modal-body i.icon { display: block; font-size: 64px; font-weight: bold; margin: 0; padding: 0; } .fcx-new-modal .modal-body i.icon::before { margin: 0 !important; } .fcx-new-modal .modal-body.fcx-done i { color: #5cb85c; } .fcx-new-modal .modal-body.fcx-fail i { color: #ff8746; } .fcx-new-modal .modal-body.fcx-confirm i { color: #f0ad4e; } .fcx-new-modal .fcx-spinner { margin-top: 20px; margin-bottom: 20px; } .fcx-new-modal.fcx-animated.in .modal-dialog { -webkit-animation: popup 0.5s ease; animation: popup 0.5s ease; } @-webkit-keyframes popup { 0% { -webkit-transform: scale(0.7); transform: scale(0.7); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes popup { 0% { -webkit-transform: scale(0.7); transform: scale(0.7); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } .fcx-new-modal.fcx-animated.in .modal-dialog i.icon { -webkit-animation: spin 1s linear; animation: spin 1s linear; } @-webkit-keyframes spin { 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 100% { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } } @keyframes spin { 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 100% { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } } @-webkit-keyframes passing-through { 0% { opacity: 0; -webkit-transform: translateY(40px); transform: translateY(40px); } 30%, 70% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-40px); transform: translateY(-40px); } } @keyframes passing-through { 0% { opacity: 0; -webkit-transform: translateY(40px); transform: translateY(40px); } 30%, 70% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-40px); transform: translateY(-40px); } } @-webkit-keyframes slide-in { 0% { opacity: 0; -webkit-transform: translateY(40px); transform: translateY(40px); } 30% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slide-in { 0% { opacity: 0; -webkit-transform: translateY(40px); transform: translateY(40px); } 30% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 10% { -webkit-transform: scale(1.1); transform: scale(1.1); } 20% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 10% { -webkit-transform: scale(1.1); transform: scale(1.1); } 20% { -webkit-transform: scale(1); transform: scale(1); } } #contest-create__cat-ppu label { text-align: left; padding-top: 4px !important; } @media screen and (max-width: 768px) { button#contest_create_create { width: 100%; } .contest-view__photos { margin: 0 10px; } .contest-preview__images { display: block; } .contest-preview__images .contest-preview__img-placeholder { height: 100px; margin-bottom: 10px; } .contest-container h1 { line-height: 46px; margin-bottom: 15px; text-align: center; } #contest-preview { border: 8px solid #39a9e0; padding-bottom: 50px; background-color: #fff; margin: 0 -20px; } #contest-preview .nav__sub { max-width: 300px; display: block; white-space: normal; } #contest-preview .nav__sub a:not(.button) { width: 100%; } #contest-preview .nav__sub li { display: block; margin-bottom: 5px; width: 100%; text-align: center; } #contest-create__head { margin: 0 20px 20px; } #contest-create__head h1, #contest-create__head h2 { text-align: center; margin-bottom: 10px; } #contest-create__body { margin: 0 20px; } #contest-create__body h2 { text-align: center; margin-bottom: 10px; } .contest-create__step--left, .contest-create__step--right { padding: 25px 0px 0 0; } .grid-container__contest-create { display: block; grid-template-columns: 100% 1fr; grid-template-rows: 1fr; grid-gap: 1px 1px; } #contest-create__head { display: block; } .contest-create__step--vl { display: none; } .contest-create__step--one, .contest-create__step--two, .contest-create__step--three, .contest-create__step--four { justify-content: center; align-items: center; } .contest-create__step--one .contest-create__step--circle, .contest-create__step--two .contest-create__step--circle, .contest-create__step--three .contest-create__step--circle, .contest-create__step--four .contest-create__step--circle { font-size: 30px; line-height: 41px; width: 70px; height: 70px; margin: 20px auto; justify-content: center; align-items: center; } .contest-create__step-one, .contest-create__step-two, .contest-create__step-three, .contest-create__step-four { display: block; grid-template-columns: 100% 1fr; grid-template-rows: 1fr; } .switch-container { margin-top: 20px; } .contest-create__step--four { display: block; } } .vdatetime-popup__header, .vdatetime-calendar__month__day--selected > span > span { background: #39a9e0 !important; } .vdatetime-time-picker__item--selected, .vdatetime-time-picker__item--selected, .vdatetime-popup__actions__button, .vdatetime-popup__actions__button--cancel { color: #39a9e0 !important; } .contest-slider-infos { padding: 0px !important; } .subinfo-staus { font-size: 12px !important; font-weight: 600; letter-spacing: 1px; margin: 0px 0px 10px 0px; color: rgba(64, 71, 86, 0.5) !important; } .contest-backlink { display: block; color: currentColor; font-size: 0.875rem; line-height: 1.35; padding: 20px 20px 0px 15px !important; border-radius: 3px; border: none !important; background-color: none; } .contest-backlink i { font-size: 1.6rem; } .contest-backlink-li::after, .contest-backlink-li:hover::after, .contest-backlink-li:active::after { display: none !important; height: 0px !important; } @media screen and (max-width: 480px) { .contest-backlink { display: block; color: currentColor; font-size: 0.875rem; line-height: 1.35; padding: 0.5rem 1.125rem !important; border-radius: 3px !important; border: 1px solid rgba(51, 51, 51, 0.15) !important; background-color: #fff; } .contest-backlink i { font-size: 1rem; } } .slider { overflow-x: hidden; padding-bottom: 20px; /* width: 1000px; bei Bedarf anpassen, da hier 100% gewünscht sind, kann man die Angabe einsparen */ } .sliderElements { width: 300%; /* Summe der Einzelbreiten der Slides */ } .sliderElements > li { float: left; width: calc(100% / 3); /* 100 durch Anzahl der Slides */ height: 600px; display: block; position: relative; } @media screen and (max-width: 480px) { .sliderElements > li { height: auto; } .sliderElements > li p { font-size: 12px; } } @media screen and (max-width: 992px) { .sliderElements > li { height: auto; } } @keyframes banner { 0%, 5% { left: 0; } 15%, 65% { left: -33.33%; } 100% { left: -66.66%; } } .sliderElements .fc-banner { animation-name: banner; animation-duration: 10s; animation-delay: 15s; animation-iteration-count: 1; animation-fill-mode: forwards; } /* Clearfix für die Liste */ .sliderElements:after { content: "."; display: block; height: 0.1px; clear: both; visibility: hidden; font-size: 0; overflow: hidden; } .sliderElements { position: relative; left: 0; } .slider input:nth-of-type(2):checked ~ .sliderElements { left: -100%; } .slider input:nth-of-type(3):checked ~ .sliderElements { left: -200%; } .sliderElements, .sliderElements figure, .sliderControls { margin: 0; } .sliderElements:after { content: "."; display: block; height: 0.1px; clear: both; visibility: hidden; font-size: 0; overflow: hidden; } .cssSlider { overflow-x: hidden; padding-bottom: 20px; } .sliderElements { list-style: none; position: relative; left: 0; width: 300%; margin-bottom: 0.8em; padding: 0; -webkit-transition: left 0.8s ease-in-out; -moz-transition: left 0.8s ease-in-out; -o-transition: left 0.8s ease-in-out; transition: left 0.8s ease-in-out; } #slide02:checked ~ .sliderElements { left: -100%; } #slide03:checked ~ .sliderElements { left: -200%; } /* Bildunterschrift auf dem Bild positionieren */ .sliderElements figcaption { display: block; color: #fff; position: absolute; left: 0; bottom: 1em; padding: 0.4em; background: rgba(0, 0, 0, 0.5); } /* Bilder responsive */ .sliderElements img { width: 100%; height: auto; } /* inputs aus dem Blickfeld schieben */ .cssSlider input { position: absolute; left: -99999px; } /* mittige Ausrichtung der Controls - funktioniert im Zusammenspiel mit inline-block */ .sliderControls { text-align: center; } /* Controls nebeneinander bringen */ .sliderControls li { display: inline-block; } /* Controls auf einheitliche Maße bringen und die Ecken abrunden */ .sliderControls label { width: 10px; height: 10px; line-height: 10px; text-align: center; border-radius: 50%; display: block; cursor: pointer; background: #eeeeee; color: #eeeeee; } /* Attributselektor und indirekter Nachfahrkombinator zum ansteuern der labels */ .sliderControls label:hover, #slide01:checked ~ .sliderControls label[for=slide01], #slide02:checked ~ .sliderControls label[for=slide02], #slide03:checked ~ .sliderControls label[for=slide03] { background: #39a9e0; color: #39a9e0; } #flowcircles__body { margin: 0px; } #flowcircles__cat-ppu { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } #flowcircles__cat-ppu select:first-of-type { width: 50%; } #flowcircles__cat-ppu label { text-align: end; width: 30%; padding-top: 14px; margin-left: 16px; padding-right: 16px; } #flowcircles__cat-ppu select:last-of-type { width: 20%; } .flowcircles__step--left, .flowcircles__step--right { padding: 25px 25px 0 0; } .grid-container__flowcircles { display: grid; grid-template-columns: 100px 1fr; grid-template-rows: 2fr 2fr 2fr 1fr; grid-gap: 1px 1px; grid-template-areas: "flowcircles__step--one flowcircles__step-one" "flowcircles__step--two flowcircles__step-two" "flowcircles__step--three flowcircles__step-three" "flowcircles__step--four flowcircles__step-four"; grid-template-rows: max-content; } .flowcircles__step--circle { width: 56px; height: 56px; margin: 15px 25px; background-color: #39a9e0; border-radius: 50%; color: #fff; font-size: 25px; line-height: 30px; padding: 13px; text-align: center; } .flowcircles__step--vl { grid-area: flowcircles__step--vl; } .flowcircles__step--vl { border-left: 3px solid #39a9e0; height: inherit; margin-left: 50px; top: 0; } .flowcircles__step--one { display: grid; grid-template-columns: 1fr; grid-template-rows: 100px 1fr; grid-template-areas: "." "flowcircles__step--vl"; grid-area: flowcircles__step--one; margin-bottom: 10px; } .flowcircles__step--two { display: grid; grid-template-columns: 1fr; grid-template-rows: 100px 1fr; grid-template-areas: "." "flowcircles__step--vl"; grid-area: flowcircles__step--two; } .flowcircles__step--three { display: grid; grid-template-columns: 1fr; grid-template-rows: 100px 1fr; grid-template-areas: "." "flowcircles__step--vl"; grid-area: flowcircles__step--three; } .flowcircles__step--four { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100px 1fr; grid-template-areas: "." "."; grid-area: flowcircles__step--four; } .flowcircles__step--one, .flowcircles__step--two, .flowcircles__step--three, .flowcircles__step--four { margin-bottom: 20px; } .flowcircles__step-one, .flowcircles__step-two, .flowcircles__step-three, .flowcircles__step-four { margin-bottom: 20px; padding-bottom: 30px; } .flowcircles__step-one { display: grid; grid-template-columns: 1fr; grid-template-rows: 100px 1fr; grid-template-areas: "flowcircles__step-one--headline flowcircles__step-one--headline" "flowcircles__step-one--left flowcircles__step-one--right"; grid-area: flowcircles__step-one; } .flowcircles__step--headline span, .flowcircles__step--headline p { color: #222; font-size: 16px; letter-spacing: 0; margin: 0px 0 10px 0 !important; } .flowcircles__step-one--headline { grid-area: flowcircles__step-one--headline; } .flowcircles__step-one--left { grid-area: flowcircles__step-one--left; } .flowcircles__step-one--right { grid-area: flowcircles__step-one--right; } .flowcircles__step-two { display: grid; grid-template-columns: 1fr; grid-template-rows: 100px 1fr; grid-template-areas: "flowcircles__step-two--headline flowcircles__step-two--headline" "flowcircles__step-two--left flowcircles__step-two--right"; grid-area: flowcircles__step-two; } .flowcircles__step-two--headline { grid-area: flowcircles__step-two--headline; } .flowcircles__step-two--left { grid-area: flowcircles__step-two--left; } .flowcircles__step-two--right { grid-area: flowcircles__step-two--right; } .flowcircles__step-three { display: grid; grid-template-columns: 1fr; grid-template-rows: 100px 1fr; grid-template-areas: "flowcircles__step-three--headline flowcircles__step-three--headline" "flowcircles__step-three--left flowcircles__step-three--right"; grid-area: flowcircles__step-three; } .flowcircles__step-three--headline { grid-area: flowcircles__step-three--headline; } .flowcircles__step-three--slider { grid-area: flowcircles__step-three--slider; } .flowcircles__step-three--left { grid-area: flowcircles__step-three--left; } .flowcircles__step-three--right { grid-area: flowcircles__step-three--right; } .flowcircles__step-four { display: grid; grid-template-columns: 1fr; grid-template-rows: 100px 1fr 1fr; grid-template-areas: "flowcircles__step-four--headline" "flowcircles__step-four--info" "flowcircles__step-four--buttons"; grid-area: flowcircles__step-four; } .flowcircles__step-four--headline { grid-area: flowcircles__step-four--headline; } .flowcircles__step-four--info { grid-area: flowcircles__step-four--info; color: #222; font-size: 16px; letter-spacing: 0; line-height: 22px; max-width: 800px; } .flowcircles__step-four--buttons { grid-area: flowcircles__step-four--buttons; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; padding: 0 0 25px 0; } @media screen and (max-width: 768px) { #flowcircles__body { margin: 0 20px; } #flowcircles__body h2 { text-align: center; margin-bottom: 10px; } .flowcircles__step--left, .flowcircles__step--right { padding: 25px 0px 0 0; } .grid-container__flowcircles { display: block; grid-template-columns: 100% 1fr; grid-template-rows: 1fr; grid-gap: 1px 1px; } #flowcircles__head { display: block; } .flowcircles__step--vl { display: none; } .flowcircles__step--one, .flowcircles__step--two, .flowcircles__step--three, .flowcircles__step--four { justify-content: center; align-items: center; } .flowcircles__step--one .flowcircles__step--circle, .flowcircles__step--two .flowcircles__step--circle, .flowcircles__step--three .flowcircles__step--circle, .flowcircles__step--four .flowcircles__step--circle { font-size: 30px; line-height: 41px; width: 70px; height: 70px; margin: 20px auto; justify-content: center; align-items: center; } .flowcircles__step-one, .flowcircles__step-two, .flowcircles__step-three, .flowcircles__step-four { display: block; grid-template-columns: 100% 1fr; grid-template-rows: 1fr; } .flowcircles__step--four { display: block; } } .flowcircles__step--left img { border: 1px solid #888; } .example-image-mobile { display: none; } @media screen and (max-width: 480px) { .example-image-web { display: none; } .example-image-mobile { display: block; } } .rect-auto, .c100.p51 .slice, .c100.p52 .slice, .c100.p53 .slice, .c100.p54 .slice, .c100.p55 .slice, .c100.p56 .slice, .c100.p57 .slice, .c100.p58 .slice, .c100.p59 .slice, .c100.p60 .slice, .c100.p61 .slice, .c100.p62 .slice, .c100.p63 .slice, .c100.p64 .slice, .c100.p65 .slice, .c100.p66 .slice, .c100.p67 .slice, .c100.p68 .slice, .c100.p69 .slice, .c100.p70 .slice, .c100.p71 .slice, .c100.p72 .slice, .c100.p73 .slice, .c100.p74 .slice, .c100.p75 .slice, .c100.p76 .slice, .c100.p77 .slice, .c100.p78 .slice, .c100.p79 .slice, .c100.p80 .slice, .c100.p81 .slice, .c100.p82 .slice, .c100.p83 .slice, .c100.p84 .slice, .c100.p85 .slice, .c100.p86 .slice, .c100.p87 .slice, .c100.p88 .slice, .c100.p89 .slice, .c100.p90 .slice, .c100.p91 .slice, .c100.p92 .slice, .c100.p93 .slice, .c100.p94 .slice, .c100.p95 .slice, .c100.p96 .slice, .c100.p97 .slice, .c100.p98 .slice, .c100.p99 .slice, .c100.p100 .slice { clip: rect(auto, auto, auto, auto); } .pie, .c100 .bar, .c100.p51 .fill, .c100.p52 .fill, .c100.p53 .fill, .c100.p54 .fill, .c100.p55 .fill, .c100.p56 .fill, .c100.p57 .fill, .c100.p58 .fill, .c100.p59 .fill, .c100.p60 .fill, .c100.p61 .fill, .c100.p62 .fill, .c100.p63 .fill, .c100.p64 .fill, .c100.p65 .fill, .c100.p66 .fill, .c100.p67 .fill, .c100.p68 .fill, .c100.p69 .fill, .c100.p70 .fill, .c100.p71 .fill, .c100.p72 .fill, .c100.p73 .fill, .c100.p74 .fill, .c100.p75 .fill, .c100.p76 .fill, .c100.p77 .fill, .c100.p78 .fill, .c100.p79 .fill, .c100.p80 .fill, .c100.p81 .fill, .c100.p82 .fill, .c100.p83 .fill, .c100.p84 .fill, .c100.p85 .fill, .c100.p86 .fill, .c100.p87 .fill, .c100.p88 .fill, .c100.p89 .fill, .c100.p90 .fill, .c100.p91 .fill, .c100.p92 .fill, .c100.p93 .fill, .c100.p94 .fill, .c100.p95 .fill, .c100.p96 .fill, .c100.p97 .fill, .c100.p98 .fill, .c100.p99 .fill, .c100.p100 .fill { position: absolute; border: 0.09em solid #39a9e0; width: 0.84em; height: 0.84em; clip: rect(0em, 0.5em, 1em, 0em); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } .pie-fill, .c100.p51 .bar:after, .c100.p51 .fill, .c100.p52 .bar:after, .c100.p52 .fill, .c100.p53 .bar:after, .c100.p53 .fill, .c100.p54 .bar:after, .c100.p54 .fill, .c100.p55 .bar:after, .c100.p55 .fill, .c100.p56 .bar:after, .c100.p56 .fill, .c100.p57 .bar:after, .c100.p57 .fill, .c100.p58 .bar:after, .c100.p58 .fill, .c100.p59 .bar:after, .c100.p59 .fill, .c100.p60 .bar:after, .c100.p60 .fill, .c100.p61 .bar:after, .c100.p61 .fill, .c100.p62 .bar:after, .c100.p62 .fill, .c100.p63 .bar:after, .c100.p63 .fill, .c100.p64 .bar:after, .c100.p64 .fill, .c100.p65 .bar:after, .c100.p65 .fill, .c100.p66 .bar:after, .c100.p66 .fill, .c100.p67 .bar:after, .c100.p67 .fill, .c100.p68 .bar:after, .c100.p68 .fill, .c100.p69 .bar:after, .c100.p69 .fill, .c100.p70 .bar:after, .c100.p70 .fill, .c100.p71 .bar:after, .c100.p71 .fill, .c100.p72 .bar:after, .c100.p72 .fill, .c100.p73 .bar:after, .c100.p73 .fill, .c100.p74 .bar:after, .c100.p74 .fill, .c100.p75 .bar:after, .c100.p75 .fill, .c100.p76 .bar:after, .c100.p76 .fill, .c100.p77 .bar:after, .c100.p77 .fill, .c100.p78 .bar:after, .c100.p78 .fill, .c100.p79 .bar:after, .c100.p79 .fill, .c100.p80 .bar:after, .c100.p80 .fill, .c100.p81 .bar:after, .c100.p81 .fill, .c100.p82 .bar:after, .c100.p82 .fill, .c100.p83 .bar:after, .c100.p83 .fill, .c100.p84 .bar:after, .c100.p84 .fill, .c100.p85 .bar:after, .c100.p85 .fill, .c100.p86 .bar:after, .c100.p86 .fill, .c100.p87 .bar:after, .c100.p87 .fill, .c100.p88 .bar:after, .c100.p88 .fill, .c100.p89 .bar:after, .c100.p89 .fill, .c100.p90 .bar:after, .c100.p90 .fill, .c100.p91 .bar:after, .c100.p91 .fill, .c100.p92 .bar:after, .c100.p92 .fill, .c100.p93 .bar:after, .c100.p93 .fill, .c100.p94 .bar:after, .c100.p94 .fill, .c100.p95 .bar:after, .c100.p95 .fill, .c100.p96 .bar:after, .c100.p96 .fill, .c100.p97 .bar:after, .c100.p97 .fill, .c100.p98 .bar:after, .c100.p98 .fill, .c100.p99 .bar:after, .c100.p99 .fill, .c100.p100 .bar:after, .c100.p100 .fill { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .c100 { position: relative; font-size: 120px; width: 1em; height: 1em; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; float: left; margin: 0 0.1em 0.1em 0; background-color: #fff; } .c100 *, .c100 *:before, .c100 *:after { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .c100.center { float: none; margin: 0 auto; } .c100.big { font-size: 240px; } .c100.small { font-size: 25px; } .c100 > span { position: absolute; width: 100%; z-index: 1; left: 0; top: 0; width: 5em; line-height: 5em; font-size: 0.2em; color: #39a9e0; display: block; text-align: center; white-space: nowrap; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .c100:after { position: absolute; top: 0.08em; left: 0.08em; display: block; content: " "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; background-color: #fff; width: 0.84em; height: 0.84em; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; transition-timing-function: ease-in; } .c100 .slice { position: absolute; width: 1em; height: 1em; clip: rect(0em, 1em, 1em, 0.5em); } .c100.p1 .bar { -webkit-transform: rotate(3.6deg); -moz-transform: rotate(3.6deg); -ms-transform: rotate(3.6deg); -o-transform: rotate(3.6deg); transform: rotate(3.6deg); } .c100.p2 .bar { -webkit-transform: rotate(7.2deg); -moz-transform: rotate(7.2deg); -ms-transform: rotate(7.2deg); -o-transform: rotate(7.2deg); transform: rotate(7.2deg); } .c100.p3 .bar { -webkit-transform: rotate(10.8deg); -moz-transform: rotate(10.8deg); -ms-transform: rotate(10.8deg); -o-transform: rotate(10.8deg); transform: rotate(10.8deg); } .c100.p4 .bar { -webkit-transform: rotate(14.4deg); -moz-transform: rotate(14.4deg); -ms-transform: rotate(14.4deg); -o-transform: rotate(14.4deg); transform: rotate(14.4deg); } .c100.p5 .bar { -webkit-transform: rotate(18deg); -moz-transform: rotate(18deg); -ms-transform: rotate(18deg); -o-transform: rotate(18deg); transform: rotate(18deg); } .c100.p6 .bar { -webkit-transform: rotate(21.6deg); -moz-transform: rotate(21.6deg); -ms-transform: rotate(21.6deg); -o-transform: rotate(21.6deg); transform: rotate(21.6deg); } .c100.p7 .bar { -webkit-transform: rotate(25.2deg); -moz-transform: rotate(25.2deg); -ms-transform: rotate(25.2deg); -o-transform: rotate(25.2deg); transform: rotate(25.2deg); } .c100.p8 .bar { -webkit-transform: rotate(28.8deg); -moz-transform: rotate(28.8deg); -ms-transform: rotate(28.8deg); -o-transform: rotate(28.8deg); transform: rotate(28.8deg); } .c100.p9 .bar { -webkit-transform: rotate(32.4deg); -moz-transform: rotate(32.4deg); -ms-transform: rotate(32.4deg); -o-transform: rotate(32.4deg); transform: rotate(32.4deg); } .c100.p10 .bar { -webkit-transform: rotate(36deg); -moz-transform: rotate(36deg); -ms-transform: rotate(36deg); -o-transform: rotate(36deg); transform: rotate(36deg); } .c100.p11 .bar { -webkit-transform: rotate(39.6deg); -moz-transform: rotate(39.6deg); -ms-transform: rotate(39.6deg); -o-transform: rotate(39.6deg); transform: rotate(39.6deg); } .c100.p12 .bar { -webkit-transform: rotate(43.2deg); -moz-transform: rotate(43.2deg); -ms-transform: rotate(43.2deg); -o-transform: rotate(43.2deg); transform: rotate(43.2deg); } .c100.p13 .bar { -webkit-transform: rotate(46.8deg); -moz-transform: rotate(46.8deg); -ms-transform: rotate(46.8deg); -o-transform: rotate(46.8deg); transform: rotate(46.8deg); } .c100.p14 .bar { -webkit-transform: rotate(50.4deg); -moz-transform: rotate(50.4deg); -ms-transform: rotate(50.4deg); -o-transform: rotate(50.4deg); transform: rotate(50.4deg); } .c100.p15 .bar { -webkit-transform: rotate(54deg); -moz-transform: rotate(54deg); -ms-transform: rotate(54deg); -o-transform: rotate(54deg); transform: rotate(54deg); } .c100.p16 .bar { -webkit-transform: rotate(57.6deg); -moz-transform: rotate(57.6deg); -ms-transform: rotate(57.6deg); -o-transform: rotate(57.6deg); transform: rotate(57.6deg); } .c100.p17 .bar { -webkit-transform: rotate(61.2deg); -moz-transform: rotate(61.2deg); -ms-transform: rotate(61.2deg); -o-transform: rotate(61.2deg); transform: rotate(61.2deg); } .c100.p18 .bar { -webkit-transform: rotate(64.8deg); -moz-transform: rotate(64.8deg); -ms-transform: rotate(64.8deg); -o-transform: rotate(64.8deg); transform: rotate(64.8deg); } .c100.p19 .bar { -webkit-transform: rotate(68.4deg); -moz-transform: rotate(68.4deg); -ms-transform: rotate(68.4deg); -o-transform: rotate(68.4deg); transform: rotate(68.4deg); } .c100.p20 .bar { -webkit-transform: rotate(72deg); -moz-transform: rotate(72deg); -ms-transform: rotate(72deg); -o-transform: rotate(72deg); transform: rotate(72deg); } .c100.p21 .bar { -webkit-transform: rotate(75.6deg); -moz-transform: rotate(75.6deg); -ms-transform: rotate(75.6deg); -o-transform: rotate(75.6deg); transform: rotate(75.6deg); } .c100.p22 .bar { -webkit-transform: rotate(79.2deg); -moz-transform: rotate(79.2deg); -ms-transform: rotate(79.2deg); -o-transform: rotate(79.2deg); transform: rotate(79.2deg); } .c100.p23 .bar { -webkit-transform: rotate(82.8deg); -moz-transform: rotate(82.8deg); -ms-transform: rotate(82.8deg); -o-transform: rotate(82.8deg); transform: rotate(82.8deg); } .c100.p24 .bar { -webkit-transform: rotate(86.4deg); -moz-transform: rotate(86.4deg); -ms-transform: rotate(86.4deg); -o-transform: rotate(86.4deg); transform: rotate(86.4deg); } .c100.p25 .bar { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .c100.p26 .bar { -webkit-transform: rotate(93.6deg); -moz-transform: rotate(93.6deg); -ms-transform: rotate(93.6deg); -o-transform: rotate(93.6deg); transform: rotate(93.6deg); } .c100.p27 .bar { -webkit-transform: rotate(97.2deg); -moz-transform: rotate(97.2deg); -ms-transform: rotate(97.2deg); -o-transform: rotate(97.2deg); transform: rotate(97.2deg); } .c100.p28 .bar { -webkit-transform: rotate(100.8deg); -moz-transform: rotate(100.8deg); -ms-transform: rotate(100.8deg); -o-transform: rotate(100.8deg); transform: rotate(100.8deg); } .c100.p29 .bar { -webkit-transform: rotate(104.4deg); -moz-transform: rotate(104.4deg); -ms-transform: rotate(104.4deg); -o-transform: rotate(104.4deg); transform: rotate(104.4deg); } .c100.p30 .bar { -webkit-transform: rotate(108deg); -moz-transform: rotate(108deg); -ms-transform: rotate(108deg); -o-transform: rotate(108deg); transform: rotate(108deg); } .c100.p31 .bar { -webkit-transform: rotate(111.6deg); -moz-transform: rotate(111.6deg); -ms-transform: rotate(111.6deg); -o-transform: rotate(111.6deg); transform: rotate(111.6deg); } .c100.p32 .bar { -webkit-transform: rotate(115.2deg); -moz-transform: rotate(115.2deg); -ms-transform: rotate(115.2deg); -o-transform: rotate(115.2deg); transform: rotate(115.2deg); } .c100.p33 .bar { -webkit-transform: rotate(118.8deg); -moz-transform: rotate(118.8deg); -ms-transform: rotate(118.8deg); -o-transform: rotate(118.8deg); transform: rotate(118.8deg); } .c100.p34 .bar { -webkit-transform: rotate(122.4deg); -moz-transform: rotate(122.4deg); -ms-transform: rotate(122.4deg); -o-transform: rotate(122.4deg); transform: rotate(122.4deg); } .c100.p35 .bar { -webkit-transform: rotate(126deg); -moz-transform: rotate(126deg); -ms-transform: rotate(126deg); -o-transform: rotate(126deg); transform: rotate(126deg); } .c100.p36 .bar { -webkit-transform: rotate(129.6deg); -moz-transform: rotate(129.6deg); -ms-transform: rotate(129.6deg); -o-transform: rotate(129.6deg); transform: rotate(129.6deg); } .c100.p37 .bar { -webkit-transform: rotate(133.2deg); -moz-transform: rotate(133.2deg); -ms-transform: rotate(133.2deg); -o-transform: rotate(133.2deg); transform: rotate(133.2deg); } .c100.p38 .bar { -webkit-transform: rotate(136.8deg); -moz-transform: rotate(136.8deg); -ms-transform: rotate(136.8deg); -o-transform: rotate(136.8deg); transform: rotate(136.8deg); } .c100.p39 .bar { -webkit-transform: rotate(140.4deg); -moz-transform: rotate(140.4deg); -ms-transform: rotate(140.4deg); -o-transform: rotate(140.4deg); transform: rotate(140.4deg); } .c100.p40 .bar { -webkit-transform: rotate(144deg); -moz-transform: rotate(144deg); -ms-transform: rotate(144deg); -o-transform: rotate(144deg); transform: rotate(144deg); } .c100.p41 .bar { -webkit-transform: rotate(147.6deg); -moz-transform: rotate(147.6deg); -ms-transform: rotate(147.6deg); -o-transform: rotate(147.6deg); transform: rotate(147.6deg); } .c100.p42 .bar { -webkit-transform: rotate(151.2deg); -moz-transform: rotate(151.2deg); -ms-transform: rotate(151.2deg); -o-transform: rotate(151.2deg); transform: rotate(151.2deg); } .c100.p43 .bar { -webkit-transform: rotate(154.8deg); -moz-transform: rotate(154.8deg); -ms-transform: rotate(154.8deg); -o-transform: rotate(154.8deg); transform: rotate(154.8deg); } .c100.p44 .bar { -webkit-transform: rotate(158.4deg); -moz-transform: rotate(158.4deg); -ms-transform: rotate(158.4deg); -o-transform: rotate(158.4deg); transform: rotate(158.4deg); } .c100.p45 .bar { -webkit-transform: rotate(162deg); -moz-transform: rotate(162deg); -ms-transform: rotate(162deg); -o-transform: rotate(162deg); transform: rotate(162deg); } .c100.p46 .bar { -webkit-transform: rotate(165.6deg); -moz-transform: rotate(165.6deg); -ms-transform: rotate(165.6deg); -o-transform: rotate(165.6deg); transform: rotate(165.6deg); } .c100.p47 .bar { -webkit-transform: rotate(169.2deg); -moz-transform: rotate(169.2deg); -ms-transform: rotate(169.2deg); -o-transform: rotate(169.2deg); transform: rotate(169.2deg); } .c100.p48 .bar { -webkit-transform: rotate(172.8deg); -moz-transform: rotate(172.8deg); -ms-transform: rotate(172.8deg); -o-transform: rotate(172.8deg); transform: rotate(172.8deg); } .c100.p49 .bar { -webkit-transform: rotate(176.4deg); -moz-transform: rotate(176.4deg); -ms-transform: rotate(176.4deg); -o-transform: rotate(176.4deg); transform: rotate(176.4deg); } .c100.p50 .bar { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .c100.p51 .bar { -webkit-transform: rotate(183.6deg); -moz-transform: rotate(183.6deg); -ms-transform: rotate(183.6deg); -o-transform: rotate(183.6deg); transform: rotate(183.6deg); } .c100.p52 .bar { -webkit-transform: rotate(187.2deg); -moz-transform: rotate(187.2deg); -ms-transform: rotate(187.2deg); -o-transform: rotate(187.2deg); transform: rotate(187.2deg); } .c100.p53 .bar { -webkit-transform: rotate(190.8deg); -moz-transform: rotate(190.8deg); -ms-transform: rotate(190.8deg); -o-transform: rotate(190.8deg); transform: rotate(190.8deg); } .c100.p54 .bar { -webkit-transform: rotate(194.4deg); -moz-transform: rotate(194.4deg); -ms-transform: rotate(194.4deg); -o-transform: rotate(194.4deg); transform: rotate(194.4deg); } .c100.p55 .bar { -webkit-transform: rotate(198deg); -moz-transform: rotate(198deg); -ms-transform: rotate(198deg); -o-transform: rotate(198deg); transform: rotate(198deg); } .c100.p56 .bar { -webkit-transform: rotate(201.6deg); -moz-transform: rotate(201.6deg); -ms-transform: rotate(201.6deg); -o-transform: rotate(201.6deg); transform: rotate(201.6deg); } .c100.p57 .bar { -webkit-transform: rotate(205.2deg); -moz-transform: rotate(205.2deg); -ms-transform: rotate(205.2deg); -o-transform: rotate(205.2deg); transform: rotate(205.2deg); } .c100.p58 .bar { -webkit-transform: rotate(208.8deg); -moz-transform: rotate(208.8deg); -ms-transform: rotate(208.8deg); -o-transform: rotate(208.8deg); transform: rotate(208.8deg); } .c100.p59 .bar { -webkit-transform: rotate(212.4deg); -moz-transform: rotate(212.4deg); -ms-transform: rotate(212.4deg); -o-transform: rotate(212.4deg); transform: rotate(212.4deg); } .c100.p60 .bar { -webkit-transform: rotate(216deg); -moz-transform: rotate(216deg); -ms-transform: rotate(216deg); -o-transform: rotate(216deg); transform: rotate(216deg); } .c100.p61 .bar { -webkit-transform: rotate(219.6deg); -moz-transform: rotate(219.6deg); -ms-transform: rotate(219.6deg); -o-transform: rotate(219.6deg); transform: rotate(219.6deg); } .c100.p62 .bar { -webkit-transform: rotate(223.2deg); -moz-transform: rotate(223.2deg); -ms-transform: rotate(223.2deg); -o-transform: rotate(223.2deg); transform: rotate(223.2deg); } .c100.p63 .bar { -webkit-transform: rotate(226.8deg); -moz-transform: rotate(226.8deg); -ms-transform: rotate(226.8deg); -o-transform: rotate(226.8deg); transform: rotate(226.8deg); } .c100.p64 .bar { -webkit-transform: rotate(230.4deg); -moz-transform: rotate(230.4deg); -ms-transform: rotate(230.4deg); -o-transform: rotate(230.4deg); transform: rotate(230.4deg); } .c100.p65 .bar { -webkit-transform: rotate(234deg); -moz-transform: rotate(234deg); -ms-transform: rotate(234deg); -o-transform: rotate(234deg); transform: rotate(234deg); } .c100.p66 .bar { -webkit-transform: rotate(237.6deg); -moz-transform: rotate(237.6deg); -ms-transform: rotate(237.6deg); -o-transform: rotate(237.6deg); transform: rotate(237.6deg); } .c100.p67 .bar { -webkit-transform: rotate(241.2deg); -moz-transform: rotate(241.2deg); -ms-transform: rotate(241.2deg); -o-transform: rotate(241.2deg); transform: rotate(241.2deg); } .c100.p68 .bar { -webkit-transform: rotate(244.8deg); -moz-transform: rotate(244.8deg); -ms-transform: rotate(244.8deg); -o-transform: rotate(244.8deg); transform: rotate(244.8deg); } .c100.p69 .bar { -webkit-transform: rotate(248.4deg); -moz-transform: rotate(248.4deg); -ms-transform: rotate(248.4deg); -o-transform: rotate(248.4deg); transform: rotate(248.4deg); } .c100.p70 .bar { -webkit-transform: rotate(252deg); -moz-transform: rotate(252deg); -ms-transform: rotate(252deg); -o-transform: rotate(252deg); transform: rotate(252deg); } .c100.p71 .bar { -webkit-transform: rotate(255.6deg); -moz-transform: rotate(255.6deg); -ms-transform: rotate(255.6deg); -o-transform: rotate(255.6deg); transform: rotate(255.6deg); } .c100.p72 .bar { -webkit-transform: rotate(259.2deg); -moz-transform: rotate(259.2deg); -ms-transform: rotate(259.2deg); -o-transform: rotate(259.2deg); transform: rotate(259.2deg); } .c100.p73 .bar { -webkit-transform: rotate(262.8deg); -moz-transform: rotate(262.8deg); -ms-transform: rotate(262.8deg); -o-transform: rotate(262.8deg); transform: rotate(262.8deg); } .c100.p74 .bar { -webkit-transform: rotate(266.4deg); -moz-transform: rotate(266.4deg); -ms-transform: rotate(266.4deg); -o-transform: rotate(266.4deg); transform: rotate(266.4deg); } .c100.p75 .bar { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); } .c100.p76 .bar { -webkit-transform: rotate(273.6deg); -moz-transform: rotate(273.6deg); -ms-transform: rotate(273.6deg); -o-transform: rotate(273.6deg); transform: rotate(273.6deg); } .c100.p77 .bar { -webkit-transform: rotate(277.2deg); -moz-transform: rotate(277.2deg); -ms-transform: rotate(277.2deg); -o-transform: rotate(277.2deg); transform: rotate(277.2deg); } .c100.p78 .bar { -webkit-transform: rotate(280.8deg); -moz-transform: rotate(280.8deg); -ms-transform: rotate(280.8deg); -o-transform: rotate(280.8deg); transform: rotate(280.8deg); } .c100.p79 .bar { -webkit-transform: rotate(284.4deg); -moz-transform: rotate(284.4deg); -ms-transform: rotate(284.4deg); -o-transform: rotate(284.4deg); transform: rotate(284.4deg); } .c100.p80 .bar { -webkit-transform: rotate(288deg); -moz-transform: rotate(288deg); -ms-transform: rotate(288deg); -o-transform: rotate(288deg); transform: rotate(288deg); } .c100.p81 .bar { -webkit-transform: rotate(291.6deg); -moz-transform: rotate(291.6deg); -ms-transform: rotate(291.6deg); -o-transform: rotate(291.6deg); transform: rotate(291.6deg); } .c100.p82 .bar { -webkit-transform: rotate(295.2deg); -moz-transform: rotate(295.2deg); -ms-transform: rotate(295.2deg); -o-transform: rotate(295.2deg); transform: rotate(295.2deg); } .c100.p83 .bar { -webkit-transform: rotate(298.8deg); -moz-transform: rotate(298.8deg); -ms-transform: rotate(298.8deg); -o-transform: rotate(298.8deg); transform: rotate(298.8deg); } .c100.p84 .bar { -webkit-transform: rotate(302.4deg); -moz-transform: rotate(302.4deg); -ms-transform: rotate(302.4deg); -o-transform: rotate(302.4deg); transform: rotate(302.4deg); } .c100.p85 .bar { -webkit-transform: rotate(306deg); -moz-transform: rotate(306deg); -ms-transform: rotate(306deg); -o-transform: rotate(306deg); transform: rotate(306deg); } .c100.p86 .bar { -webkit-transform: rotate(309.6deg); -moz-transform: rotate(309.6deg); -ms-transform: rotate(309.6deg); -o-transform: rotate(309.6deg); transform: rotate(309.6deg); } .c100.p87 .bar { -webkit-transform: rotate(313.2deg); -moz-transform: rotate(313.2deg); -ms-transform: rotate(313.2deg); -o-transform: rotate(313.2deg); transform: rotate(313.2deg); } .c100.p88 .bar { -webkit-transform: rotate(316.8deg); -moz-transform: rotate(316.8deg); -ms-transform: rotate(316.8deg); -o-transform: rotate(316.8deg); transform: rotate(316.8deg); } .c100.p89 .bar { -webkit-transform: rotate(320.4deg); -moz-transform: rotate(320.4deg); -ms-transform: rotate(320.4deg); -o-transform: rotate(320.4deg); transform: rotate(320.4deg); } .c100.p90 .bar { -webkit-transform: rotate(324deg); -moz-transform: rotate(324deg); -ms-transform: rotate(324deg); -o-transform: rotate(324deg); transform: rotate(324deg); } .c100.p91 .bar { -webkit-transform: rotate(327.6deg); -moz-transform: rotate(327.6deg); -ms-transform: rotate(327.6deg); -o-transform: rotate(327.6deg); transform: rotate(327.6deg); } .c100.p92 .bar { -webkit-transform: rotate(331.2deg); -moz-transform: rotate(331.2deg); -ms-transform: rotate(331.2deg); -o-transform: rotate(331.2deg); transform: rotate(331.2deg); } .c100.p93 .bar { -webkit-transform: rotate(334.8deg); -moz-transform: rotate(334.8deg); -ms-transform: rotate(334.8deg); -o-transform: rotate(334.8deg); transform: rotate(334.8deg); } .c100.p94 .bar { -webkit-transform: rotate(338.4deg); -moz-transform: rotate(338.4deg); -ms-transform: rotate(338.4deg); -o-transform: rotate(338.4deg); transform: rotate(338.4deg); } .c100.p95 .bar { -webkit-transform: rotate(342deg); -moz-transform: rotate(342deg); -ms-transform: rotate(342deg); -o-transform: rotate(342deg); transform: rotate(342deg); } .c100.p96 .bar { -webkit-transform: rotate(345.6deg); -moz-transform: rotate(345.6deg); -ms-transform: rotate(345.6deg); -o-transform: rotate(345.6deg); transform: rotate(345.6deg); } .c100.p97 .bar { -webkit-transform: rotate(349.2deg); -moz-transform: rotate(349.2deg); -ms-transform: rotate(349.2deg); -o-transform: rotate(349.2deg); transform: rotate(349.2deg); } .c100.p98 .bar { -webkit-transform: rotate(352.8deg); -moz-transform: rotate(352.8deg); -ms-transform: rotate(352.8deg); -o-transform: rotate(352.8deg); transform: rotate(352.8deg); } .c100.p99 .bar { -webkit-transform: rotate(356.4deg); -moz-transform: rotate(356.4deg); -ms-transform: rotate(356.4deg); -o-transform: rotate(356.4deg); transform: rotate(356.4deg); } .c100.p100 .bar { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } .c100:hover { cursor: default; } .c100:hover:after { top: 0.04em; left: 0.04em; width: 0.92em; height: 0.92em; } .paywall { display: flex; justify-content: center; z-index: 6000; position: absolute; width: 100%; height: 100%; background-image: linear-gradient(to bottom, transparent 0, #fff 500px); } .paywall_box { background-color: #fff; width: 550px; height: 450px; margin-top: 180px; box-shadow: 0 0 3px 3px var(--border-color); text-align: center; padding: 50px 40px; } .paywall_box .button--lg { width: 100%; } .paywall_box .button + .button { margin-left: 0rem; } .paywall_box .small { padding-top: 10px; margin: 0; text-align: right; } .paywall_box img { width: 60px; } .paywall_box .paywall_content { box-shadow: 0 0 3px 3px var(--border-color); padding: 15px 5px 5px 5px; margin: 20px; } .priceHighlight { font-size: 1.5rem; font-weight: bold; } @media screen and (max-width: 480px) { .paywall_box { width: 80%; margin-top: 0px; padding: 30px 15px; } } @media screen and (max-width: 992px) { .paywall_box { margin-top: 0px; } } .podcastsite { background-color: white; } .podcastsite progress, .podcastsite progress::-webkit-progress-bar { background-color: transparent; height: 5px; margin-top: 1px; } .podcastsite progress::-webkit-progress-bar-value, .podcastsite progress::-webkit-progress-value { background-color: transparent; height: 5px; } .podcastsite progress::-moz-progress-bar { background-color: #39a9e0; height: 5px; } .podcastsite progress[value]::-webkit-progress-bar { background-color: #eee; height: 5px; box-shadow: none; } .podcastsite progress[value]::-webkit-progress-value { background-color: #39a9e0; height: 5px; box-shadow: none; } .podcastsite input[type=range]::-webkit-slider-thumb { box-shadow: none; border: none; height: 12px; width: 12px; border-radius: 12px; background: #404756; cursor: pointer; -webkit-appearance: none; margin-top: -3px; } .podcastsite input[type=range]::-moz-range-thumb { box-shadow: none; border: none; height: 12px; width: 12px; border-radius: 12px; background: #404756; cursor: pointer; margin-top: 3px; } .podcastsite input[type=range]::-ms-thumb { margin-top: 1px; box-shadow: none; border: none; height: 12px; width: 12px; border-radius: 12px; background: #404756; cursor: pointer; } .podcastsite .podcastsite-header { padding: 100px 0; min-height: 600px; background-image: url("../../assets/images/_pages/podcast/2I8A4221.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center center; margin-bottom: 50px; color: #fff; } .podcastsite .podcastsite-header .player-content { margin-bottom: 15px; } .podcastsite .episoden-header { min-height: 300px; padding: 50px 0; background-image: url("../../assets/images/_pages/podcast/episodeheader.jpg"); } .podcastsite .episoden-header .episode-backlink { color: #ddd; font-size: 0.8rem; text-transform: uppercase; } .podcastsite .episodeshownotes h3, .podcastsite .episodeshownotes h2, .podcastsite .episodeshownotes h4 { font-family: -apple-system-ui-serif, "Vollkorn", "Georgia", serif; font-style: italic; margin: 0; } .podcastsite .episodeshownotes li { font-size: 0.9rem; } @media screen and (max-width: 992px) { .podcastsite .podcastsite-header { min-height: 100%; } } .podcastsite .podcastsite-content .nav__sub { margin-bottom: 50px; } .podcastsite .podcastsite-content h2, .podcastsite .podcastsite-content h3 { font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-weight: normal; font-style: normal; } .podcastsite .podcastsite-content h4 { font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-weight: bold; font-style: normal; } .podcastsite .podcastsite-content p { font-size: 0.9rem; } .podcastsite .amplitude-song-container { display: flex; flex-direction: column; margin-bottom: 40px; } .podcastsite .amplitude-song-container img { margin-right: 20px; transition: color 0.3s ease; width: 100px; height: 100px; } .podcastsite .podcast-last-episode { width: 100%; } .podcastsite .podcast-last-episode h2 { text-shadow: 2px 2px 4px #222; } .podcastsite .podcast-last-episode p { font-size: 1rem; } @media screen and (min-width: 992px) { .podcastsite .podcast-last-episode { width: 800px; } } .podcasticons { margin-bottom: 10px; } .podcasticons img { width: auto; height: 13px; margin-right: 5px; color: #fff; margin-bottom: 2px; } @media screen and (max-width: 992px) { .podcasticons { width: 45% !important; margin-left: 0rem !important; margin-right: 3px !important; } .podcastsite .podcastsite-content .nav__sub { margin-bottom: 10px; } .amplitude-song-container { border-bottom: 1px solid #888; padding: 10px; margin-bottom: 10px !important; } } #audio-player { position: fixed; bottom: 0; width: 100%; background-color: #222; color: #fff; display: flex; justify-content: center; padding: 20px; flex-direction: column; } #audio-player #audio-player--left { width: 80%; padding-right: 0px; } @media screen and (min-width: 992px) { #audio-player #audio-player--left { width: 400px; padding-right: 15px; } } #audio-player input, #audio-player select, #audio-player textarea { padding: 0rem; background-color: rgba(64, 71, 86, 0.5); } @media screen and (min-width: 992px) { #audio-player { flex-direction: row; } .amplitude-song-container { flex-direction: row !important; } .amplitude-song-container img { width: 200px !important; height: 200px !important; } } .amplitude-song-slider { height: 3px; background-color: transparent; border: none; padding: 0rem 0rem; z-index: 3000; position: relative; margin-bottom: -8px; } .amplitude-play-pause { height: 20px; width: 20px; text-align: center; margin: 0px 10px 0px 10px; cursor: pointer !important; } .amplitude-play-pause:hover { color: #39a9e0; } .player-content { display: flex; flex-direction: row; width: 550px; } @media screen and (min-width: 992px) { .player-content { flex-direction: row; } } .player-content .audio-player-content { margin: 0px 10px 0px 5px; vertical-align: center; padding-top: 14px; width: 290px; } .player-content .audio-player-content .amplitude-song-played-progress, .player-content .audio-player-content .amplitude-buffered-progress { position: absolute; width: 290px; } .player-content .amplitude-time-remaining { vertical-align: center; padding-top: 3px; margin-left: 10px; } @media screen and (max-width: 500px) { .player-content { width: 350px !important; } .player-content span i { padding: 0.5rem 0rem; } .player-content .audio-player-content { width: 100px !important; } .player-content .audio-player-content .amplitude-song-played-progress, .player-content .audio-player-content .amplitude-buffered-progress { width: 100px !important; } } .about-episode { color: #888; } .about-episode p { font-size: 0.8rem !important; margin-top: 15px; margin-block-end: 0.8em; } .amplitude-active-song-container { background-color: #ddd; } .podcastcontent { display: flex; flex-direction: row; } .podcastcontent .podcastcontent-image { width: 120px; margin-right: 10px; } .podcastcontent .podcastcontent-image img { max-width: 100px; } .podcast-image { height: auto; max-width: 60%; } @media screen and (min-width: 992px) { .podcast-image { height: 320px !important; width: auto !important; max-width: 320px; } } .podcast-image-hp { height: auto; width: 100% !important; } @media screen and (min-width: 992px) { .podcast-image-hp { height: 320px; width: auto !important; } } .podcast-header { display: flex; flex-direction: column-reverse; } .podcast-header h2 { margin-bottom: 20px; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-weight: normal; font-style: normal; } @media screen and (min-width: 992px) { .podcast-header { flex-direction: row; justify-content: space-between; } } .podcast-header input[type=range]::-webkit-slider-thumb { background: #fff !important; } .podcast-header input[type=range]::-moz-range-thumb { background: #fff !important; } .podcast-header .player-content-control .fifteensecondicons { width: 30px !important; color: #fff !important; } .podcast-header .player-content-control .js-skip-backwards, .podcast-header .player-content-control .js-skip-forwards { width: 15px !important; margin-bottom: 3px !important; } .podcast-header .player-content-control .amplitude-play-pause { margin: 0px 10px 0px 10px; } .podcast-header-logo { margin-left: 0px; text-align: center; } @media screen and (min-width: 992px) { .podcast-header-logo { margin-left: 100px; } } .episode-header-logo { margin-left: 0px; width: 200px; height: 350px; margin-bottom: 20px; } @media screen and (min-width: 992px) { .episode-header-logo { margin-left: 100px; margin-bottom: 0px; } } .podcast-play-show { display: flex; flex-direction: column; width: 100%; } .podcast-play-show .button { width: 150px; } @media screen and (min-width: 992px) { .podcast-play-show { flex-direction: row; justify-content: space-between; } .podcast-play-show .player-content { margin-bottom: 0px; } } .player-content { display: flex; flex-direction: row; margin-bottom: 10px; } @media screen and (min-width: 992px) { .player-content { flex-direction: row; } } .player-content i:before { font-size: 1.5rem; } .episode-content { width: 100%; padding-right: 15px; } .episode-content h3 { font-size: 1.5rem; margin-bottom: 8px; } .podcast-shownotes { margin-bottom: 15px; margin-top: -25px; padding: 40px 20px; background-color: #ddd; } @media screen and (min-width: 992px) { .podcast-shownotes { margin-top: -40px; } } .podcast-shownotes h3 { font-family: -apple-system-ui-serif, "Vollkorn", "Georgia", serif; font-style: italic; font-weight: 400; font-size: clamp(1.125rem, 5vw, 1.3125rem); line-height: 1.35; } .player-content-control { display: flex; flex-direction: row; justify-content: center; height: 20px; margin-right: 10px; margin-top: 2px; margin-bottom: 15px; } @media screen and (min-width: 992px) { .player-content-control { margin-bottom: 0px; } } .player-content-control .fifteensecondicons { width: 15px !important; height: 15px !important; color: #404756; margin-bottom: 3px; margin-right: 0px !important; cursor: pointer !important; } .player-content-beam { display: flex; flex-direction: row; justify-content: center; } .fa-pause-circle { color: #39a9e0; } .applepodcastbutton { min-width: 175px !important; } .episodeshare { margin-left: 0px; color: #404756; font-size: 0.65rem; margin-top: 5px; margin-bottom: 10px; cursor: default; } @media screen and (min-width: 992px) { .episodeshare { font-size: 0.8rem; margin-top: 0px; margin-bottom: 0px; cursor: default; } } .audiothek_topheader h4 { font-weight: normal !important; } .audiothek-adjustment { background-image: url("../../assets/images/_pages/fullpages/audiothek_04.jpg") !important; background-position: top center !important; color: #000 !important; min-height: 350px !important; padding: 10px 0 !important; margin-bottom: 20px !important; text-align: center; } @media screen and (min-width: 992px) { .audiothek-adjustment { text-align: left; } } .audiothek-adjustment .title { font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-style: normal; font-weight: normal; color: #fff; } .audiothek-adjustment h1 { margin: auto 0 !important; font-size: 2rem; padding-top: 200px; text-align: left; } @media screen and (min-width: 992px) { .audiothek-adjustment h1 { padding-top: 60px; font-size: 3.5rem; } } .audiothek_over { display: flex; flex-direction: column; } .audiothek_over .audiothek-group { width: 100%; margin-bottom: 50px; background-image: linear-gradient(to top, #d9d9d9 10%, #9bb9ba 65%); box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .audiothek_over .audiothek-group h3 { font-size: 2rem; } @media screen and (min-width: 992px) { .audiothek_over .audiothek-group h3 { font-size: 3rem; margin-bottom: 30px; } } .audiothek-group-header-01 { height: 150px; width: 100% !important; background: url("../../assets/images/_pages/fullpages/titelbild_gregorthelen.jpg") no-repeat; background-position: center !important; background-size: cover; background-position: center; } @media screen and (min-width: 992px) { .audiothek-group-header-01 { height: 250px; } } .audiothek-group-content-01 { padding: 20px; width: 100% !important; } .audiothek-group-header-02 { height: 150px; width: 100% !important; background: url("../../assets/images/_pages/fullpages/kategorien.png") no-repeat; background-position: top center !important; background-size: cover; background-position: center; } @media screen and (min-width: 992px) { .audiothek-group-header-02 { height: 250px; } } .audiothek-group-content-02 { padding: 20px; width: 100% !important; } .audiothek-group-header-03 { height: 150px; width: 100% !important; background: url("../../assets/images/_pages/fullpages/reichweite.jpg") no-repeat; background-position: top center !important; background-size: cover; background-position: center; } @media screen and (min-width: 992px) { .audiothek-group-header-03 { height: 250px; } } .audiothek-group-content-03 { padding: 20px; width: 100% !important; } .audiothek-group-header-04 { height: 150px; width: 100% !important; background: url("../../assets/images/_pages/fullpages/verbindungen.jpg") no-repeat; background-position: center !important; background-size: cover; background-position: center; } @media screen and (min-width: 992px) { .audiothek-group-header-04 { height: 250px; } } .audiothek-group-content-04 { padding: 20px; width: 100% !important; } .audiothek-group-header-05 { height: 150px; width: 100% !important; background: url("../../assets/images/_pages/fullpages/fotografieren-lernen.jpg") no-repeat; background-position: center !important; background-size: cover; background-position: center; } @media screen and (min-width: 992px) { .audiothek-group-header-05 { height: 250px; } } .audiothek-group-content-05 { padding: 20px; width: 100% !important; } .audiothek-group-header-06 { height: 150px; width: 100% !important; background: url("../../assets/images/_pages/fullpages/fotoschule.jpeg") no-repeat; background-position: center !important; background-size: cover; background-position: center; } @media screen and (min-width: 992px) { .audiothek-group-header-06 { height: 250px; } } .audiothek-group-content-06 { padding: 20px; width: 100% !important; } .audiothek-group-header-07 { height: 150px; width: 100% !important; background: url("../../assets/images/_pages/fullpages/feedback_geben.jpg") no-repeat; background-position: center right !important; background-size: cover; background-position: center; } @media screen and (min-width: 992px) { .audiothek-group-header-07 { height: 250px; } } .audiothek-group-content-07 { padding: 20px; width: 100% !important; } .audiothek-group-header-08 { height: 150px; width: 100% !important; background: url("../../assets/images/_pages/fullpages/klatschen.jpg") no-repeat; background-position: center !important; background-size: cover; background-position: center; } @media screen and (min-width: 992px) { .audiothek-group-header-08 { height: 350px; } } .audiothek-group-content-08 { padding: 20px; width: 100% !important; } .audiothek-group-header-09 { height: 150px; width: 100% !important; background: url("../../assets/images/_pages/fullpages/plus.jpg") no-repeat; background-position: center !important; background-size: cover; background-position: center; } @media screen and (min-width: 992px) { .audiothek-group-header-09 { height: 350px; } } .audiothek-group-content-09 { padding: 20px; width: 100% !important; } .topsprung { text-align: right; width: 100%; } .topsprung a { color: #404756; } .audiothek-single { width: 100% !important; border-bottom: 1px solid #404756; margin: 15px 0px 15px 0px; padding-bottom: 20px; display: flex; flex-direction: column; } .audiothek-single h4 { font-size: 1.2rem; margin-bottom: 0px; } .audiothek-single p { margin-top: 5px; margin-bottom: 5px; } .audiothek-single a { color: #404756; } .audiothek-single .button { color: #fff; margin: 0px 0px 5px 0px; } .audiothek-single .audiothek-button { width: 100%; } @media screen and (min-width: 992px) { .audiothek-single { flex-direction: row; } .audiothek-single h4 { font-size: 1.2rem; margin-bottom: 0px; } } .audiothek-button { text-align: right; margin-top: 20px; } @media screen and (min-width: 992px) { .audiothek-button { margin-top: 0px; } } .audiothek_backlink { font-size: 0.8rem; } .audiothek_backlink a { color: #404756; } .nav__audiothek { white-space: normal !important; } .audiothek-page .title { font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-weight: normal; font-style: normal; } .audiothek-page .button { background-color: #516b65; } .audiothek-page .copylink { background-color: #83A59D !important; } .audiothek_topheader { display: flex; flex-direction: column; margin-top: 30px; } .audiothek_topheader .amplitude-active-song-container { background-color: #fff; } @media screen and (min-width: 992px) { .audiothek_topheader { flex-direction: row; margin-top: 50px; } .audiothek_topheader .episode-content { margin-left: 50px; } .audiothek_topheader h3 { font-size: 2rem; } } .audiothek-episode { display: flex; flex-direction: column; } .audiothek-episode .button { background-color: #516b65; margin-top: 20px; } @media screen and (min-width: 992px) { .audiothek-episode { flex-direction: row; } .audiothek-episode .player-audiothek-episode { margin-left: 100px; } } .audiothek-title-episode { font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-weight: bold; font-style: normal; margin-bottom: 30px; } .audiothek-episode-padding { padding: 0px 0px 20px 0px !important; } .header-fullpage { background-image: url("../../assets/images/_pages/fullpages/unsplash.jpg") !important; background-size: cover; background-repeat: no-repeat; background-position: center center; background-color: #fff; color: #fff; } @media screen and (min-width: 992px) { .header-fullpage p, .header-fullpage ul { width: 80%; } } .header-fullpage-privacy { background-image: url("../../assets/images/_pages/fullpages/privacy.jpg") !important; background-size: cover; background-repeat: no-repeat; background-position: center center; background-color: #fff; color: #fff; } @media screen and (min-width: 992px) { .header-fullpage-privacy p, .header-fullpage-privacy ul { width: 80%; } } .section-fullpage-white { background: #fff; } .section-fullpage-white li { padding-bottom: 15px; } @media screen and (min-width: 992px) { .section-fullpage-white p, .section-fullpage-white ul { width: 80%; } } .section-fullpage-blue { background: #39a9e0; padding: 50px 0px; } .section-fullpage-blue li { padding-bottom: 15px; } .section-fullpage-blue h2, .section-fullpage-blue p, .section-fullpage-blue ul { color: #fff; } @media screen and (min-width: 992px) { .section-fullpage-blue h2, .section-fullpage-blue p, .section-fullpage-blue ul { width: 80%; } } .section-fullpage-green { background: #00C853; padding: 50px 0px; } .section-fullpage-green li { padding-bottom: 15px; } .section-fullpage-green h2, .section-fullpage-green p, .section-fullpage-green ul { color: #fff; } @media screen and (min-width: 992px) { .section-fullpage-green h2, .section-fullpage-green p, .section-fullpage-green ul { width: 80%; } } .section-fullpage-orange { background: orange; padding: 50px 0px; } .section-fullpage-orange li { padding-bottom: 15px; } .section-fullpage-orange h1 { padding: 0px; } .section-fullpage-orange h1, .section-fullpage-orange h2, .section-fullpage-orange p, .section-fullpage-orange ul { color: #fff; } @media screen and (min-width: 992px) { .section-fullpage-orange h2, .section-fullpage-orange p, .section-fullpage-orange ul { width: 80%; } } .section-fullpage-gradient { background: #fff; background: linear-gradient(-50deg, #eeeeee 0%, #fbfbfb 84%); } .section-fullpage-gradient li { padding-bottom: 10px; } @media screen and (min-width: 992px) { .section-fullpage-gradient p, .section-fullpage-gradient ul { width: 80%; } } .fullpage-navi { padding-bottom: 0vmin; border-bottom: 1px solid #eeeeee; } .fullpage-top { text-align: right; width: 100%; font-size: 2rem; } .unsere_stadards { display: flex; flex-direction: column; } @media screen and (min-width: 992px) { .unsere_stadards { flex-direction: row; } .unsere_stadards p, .unsere_stadards ul { width: 100%; } } .unsere_stadards div { margin: 10px 10px 10px 0px; text-align: center; width: 100%; } @media screen and (min-width: 992px) { .unsere_stadards div { width: 33%; } } .unsere_stadards div img { margin-bottom: 15px; } @media screen and (min-width: 992px) { .unsere_stadards div img { margin-top: 20px; } } .title-center { text-align: center; } .nav__sub__full { justify-content: center; } .accordion { background-color: #39a9e0; box-sizing: border-box; display: flex; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; overflow: hidden; width: 100%; } .accordion :last-child { padding-left: 1px; } .accordion-select { cursor: pointer; margin: 0; opacity: 0; z-index: 1; } .accordion-title { position: relative; } .accordion-title:not(:nth-last-child(2))::after { border: 1px solid #fff; bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0; } .accordion-title span { bottom: 0px; box-sizing: border-box; display: block; position: absolute; white-space: nowrap; width: 100%; padding-bottom: 5px; } .accordion-content { box-sizing: border-box; overflow: auto; position: relative; transition: margin 0.3s ease 0.1s; } .accordion-select:checked + .accordion-title + .accordion-content { margin-bottom: 0; margin-right: 0; } /* style */ .accordion { border-radius: 8px; flex-direction: column; height: auto; } .accordion-title, .accordion-select { background-color: #39a9e0; color: #fff; width: 100%; height: 50px; padding-left: 20px; font-size: 1.5rem; font-weight: bold; text-align: center; } .accordion-select { margin-bottom: -50px !important; margin-right: -50px !important; } .accordion-title:not(:nth-last-child(2))::after { border-bottom-color: #eaeaea; border-right-color: transparent; } .accordion-select:hover + .accordion-title, .accordion-select:checked + .accordion-title { background-color: #39a9e0; } .accordion-title span { transform: rotate(0deg); -ms-writing-mode: lr-tb; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0); } .accordion-content { background-color: #f7f7f7; color: #7f8787; height: 800px; margin-bottom: -800px; margin-right: 0; padding: 30px; width: 100%; } @media screen and (min-width: 992px) { .accordion-content { height: 500px; margin-bottom: -500px; } } .accordion-content h2 { margin-bottom: 15px; } .accordion-content p { font-size: 1rem; } @media screen and (min-width: 992px) { .accordion-content p { width: 850px; column-width: 400px; margin-left: 20px; } } .accordion-content img { margin-right: 20px; } .accordion-content img:hover { transform: translate 1npx, 1npx; transform: rotate(-2deg) scale(1.2); margin-left: 20px; } .accordion-content div { display: flex; align-items: flex-start; flex-direction: column; } @media screen and (min-width: 992px) { .accordion-content div { flex-direction: row; } } /* css-accordion .accordion { background-color: $color-primary; box-sizing: border-box; display: flex; font-family: $family-sans; overflow: hidden; width: 100%; :last-child { padding-left: 1px; } } .accordion-select { cursor: pointer; margin: 0; opacity: 0; z-index: 1; } .accordion-title { position: relative; } .accordion-title:not(:nth-last-child(2))::after { border: 1px solid $color-white; bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; } .accordion-title span { bottom: 0px; box-sizing: border-box; display: block; position: absolute; white-space: nowrap; width: 100%; padding-bottom: 5px; } .accordion-content { box-sizing: border-box; overflow: auto; position: relative; transition: margin 0.3s ease 0.1s; } .accordion-select:checked + .accordion-title + .accordion-content { margin-bottom: 0; margin-right: 0; } .accordion { border-radius: 8px; flex-direction: column; height: auto; } .accordion-title, .accordion-select { background-color: $color-primary; color: $color-white; width: 100%; height: 35px; font-size: 15px; } .accordion-select { margin-bottom: -35px !important; margin-right: -35px !important; } .accordion-title:not(:nth-last-child(2))::after { border-bottom-color: rgb(234, 234, 234); border-right-color: transparent; } .accordion-select:hover + .accordion-title, .accordion-select:checked + .accordion-title { background-color: $color-primary; } .accordion-title span { transform: rotate(0deg); -ms-writing-mode: lr-tb; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0); } .accordion-content { background-color: #f7f7f7; color: #7f8787; height: 280px; margin-bottom: -280px; margin-right: 0; padding: 30px; width: 100%; } */ /* @media screen and (min-width: $screen-md) { .accordion-title span { padding-bottom: 2px; } .accordion { border-radius: 8px; flex-direction: row; height: 400px; } .accordion-title, .accordion-select { width: 30px; height: 100%; font-size: 15px; } .accordion-select { margin-bottom: -30px !important; margin-right: -30px !important; } .accordion-title:not(:nth-last-child(2))::after { border-bottom-color: transparent; border-right-color: rgb(234, 234, 234); } .accordion-title span { transform: rotate(-90deg); -ms-writing-mode: lr-bt; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); line-height: 65px; } .accordion-content { background-color: #f7f7f7; color: #7f8787; height: 100%; margin-bottom: 0; margin-right: calc(-1 * calc(100% - 600px)); padding: 10px; width: calc(100% - 600px); } } */ .reverse { flex-direction: column-reverse !important; } @media screen and (min-width: 992px) { .reverse { flex-direction: row !important; } } .zeitstrahl { width: 100%; display: flex; flex-direction: column; background: none; padding: 20px 0px; } @media screen and (min-width: 992px) { .zeitstrahl { background: linear-gradient(90deg, #fff calc(50% - 3px), #ddd calc(50%), #fff calc(50% + 3px)); flex-direction: row; justify-content: center; } } h1 { font-weight: bold; } h3 { margin-top: 20px; font-size: 2rem; font-family: -apple-system-ui-serif, "Vollkorn", "Georgia", serif; } p { font-size: 0.8rem; } .zeitstrahl-left, .zeitstrahl-right { width: 90%; margin: 20px 10px; } @media screen and (min-width: 992px) { .zeitstrahl-left, .zeitstrahl-right { width: 50%; margin: 0px 30px; } } .zeitstrahl-left { text-align: center; } @media screen and (min-width: 992px) { .zeitstrahl-left { text-align: right; } } .zeitstrahl-left p { margin: 0 0 0 0 !important; width: 100%; } .zeitstrahl-right { text-align: center; } @media screen and (min-width: 992px) { .zeitstrahl-right { text-align: left; } } .zeitstrahl-right p { width: 100%; } .zeitstrahl-bullet { display: none; } @media screen and (min-width: 992px) { .zeitstrahl-bullet { display: block; margin-top: 15px; background-color: #39a9e0; border-radius: 50%; height: 42px; width: 50px; } } .membership_cancel-header { padding: 0 0 !important; margin-bottom: -4rem; } .membership_cancel-header .imagefield { height: 500px; width: 100%; background-color: #00C4FF; background: url("../../assets/images/_pages/fullpages/hiergeblieben.jpeg") no-repeat; background-position: bottom center !important; background-size: cover; background-position: center; } @media screen and (min-width: 992px) { .membership_cancel-header .imagefield { background-position: top center !important; } } .membership_cancel-header .imagefield h1 { color: #fff; margin-top: 50px; text-align: center; text-shadow: 15px 5px 15px #000; } @media screen and (min-width: 992px) { .membership_cancel-header .imagefield h1 { font-size: 4rem; margin-top: 140px !important; } } .membership_cancel-header .fullfield::before { content: ""; background: url("../../assets/images/_pages/wellen/welle_cancel.png") no-repeat; background-position: left top !important; background-size: 100% 100%; width: 100%; height: 60px; left: 0px; display: block; margin-top: -60px; } .membership_cancel-header .fullfield { background-color: #EDEDED; } .membership_cancel-header .fullfield .cameralist { list-style: url("../../assets/images/icons/camera-retro.svg"); } @media screen and (min-width: 992px) { .membership_cancel-header .fullfield .cameralist li { line-height: 1.8rem !important; } } .membership_cancel-header .fullfield .cameralist li::marker { font-size: 2rem; } @media screen and (min-width: 992px) { .membership_cancel-header .fullfield .cameralist li::marker { font-size: 2.6rem; } } .membership_cancel-header .fullfield h2, .membership_cancel-header .fullfield h3 { text-align: center; } .membership_cancel-header .fullfield h2 { font-size: 1.5rem; padding-top: 20px; padding-bottom: 20px; } @media screen and (min-width: 992px) { .membership_cancel-header .fullfield h2 { font-size: 2rem; padding-top: 50px; padding-bottom: 20px; } } .membership_cancel-header .fullfield p, .membership_cancel-header .fullfield li { font-size: 1rem; } @media screen and (min-width: 992px) { .membership_cancel-header .fullfield p, .membership_cancel-header .fullfield li { font-size: 1.5rem; } } .membership_cancel-header .fullfield p, .membership_cancel-header .fullfield h4, .membership_cancel-header .fullfield h3, .membership_cancel-header .fullfield h2, .membership_cancel-header .fullfield ul { margin: 20px 50px; } .cancel_section_w { background-color: white; padding: 0px 0px 20px 0px !important; } @media screen and (min-width: 992px) { .cancel_section_w { padding: 0px 120px 20px 120px !important; } } .cancel_section_w h2 { font-weight: bold; font-size: 1.2rem !important; text-align: left !important; } @media screen and (min-width: 992px) { .cancel_section_w h2 { font-size: 1.8rem !important; text-align: center !important; } } .cancel_section_w li em { color: #39a9e0; font-weight: bold; font-style: normal; font-size: 1.1rem; } @media screen and (min-width: 992px) { .cancel_section_w li em { font-size: 1.6rem; } } @media screen and (min-width: 992px) { .cancel_section_w { margin: 40px; padding: 20px; } } .cancel_ifyou { font-size: 0.7rem !important; } @media screen and (min-width: 992px) { .cancel_ifyou { font-size: 1rem !important; } } .cancel-buttons { text-align: center; padding: 50px 20px; border-top: 2px solid white; } .cancel-buttons .button { margin-bottom: 15px; } @media screen and (min-width: 992px) { .cancel-buttons .button { margin-bottom: 0px; } } .cancel_date { font-size: 1.5rem; } @media screen and (min-width: 992px) { .cancel_date { font-size: 1.2rem !important; } } textarea { width: -webkit-fill-available; margin: 40px; font-size: 1rem; } @media screen and (min-width: 992px) { textarea { font-size: 1.5rem; } } .cancel-important { font-weight: bold; } .cancel-userdata { display: flex; flex-direction: column; } @media screen and (min-width: 992px) { .cancel-userdata { flex-direction: row; } } .cancel-userdata p { margin: 0px 20px 10px 20px !important; } @media screen and (min-width: 992px) { .cancel-userdata p { margin: 10px !important; } } .cancel-userdata .cancel-userdata-section { font-weight: bold; } @media screen and (min-width: 992px) { .cancel-userdata .cancel-userdata-section { width: 300px; } } .site__content:has(.signon_all) { background: url("../../assets/images/_pages/signon/03.jpg") no-repeat; background-position: center left !important; background-size: cover; } .site__content:has(.signon_ki) { background: url("../../assets/images/_pages/signon/ki_01.jpg") no-repeat; background-position: center left !important; background-size: cover; } .signon_all section { margin-top: 10px; } @media screen and (min-width: 992px) { .signon_all section { margin-top: 150px; } } .signon_all section .inner, .signon_all section .banner__content { display: flex; justify-content: center; } @media screen and (min-width: 992px) { .signon_all section .inner, .signon_all section .banner__content { justify-content: right; } } .signon_all .signonfield { background-color: rgba(0, 0, 0, 0.7); max-width: 27rem; padding: 20px 30px 30px 30px; } .signon_all .signonfield .usercopyright { padding-top: 0px; padding-right: 0px; } .signon_all .signonfield .card.card--auto { max-width: 24rem; } .signon_all .signonfield .card__title { font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; padding-top: 0; border-bottom: none; font-weight: bold !important; text-align: left; margin-bottom: 10px; } .signon_all .signonfield .security__icons { margin: 0px !important; } .signon-label { display: flex; flex-direction: row; } .signon-label input { width: 35px; border: none; } .security__icons__item { display: flex; flex-direction: row; } .security__icons__item img { width: 30px; } .security__icons__item p { text-align: left; padding-left: 10px; } .security__icons span { padding: 0px !important; } .signon-vorteile h4 { font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; color: #fff; text-transform: uppercase; font-weight: bold !important; } .signon-vorteile ul { margin: 10px 0px 0px 0px !important; } .signon-vorteile ul li { color: #fff !important; font-size: 0.9rem !important; } .signon-vorteile a { margin-top: 10px; font-size: 0.7rem !important; text-align: right !important; width: 100%; display: block; } .signon-vorteile p { color: #fff !important; font-size: 0.7rem !important; margin: 10px 0px !important; } @media screen and (min-width: 992px) { .signon-vorteile p { font-size: 0.9rem !important; } } .signon-social { margin-top: 15px; display: flex; flex-direction: row; } .signon-social small { margin: 0px !important; font-size: 0.9rem !important; } .signon-social .btn.btn--new.btn--facebook, .signon-social .btn.btn--new.btn--google { background-color: #000; width: 25px; height: 25px; padding: 0px; margin-top: 0px; margin-left: 10px; } /* Definition der Animationen */ /* 1. Bewegung des Sliders */ @keyframes slidesStart01 { 0%, 15% { left: 0; } 25%, 40% { left: -100%; } 50%, 65% { left: -200%; } 75%, 90% { left: -300%; } 100% { left: -400%; } } @-webkit-keyframes slidesStart01 { 0%, 15% { left: 0; } 25%, 40% { left: -100%; } 50%, 65% { left: -200%; } 75%, 90% { left: -300%; } 100% { left: -400%; } } @keyframes slidesStart101 { 0%, 15% { left: 0; } 25%, 40% { left: -100%; } 50%, 65% { left: -200%; } 75%, 90% { left: -300%; } 100% { left: -400%; } } @-webkit-keyframes slidesStart101 { 0%, 15% { left: 0; } 25%, 40% { left: -100%; } 50%, 65% { left: -200%; } 75%, 90% { left: -300%; } 100% { left: -400%; } } @keyframes slidesStart02 { 90.01% { left: 0; } 0%, 15%, 100% { left: -100%; } 25%, 40% { left: -200%; } 50%, 65% { left: -300%; } 75%, 90% { left: -400%; } } @-webkit-keyframes slidesStart02 { 90.01% { left: 0; } 0%, 15%, 100% { left: -100%; } 25%, 40% { left: -200%; } 50%, 65% { left: -300%; } 75%, 90% { left: -400%; } } @keyframes slidesStart102 { 90.01% { left: 0; } 0%, 15%, 100% { left: -100%; } 25%, 40% { left: -200%; } 50%, 65% { left: -300%; } 75%, 90% { left: -400%; } } @-webkit-keyframes slidesStart102 { 90.01% { left: 0; } 0%, 15%, 100% { left: -100%; } 25%, 40% { left: -200%; } 50%, 65% { left: -300%; } 75%, 90% { left: -400%; } } @keyframes slidesStart03 { 65.01% { left: 0; } 0%, 15%, 100% { left: -200%; } 25%, 40% { left: -300%; } 50%, 65% { left: -400%; } 75%, 90% { left: -100%; } } @-webkit-keyframes slidesStart03 { 65.01% { left: 0; } 0%, 15%, 100% { left: -200%; } 25%, 40% { left: -300%; } 50%, 65% { left: -400%; } 75%, 90% { left: -100%; } } @keyframes slidesStart103 { 65.01% { left: 0; } 0%, 15%, 100% { left: -200%; } 25%, 40% { left: -300%; } 50%, 65% { left: -400%; } 75%, 90% { left: -100%; } } @-webkit-keyframes slidesStart103 { 65.01% { left: 0; } 0%, 15%, 100% { left: -200%; } 25%, 40% { left: -300%; } 50%, 65% { left: -400%; } 75%, 90% { left: -100%; } } @keyframes slidesStart04 { 40.01% { left: 0; } 0%, 15%, 100% { left: -300%; } 25%, 40% { left: -400%; } 50%, 65% { left: -100%; } 75%, 90% { left: -200%; } } @-webkit-keyframes slidesStart04 { 40.01% { left: 0; } 0%, 15%, 100% { left: -300%; } 25%, 40% { left: -400%; } 50%, 65% { left: -100%; } 75%, 90% { left: -200%; } } @keyframes slidesStart104 { 40.01% { left: 0; } 0%, 15%, 100% { left: -300%; } 25%, 40% { left: -400%; } 50%, 65% { left: -100%; } 75%, 90% { left: -200%; } } @-webkit-keyframes slidesStart104 { 40.01% { left: 0; } 0%, 15%, 100% { left: -300%; } 25%, 40% { left: -400%; } 50%, 65% { left: -100%; } 75%, 90% { left: -200%; } } /* 2. Wechsel des ersten Slides ans Ende und zurück */ @keyframes slide01ToEndStart01 { 89.99% { left: 0; } 90%, 100% { left: 100%; } } @-webkit-keyframes slide01ToEndStart01 { 89.99% { left: 0; } 90%, 100% { left: 100%; } } @keyframes slide01ToEndStart101 { 89.99% { left: 0; } 90%, 100% { left: 100%; } } @-webkit-keyframes slide01ToEndStart101 { 89.99% { left: 0; } 90%, 100% { left: 100%; } } @keyframes slide01ToEndStart02 { 49.99%, 90.01% { left: 0; } 50%, 90% { left: 100%; } } @-webkit-keyframes slide01ToEndStart02 { 49.99%, 90.01% { left: 0; } 50%, 90% { left: 100%; } } @keyframes slide01ToEndStart102 { 49.99%, 90.01% { left: 0; } 50%, 90% { left: 100%; } } @-webkit-keyframes slide01ToEndStart102 { 49.99%, 90.01% { left: 0; } 50%, 90% { left: 100%; } } @keyframes slide01ToEndStart03 { 24.99%, 65.01% { left: 0; } 25%, 65% { left: 100%; } } @-webkit-keyframes slide01ToEndStart03 { 24.99%, 65.01% { left: 0; } 25%, 65% { left: 100%; } } @keyframes slide01ToEndStart103 { 24.99%, 65.01% { left: 0; } 25%, 65% { left: 100%; } } @-webkit-keyframes slide01ToEndStart103 { 24.99%, 65.01% { left: 0; } 25%, 65% { left: 100%; } } @keyframes slide01ToEndStart04 { 40.01% { left: 0; } 0%, 40% { left: 100%; } } @-webkit-keyframes slide01ToEndStart04 { 40.01% { left: 0; } 0%, 40% { left: 100%; } } @keyframes slide01ToEndStart104 { 40.01% { left: 0; } 0%, 40% { left: 100%; } } @-webkit-keyframes slide01ToEndStart104 { 40.01% { left: 0; } 0%, 40% { left: 100%; } } /* 3. Animationen für den Farbwechsel in den Controls */ @keyframes slideControl01 { 24.99% { background: #39a9e0; } 25%, 100% { background: none; } } @-webkit-keyframes slideControl01 { 24.99% { background: #39a9e0; } 25%, 100% { background: none; } } @keyframes slideControl101 { 24.99% { background: #39a9e0; } 25%, 100% { background: none; } } @-webkit-keyframes slideControl101 { 24.99% { background: #39a9e0; } 25%, 100% { background: none; } } @keyframes slideControl02 { 24.99%, 50% { background: none; } 25%, 49.99% { background: #39a9e0; } } @-webkit-keyframes slideControl02 { 24.99%, 50% { background: none; } 25%, 49.99% { background: #39a9e0; } } @keyframes slideControl102 { 24.99%, 50% { background: none; } 25%, 49.99% { background: #39a9e0; } } @-webkit-keyframes slideControl102 { 24.99%, 50% { background: none; } 25%, 49.99% { background: #39a9e0; } } @keyframes slideControl03 { 49.99%, 75% { background: none; } 50%, 74.99% { background: #39a9e0; } } @-webkit-keyframes slideControl03 { 49.99%, 75% { background: none; } 50%, 74.99% { background: #39a9e0; } } @keyframes slideControl103 { 49.99%, 75% { background: none; } 50%, 74.99% { background: #39a9e0; } } @-webkit-keyframes slideControl103 { 49.99%, 75% { background: none; } 50%, 74.99% { background: #39a9e0; } } @keyframes slideControl04 { 74.99% { background: none; } 75%, 100% { background: #39a9e0; } } @-webkit-keyframes slideControl04 { 74.99% { background: none; } 75%, 100% { background: #39a9e0; } } @keyframes slideControl104 { 74.99% { background: none; } 75%, 100% { background: #39a9e0; } } @-webkit-keyframes slideControl104 { 74.99% { background: none; } 75%, 100% { background: #39a9e0; } } /* Basisfunktionalität des Sliders */ .slider { overflow: hidden; } .slider input { position: absolute; left: -10000px; top: 0; } .slideList { width: 400%; /* Anzahl der Slides mal 100 */ position: relative; /* über die relative Positionierung wird der Slider durchs Sichtfenster geschoben */ -webkit-transition: left 2s; -moz-transition: left 2s; -o-transition: left 2s; transition: left 2s; /* für den fließenden Schub */ margin: 0; padding: 0; } .slideList:after { content: "."; display: block; height: 0.1px; clear: both; visibility: hidden; font-size: 0; overflow: hidden; } .slide { list-style: none; width: 25%; /* Breite gleich 100 / Anzahl Slides */ float: left; position: relative; left: 0; -webkit-transition: left 0s 0.5s; -moz-transition: left 0s 0.5s; -o-transition: left 0s 0.5s; transition: left 0s 0.5s; /*bei Klick auf ein Control werden alle Slides wieder auf Original-Position geschoben, hier für den ersten relevant. Damit die Aktion erst nach der slides-Verschiebung beginnt, kommt ein delay hinzu*/ } #slide04:checked ~ .slideList .slide, #slide104:checked ~ .slideList .slide { -webkit-transition-delay: 2s; -moz-transition-delay: 2s; -o-transition-delay: 2s; transition-delay: 2s; /* damit er nicht zu früh zurückrutscht */ } .slideList img { width: 100%; height: auto; vertical-align: bottom; } /* Zuweisung der Keyframe-Animationen */ .slideList, .slide, .slideControl label { -webkit-animation: 20s 2s infinite; animation: 20s 2s infinite; /* allgemeingültige Werte für die Keyframe-Animation */ } /* Positionierung und Aufruf der passenden Animation in Abhängigkeit des Status der Radiobuttons */ #slide01:checked ~ .slideList { -webkit-animation-name: slidesStart01; animation-name: slidesStart01; left: 0; } #slide02:checked ~ .slideList { -webkit-animation-name: slidesStart02; animation-name: slidesStart02; left: -100%; } #slide03:checked ~ .slideList { -webkit-animation-name: slidesStart03; animation-name: slidesStart03; left: -200%; } #slide04:checked ~ .slideList { -webkit-animation-name: slidesStart04; animation-name: slidesStart04; left: -300%; } /* Damit der Wechsel von 01 zu 101, 02 zu 102 usw. klappt, muss jeweils eine andere Animation aufgerufen werden*/ #slide101:checked ~ .slideList { -webkit-animation-name: slidesStart101; animation-name: slidesStart101; left: 0; } #slide102:checked ~ .slideList { -webkit-animation-name: slidesStart102; animation-name: slidesStart102; left: -100%; } #slide103:checked ~ .slideList { -webkit-animation-name: slidesStart103; animation-name: slidesStart103; left: -200%; } #slide104:checked ~ .slideList { -webkit-animation-name: slidesStart104; animation-name: slidesStart104; left: -300%; } /* Der erste Slide wird jeweils zur rechten Zeit an den Anfang oder das Ende gestellt */ #slide01:checked ~ .slideList .slide01 { -webkit-animation-name: slide01ToEndStart01; animation-name: slide01ToEndStart01; } #slide02:checked ~ .slideList .slide01 { -webkit-animation-name: slide01ToEndStart02; animation-name: slide01ToEndStart02; } #slide03:checked ~ .slideList .slide01 { -webkit-animation-name: slide01ToEndStart03; animation-name: slide01ToEndStart03; } #slide04:checked ~ .slideList .slide01 { -webkit-animation-name: slide01ToEndStart04; animation-name: slide01ToEndStart04; } /* Separate Animations-Namen für die zweite Steuerung */ #slide101:checked ~ .slideList .slide01 { -webkit-animation-name: slide01ToEndStart101; animation-name: slide01ToEndStart101; } #slide102:checked ~ .slideList .slide01 { -webkit-animation-name: slide01ToEndStart102; animation-name: slide01ToEndStart102; } #slide103:checked ~ .slideList .slide01 { -webkit-animation-name: slide01ToEndStart103; animation-name: slide01ToEndStart103; } #slide104:checked ~ .slideList .slide01 { -webkit-animation-name: slide01ToEndStart104; animation-name: slide01ToEndStart104; } /* nur zur Deko */ .sliderWrapper { position: relative; margin-bottom: 40px; } .sliderWrapper img { box-shadow: 0px 0px 25px -7px #ddd; } .slide p { bottom: 50%; text-align: center; color: #404756; padding: 0.4em 1em; font-size: 1.2rem; margin-top: 20px; } @media screen and (min-width: 992px) { .slide p { font-size: 2rem; } } /* Steuerung durch den Benutzer */ .slideControl { width: 150px; position: absolute; bottom: -60px; left: 50%; margin-left: -40px; padding: 0; } .control01:checked ~ .slideControl01, .control02:checked ~ .slideControl02 { left: -5000px; /* Blendet die nicht benötigten Labels aus */ } .slideControl li { float: left; margin: 0 4px; width: 20px; height: 20px; border-radius: 50%; position: relative; text-indent: -10000px; border: 1px solid #ccc; list-style: none; } .slideControl label { display: block; cursor: pointer; background: none; width: 100%; height: 100%; border-radius: 50%; box-sizing: border-box; border: 2px solid #fff; } .slideControl label:hover { background: #39a9e0 !important; } #slide01:checked ~ .slideControl label[for=slide101], #slide02:checked ~ .slideControl label[for=slide102], #slide03:checked ~ .slideControl label[for=slide103], #slide04:checked ~ .slideControl label[for=slide104] { -webkit-animation-name: slideControl01; animation-name: slideControl01; background: #39a9e0; } #slide101:checked ~ .slideControl label[for=slide01], #slide102:checked ~ .slideControl label[for=slide02], #slide103:checked ~ .slideControl label[for=slide03], #slide104:checked ~ .slideControl label[for=slide04] { -webkit-animation-name: slideControl101; animation-name: slideControl101; background: #39a9e0; } #slide01:checked ~ .slideControl label[for=slide102], #slide02:checked ~ .slideControl label[for=slide103], #slide03:checked ~ .slideControl label[for=slide104], #slide04:checked ~ .slideControl label[for=slide101] { -webkit-animation-name: slideControl02; animation-name: slideControl02; } #slide101:checked ~ .slideControl label[for=slide02], #slide102:checked ~ .slideControl label[for=slide03], #slide103:checked ~ .slideControl label[for=slide04], #slide104:checked ~ .slideControl label[for=slide01] { -webkit-animation-name: slideControl102; animation-name: slideControl102; } #slide01:checked ~ .slideControl label[for=slide103], #slide02:checked ~ .slideControl label[for=slide104], #slide03:checked ~ .slideControl label[for=slide101], #slide04:checked ~ .slideControl label[for=slide102] { -webkit-animation-name: slideControl03; animation-name: slideControl03; } #slide101:checked ~ .slideControl label[for=slide03], #slide102:checked ~ .slideControl label[for=slide04], #slide103:checked ~ .slideControl label[for=slide01], #slide104:checked ~ .slideControl label[for=slide02] { -webkit-animation-name: slideControl103; animation-name: slideControl103; } #slide01:checked ~ .slideControl label[for=slide104], #slide02:checked ~ .slideControl label[for=slide101], #slide03:checked ~ .slideControl label[for=slide102], #slide04:checked ~ .slideControl label[for=slide103] { -webkit-animation-name: slideControl04; animation-name: slideControl04; } #slide101:checked ~ .slideControl label[for=slide04], #slide102:checked ~ .slideControl label[for=slide01], #slide103:checked ~ .slideControl label[for=slide02], #slide104:checked ~ .slideControl label[for=slide03] { -webkit-animation-name: slideControl104; animation-name: slideControl104; } body.theme--detail, html.theme--dark { --logo-color: #fff; --font-color: #fff; --font-color-muted: #999; --font-nav-color: #999; --color-primary: #3f8ee9; --border-color: rgba(255, 255, 255, .10); --bg-color: #222; --bg-color-alpha: rgba(0, 0, 0, .88); } body.theme--detail .site__header .button.button--outline, html.theme--dark .site__header .button.button--outline { border-color: rgba(255, 255, 255, 0.1); } html.theme--dark { background: var(--bg-color); } html.theme--dark body { color: var(--font-color); } html.theme--dark .site__content { background: var(--bg-color); } .landingpagecomplete .inner, .landingpagecomplete .banner__content { max-width: 1200px; } .adobepartner { background-color: #39a9e0; height: 50px; padding-bottom: 0px; } .adobepartner .adobepartner-content { display: flex; flex-direction: row; justify-content: flex-end; padding-top: 18px; } .adobepartner p { color: #fff; font-size: 0.6rem; padding: 18px 0px; margin-right: 10px; margin-bottom: 0px; } .fc-adobepartner, .adobebadge { width: 100px; margin-right: 10px; margin-left: 10px; } .lp-roundbutton { width: 150px; height: 150px; background-color: #39a9e0; border-radius: 50%; transform: rotate(-15deg); box-shadow: 0px 3px 10px #888; margin-right: 30px; } .lp-roundbutton p { text-align: center; color: #fff; padding-top: 45px; text-transform: uppercase; font-size: 1.2rem; } .lp-roundbutton .prozent { font-size: 3.2rem; font-family: -apple-system-ui-serif, "Vollkorn", "Georgia", serif; line-height: 0.2; } .abschnitt01 { padding-top: 60px; } .abschnitt01 .inner, .abschnitt01 .banner__content { display: flex; flex-direction: row; flex-wrap: wrap; } .abschnitt01 h1 { font-size: 3.8rem; color: #000; padding: 40px 0px 0px 0px; } .lp-srceens { width: 500px; margin-top: 50px; margin-right: 150px; } .lp-adobebox-mobile, .lp-adobeicons-mobile { display: none; } .lp-mobile { display: none; } @media screen and (max-width: 992px) { .adobeCloudIcon { display: none; } .abschnitt05 h1 { font-size: 3rem; } .lp-adobebox-mobile, .lp-adobeicons-mobile { display: block; } .lp-adobebox-mobile p, .lp-adobeicons-mobile p { font-size: 2rem; color: #000; } .lp-adobeicons-mobile { margin-top: 20px; } .lp-hauptboxen, .lp-adobeboxen { display: none !important; } .abschnitt01 .lp-roundbutton { display: none; } .abschnitt01 h1 { text-align: center; } .lp-srceens { display: none; } .lp-completeAbo { width: 100% !important; margin-top: 0px; } .lp-price { width: 100% !important; } .abschnitt02 h1 { text-align: center; } .abschnitt02 .lp-button { width: 100% !important; } .abschnitt02 .inner div, .abschnitt02 .banner__content div { width: 100%; } .abschnitt03 { padding: 0px 15px; } .abschnitt03 h1 { text-align: center; font-size: 3rem !important; width: 100%; } .abschnitt03 .lp-headline-logos { justify-content: center !important; margin-top: 20px; } .abschnitt03 .inner, .abschnitt03 .banner__content { flex-direction: column !important; align-items: center; } .abschnitt03 .inner .lp-circle, .abschnitt03 .banner__content .lp-circle { margin-bottom: 20px; } .abschnitt03 .inner .step-content-01, .abschnitt03 .banner__content .step-content-01, .abschnitt03 .inner .step-content-02, .abschnitt03 .banner__content .step-content-02, .abschnitt03 .inner .step-content-03, .abschnitt03 .banner__content .step-content-03 { width: 100% !important; } .abschnitt04 { padding: 0px 15px; } .abschnitt04 .lp-world-logo { width: 100% !important; margin: 20px 0px !important; } .abschnitt04 ul, .abschnitt04 p { font-size: 1.2rem !important; } .adobepartner2 { height: auto !important; } .adobepartner2 .adobepartner-content { flex-direction: column !important; align-items: center; } .adobepartner2 { display: none !important; } .lp-mobile { display: block; } .abschnitt02, .abschnitt05, .abschnitt06 { padding: 0px 15px; } .abschnitt06 .lp-button { width: 100% !important; } .abschnitt06 .lp-button .button--lg p { font-size: 1rem !important; } .abschnitt06 .lp-soldprice { font-size: 3.2rem; } } @media screen and (max-width: 480px) { .abschnitt01 h1 { font-size: 3rem; padding: 10px 0px 0px 0px; } .abschnitt02 .lp-soldprice { font-size: 3.2rem; } .lp-adobeicons img { width: 37px; } .abschnitt02 .lp-button .button--lg p { font-size: 1rem !important; } .lp-headline-logos { justify-content: center !important; margin-top: 20px; flex-direction: column !important; align-items: center !important; } .lp-roundbutton { width: 100px; height: 100px; margin-right: 0px; margin-left: 200px; margin-top: -100px; } .lp-roundbutton p { text-align: center; color: #fff; padding-top: 30px; text-transform: uppercase; font-size: 0.8rem; } .lp-roundbutton .prozent { font-size: 2rem; font-family: -apple-system-ui-serif, "Vollkorn", "Georgia", serif; line-height: 0.2; } } .lp-completeAbo { width: 500px; margin-top: 50px; } .lp-completeAbo .lp-complete-logo { width: 450px; padding-bottom: 20px; } .lp-completeAbo .lp-world-logo { width: 300px; } .lp-completeAbo .lp-AdobeAbo { color: #000; } .lp-box-shadow { box-shadow: 0px 3px 10px #888; padding: 25px; } .lp-plus { padding: 10px; font-size: 4.5rem; color: #39a9e0; text-align: center; width: 100%; } .color-primarynew { color: #39a9e0; } .abschnitt02 .inner, .abschnitt02 .banner__content { display: flex; flex-direction: row; flex-wrap: wrap; } .abschnitt02 .lp-button { width: 500px; } .abschnitt02 .lp-button p { text-align: right; } .abschnitt02 .lp-button .button--lg { width: 100%; height: 75px; background-color: #39a9e0; margin-bottom: 30px; } .abschnitt02 .lp-button .button--lg p { text-align: center; margin-top: 15px; font-size: 1.5rem; } .lp-price { width: 650px; display: flex; margin-bottom: -20px; } .lp-soldprice { font-size: 5rem; font-weight: bold; color: #39a9e0; } .lp-soldprice-before { font-weight: bold; color: #000; } .lp-soldprice-after { font-weight: bold; color: #000; margin-top: 65px; } .abschnitt03 { background-color: #222; } .abschnitt03 .lp-circle { width: 50px; height: 50px; background-color: #39a9e0; border-radius: 50%; margin-right: 15px; } .abschnitt03 .lp-circle p { color: #fff; text-align: center; margin-top: 10px; } .abschnitt03 .lp-soldprice { font-size: 2.5rem; } .abschnitt03 p, .abschnitt03 h3 { color: #fff; } .abschnitt03 h3 { padding-top: 100px; } .abschnitt03 .inner, .abschnitt03 .banner__content { display: flex; flex-direction: row; flex-wrap: wrap; } .abschnitt03 h1 { font-size: 4.7rem; color: #fff; padding: 100px 0px 0px 0px; } .logowhite { width: 250px; height: auto; } .lp-headline-logos { width: 100%; display: flex; flex-direction: row; justify-content: flex-end; margin-top: -5px; } .lp-headline-logos i { width: 80px; font-size: 3rem; } .lp-steps { width: 100%; margin-top: 100px; display: flex; } .lp-steps .step-content-01, .lp-steps .step-content-02, .lp-steps .step-content-03 { display: flex; width: 300px; } .lp-steps .step-content-01 p, .lp-steps .step-content-02 p, .lp-steps .step-content-03 p { margin-top: 20px; } .lp-steps .step-content-01 i { color: #fff; font-size: 3rem; } .lp-steps .step-content-02 img { box-shadow: 0px 0px 10px #fff; } .abschnitt04 .lp-world-logo { width: 600px; margin: 100px 0px 50px 0px; } .abschnitt04 p { font-size: 1.8rem; color: #000; } .abschnitt04 ul { list-style-type: none; font-size: 1.8rem; color: #000; } .abschnitt04 ul li::before { font-family: "Font Awesome 5 Pro"; content: ""; color: #39a9e0; margin-right: 10px; } .adobepartner2 { background-color: #39a9e0; height: 150px; padding-bottom: 0px; } .adobepartner2 .adobepartner-content { display: flex; flex-direction: row; justify-content: center; } .adobepartner2 p { color: #fff; font-size: 2rem; padding: 18px 0px; margin: 30px 30px 0px 30px; } .adobepartner2 .fc-adobepartner, .adobepartner2 .adobebadge { margin-top: 30px; width: 400px; margin-right: 10px; } .abschnitt05 h1 { text-align: center; color: #000; padding: 60px 0px 0px 0px; } .abschnitt05 .adobeCloudIcon { width: 68px; height: auto; padding-bottom: 20px; padding-right: 20px; } .abschnitt05 .lp-hauptboxen { display: flex; flex-direction: row; flex-wrap: wrap; } .abschnitt05 .lp-hauptboxen-content { margin: 50px 0px; max-width: 560px; box-shadow: 0px 3px 10px #888; } .abschnitt05 .lp-hauptboxen-content .lp-pic { width: 100%; } .abschnitt05 .lp-hauptboxen-content .lp-icons { margin-top: -50px; padding-left: 25px; width: 100px; } .abschnitt05 .lp-hauptboxen-content:first-child { margin-right: 30px; } .abschnitt05 ul { padding-left: 25px; list-style-type: none; color: #000; } .abschnitt05 ul li::before { font-family: "Font Awesome 5 Pro"; content: ""; color: #39a9e0; margin-right: 10px; } .lp-adobeboxen { display: flex; flex-flow: row wrap; } .lp-adobeboxen-content { display: flex; flex-direction: row; width: 45%; margin-right: 10px; margin-bottom: 10px; } .lp-adobeboxen-content img { margin-right: 25px; margin-top: 5px; width: 50px; height: 45px; } .lp-adobeboxen-content p { color: #000; } .abschnitt06 { padding-top: 60px; background-color: #222; margin-bottom: -65px; } .abschnitt06 .inner, .abschnitt06 .banner__content { display: flex; flex-direction: row; flex-wrap: wrap; } .abschnitt06 .inner p, .abschnitt06 .banner__content p { color: #fff; } .abschnitt06 .lp-button { width: 460px; box-shadow: none; } .abschnitt06 .lp-button p { text-align: right; } .abschnitt06 .lp-button .button--lg { width: 100%; height: 75px; background-color: #39a9e0; margin-bottom: 30px; box-shadow: none; } .abschnitt06 .lp-button .button--lg p { text-align: center; margin-top: 15px; font-size: 1.5rem; } .abschnitt06 .lp-price { width: 500px; } .abschnitt06 .lp-soldprice-before { color: #fff; } .abschnitt06 .lp-soldprice-after { color: #fff; } .abschnitt06 .lp-roundbutton { box-shadow: none; } .header-fullpage-playboy { background-image: url("../../assets/images/_pages/playboy/2204-Playmate-Miss_April_2022-C_Jeean_Alvarez-02 2.jpeg"); background-size: cover; background-repeat: no-repeat; background-position: center; background-color: #fff; color: #fff; } .header-fullpage-playboy .linear-gradient { min-height: 500px !important; } @media screen and (min-width: 992px) { .header-fullpage-playboy { background-position: top center; } .header-fullpage-playboy .linear-gradient { min-height: 800px !important; } } .header-fullpage-playboy ul { font-style: normal; font-weight: bold; font-size: 1.3rem; margin-top: 50px; line-height: 1.5rem; list-style-image: linear-gradient(to left bottom, #c3a24f, #c3a24f); } .header-fullpage-playboy ul li { padding-bottom: 20px; } @media screen and (min-width: 992px) { .header-fullpage-playboy ul li { padding-left: 15px; } } @media screen and (min-width: 992px) { .header-fullpage-playboy ul { font-size: 1.8rem; line-height: 1.8rem; } } .header-fullpage-playboy h1 { margin-top: 150px; } .linear-gradient { background: linear-gradient(transparent, #222); min-height: 800px; } .playboy-dark { background-color: #222; color: #fff; } .playboy-dark p { font-style: normal; font-weight: bold; font-size: 1.3rem; margin-top: 20px; } h1.title-pb { font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-style: normal; font-weight: bold; font-size: 2rem; animation: einblenden 1.5s; -moz-animation: einblenden 1.5s; /* Für Firefox */ -webkit-animation: einblenden 1.5s; /* Für Safari und Chrome */ -o-animation: einblenden 1.5s; /* Für Opera */ } @media screen and (min-width: 992px) { h1.title-pb { font-size: 3rem; } } h2.title-pb { font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-style: normal; font-weight: bold; animation: einblenden 1.5s; -moz-animation: einblenden 1.5s; /* Für Firefox */ -webkit-animation: einblenden 1.5s; /* Für Safari und Chrome */ -o-animation: einblenden 1.5s; /* Für Opera */ } .step3-fullpage-playboy { background-image: url("../../assets/images/_pages/playboy/fotocommunity_act.png"); background-size: cover; background-repeat: no-repeat; background-position: top left; background-color: #fff; color: #fff; min-height: 800px; } @media screen and (min-width: 992px) { .step3-fullpage-playboy p, .step3-fullpage-playboy ul { width: 80%; } } .step3-fullpage-playboy ul { font-style: normal; font-weight: bold; font-size: 1.3rem; margin-top: 50px; line-height: 1.5rem; list-style-image: linear-gradient(to left bottom, #c3a24f, #c3a24f); } .step3-fullpage-playboy ul li { padding-bottom: 20px; } @media screen and (min-width: 992px) { .step3-fullpage-playboy ul { font-size: 1.8rem; line-height: 1.8rem; } } .step3-fullpage-playboy h1 { margin-top: 450px; } .vorteile-pb { display: flex; flex-direction: column; text-align: center; margin: 50px 0px; } .vorteile-pb img { max-width: 200px; } @media screen and (min-width: 992px) { .vorteile-pb { justify-content: space-between; flex-direction: row; margin: 100px 0px; text-align: center; } } .pb-button { background-color: #c3a24f; color: #000; margin: 20px 0px; width: 100%; } @media screen and (min-width: 992px) { .pb-button { font-size: 2rem; width: auto; } } .pb-button:hover, .pb-button:focus, .pb-button:active { color: #000; background-color: #fff; opacity: 1 !important; } .logo-pb { margin: 50px auto; } .cta_button { text-align: center; } .durchgetrichen { text-decoration: line-through; } .partnerlogos { text-align: center; padding: 15px; display: flex; flex-direction: column; } .partnerlogos .stoerer33 { max-width: 55px !important; position: absolute; right: 0; margin-right: 20px; margin-top: 0px; justify-content: center; } .partnerlogos img { max-width: 80%; } @media screen and (min-width: 992px) { .partnerlogos img { max-width: 800px; } } @media screen and (min-width: 600px) { .partnerlogos .stoerer33 { max-width: 100px !important; } } @media screen and (min-width: 992px) { .partnerlogos { display: block; } .partnerlogos .stoerer33 { max-width: 150px !important; position: absolute; margin-top: 0px; right: auto; } } .playboy-gallerie { display: flex; flex-direction: column; margin-bottom: 20px; } .playboy-gallerie img { margin-top: 20px; max-width: 100%; } .playboy-gallerie .usercopyright { padding-top: 2px; padding-right: 0px; font-size: 0.6rem; color: #888 !important; } @media screen and (min-width: 992px) { .playboy-gallerie { flex-direction: row; margin-bottom: 50px; } .playboy-gallerie img { max-height: 250px; width: auto; margin-top: 0px; } } .pb-big { color: #c3a24f; font-size: 2rem !important; margin-bottom: 0 !important; } @media screen and (min-width: 992px) { .pb-big { font-size: 3rem !important; } } .pb-big-w { color: #fff; font-size: 2.5rem !important; margin-bottom: 0 !important; } @media screen and (min-width: 992px) { .pb-big-w { font-size: 4rem !important; } } .PB-e-paper { display: flex; flex-direction: column; } .PB-e-paper img { max-width: 300px; transform: rotate(-5deg); margin-left: 20px; margin-bottom: 30px; } @media screen and (min-width: 992px) { .PB-e-paper { flex-direction: row; } .PB-e-paper img { max-height: 300px; transform: rotate(-5deg); margin-right: 50px; } } .playboy-light { color: #404756; padding: 50px 0px 0px 0px; } .playboy-light p { font-style: normal; font-size: 0.6rem; } @media screen and (min-width: 992px) { .playboy-light p { font-size: 0.8rem; } } .premiumside { color: #000; } .premiumside section.outer { max-width: 2000px; margin: 0 auto 4px auto; } .premiumside_header { height: 350px; background: url("../../assets/images/_pages/premium/pr_header.jpg") no-repeat; background-position: top center; background-size: cover; padding: 0px 0px 50px 0px !important; } @media screen and (min-width: 992px) { .premiumside_header { height: 400px; } } .premiumside_header .infoslot { display: flex; flex-direction: row; justify-content: space-between; } .premiumside_header .infoslot .hotline-premium { margin: 12px; display: flex; flex-direction: row; min-width: 200px; } @media screen and (min-width: 992px) { .premiumside_header .infoslot .hotline-premium { min-width: 600px; } } .premiumside_header .infoslot .hotline-premium .hotlineicon { width: 40px; display: block; margin-right: 10px; } .premiumside_header .infoslot .hotline-premium p { font-size: 0.8rem; line-height: 0.8rem; color: #fff; } @media screen and (min-width: 992px) { .premiumside_header .infoslot .hotline-premium p { font-size: 1.2rem; line-height: 1rem; } } .premiumside_header .infoslot .hotline-premium p small { font-size: 0.6rem; line-height: 0.6rem; } .premiumside_header .usercopyright { display: grid; } .premiumside_header img { max-width: 200px; margin-bottom: 10px; } @media screen and (min-width: 992px) { .premiumside_header img { max-width: 300px; margin-bottom: 20px; } } .premiumside_header h1 { margin-top: 5px; font-size: 2rem; line-height: 2rem; font-weight: normal; text-align: center; color: #fff; } @media screen and (min-width: 992px) { .premiumside_header h1 { font-size: 3.5rem; line-height: 3.5rem; margin-top: 10px; text-align: center; } } .premiumside_header h3 { font-size: 1.5rem; line-height: 1.5rem; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; margin-top: 0px; text-align: center; color: #fff; margin: 10px 20px 0px 20px; } @media screen and (min-width: 992px) { .premiumside_header h3 { font-size: 1.8rem; line-height: 1.8rem; text-align: center; margin: 10px 0px 0px 0px; } } .premiumside_header .inner, .premiumside_header .banner__content { display: flex; flex-direction: column; } .premiumside_header .inner .diamond, .premiumside_header .banner__content .diamond { text-align: center; } .premiumside_header .inner .diamond img, .premiumside_header .banner__content .diamond img { max-width: 50px; margin-top: 0px; margin-right: 0px; margin-bottom: 20px; } @media screen and (min-width: 992px) { .premiumside_header .inner .diamond img, .premiumside_header .banner__content .diamond img { max-width: 70px; margin-bottom: 10px; } } /** TABELLE **/ .premiumside_section_table { padding: 50px 0px !important; } .premiumside_section_table h2 { font-size: 1.5rem; } @media screen and (min-width: 992px) { .premiumside_section_table h2 { font-size: 2rem; } } .price_per_month { position: absolute; } @media screen and (min-width: 992px) { .price_per_month { position: relative; } } .subinterval { display: flex; flex-direction: row; } @media screen and (min-width: 992px) { .subinterval { margin-bottom: 50px; } } .subinterval p { width: 100%; font-size: 0.8rem; } @media screen and (min-width: 992px) { .subinterval p { width: 300px; font-size: 1.2rem; } } .premium-select { margin: 0 auto; max-width: 1100px; } .premium-select h2 { font-size: 1.2rem; margin-bottom: 5px; } @media screen and (min-width: 992px) { .premium-select h2 { font-size: 1.5rem; } } .premium-select p { font-size: 0.8rem; width: 230px; } @media screen and (min-width: 992px) { .premium-select p { font-size: 1rem; margin-top: 5px; width: 230px; } } .premiumtable { display: flex; flex-direction: column; margin: 0 auto; max-width: 1100px; } .premiumtable .goldborder { border-bottom: 2px solid #c3a24f !important; } .premiumtable .fa-circle { margin-top: 5px; } @media screen and (min-width: 992px) { .premiumtable .fa-circle { margin-top: 20px; } } .premiumtable p { font-size: 0.9rem; line-height: 1rem; font-weight: normal; margin: 10px 0 0.5rem !important; } @media screen and (min-width: 992px) { .premiumtable p { font-size: 1.2rem; line-height: 1.2rem; } } .premiumtable p small { font-size: 0.8rem; line-height: 0.8rem !important; color: #404756; } @media screen and (min-width: 992px) { .premiumtable p small small { font-size: 0.8rem; line-height: 0.8rem !important; color: #404756; } } .premiumtable .rateoption { min-width: 25%; border-left: 1px solid #ddd; text-align: center; } @media screen and (min-width: 992px) { .premiumtable .rateoption { min-width: 143px; padding-left: 10px; } } .premiumtable .highlight_abo { background-color: #FFF6E2; } .premiumtable .highlight_abo p, .premiumtable .highlight_abo i { font-weight: bold; } .premiumtable .abotip { margin-left: 60px; position: absolute; margin-top: -3px; } .premiumtable .abotip img { width: 20px; } @media screen and (min-width: 768px) { .premiumtable .abotip { margin-left: 100px; margin-top: -6px; } .premiumtable .abotip img { width: 30px; } } @media screen and (min-width: 992px) { .premiumtable .abotip { margin-left: 80px; margin-top: -6px; } .premiumtable .abotip img { width: 40px; } } .premiumtable .free-option { background-color: #fff; line-height: 1.5rem !important; } .premiumtable .abooption p { line-height: 2rem; } .premiumtable .abooption .gold { background-color: #c3a24f !important; border-radius: 3px; margin-right: 10px !important; padding-left: 10px; line-height: 1.5rem !important; color: #fff; } .premiumtable .explanation { width: 100%; padding: 0px 0px; } .premiumtable .explanation p { font-size: 1rem; } @media screen and (min-width: 992px) { .premiumtable .explanation { padding: 0px 20px 0px 0px; width: 90%; } .premiumtable .explanation p { font-size: 1.2rem; } } .premiumtable .abotype_mobile { display: block; } @media screen and (min-width: 992px) { .premiumtable .abotype_mobile { display: none; } } .premiumtable .rates { width: 100%; display: flex; flex-direction: row; } .premiumtable .premiumtable_header .rateoption { border-left: none; text-align: left; padding-left: 5px; padding-bottom: 10px; } @media screen and (min-width: 992px) { .premiumtable .premiumtable_header .rateoption { padding-left: 10px; } } .premiumtable .premiumtable_header .rateoption p { margin: 0px; line-height: 1rem; } @media screen and (min-width: 992px) { .premiumtable .premiumtable_header { display: flex; flex-direction: row; } } .premiumtable .premiumtable_content { display: flex; flex-direction: column; border-bottom: 1px solid #ddd; } @media screen and (min-width: 992px) { .premiumtable .premiumtable_content { flex-direction: row; } } .premiumtable .premiumtable_button { display: flex; flex-direction: row; width: 100%; } @media screen and (min-width: 992px) { .premiumtable .premiumtable_button { flex-direction: row; } } .premiumtable .premiumtable_button .rateoption { padding-left: 0px; } .premiumtable .premiumtable_button .button { font-size: 0.7rem !important; background-color: #c3a24f !important; font-weight: normal; text-transform: none; width: 90%; margin: 10px auto; padding: 5px 0px; } @media screen and (min-width: 992px) { .premiumtable .premiumtable_button .button { font-size: 0.8rem !important; } } .linear { background: linear-gradient(#222, transparent); min-height: 500px; display: block; } .welle::before { content: ""; background: url("../../assets/images/_pages/wellen/welle_weiss.png") no-repeat; background-position: left top !important; background-size: 100% 100%; width: 100%; height: 60px; left: 0px; display: block; margin-top: -60px; } .premiumside_section_cta .inner, .premiumside_section_cta .banner__content { text-align: center; } .premiumside_section_cta .inner .button, .premiumside_section_cta .banner__content .button { font-size: 1rem !important; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; margin: 0px auto; text-transform: none; font-weight: normal; background-color: #c3a24f !important; } @media screen and (min-width: 992px) { .premiumside_section_cta .inner .button, .premiumside_section_cta .banner__content .button { font-size: 2.5rem !important; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; margin: 0px 250px; text-transform: none; font-weight: normal; background-color: #c3a24f !important; } } .premiumside_testimonials { min-height: 550px; padding: 0px 0px 50px 0px !important; } @media screen and (min-width: 992px) { .premiumside_testimonials { min-height: 300px; } } .premiumside_testimonials h2 { font-weight: normal; font-size: 2.5rem; } @media screen and (min-width: 992px) { .premiumside_testimonials h2 { font-size: 3.5rem; margin-top: 20px; } } .premiumside_testimonials .testimonials { margin-top: 50px; text-align: center; display: flex; flex-direction: column; } @media screen and (min-width: 992px) { .premiumside_testimonials .testimonials { flex-direction: row; } } .premiumside_testimonials .testimonials .single_user { margin-top: 20px; text-align: left; display: flex; flex-direction: column; } @media screen and (min-width: 992px) { .premiumside_testimonials .testimonials .single_user { margin-top: 0px; flex-direction: row; } } .premiumside_testimonials .testimonials .single_user .single_picture { max-width: 100%; } @media screen and (min-width: 992px) { .premiumside_testimonials .testimonials .single_user .single_picture { margin-top: 5px; padding-right: 20px; max-width: 200px; } } .premiumside_testimonials .testimonials .single_user H4 { font-size: 1.5rem; } .premiumside_testimonials .testimonials .single_user p { font-size: 1.2rem; padding-right: 20px; margin: 5px 0px 0px 0px !important; } .premiumside_section_01 { height: 400px; background: url("../../assets/images/_pages/premium/reichweite.jpg") no-repeat; background-position: center left !important; background-size: cover; padding: 0px 0px 50px 0px !important; } @media screen and (min-width: 992px) { .premiumside_section_01 { height: 600px; background-position: top left !important; } } .premiumside_section_01 h2 { font-weight: normal; font-size: 2.2rem; line-height: 2.2rem; color: #fff; margin-top: 190px; } @media screen and (min-width: 992px) { .premiumside_section_01 h2 { font-size: 2.8rem; line-height: 2.8rem; margin-top: 20px; } } .premiumside_section_01 h3 { font-size: 1.3rem; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; color: #fff; margin-top: 0px; } @media screen and (min-width: 992px) { .premiumside_section_01 h3 { font-size: 1.5rem; } } .premiumside_section_02 { height: 400px; background: url("../../assets/images/_pages/premium/freunde.jpg") no-repeat; background-position: bottom right !important; background-size: cover; padding: 0px 0px 50px 0px !important; } @media screen and (min-width: 992px) { .premiumside_section_02 { background-position: top right !important; height: 600px; } } .premiumside_section_02 h2 { font-weight: normal; font-size: 2.2rem; line-height: 2.2rem; color: #fff; margin-top: 180px; } @media screen and (min-width: 992px) { .premiumside_section_02 h2 { font-size: 2.8rem; line-height: 2.8rem; margin-top: 20px; } } .premiumside_section_02 h3 { font-size: 1.3rem; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; color: #fff; margin-top: 0px; } @media screen and (min-width: 992px) { .premiumside_section_02 h3 { font-size: 1.5rem; } } .premiumside_section_02 .inner, .premiumside_section_02 .banner__content { display: flex; justify-content: flex-end; } .premiumside_section_03 { height: 400px; background: url("../../assets/images/_pages/premium/fotoschule02_mobile.jpg") no-repeat; background-position: center top !important; background-size: cover; padding: 0px 0px 50px 0px !important; } @media screen and (min-width: 992px) { .premiumside_section_03 { background: url("../../assets/images/_pages/premium/fotoschule02.jpg") no-repeat; background-size: cover; height: 600px; background-position: top center !important; } } .premiumside_section_03 h2 { font-weight: normal; font-size: 2.2rem; line-height: 2.2rem; color: #fff; margin-top: 170px; text-shadow: 5px 3px 5px #060E30; } @media screen and (min-width: 992px) { .premiumside_section_03 h2 { text-shadow: none; font-size: 2.8rem; line-height: 2.8rem; margin-top: 20px; } } .premiumside_section_03 h3 { font-size: 1.2rem; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; color: #fff; margin-top: 0px; text-shadow: 5px 3px 5px #060E30; } @media screen and (min-width: 992px) { .premiumside_section_03 h3 { font-size: 1.5rem; text-shadow: none; } } .premiumside_section_04 { height: 400px; background: url("../../assets/images/_pages/premium/werbefrei.jpeg") no-repeat; background-position: left top !important; background-size: cover; padding: 0px 0px 50px 0px !important; } @media screen and (min-width: 992px) { .premiumside_section_04 { height: 600px; } } .premiumside_section_04 h2 { font-weight: normal; font-size: 2.2rem; line-height: 2.2rem; color: #fff; margin-top: 120px; } @media screen and (min-width: 992px) { .premiumside_section_04 h2 { font-size: 2.8rem; line-height: 2.8rem; width: 680px; margin-top: 20px; } } .premiumside_section_04 h3 { font-size: 1.2rem; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; color: #fff; margin-top: 0px; } @media screen and (min-width: 992px) { .premiumside_section_04 h3 { font-size: 1.5rem; width: 680px; } } .premiumside_section_04 .inner, .premiumside_section_04 .banner__content { display: flex; justify-content: flex-end; } .premiumside_section_05 { height: 400px; background: url("../../assets/images/_pages/premium/aktbereich.jpg") no-repeat; background-position: top center !important; background-size: cover; padding: 0px 0px 50px 0px !important; } @media screen and (min-width: 992px) { .premiumside_section_05 { height: 600px; background-position: top center !important; } } .premiumside_section_05 h2 { font-weight: normal; font-size: 2.2rem; line-height: 2.2rem; color: #fff; margin-top: 170px; } @media screen and (min-width: 992px) { .premiumside_section_05 h2 { font-size: 2.8rem; line-height: 2.8rem; margin-top: 20px; } } .premiumside_section_05 h3 { font-size: 1.2rem; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; color: #fff; margin-top: 0px; } @media screen and (min-width: 992px) { .premiumside_section_05 h3 { font-size: 1.5rem; } } .premiumside_section_06 { height: 400px; background: url("../../assets/images/_pages/premium/voting.jpeg") no-repeat; background-position: top center !important; background-size: cover; padding: 0px 0px 50px 0px !important; } @media screen and (min-width: 992px) { .premiumside_section_06 { height: 600px; background-position: left top !important; } } .premiumside_section_06 h2 { font-weight: normal; font-size: 2.2rem; line-height: 2.2rem; color: #fff; margin-top: 240px; } @media screen and (min-width: 992px) { .premiumside_section_06 h2 { font-size: 2.8rem; line-height: 2.8rem; margin-top: 20px; } } .premiumside_section_06 h3 { font-size: 1.2rem; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; color: #fff; margin-top: 0px; } @media screen and (min-width: 992px) { .premiumside_section_06 h3 { font-size: 1.5rem; } } .premiumside_section_06 .inner, .premiumside_section_06 .banner__content { display: flex; justify-content: flex-end; } .premiumside_section_07 { height: 400px; background: url("../../assets/images/_pages/premium/aktionen.jpg") no-repeat; background-position: bottom right !important; background-size: cover; padding: 0px 0px 50px 0px !important; } @media screen and (min-width: 992px) { .premiumside_section_07 { height: 600px; } } .premiumside_section_07 h2 { font-weight: normal; font-size: 2.2rem; line-height: 2.2rem; color: #fff; margin-top: 10px; } @media screen and (min-width: 992px) { .premiumside_section_07 h2 { font-size: 2.8rem; line-height: 2.8rem; margin-top: 20px; } } .premiumside_section_07 h3 { font-size: 1.2rem; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; color: #fff; margin-top: 0px; } @media screen and (min-width: 992px) { .premiumside_section_07 h3 { font-size: 1.5rem; } } .premiumside_section_08 { height: 400px; background: url("../../assets/images/_pages/premium/homepage.jpg") no-repeat; background-position: left center !important; background-size: cover; padding: 0px 0px 50px 0px !important; } @media screen and (min-width: 992px) { .premiumside_section_08 { background-position: center !important; height: 600px; } } .premiumside_section_08 h2 { font-weight: normal; font-size: 2.2rem; line-height: 2.2rem; color: #fff; margin-top: 180px; } @media screen and (min-width: 992px) { .premiumside_section_08 h2 { font-size: 2.8rem; line-height: 2.8rem; margin-top: 150px; } } .premiumside_section_08 h3 { font-size: 1.2rem; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; color: #fff; margin-top: 0px; } @media screen and (min-width: 992px) { .premiumside_section_08 h3 { font-size: 1.5rem; } } .premiumside_section_08 .inner, .premiumside_section_08 .banner__content { display: flex; justify-content: flex-end; } .premiumside_section_09 { height: 400px; background: url("../../assets/images/_pages/premium/epaper.jpeg") no-repeat; background-position: right center !important; background-size: cover; padding: 0px 0px 50px 0px !important; } @media screen and (min-width: 992px) { .premiumside_section_09 { background-position: top center !important; height: 600px; } } .premiumside_section_09 h2 { font-weight: normal; font-size: 2.2rem; line-height: 2.2rem; color: #fff; margin-top: 170px; } @media screen and (min-width: 992px) { .premiumside_section_09 h2 { font-size: 2.8rem; line-height: 2.8rem; margin-top: 20px; } } .premiumside_section_09 h3 { font-size: 1.2rem; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; color: #fff; margin-top: 0px; } @media screen and (min-width: 992px) { .premiumside_section_09 h3 { font-size: 1.5rem; } } .premiumside_section_09 .inner, .premiumside_section_09 .banner__content { display: flex; justify-content: flex-end; } .premiumside_section_10 { height: 400px; background: url("../../assets/images/_pages/premium/panorama.jpeg") no-repeat; background-position: center !important; background-size: cover; padding: 0px 0px 50px 0px !important; } @media screen and (min-width: 992px) { .premiumside_section_10 { background-position: top center !important; height: 600px; } } .premiumside_section_10 h2 { font-weight: normal; font-size: 2.2rem; line-height: 2.2rem; color: #fff; margin-top: 50px; } @media screen and (min-width: 992px) { .premiumside_section_10 h2 { font-size: 2.8rem; line-height: 2.8rem; margin-top: 20px; } } .premiumside_section_10 h3 { font-size: 1.2rem; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; color: #fff; margin-top: 0px; } @media screen and (min-width: 992px) { .premiumside_section_10 h3 { font-size: 1.5rem; } } .premiumside_section_11 { height: 400px; background: url("../../assets/images/_pages/premium/termine.jpeg") no-repeat; background-position: left center !important; background-size: cover; padding: 0px 0px 50px 0px !important; } @media screen and (min-width: 992px) { .premiumside_section_11 { background-position: top center !important; height: 600px; } } .premiumside_section_11 h2 { font-weight: normal; font-size: 2.2rem; line-height: 2.2rem; color: #fff; margin-top: 90px; } @media screen and (min-width: 992px) { .premiumside_section_11 h2 { font-size: 2.8rem; line-height: 2.8rem; width: 650px; margin-top: 20px; } } .premiumside_section_11 h3 { font-size: 1.2rem; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; color: #fff; margin-top: 0px; } @media screen and (min-width: 992px) { .premiumside_section_11 h3 { font-size: 1.5rem; width: 650px; } } .premiumside_section_11 .inner, .premiumside_section_11 .banner__content { display: flex; justify-content: flex-end; } .premiumside_section_12 { height: 400px; background: url("../../assets/images/_pages/premium/messenger.jpeg") no-repeat; background-position: top center !important; background-size: cover; padding: 0px 0px 50px 0px !important; } @media screen and (min-width: 992px) { .premiumside_section_12 { background-position: center !important; height: 600px; } } .premiumside_section_12 h2 { font-weight: normal; font-size: 2.2rem; line-height: 2.2rem; color: #fff; margin-top: 200px; } @media screen and (min-width: 992px) { .premiumside_section_12 h2 { font-size: 2.8rem; line-height: 2.8rem; margin-top: 20px; } } .premiumside_section_12 h3 { font-size: 1.3rem; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; color: #fff; margin-top: 0px; } @media screen and (min-width: 992px) { .premiumside_section_12 h3 { font-size: 1.5rem; } } .premiumside_section_12 .inner, .premiumside_section_12 .banner__content { display: flex; justify-content: flex-end; } .premium_testimonials_2 { display: grid; place-items: center; background: #100721; margin: 0; padding: 0; box-sizing: border-box; } .premium_testimonials_2 h2 { margin: 50px 0px; text-align: left; } @media screen and (min-width: 992px) { .premium_testimonials_2 h2 { margin: 100px 0px; text-align: center; } } .premium_testimonials_2 h3 { font-size: 1rem; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; } .premium_testimonials_2 .container2 { flex-direction: column; width: 100%; display: flex; justify-content: center; gap: 10px; } @media screen and (min-width: 992px) { .premium_testimonials_2 .container2 { flex-direction: row; } } @media screen and (min-width: 992px) { .premium_testimonials_2 .container2 { height: 300px; } } .premium_testimonials_2 .container2 > div { flex: 0 0 180px; border-radius: 0.5rem; transition: 0.5s ease-in-out; cursor: pointer; position: relative; overflow: hidden; } .premium_testimonials_2 .container2 > div:nth-of-type(1) { background: url("../../assets/images/_pages/premium/test_p_01.jpeg") no-repeat 50%/cover; } .premium_testimonials_2 .container2 > div:nth-of-type(2) { background: url("../../assets/images/_pages/premium/test_p_02.jpeg") no-repeat 50%/cover; } .premium_testimonials_2 .container2 > div:nth-of-type(3) { background: url("../../assets/images/_pages/premium/test_p_03.jpeg") no-repeat 50%/cover; } .premium_testimonials_2 .container2 > div:nth-of-type(4) { background: url("../../assets/images/_pages/premium/test_p_04.jpeg") no-repeat 50%/cover; } .premium_testimonials_2 .container2 > div:nth-of-type(5) { background: url("../../assets/images/_pages/premium/test_p_05.jpg") no-repeat 50%/cover; } .premium_testimonials_2 .container2 > div:nth-of-type(6) { background: url("../../assets/images/_pages/premium/test_p_06.jpg") no-repeat 50%/cover; } .premium_testimonials_2 .container2 > div .content { font-size: 1.5rem; color: #fff; display: flex; align-items: left; padding: 15px; opacity: 0; flex-direction: column; height: 100%; justify-content: flex-end; background: #02022e; background: linear-gradient(0deg, #404756 0%, rgba(255, 255, 255, 0) 100%); transform: translatey(100%); transition: opacity 0.5s ease-in-out, transform 0.5s 0.2s; visibility: hidden; } .premium_testimonials_2 .container2 > div .content span { display: block; margin-top: 5px; font-size: 0.8rem; } .premium_testimonials_2 .container2 > div:hover { flex: 0 0 250px; transform: translatey(-30px); } .premium_testimonials_2 .container2 > div:hover .content { opacity: 1; transform: translatey(0%); visibility: visible; } .offerside section.outer { background-color: transparent !important; } .offertable .premiumtable { max-width: 900px; } .offertable .premiumtable .explanation { width: 100%; } @media screen and (min-width: 992px) { .offertable .premiumtable .explanation { width: 120%; } } .offertable .rateoption { min-width: 50%; } @media screen and (min-width: 992px) { .offertable .rateoption { min-width: 200px; } } .emball { float: right; max-width: 150px !important; margin-top: 20px; } @media screen and (min-width: 992px) { .emball { margin-top: -30px; max-width: 300px !important; } } .offer-text { max-width: 1100px; margin-top: 60px; } .offer-text p { font-size: 1rem; line-height: 1rem; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; text-align: center; } @media screen and (min-width: 992px) { .offer-text { margin-top: 30px; } .offer-text p { font-size: 1.8rem; line-height: 2rem; } } .offersale_em { background: url("../../assets/images/_pages/premium/em2024_mobile.jpg") !important; background-position: left top !important; background-size: cover !important; } @media screen and (min-width: 992px) { .offersale_em { background: url("../../assets/images/_pages/premium/em2024.jpg") !important; background-position: left center !important; } } .offersale_em .hotline-premium { text-shadow: 3px 0px 2px #000; } .offersale_em .hotlineicon { text-shadow: 3px 0px 2px #000; } .offersale_em h1 { font-size: 2rem; line-height: 2rem; text-transform: uppercase; text-shadow: 3px 0px 2px #000; font-weight: normal; } @media screen and (min-width: 992px) { .offersale_em h1 { font-size: 4.5rem; line-height: 4rem; margin-top: 60px; } } .offersale_em h3 { font-size: 1.3rem; line-height: 1.3rem; font-weight: normal; text-shadow: 3px 0px 2px #000; margin-top: 20px; } @media screen and (min-width: 992px) { .offersale_em h3 { font-size: 2rem; line-height: 2.2rem; } } .offersale_em .usercopyright { margin-top: -50px; } .goldborder_em { border-bottom: #A41A57 2px solid !important; } .gold-em { background-color: #A41A57 !important; border-radius: 3px; margin-right: 10px !important; padding-left: 10px; line-height: 1.5rem !important; color: #fff; } .premiumside_header_trail2024 { height: 350px; background: url("../../assets/images/_pages/premium/jump.jpg") no-repeat; background-position: top center; background-size: cover; padding: 0px 0px 50px 0px !important; } @media screen and (min-width: 992px) { .premiumside_header_trail2024 { height: 500px; } } .premiumside_header_trail2024 .infoslot { display: flex; flex-direction: row; justify-content: space-between; } .premiumside_header_trail2024 .infoslot .hotline-premium { margin: 12px; display: flex; flex-direction: row; min-width: 200px; } @media screen and (min-width: 992px) { .premiumside_header_trail2024 .infoslot .hotline-premium { min-width: 600px; } } .premiumside_header_trail2024 .infoslot .hotline-premium .hotlineicon { width: 40px; display: block; margin-right: 10px; } .premiumside_header_trail2024 .infoslot .hotline-premium p { font-size: 0.8rem; line-height: 0.8rem; color: #fff; } @media screen and (min-width: 992px) { .premiumside_header_trail2024 .infoslot .hotline-premium p { font-size: 1.2rem; line-height: 1rem; } } .premiumside_header_trail2024 .infoslot .hotline-premium p small { font-size: 0.6rem; line-height: 0.6rem; } .premiumside_header_trail2024 .usercopyright { display: grid; } .premiumside_header_trail2024 img { max-width: 200px; margin-bottom: 10px; } @media screen and (min-width: 992px) { .premiumside_header_trail2024 img { max-width: 300px; margin-bottom: 20px; } } .premiumside_header_trail2024 h1 { margin-top: 5px; font-size: 2rem; line-height: 2rem; font-weight: normal; text-align: center; color: #fff; } @media screen and (min-width: 992px) { .premiumside_header_trail2024 h1 { font-size: 4rem; line-height: 4rem; margin-top: 0px; text-align: center; } } .premiumside_header_trail2024 h3 { font-size: 1.5rem; line-height: 1.5rem; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; margin-top: 0px; text-align: center; color: #fff; margin: 10px 20px 0px 20px; font-weight: normal; } @media screen and (min-width: 992px) { .premiumside_header_trail2024 h3 { font-size: 1.8rem; line-height: 1.8rem; text-align: center; font-weight: normal; margin: 10px 0px 0px 0px; } } .premiumside_header_trail2024 p { font-size: 1.2rem; line-height: 1.2rem; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; margin-top: 0px; text-align: center; color: #fff; margin: 10px 20px 0px 20px; } @media screen and (min-width: 992px) { .premiumside_header_trail2024 p { font-size: 1.3rem; line-height: 1.3rem; text-align: center; margin: 10px 0px 0px 0px; } } .premiumside_header_trail2024 .inner, .premiumside_header_trail2024 .banner__content { display: flex; flex-direction: column; } .premiumside_header_trail2024 .inner .diamond, .premiumside_header_trail2024 .banner__content .diamond { text-align: center; } .premiumside_header_trail2024 .inner .diamond img, .premiumside_header_trail2024 .banner__content .diamond img { max-width: 50px; margin-top: 0px; margin-right: 0px; margin-bottom: 20px; } @media screen and (min-width: 992px) { .premiumside_header_trail2024 .inner .diamond img, .premiumside_header_trail2024 .banner__content .diamond img { max-width: 70px; margin-bottom: 10px; } } .premiumside_content_trail2024 p { font-size: 1.2rem; line-height: 1.2rem; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; margin-top: 0px; text-align: center; color: #000; margin: 10px 20px 0px 20px; } @media screen and (min-width: 992px) { .premiumside_content_trail2024 p { font-size: 1.5rem; line-height: 1.8rem; text-align: center; margin: 10px 0px 0px 0px; } } /*--------Accordion-------*/ .Textaccordion { width: 100%; margin: auto; } .Textaccordion .acc-body { display: none; width: 98%; width: calc(100% - 20px); margin: 0 auto; height: 0px; color: #000; background-color: rgba(255, 255, 255, 0.2); line-height: 28px; padding: 25px 0px; box-sizing: border-box; transition: 0.5s; } .Textaccordion label { font-size: 1.2rem; line-height: 1.2rem; font-weight: normal; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; cursor: pointer; background-color: #c3a24f !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-radius: 3px; display: block; padding: 15px; width: 100%; color: #fff; box-sizing: border-box; z-index: 100; } @media screen and (min-width: 992px) { .Textaccordion label { font-size: 1.5rem; line-height: 1.5rem; } } .Textaccordion input { display: none; } .Textaccordion label:before { content: "+"; font-weight: bolder; float: right; } .Textaccordion input:checked + label { background-color: rgba(255, 255, 255, 0.15); } .Textaccordion input:checked + label:before { content: "-"; transition: 0.5s; } .Textaccordion input:checked ~ .acc-body { display: block; height: auto; color: #000; font-size: 16px; padding: 25px 0px; transition: 0.5s; } .trail_stoerer { display: flex; justify-content: right; } .trail_stoerer img { width: 80px; margin: 20px 0px -10px 0px; } @media screen and (min-width: 992px) { .trail_stoerer img { width: 200px; margin: 50px 0px -50px 0px; } } .premiumside_section_cta_trail .inner, .premiumside_section_cta_trail .banner__content { text-align: center; } .premiumside_section_cta_trail .inner h2, .premiumside_section_cta_trail .banner__content h2 { font-size: 2rem; line-height: 2rem; } @media screen and (min-width: 992px) { .premiumside_section_cta_trail .inner h2, .premiumside_section_cta_trail .banner__content h2 { font-size: 2.5rem; line-height: 2.5rem; } } .premiumside_section_cta_trail .inner p, .premiumside_section_cta_trail .banner__content p { font-size: 1rem; line-height: 1rem; } @media screen and (min-width: 992px) { .premiumside_section_cta_trail .inner p, .premiumside_section_cta_trail .banner__content p { font-size: 1.8rem; line-height: 1.8rem; } } .premiumside_section_cta_trail .inner .button, .premiumside_section_cta_trail .banner__content .button { font-size: 1rem !important; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; margin: 0px auto; text-transform: none; font-weight: normal; background-color: #c3a24f !important; } @media screen and (min-width: 992px) { .premiumside_section_cta_trail .inner .button, .premiumside_section_cta_trail .banner__content .button { font-size: 2.5rem !important; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; margin: 0px 250px; text-transform: none; font-weight: normal; background-color: #c3a24f !important; } } .trail_subhead { font-size: 2.5rem; line-height: 2.5rem; text-align: center; } @media screen and (min-width: 992px) { .trail_subhead { font-size: 3.5rem; line-height: 3.5rem; } } .smaler_outerspace { padding: 0px 0px 30px 0px; } .trail_subhead_h3 { font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size: 2rem; line-height: 2rem; text-align: center; } @media screen and (min-width: 992px) { .trail_subhead_h3 { font-size: 2.5rem; line-height: 2.5rem; } } .premiumside_section_03_2 { height: 500px; background: url("../../assets/images/_pages/premium/fotoschule03_mobile.jpg") no-repeat; background-position: center !important; background-size: cover; padding: 0px 0px 50px 0px !important; } @media screen and (min-width: 992px) { .premiumside_section_03_2 { background: url("../../assets/images/_pages/premium/fotoschule03.jpg") no-repeat; height: 600px; background-size: cover; background-position: top center !important; } } .premiumside_section_03_2 h2 { font-weight: normal; font-size: 2.2rem; line-height: 2.2rem; color: #fff; margin-top: 10px; } @media screen and (min-width: 992px) { .premiumside_section_03_2 h2 { text-shadow: none; font-size: 2.8rem; line-height: 2.8rem; margin-top: 20px; } } .premiumside_section_03_2 h3 { font-size: 1.2rem; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; color: #fff; margin-top: 0px; } @media screen and (min-width: 992px) { .premiumside_section_03_2 h3 { font-size: 1.5rem; text-shadow: none; } } .premiumside_section_20 { height: 400px; background: url("../../assets/images/_pages/premium/panorama.jpeg") no-repeat; background-position: center !important; background-size: cover; padding: 0px 0px 50px 0px !important; } @media screen and (min-width: 992px) { .premiumside_section_20 { background-position: top center !important; height: 600px; } } .premiumside_section_20 .inner, .premiumside_section_20 .banner__content { justify-content: flex-end; display: flex; } .premiumside_section_20 h2 { font-weight: normal; font-size: 2.2rem; line-height: 2.2rem; color: #fff; margin-top: 50px; } @media screen and (min-width: 992px) { .premiumside_section_20 h2 { font-size: 2.8rem; line-height: 2.8rem; margin-top: 20px; } } .premiumside_section_20 h3 { font-size: 1.2rem; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; color: #fff; margin-top: 0px; } @media screen and (min-width: 992px) { .premiumside_section_20 h3 { font-size: 1.5rem; } } .trail-more { margin-top: 80px !important; padding: 0px !important; max-width: 2000px !important; width: 100%; } .trail-more .diamond { text-align: center; margin-top: 50px; } .trail-more .diamond img { width: 50px; margin-bottom: 20px; } @media screen and (min-width: 992px) { .trail-more .diamond img { width: 100px; margin-bottom: 0px; } } .trail-more h2 { color: #fff; margin: 20px 0px 50px 0px; font-weight: normal; } .trail-more h3 { color: #fff; margin: 0px 0px 50px 0px; font-weight: normal; } .premiumside_section_09_trail { height: 400px; background: url("../../assets/images/_pages/premium/epaper.jpeg") no-repeat; background-position: right center !important; background-size: cover; padding: 0px 0px 50px 0px !important; } @media screen and (min-width: 992px) { .premiumside_section_09_trail { background-position: top center !important; height: 600px; } } .premiumside_section_09_trail h2 { font-weight: normal; font-size: 2.2rem; line-height: 2.2rem; color: #fff; margin-top: 170px; } @media screen and (min-width: 992px) { .premiumside_section_09_trail h2 { font-size: 2.8rem; line-height: 2.8rem; margin-top: 20px; } } .premiumside_section_09_trail h3 { font-size: 1.2rem; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; color: #fff; margin-top: 0px; } @media screen and (min-width: 992px) { .premiumside_section_09_trail h3 { font-size: 1.5rem; } } .premiumside_section_22 { height: 400px; background: url("../../assets/images/_pages/premium/events.jpg") no-repeat; background-position: right center !important; background-size: cover; padding: 0px 0px 50px 0px !important; } @media screen and (min-width: 992px) { .premiumside_section_22 { background-position: center !important; height: 600px; } } .premiumside_section_22 h2 { font-weight: normal; font-size: 2.2rem; line-height: 2.2rem; color: #fff; margin-top: 170px; } @media screen and (min-width: 992px) { .premiumside_section_22 h2 { font-size: 2.8rem; line-height: 2.8rem; margin-top: 20px; } } .premiumside_section_22 h3 { font-size: 1.2rem; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; color: #fff; margin-top: 0px; } @media screen and (min-width: 992px) { .premiumside_section_22 h3 { font-size: 1.5rem; } } .premiumside_section_33 { height: 400px; background: url("../../assets/images/_pages/premium/reichweite3.jpg") no-repeat; background-position: center right !important; background-size: cover; padding: 0px 0px 50px 0px !important; } @media screen and (min-width: 992px) { .premiumside_section_33 { height: 600px; background-position: top left !important; } } .premiumside_section_33 .inner, .premiumside_section_33 .banner__content { justify-content: flex-end; display: flex; } .premiumside_section_33 h2 { font-weight: normal; font-size: 2.2rem; line-height: 2.2rem; color: #fff; margin-top: 170px; } @media screen and (min-width: 992px) { .premiumside_section_33 h2 { font-size: 2.8rem; line-height: 2.8rem; margin-top: 20px; } } .premiumside_section_33 h3 { font-size: 1.3rem; font-family: system-ui, BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; color: #fff; margin-top: 0px; } @media screen and (min-width: 992px) { .premiumside_section_33 h3 { font-size: 1.5rem; } } .border_trail_w { border-bottom: 4px solid #fff; } .offersale_antumn { background: url("../../assets/images/_pages/fullpages/herbst2024.jpg") !important; background-position: center top !important; background-size: cover !important; } @media screen and (min-width: 992px) { .offersale_antumn { background: url("../../assets/images/_pages/fullpages/herbst2024.jpg") !important; background-position: center !important; background-size: cover !important; height: 500px; } } .offersale_antumn .hotline-premium { text-shadow: 3px 0px 2px #000; } @media screen and (min-width: 992px) { .offersale_antumn .hotline-premium { margin: 0px 12px 12px 12px !important; padding-top: 12px !important; } } .offersale_antumn .hotlineicon { text-shadow: 3px 0px 2px #000; } .offersale_antumn .emball { float: right; max-width: 150px !important; margin-top: -30px; } @media screen and (min-width: 992px) { .offersale_antumn .emball { margin-top: -30px; max-width: 300px !important; } } .offersale_antumn h1 { font-size: 2rem; line-height: 2rem; font-weight: normal; color: #8a3104; text-shadow: 5px 3px 5px #EDD276; margin-top: 60px; } @media screen and (min-width: 992px) { .offersale_antumn h1 { font-size: 4.5rem; line-height: 4.3rem; margin-top: 60px; } } .offersale_antumn h3 { font-size: 1.3rem; line-height: 1.3rem; font-weight: normal; margin-top: 20px; color: #8a3104; text-shadow: 5px 3px 5px #EDD276; } @media screen and (min-width: 992px) { .offersale_antumn h3 { font-size: 2rem; line-height: 2.2rem; } } .offersale_antumn .usercopyright { margin-top: -50px; } .gold-autumn { background-color: #893202 !important; border-radius: 3px; margin-right: 10px !important; padding-left: 10px; line-height: 1.5rem !important; color: #fff; } .goldborder_autumn { border-color: #893202 !important; } stars.jpg .blackweekside { background: url("../../assets/images/_pages/premium/sparkel.jpg"); background-repeat: repeat; } .welle_gray::before { content: ""; background: url("../../assets/images/_pages/wellen/welle_04.png") no-repeat; background-position: left top !important; background-size: 100% 100%; width: 100%; height: 60px; left: 0px; display: block; margin-top: -60px; } .offersale_blackweek { background: url("../../assets/images/_pages/premium/xmas_header_24_mobile2.jpg"); background-position: center bottom; background-size: cover; text-align: left; height: 600px; } @media screen and (min-width: 992px) { .offersale_blackweek { background: url("../../assets/images/_pages/premium/fullback_blackweek_final.jpg") !important; background-position: center center !important; background-size: cover !important; height: 500px; } } .offersale_blackweek .infoslot { display: flex; justify-content: space-between; flex-direction: row; } .offersale_blackweek .hotline-premium { text-shadow: 3px 0px 2px #000; text-align: left; } @media screen and (min-width: 992px) { .offersale_blackweek .hotline-premium { margin: 0px 12px 12px 12px !important; padding-top: 12px !important; display: flex !important; } } .offersale_blackweek .hotlineicon { text-shadow: 3px 0px 2px #000; margin-top: 0px; vertical-align: top !important; height: 40px; } .offersale_blackweek .bw_stoerer { float: right; max-width: 120px !important; margin-top: 20px; } @media screen and (min-width: 992px) { .offersale_blackweek .bw_stoerer { max-width: 200px !important; } } @media screen and (min-width: 992px) { .offersale_blackweek .limitiert_stoerer { max-width: 500px !important; margin-top: 20px; margin-right: 20px; } } .offersale_blackweek .bw_content { max-width: 800px; margin-top: 30px; } .offersale_blackweek h1 { font-size: 1.8rem; line-height: 1.8rem; font-weight: normal; color: #000; text-align: center; text-shadow: 10px 0px 10px #c3a24f; } @media screen and (min-width: 992px) { .offersale_blackweek h1 { text-align: left; font-size: 3.3rem; line-height: 3.3rem; } } .offersale_blackweek .h1_bigger { font-size: 2rem; color: #000; font-weight: bold; } @media screen and (min-width: 992px) { .offersale_blackweek .h1_bigger { font-size: 4.3rem; } } .offersale_blackweek .top_h1 { font-size: 4rem; line-height: 3.5rem; font-weight: bold; } @media screen and (min-width: 992px) { .offersale_blackweek .top_h1 { font-size: 5.5rem; line-height: 5rem; margin: 50px 0px 90px 0px; } } .offersale_blackweek h3 { font-size: 1.3rem; line-height: 1.3rem; font-weight: normal; margin-top: 20px; text-align: center; color: #000; margin-left: 0px; text-shadow: 10px 0px 10px #c3a24f; } @media screen and (min-width: 992px) { .offersale_blackweek h3 { font-size: 1.7rem; line-height: 1.7rem; text-align: left; } } .offersale_blackweek p.limitiert { padding: 20px; background-color: #c3a24f; font-size: 1rem; line-height: 1rem; font-weight: normal; color: #fff; text-transform: uppercase; width: 100%; } @media screen and (min-width: 992px) { .offersale_blackweek p.limitiert { width: 900px; font-size: 2rem; line-height: 1.5rem; height: 60px; } } .offersale_blackweek .usercopyright { margin-top: -50px; } .blackweektable { color: #fff; } .blackweektable small { color: #888 !important; } .blackweektable .free-option { background-color: #000; } .offer-text_blackweek { padding: 50px 0px 20px 0px; text-align: center; } .offer-text_blackweek p { color: #fff !important; font-size: 1rem; line-height: 1.2rem; } @media screen and (min-width: 992px) { .offer-text_blackweek p { font-size: 1.8rem; line-height: 2rem; } } .blackweek_color { background-color: #c3a24f; border-radius: 3px; margin-right: 10px !important; padding-left: 10px; line-height: 1.5rem !important; color: #fff; } .blackweek_border { border-color: #c3a24f !important; } /* Xmas Sale 2024 */ .xmas24side { background: url("../../assets/images/_pages/premium/stars.jpg"); background-repeat: repeat; } .offersale_xmas24 { background: url("../../assets/images/_pages/fullpages/xmas_2024.jpg"); background-position: center bottom; background-size: cover; text-align: left; height: 650px; } @media screen and (min-width: 992px) { .offersale_xmas24 { background-position: center bottom !important; background-size: cover !important; height: 600px; } } .offersale_xmas24 .infoslot { display: flex; justify-content: space-between; flex-direction: row; } .offersale_xmas24 .hotline-premium { text-shadow: 3px 0px 2px #000; text-align: left; } @media screen and (min-width: 992px) { .offersale_xmas24 .hotline-premium { margin: 0px 12px 12px 12px !important; padding-top: 12px !important; display: flex !important; } } .offersale_xmas24 .hotlineicon { text-shadow: 3px 0px 2px #000; margin-top: 0px; vertical-align: top !important; height: 40px; } .offersale_xmas24 .inner, .offersale_xmas24 .banner__content { display: flex; flex-direction: column-reverse; } @media screen and (min-width: 992px) { .offersale_xmas24 .inner, .offersale_xmas24 .banner__content { flex-direction: row; } } .offersale_xmas24 .inner .stoerer_xmas, .offersale_xmas24 .banner__content .stoerer_xmas { max-width: 300px !important; margin-top: 140px; } @media screen and (min-width: 992px) { .offersale_xmas24 .inner .stoerer_xmas, .offersale_xmas24 .banner__content .stoerer_xmas { float: right; max-width: 350px !important; margin-top: 300px; } } .offersale_xmas24 .inner .bw_content, .offersale_xmas24 .banner__content .bw_content { width: 100%; } @media screen and (min-width: 992px) { .offersale_xmas24 .inner .bw_content, .offersale_xmas24 .banner__content .bw_content { margin-top: 90px; width: 80%; } } .offersale_xmas24 h1 { font-size: 1.8rem; line-height: 1.8rem; font-weight: lighter; color: #fff; text-align: center; } @media screen and (min-width: 992px) { .offersale_xmas24 h1 { text-align: left; font-size: 3.3rem; line-height: 3.3rem; } } .offersale_xmas24 .h1_bigger { font-size: 2rem; color: #fff; font-weight: lighter; } @media screen and (min-width: 992px) { .offersale_xmas24 .h1_bigger { font-size: 4.3rem; } } .offersale_xmas24 .top_h1 { font-size: 4rem; line-height: 4rem; font-weight: lighter; } @media screen and (min-width: 992px) { .offersale_xmas24 .top_h1 { font-size: 6.5rem; line-height: 6rem; margin: 250px 0px 0px 0px; } } .offersale_xmas24 h3 { font-size: 1.3rem; line-height: 1.3rem; font-weight: lighter; margin-top: 20px; text-align: center; color: #fff; margin-left: 0px; margin-right: 0px; } @media screen and (min-width: 992px) { .offersale_xmas24 h3 { font-size: 2.5rem; line-height: 2.5rem; text-align: left; } } .offersale_xmas24 h3 s { text-decoration: line-through; } .offersale_xmas24 p.limitiert { padding: 20px; background-color: #c3a24f; font-size: 1rem; line-height: 1rem; font-weight: normal; color: #000; text-transform: uppercase; width: 100%; } @media screen and (min-width: 992px) { .offersale_xmas24 p.limitiert { width: 900px; font-size: 2rem; line-height: 1.5rem; height: 60px; } } .offersale_xmas24 .usercopyright { margin-top: -50px; } .offer-text_xmas24 { padding: 50px 0px 20px 0px; text-align: center; } .offer-text_xmas24 p { color: #000 !important; font-size: 1rem; line-height: 1.2rem; } @media screen and (min-width: 992px) { .offer-text_xmas24 p { font-size: 1.8rem; line-height: 2rem; } } .xmas24_color { background-color: #c3a24f; border-radius: 3px; margin-right: 10px !important; padding-left: 10px; line-height: 1.5rem !important; color: #fff; } .xmas24_border { border-color: #c3a24f !important; } .fcx-fallback__content_2 { position: absolute; top: 50%; left: 0; width: 100%; transform: translate(0%, -50%); color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); text-align: center; padding: 0 10%; } .fcx-fallback__content_2 h1 { line-height: 1.25; margin: 0 0 3rem; } .fcx-fallback__content_2 .btn { text-transform: uppercase; } @media screen and (min-width: 992px) { .fcx-fallback__content_2 h1 { font-size: 21px; } } @media screen and (min-width: 1280px) { .fcx-fallback__content_2 { padding: 0 25%; } } .fcx-fallback--nude-2 { background-position: 28% 50%; background-image: url("../../assets/images/_pages/fullpages/no_nude_2023.jpg"); background-color: #ddd; } @media screen and (min-width: 992px) { .fcx-fallback--nude-2 { background-position: 32% 50%; } }