/* Theme Name: INA Karriere 2024 Author: iuno.co Version: 1.0 */ /* ROOT ==================================================== */ :root { --ina: #ec6752; --red: #dc3545; --ina10: rgba(236,103,82,0.1); --ina25: rgba(236,103,82,0.25); --ina80: rgba(236,103,82,0.80); --white: rgba(255,255,255,1); --white10: rgba(255,255,255,0.1); --white25: rgba(255,255,255,0.25); --white80: rgba(255,255,255,0.8); --black: #111; --black05: rgba(0,0,0,0.05); --black10: rgba(0,0,0,0.1); --black25: rgba(0,0,0,0.25); --black70: rgba(0,0,0,0.7); --little-shark: rgba(41,43,43,1); --shark: rgba(41,43,43,1); --shark05: rgba(41,43,43,0.05); --shark10: rgba(41,43,43,0.1); --shark15: rgba(41,43,43,0.15); --shark25: rgba(41,43,43,0.25); --shark50: rgba(41,43,43,0.5); --shark70: rgba(41,43,43,0.7); --menu-shark-05: rgba(244,244,244,1); --menu-ina-05: rgba(253,248,247,1); --menu-ina-10: rgba(251,240,238,1); --menu-bg: #ffffff; --menu-item-bg: #f4f4f4; --menu-sub-item-bg: #f9f0ee; --menu-text: #292b2b; --menu-item-highlight-bg: #292b2b; --menu-text-highlight: #ffffff; --menu-item-bg-hover: #ec6752; --menu-text-hover: #ffffff; --menu-dropdown-icon: url('/wp-content/themes/ina.karriere/img/icon-drowdown-383838.svg'); --menu-dropdown-icon-highlight: url('/wp-content/themes/ina.karriere/img/icon-drowdown-ffffff.svg'); --menu-dropdown-icon-hover: url('/wp-content/themes/ina.karriere/img/icon-drowdown-ffffff.svg'); --menu-line-top: url('/wp-content/themes/ina.karriere/img/menu-line-h.svg'); --menu-line-bottom: url('/wp-content/themes/ina.karriere/img/menu-line-h.svg'); --menu-line-left: url('/wp-content/themes/ina.karriere/img/menu-line-v.svg'); --menu-line-right: url('/wp-content/themes/ina.karriere/img/menu-line-v.svg'); --img-dot-h: url('/wp-content/themes/ina.karriere/img/blog-dots-h.svg'); --img-dot-v: url('/wp-content/themes/ina.karriere/img/blog-dots-v.svg'); --img-line-h: url('/wp-content/themes/ina.karriere/img/blog-line-h.svg'); --img-line-v: url('/wp-content/themes/ina.karriere/img/blog-line-v.svg'); --impuls-bg-1: url('/wp-content/themes/ina.karriere/img/impuls_background_1.jpg'); --impuls-bg-2: url('/wp-content/themes/ina.karriere/img/impuls_background_2.jpg'); --impuls-bg-3: url('/wp-content/themes/ina.karriere/img/impuls_background_3.jpg'); --impuls-bg-4: url('/wp-content/themes/ina.karriere/img/impuls_background_4.jpg'); --blog-top-outer: url('/wp-content/themes/ina.karriere/img/blog-line-h-white-top-outer.svg'); --blog-right-outer: url('/wp-content/themes/ina.karriere/img/blog-line-h-white-right-outer.svg'); --blog-bottom-outer: url('/wp-content/themes/ina.karriere/img/blog-line-h-white-bottom-outer.svg'); --blog-left-outer: url('/wp-content/themes/ina.karriere/img/blog-line-h-white-left-outer.svg'); --intern-bg: rgba(236,103,82,0.1); --intern-top-outer: url('/wp-content/themes/ina.karriere/img/blog-intern-line-h-white-top-outer.svg'); --intern-right-outer: url('/wp-content/themes/ina.karriere/img/blog-intern-line-h-white-right-outer.svg'); --intern-bottom-outer: url('/wp-content/themes/ina.karriere/img/blog-intern-line-h-white-bottom-outer.svg'); --intern-left-outer: url('/wp-content/themes/ina.karriere/img/blog-intern-line-h-white-left-outer.svg'); --recipe-bg: url('/wp-content/themes/ina.karriere/img/rezeptgruss_background.jpg'); --step-tip-text: #292b2b; --recipe-inner-top: url('/wp-content/themes/ina.karriere/img/blog-line-h-white-top-inner.svg'); --recipe-inner-right: url('/wp-content/themes/ina.karriere/img/blog-line-h-white-right-inner.svg'); --recipe-inner-bottom: url('/wp-content/themes/ina.karriere/img/blog-line-h-white-bottom-inner.svg'); --recipe-inner-left: url('/wp-content/themes/ina.karriere/img/blog-line-h-white-left-inner.svg'); -button-color: #ffffff; -button-color-hover: #ffffff; --h1: #ffffff; --element-text: #292b2b; --element-hg: #ffffff; --element-button-text: #ffffff; --element-button-hg: #ec6752; --form-checkbox-icon: url('/wp-content/themes/ina.karriere/img/icon-check-383838.svg'); --text-link-extern-icon: url('/wp-content/themes/ina.karriere/img/icon-extern-ec6752.svg'); --menu-link-extern-icon: url('/wp-content/themes/ina.karriere/img/icon-extern-383838.svg'); --button-nav-text: rgba(41,43,43,1); --button-nav-text-hover: rgba(41,43,43,1); --button-nav-hg: rgba(41,43,43,0.1); --button-nav-hg-hover: rgba(41,43,43,0.25); --button-nav-icon: url('/wp-content/themes/ina.karriere/img/button-back-383838.svg'); --button-nav-current-text: rgba(236,103,82,1); --button-nav-current-text-hover: rgba(255,255,255,1); --button-nav-current-hg: rgba(236,103,82,0.1); --button-nav-current-hg-hover: rgba(236,103,82,0.25); --button-nav-prev-icon: url('/wp-content/themes/ina.karriere/img/button-back-ec6752.svg'); --button-nav-prev-icon-hover: url('/wp-content/themes/ina.karriere/img/button-back-ec6752.svg'); --button-nav-next-icon: url('/wp-content/themes/ina.karriere/img/button-details-ec6752.svg'); --button-nav-next-icon-hover: url('/wp-content/themes/ina.karriere/img/button-details-ec6752.svg'); --footer-bg: #696a6a; --footer-text: #ffffff; --footer-border: rgba(255,255,255,0.25); } .has-ina-background-color { background-color: var(--ina); } .has-shark-background-color { background-color: var(--shark); } .has-box-light-grey-background-color { background-color: var(--shark05); } .has-box-grey-background-color { background-color: var(--shark15); } .has-black-background-color { background-color: var(--black); } .has-white-background-color { background-color: var(--white); } .has-ina-color { color: var(--ina); } .has-shark-color { color: var(--shark); } .has-box-light-grey-color { color: var(--shark05); } .has-box-grey-color { color: var(--shark15); } .has-black-color { color: var(--black); } .has-white-color { color: var(--white); } .has-ina-background-color .has-white-color a { color: var(--white); } * { -webkit-text-size-adjust: none !important; text-size-adjust: none !important; } body { font-family: 'DINpro', sans-serif; position: relative; overflow-x: hidden; } .body.side-navigation-active { position: fixed; overflow: hidden; } .body { position: relative; background-color: var(--white); width: 100%; z-index: +10; } .ina { font-family: 'INA-handwriting', sans-serif; font-size: 120%; font-weight: 700; text-transform: uppercase; } .filz { background-color: var(--ina); } .filzhell { background-color: var(--ina); } @media (max-width: 768px) { .filz.mobile-invert { background-image: none; } } .page { padding-left: 0; padding-right: 0; } .page.no-hero { } .full-height { min-height: 100vh; } .is-style-ina-container { width: 100%; max-width: calc(1050px - 4rem); position: relative; margin-left: auto; margin-right: auto; padding: 0 3rem 0 1rem; } @media (min-width: 768px) { .is-style-ina-container { max-width: 90vw; margin-left: 5vw; } } @media (min-width: 1050px) { .is-style-ina-container { max-width: 85vw; margin-left: 7.5vw; } } @media (min-width: 1500px) { .is-style-ina-container { max-width: 1200px; margin-left: calc((100vw - 1200px) / 2); } } .is-style-ina-narrow, .narrow { width: 100%; max-width: calc(800px - 4rem); position: relative; margin-left: auto; margin-right: auto; padding: 0 3rem 0 1rem; } .is-style-ina-half-width { max-width: calc(560px + 4rem); padding: 0 3rem 0 1rem; } @media (min-width: 768px) AND (max-width: 1024px) { .is-style-ina-half-width { max-width: 90vw; margin-left: 5vw; } } @media (max-width: 767px) { .is-style-ina-half-width { max-width: calc(100% - 4rem); } } section { background-color: var(--white); } .container { width: calc(100% - 3rem); max-width: 100%; margin-left: 0; margin-right: 0; } @media (min-width: 768px) { .container { max-width: calc(90vw - 3rem); margin-left: 5vw; } } @media (min-width: 1050px) { .container { max-width: calc(85vw - 3rem); margin-left: 7.5vw; } } @media (min-width: 1500px) { .container { max-width: 1200px; margin-left: calc((100vw - 1200px) / 2); } } header .container { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; } @media (min-width: 768px) { header .container { max-width: 92vw; margin-left: 4vw; } } @media (min-width: 1050px) { header .container { max-width: 92vw; margin-left: 4vw; } } @media (min-width: 1500px) { header .container { max-width: 1200px; margin-left: calc((100vw - 1200px) / 2); } } .global-contact .container { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; } @media (min-width: 768px) { .global-contact .container { max-width: calc(90vw - 3rem); margin-left: 5vw; } } @media (min-width: 1050px) { .global-contact .container { max-width: calc(85vw - 3rem); margin-left: 7.5vw; } } @media (min-width: 1500px) { .global-contact .container { max-width: 1200px; margin-left: calc((100vw - 1200px) / 2); } } .ina-block-wide .container { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; } @media (min-width: 768px) { .ina-block-wide .container { max-width: calc(90vw - 3rem); margin-left: 5vw; } } @media (min-width: 1050px) { .ina-block-wide .container { max-width: calc(85vw - 3rem); margin-left: 7.5vw; } } @media (min-width: 1500px) { .ina-block-wide .container { max-width: 1200px; margin-left: calc((100vw - 1200px) / 2); } } .entry-content .alignwide { margin-left: -80px; margin-right: -80px; max-width: calc(100% + 160px); width: calc(100% + 160px) } .entry-content .alignfull { margin-left: -50vw; margin-right: -50vw; max-width: 100vw; width: 100vw; position: relative; left: 50%; } .alignfull img { width: 100vw; } .wp-block-kadence-rowlayout.alignwide { margin-left: -80px; margin-right: -80px; max-width: calc(100% + 160px); width: calc(100% + 160px); } .wp-block-kadence-rowlayout.alignfull { margin-left: -50vw; margin-right: -50vw; max-width: 100vw; width: 100vw; position: relative; left: 50%; } #karriere-slider, #karriere-slider .wp-block-kadence-rowlayout.alignfull { left: 50%; } #karriere-slider .wp-block-kadence-rowlayout.alignfull { left: 50%; } #karriere-slider .wp-block-kadence-rowlayout.alignfull .ina-headline .ina-headline-row:last-of-type::after { content: ''; position: absolute; bottom: 0.5rem; left: 0.5rem; width: auto; height: 0.2rem; right: 0.5rem; z-index: 100; background-image: url('/wp-content/themes/ina.karriere/img/karriere-slider-underline.png'); background-size: 100% 100%; } .of-show, of-show * { overflow: show; } .ina-block { position: relative; display: block; } .ina-block-wide { position: relative; display: block; width: 100vw; padding: 0 0 0 0; } /*@media (min-width: 1500px) { .ina-block-wide { left: 50%; } }*/ .ina-block-wide.filz { padding: 4rem 3rem 4rem 0; } .ina-block-wide.filzhell { padding: 4rem 3rem 4rem 0; } .ina-block-wide.filz * { color: var(--white); } .ina-block-wide.filzhell * { color: var(--black); } .ina-block-wide.grey { background-color: var(--ina); padding: 3rem 0 3rem 0; } .ina-block-wide.grey * { color: var(--white); } .ina-block-wide.grey .row { margin: 0; } /* GENERAL .... */ .h1, h1 { font-size: 3.5rem; line-height: 0.8; padding: 0 0 2rem 0; margin: 0; text-transform: uppercase; font-family: 'INA-handwriting', sans-serif; font-weight: 700; } .filz.head h1 { color: var(--white); margin: 0; padding: 0 0 2rem 0; } .filzhell.head h1 { color: var(--white); margin: 0; padding: 2rem 0 2rem 0; } .no-hero .filzhell.head h1 { color: var(--white); margin: 0; padding: 0 0 2rem 0; } .h2, h2 { font-size: 2.5rem; line-height: 0.8; padding: 0 0 1rem 0; margin: 0; text-transform: uppercase; font-family: 'INA-handwriting', sans-serif; font-weight: 700; } .h3, h3 { font-size: 2rem; line-height: 0.8; padding: 0 0 1rem 0; margin: 0; text-transform: uppercase; font-family: 'INA-handwriting', sans-serif; font-weight: 700; } .h4, h4 { font-size: 2rem; line-height: 0.8; padding: 0 0 1rem 0; margin: 0; text-transform: uppercase; font-family: 'INA-handwriting', sans-serif; font-weight: 700; } .h5, h5 { font-size: 1.5rem; padding: 0 0 1rem 0; margin: 0; text-transform: uppercase; } .h6, h6 { font-size: 1.5rem; padding: 0 0 1rem 0; margin: 0; text-transform: uppercase; } @media (max-width: 800px) { .filz.mobile-invert.head h1 { color: var(--black); } .h1, h1 { font-size: 2.5rem; } .h2, h2 { font-size: 2.5rem; } } p { font-size: 1rem; } blockquote p { font-family: 'INA-handwriting'; font-size: 2rem; line-height: 1; font-weight: 700; } a, a:focus, a:hover, a:active, a:visited { color: inherit; text-decoration: inherit; } .page a, .page a:focus, .page a:hover, .page a:active, .page a:visited { text-decoration: underline; } .page a:hover { opacity: 0.5; } footer a, footer a:focus, footer a:hover, footer a:active, footer a:visited { text-decoration: underline; } .page p a, .page ul a { color: var(--ina); } a[target=_blank] { position: relative; } a[target=_blank]::after { content: ""; width: 1.2rem; height: 1.2rem; display: inline-block; position: relative; background-image: url('/wp-content/themes/ina.karriere/img/icon-extern-ec6752.svg'); background-repeat: no-repeat; background-size: auto 100%; background-position: center center; margin: 0 0.25rem; top: 0.2rem; } .filz a[target=_blank]::after { background-image: url('/wp-content/themes/ina.karriere/img/icon-extern-ffffff.svg'); } .has-white-color a[target=_blank]::after { background-image: url('/wp-content/themes/ina.karriere/img/icon-extern-ffffff.svg'); } .filzhell a[target=_blank]::after { background-image: url('/wp-content/themes/ina.karriere/img/icon-extern-383838.svg'); } a.btn-360[target=_blank], a.btn-url[target=_blank], a.btn-google[target=_blank] { background-image: url('/wp-content/themes/ina.karriere/img/icon-extern-ec6752.svg'); } a.btn-360[target=_blank]::after, a.btn-url[target=_blank]::after, a.btn-google[target=_blank]::after { display: none; } .tab-content a[href^="tel:"], .tab-content a[href^="mailto:"] { text-decoration: underline; } label, .gfield_label { color: var(--ina); font-size: 0.6rem !important; text-transform: uppercase; line-height: 1rem; display: block !important; margin: 0; padding: 0 !important; font-weight: bold !important; } input, select, text-area { -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* HEADER .... */ header { position: relative; z-index: 50; } #sticky-header .row { margin: 0 !important; } #sticky-header .row .col-auto { padding: 0 !important; } #sticky-header nav { display: none; margin: 0 !important; padding: 3.5rem 0 0 0; height: 2rem; } #sticky-header nav .nav { width: 100%; } #sticky-header nav .nav-link { line-height: 2rem; padding: 0 0.6rem; text-transform: uppercase; color: var(--shark); background-color: var(--white); font-size: 0.96rem; font-weight: 500; white-space: nowrap; } @media (min-width: 880px) { #sticky-header nav { display: block; } } #sticky-header nav .nav-link[aria-expanded="true"], #sticky-header nav .nav-link:hover { color: var(--white); background-color: var(--ina); } #sticky-header nav .menu-dropdown .nav-link { line-height: 1.2; padding: 0.5rem 0.6rem; text-transform: none; color: var(--shark) !important; } #sticky-header nav .menu-dropdown .nav-link:hover { color: var(--white) !important; } #sticky-header .dropdown-menu { padding: 0; border-radius: 0; overflow: hidden; transform: translate3d(0px, 32px, 0px) !important; margin: 0; border: 0; box-shadow: 0 0 0 1px rgba(0,0,0,0.1); } #sticky-header .dropdown-toggle { padding: 0 1.5rem 0 0.6rem !important; background-image: url('/wp-content/themes/ina.karriere/img/icon-drowdown-383838.svg'); background-size: 1rem auto; background-position: calc(100% - 0.3rem) center; background-repeat: no-repeat; } #sticky-header .dropdown-toggle:hover, #sticky-header .dropdown-toggle.intern, #sticky-header .dropdown-toggle[aria-expanded="true"] { background-image: url('/wp-content/themes/ina.karriere/img/icon-drowdown-ffffff.svg'); } #sticky-header .dropdown-toggle::after { display: none !important; } #sticky-header .ina { font-size: 140%; line-height: 1.55; padding: 0 0.5rem; font-weight: 800; color: var(--ina); } .ina-logo svg { width: auto; height: 3.6rem; margin: 1.3rem 0; } .ina-logo .svg-style-0 { fill: var(--ina); } .ina-logo .svg-style-1 { fill: var(--ina); } .ina-logo .svg-style-2 { fill: var(--ina); } .ina-logo .svg-style-3 { fill: var(--shark); } /* MENU */ .nav-item { position: relative; } .menu-frame { margin: 0; } .menu-content { padding: 0; } .menu-content .col-tab { width: 5rem; padding: 0; position: absolute; z-index: +10; left: -2.5rem; display: block; } .menu-content .col-pane { position: absolute; overflow-y: auto; overflow-x: hidden; height: 100%; width: 400px; padding: 1rem 1rem 1rem 2.5rem; } .menu-content .pane-head { height: 7rem; display: table-cell; width: 100%; padding-bottom: 1rem; font-weight: 800 !important; color: var(--shark); font-size: 1.4rem; } .menu-content .pane-head span { position: relative; color: var(--shark); font-size: 2rem; display: inline-block; padding-bottom: 0.8rem; } .menu-content .col-pane h3, .menu-content .col-pane p { color: var(--shark); } .menu-content .col-pane a { color: var(--shark); } .menu-content .col-pane ul { list-style: none outside none; padding: 0; } .menu-content .col-pane ul li { padding: 0; } .menu-content ul.icons { position: fixed; padding: 8rem 0 0 0; list-style: none outside none } .menu-content ul.icons li { position: relative; padding: 0; margin: 0 0 0.5rem 0; text-align: center; width: 2.5rem; height: 2.5rem; border: 0; background-color: transparent; box-shadow: -2px 0px 3px rgba(0,0,0,0); transition: all .25s ease-in-out; } .menu-content ul.icons li:first-of-type { } .menu-content ul.icons li:hover { margin: 0 0 0.5rem -0.25rem; width: 2.75rem !important; } .menu-content ul.icons li::before { content: ''; position: absolute; top: 0.1rem; left: 0.1rem; width: 2.3rem; height: 2.3rem; display: block; z-index: -1; box-shadow: rgba(0,0,0,0.5) 0 0 0.4rem 0rem; border-radius: 0 0 0 0; transition: all .25s ease-in-out; } .menu-content ul.icons li:hover::before { width: 2.5rem; } .menu-content ul.icons li::after { content: ''; position: absolute; top: -0.25rem; left: 100%; width: 1rem; height: 3rem; display: block; z-index: +1; background-color: var(--white); } .menu-content ul.icons a, .menu-content ul.icons button { background: transparent; border: 0; width: 2.5rem; height: 2.5rem; margin: 0; padding: 0 0 0 0.35rem; font-size: 0; line-height: 2.5rem; display: block; text-align: left; } .menu-content ul.icons a::after, .menu-content ul.icons button::after { display: none; } .menu-content ul.icons a svg, .menu-content ul.icons button svg { width: auto; height: 1.8rem; } .menu-content ul.icons a svg .menu-1, .menu-content ul.icons button svg .menu-1 { display: inline; fill-rule: evenodd; clip-rule: evenodd; fill: var(--white); stroke: var(--white); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; } .menu-content ul.icons a svg .menu-2, .menu-content ul.icons button svg .menu-2 { display: inline; fill: var(--white); stroke: var(--white); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; } .menu-content ul.icons a svg .menu-3, .menu-content ul.icons button svg .menu-3 { display: inline; fill-rule: evenodd; clip-rule: evenodd; fill: var(--white); stroke: var(--white); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 5; } .menu-content ul.icons a svg .menu-4, .menu-content ul.icons button svg .menu-4 { fill: none; stroke: var(--white); stroke-width: 28; stroke-miterlimit: 10; } .menu-content ul.icons a svg .menu-5, .menu-content ul.icons button svg .menu-5 { display: inline; fill: var(--white); stroke: var(--white); stroke-width: 00; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; } .menu-content ul.icons a svg .menu-6, .menu-content ul.icons button svg .menu-6 { display: inline; stroke: var(--white); stroke-miterlimit: 10; stroke-width: 20px; fill: var(--white); } .menu-content ul.icons a svg .menu-7, .menu-content ul.icons button svg .menu-7 { display: inline; stroke: var(--white); stroke-miterlimit: 10; fill: var(--white); } .menu-content .tab-pane * { outline: none; } .menu-content ul.icons li.menu { width: 2.5rem; background-image: url('/wp-content/themes/ina.karriere/img/menu-tape-1a.svg'); background-size: auto 2.5rem; background-position: 0 center; background-repeat: no-repeat; } .menu-content.menu ul.icons li.menu { width: 5rem !important; } .menu-content.menu .tab-pane.menu { display: block; opacity: 1; } .menu-content.menu ul.icons li.menu::after { display: none; } .menu-content ul.icons li.contact { width: 2.5rem; background-image: url('/wp-content/themes/ina.karriere/img/menu-tape-2a.svg'); background-size: auto 2.5rem; background-position: 0 center; background-repeat: no-repeat; } .menu-content.contact ul.icons li.contact { width: 5rem !important; } .menu-content.contact .tab-pane.contact { display: block; opacity: 1; } .menu-content.contact ul.icons li.contact::after { display: none; } .menu-content ul.icons li.locations { width: 2.5rem; background-image: url('/wp-content/themes/ina.karriere/img/menu-tape-3a.svg'); background-size: auto 2.5rem; background-position: 0 center; background-repeat: no-repeat; } .menu-content.locations ul.icons li.locations { width: 5rem !important; } .menu-content.locations .tab-pane.locations { display: block; opacity: 1; } .menu-content.locations ul.icons li.locations::after { display: none; } .menu-content .locations button.highlight[data-toggle=collapse] { color: var(--menu-text-highlight); background-color: var(--menu-item-highlight-bg); background-image: var(--menu-dropdown-icon-highlight); } .menu-content .locations button.highlight[aria-expanded=true], .menu-content .locations button[aria-expanded=true] { background-color: var(--menu-item-bg-hover); color: var(--menu-text-hover); background-image: var(--menu-dropdown-icon-hover) !important; } .menu-content .locations button[data-toggle=collapse]:hover { background-color: var(--menu-item-bg-hover); color: var(--menu-text-hover); background-image: var(--menu-dropdown-icon-hover) !important; } .menu-content ul.icons li.faq { width: 2.5rem; background-image: url('/wp-content/themes/ina.karriere/img/menu-tape-4a.svg'); background-size: auto 2.5rem; background-position: 0 center; background-repeat: no-repeat; } .menu-content.faq ul.icons li.faq { width: 5rem !important; } .menu-content.faq .tab-pane.faq { display: block; opacity: 1; } .menu-content.faq ul.icons li.faq::after { display: none; } .menu-content ul.icons li.search { width: 2.5rem; background-image: url('/wp-content/themes/ina.karriere/img/menu-tape-5a.svg'); background-size: auto 2.5rem; background-position: 0 center; background-repeat: no-repeat; } .menu-content.search ul.icons li.search { width: 5rem !important; } .menu-content.search .tab-pane.search { display: block; opacity: 1; } .menu-content.search ul.icons li.search::after { display: none; } .menu-content ul.icons li.filter { width: 2.5rem; background-image: url('/wp-content/themes/ina.karriere/img/menu-tape-6a.svg'); background-size: auto 2.5rem; background-position: 0 center; background-repeat: no-repeat; } .menu-content.filter ul.icons li.filter { width: 5rem !important; } .menu-content.filter .tab-pane.filter { display: block; opacity: 1; } .menu-content.filter ul.icons li.filter::after { display: none; } .menu-content ul.icons li.news { width: 2.5rem; background-image: url('/wp-content/themes/ina.karriere/img/menu-tape-1a.svg'); background-size: auto 2.5rem; background-position: 0 center; background-repeat: no-repeat; } .menu-content.news ul.icons li.news { width: 5rem !important; } .menu-content.news .tab-pane.news { display: block; opacity: 1; } .menu-content.news ul.icons li.news::after { display: none; } .menu-content ul.icons li.application { margin-top: 2rem; width: 2.5rem; background-image: url('/wp-content/themes/ina.karriere/img/menu-tape-2a.svg'); background-size: auto 2.5rem; background-position: 0 center; background-repeat: no-repeat; } .menu-content.application ul.icons li.application { width: 5rem !important; } .menu-content.application .tab-pane.application { display: block; opacity: 1; } .menu-content.application ul.icons li.application::after { display: none; } .menu-content .application button.highlight[data-toggle=collapse] { color: var(--menu-text-highlight); background-color: var(--menu-item-highlight-bg); background-image: var(--menu-dropdown-icon-highlight); } .menu-content .application button.highlight[aria-expanded=true], .menu-content .application button[aria-expanded=true] { background-color: var(--menu-item-bg-hover); color: var(--menu-text-hover); background-image: var(--menu-dropdown-icon-hover) !important; } .menu-content .application button[data-toggle=collapse]:hover { background-color: var(--menu-item-bg-hover); color: var(--menu-text-hover); background-image: var(--menu-dropdown-icon-hover) !important; } .menu-content #whatsapp-detail { padding: 1rem; color: var(--shark); } .menu-content ul.icons li.qna { width: 2.5rem; background-image: url('/wp-content/themes/ina.karriere/img/menu-tape-6a.svg'); background-size: auto 2.5rem; background-position: 0 center; background-repeat: no-repeat; } .menu-content ul.icons li.facebook { width: 2.5rem; background-image: url('/wp-content/themes/ina.karriere/img/menu-tape-6a.svg'); background-size: auto 2.5rem; background-position: 0 center; background-repeat: no-repeat; } .menu-content ul.icons li.instagram { margin-top: 2rem; width: 2.5rem; background-image: url('/wp-content/themes/ina.karriere/img/menu-tape-1a.svg'); background-size: auto 2.5rem; background-position: 0 center; background-repeat: no-repeat; } .menu-content ul.icons li.youtube { width: 2.5rem; background-image: url('/wp-content/themes/ina.karriere/img/menu-tape-2a.svg'); background-size: auto 2.5rem; background-position: 0 center; background-repeat: no-repeat; } .menu-content .menu ul * { color: white; text-decoration: none; } .menu-content .menu ul { padding: 0; list-style: none outside none; margin: 0 0 2rem 0; } .menu-content .menu ul li { display: block; text-transform: uppercase; } .menu-content .menu ul li:not(:first-of-type) { margin-top: 0.5rem; } .menu-content .menu ul li ul { margin-bottom: 0; background-color: var(--white); padding: 0.5rem 0 0 0; } .menu-content .menu ul li li { background-color: var(--menu-ina-10); text-transform: none; } .menu-content .menu ul li { background-color: var(--menu-shark-05); color: var(--shark); } .menu-content .menu ul li a { color: var(--shark); position: relative; display: block; font-size: 0.96rem; font-weight: 500; line-height: 1rem; padding: 0.5rem 0.5rem 0.5rem 0.5rem; margin: 0; text-decoration: none; } .menu-content .menu ul li a:hover { background-color: var(--ina); color: var(--white); } .menu-content .menu ul ul li a { color: var(--shark); position: relative; display: block; font-size: 0.96rem; font-weight: 500; line-height: 1rem; padding: 0.5rem 0.5rem 0.5rem 0.5rem; margin: 0; text-decoration: none; } .menu-content .menu ul ul li a:hover { background-color: var(--ina); color: var(--white); } .menu-content .menu button[data-toggle=collapse] { display: block; border-width: 0; padding: 0.5rem 0.5rem 0.5rem 0.5rem; margin: 0; width: 100%; color: var(--shark); text-align: left; text-transform: uppercase; font-size: 0.96rem; font-weight: 500; line-height: 1rem; background-color: var(--menu-shark-05); background-repeat: no-repeat; background-position: calc(100% - 0.5rem) 50%; background-size: 1rem auto; background-image: url('/wp-content/themes/ina.karriere/img/icon-drowdown-383838.svg'); } .menu-content .menu button[aria-expanded=true] { background-color: var(--ina); color: var(--white); background-image: url('/wp-content/themes/ina.karriere/img/icon-drowdown-ffffff.svg') !important; } .menu-content .menu button[data-toggle=collapse]:hover { background-color: var(--ina); color: var(--white); background-image: url('/wp-content/themes/ina.karriere/img/icon-drowdown-ffffff.svg') !important; } .menu-content .menu-line-top { content: ''; position: absolute; top: -5px; left: -5px; height: 4px; width: calc(100% + 10px); background-image: url('/wp-content/themes/ina.karriere/img/menu-line-h.svg'); background-size: auto 4px; background-position: center center; background-repeat: no-repeat; opacity: 0; transition: all .25s ease-in-out; } .menu-content .menu-line-bottom { content: ''; position: absolute; bottom: -5px; left: -5px; height: 4px; width: calc(100% + 10px); background-image: url('/wp-content/themes/ina.karriere/img/menu-line-h.svg'); background-size: auto 4px; background-position: center center; background-repeat: no-repeat; opacity: 0; transition: all .25s ease-in-out; } .menu-content .menu-line-left { content: ''; position: absolute; top: -5px; left: -5px; height: calc(100% + 10px); width: 4px; background-image: url('/wp-content/themes/ina.karriere/img/menu-line-v.svg'); background-size: 5px auto; background-position: center center; background-repeat: no-repeat; opacity: 0; transition: all .25s ease-in-out; } .menu-content .menu-line-right { content: ''; position: absolute; top: -5px; right: -5px; height: calc(100% + 10px); width: 4px; background-image: url('/wp-content/themes/ina.karriere/img/menu-line-v.svg'); background-size: 5px auto; background-position: center center; background-repeat: no-repeat; opacity: 0; transition: all .25s ease-in-out; } .menu-content .menu button[aria-expanded=true] div { opacity: 1; } .menu-content .locations ul * { color: white; text-decoration: none; } .menu-content .locations ul { padding: 0; list-style: none outside none; margin: 0 0 2rem 0; } .menu-content .locations ul li { display: block; text-transform: uppercase; } .menu-content .locations ul li:not(:first-of-type) { margin-top: 0.5rem; } .menu-content .locations ul li ul { margin-bottom: 0; background-color: var(--white); padding: 0.5rem 0 0 0; } .menu-content .locations ul li li { background-color: var(--menu-ina-10); text-transform: none; } .menu-content .locations ul li { background-color: var(--menu-shark-05); color: var(--shark); } .menu-content .locations ul li a { color: var(--shark); position: relative; display: block; font-size: 0.96rem; font-weight: 500; line-height: 1rem; padding: 0.5rem 0.5rem 0.5rem 0.5rem; margin: 0; text-decoration: none; } .menu-content .locations ul li a:hover { background-color: var(--ina); color: var(--white); } .menu-content .locations ul ul li a { color: var(--shark); position: relative; display: block; font-size: 0.96rem; font-weight: 500; line-height: 1rem; padding: 0.5rem 0.5rem 0.5rem 0.5rem; margin: 0; text-decoration: none; } .menu-content .locations ul ul li a:hover { background-color: var(--ina); color: var(--white); } .menu-content .locations button[data-toggle=collapse] { display: block; border-width: 0; padding: 0.5rem 0.5rem 0.5rem 0.5rem; margin: 0; width: 100%; color: var(--shark); text-align: left; text-transform: uppercase; font-size: 0.96rem; font-weight: 500; line-height: 1rem; background-color: var(--menu-shark-05); background-repeat: no-repeat; background-position: calc(100% - 0.5rem) 50%; background-size: 1rem auto; background-image: url('/wp-content/themes/ina.karriere/img/icon-drowdown-383838.svg'); } .menu-content .locations button[aria-expanded=true] { background-color: var(--ina); color: var(--white); background-image: url('/wp-content/themes/ina.karriere/img/icon-drowdown-ffffff.svg') !important; } .menu-content .locations button[data-toggle=collapse]:hover { background-color: var(--ina); color: var(--white); background-image: url('/wp-content/themes/ina.karriere/img/icon-drowdown-ffffff.svg') !important; } .menu-content .locations button[aria-expanded=true] div { opacity: 1; } .menu-content .application ul * { } .menu-content .application ul { padding: 0; list-style: none outside none; margin: 0 0 2rem 0; } .menu-content .application ul li { display: block; } .menu-content .application ul li:not(:first-of-type) { margin-top: 0.5rem; } .menu-content .application ul li { color: var(--shark); } .menu-content .application button[data-toggle=collapse] { display: block; border-width: 0; padding: 0.5rem 0.5rem 0.5rem 0.5rem; margin: 0; width: 100%; color: var(--white); text-align: left; font-size: 0.96rem; font-weight: 500; line-height: 1rem; background-color: var(--ina); background-repeat: no-repeat; background-position: calc(100% - 0.5rem) 50%; background-size: 1rem auto; background-image: url('/wp-content/themes/ina.karriere/img/icon-drowdown-ffffff.svg'); } .menu-content .application button[aria-expanded=true] { background-color: var(--menu-shark-05); color: var(--shark); background-image: url('/wp-content/themes/ina.karriere/img/icon-drowdown-383838.svg') !important; } .menu-content .application button[data-toggle=collapse]:hover { background-color: var(--menu-shark-05); color: var(--shark); background-image: url('/wp-content/themes/ina.karriere/img/icon-drowdown-383838.svg') !important; } .menu-content .application button[aria-expanded=true] div { opacity: 1; } .menu-content form { padding: 1rem 0 3rem 0; } .menu-content .gfield { position: relative; } .menu-content .ginput_container { line-height: 0; } .menu-content .gform_footer.top_label { position: relative; z-index: +1; } .menu-content .gform_footer.top_label::before { position: absolute; left: 0; bottom: 5rem; content: '* Pflichtfeld'; color: var(--shark); font-size: 0.6rem !important; text-transform: uppercase; line-height: 1rem; display: block !important; margin: 0; padding: 0 !important; font-weight: bold !important; } .menu-content label, .menu-content .gfield_label { color: var(--shark) !important; clear: both; } .menu-content .gform_wrapper .gfield_required { color: var(--shark); } .menu-content input[type=text] { border-radius: 0; text-align: left; line-height: 1.4rem; font-size: 1rem; padding: 0.5rem; margin: 0 0 1rem 0; width: 100%; color: var(--shark) !important; background-color: var(--ina10); outline: none; border-width: 0 0 2px 0; border-color: var(--ina); border-style: solid; transition: all .25s ease-in-out; } .menu-content input[type=text]:active, .menu-content input[type=text]:focus, .menu-content input[type=text]:hover { background-color: var(--ina10) !important; color: var(--shark) !important; } .menu-content input[type=email] { border-radius: 0; text-align: left; line-height: 1.4rem; font-size: 1rem; padding: 0.5rem; margin: 0 0 1rem 0; width: 100%; color: var(--shark) !important; background-color: var(--ina10); outline: none; border-width: 0 0 2px 0; border-color: var(--ina); border-style: solid; transition: all .25s ease-in-out; } .menu-content input[type=email]:active, .menu-content input[type=email]:focus, .menu-content input[type=email]:hover { background-color: var(--ina10) !important; color: var(--shark) !important; } .menu-content input[type=tel] { border-radius: 0; text-align: left; line-height: 1.4rem; font-size: 1rem; padding: 0.5rem; margin: 0 0 1rem 0; width: 100%; color: var(--shark) !important; background-color: var(--ina10); outline: none; border-width: 0 0 2px 0; border-color: var(--ina); border-style: solid; transition: all .25s ease-in-out; } .menu-content input[type=tel]:active, .menu-content input[type=email]:focus, .menu-content input[type=email]:hover { background-color: var(--ina10) !important; color: var(--shark) !important; } .menu-content .screen-reader-response { display: none; } .menu-content .wpcf7-form-control-wrap { position: relative; display: block; } .menu-content label .wpcf7-list-item-label { text-transform: none; } .menu-content label .wpcf7-list-item-label a { text-decoration: underline; } .menu-content p.wpcf7-form-control-wrap.your-files { display: block; border: 1px white dashed; padding: 0.25rem 0.5rem; margin: 0; } .menu-content a.mfcf7_zl_delete_file { float: right; text-decoration: none !important; background-color: white; padding: 0.2rem 0.3rem; margin: -0.2rem -0.4rem; } .menu-content .wpcf7-form-control-wrap.callback .wpcf7-list-item-label { line-height: 2.5rem; } .menu-content .wpcf7-form-control-wrap.gdpr .wpcf7-list-item-label { font-weight: 400; line-height: 0.9rem; padding: 0.3rem 0 0 0; display: inline-block; width: calc(100% - 3rem); } .menu-content .ginput_container_consent .gfield_consent_label { font-weight: 400 !important; line-height: 0.9rem; padding: 0.3rem 0 0 0 !important; display: inline-block !important; width: calc(100% - 3rem); text-transform: none; } .menu-content .ina-contact-callback .ginput_container_consent .gfield_consent_label { font-weight: 400 !important; line-height: 2rem; font-size: 1rem !important; padding: 0.3rem 0 0 0 !important; display: inline-block !important; width: calc(100% - 3rem); text-transform: none; } .menu-content .ginput_container_consent .gfield_consent_label a { text-decoration: underline; } .menu-content .ginput_container_consent::after { content: ''; clear: both; display: block; } .menu-content input.wpcf7-not-valid, .menu-content textarea.wpcf7-not-valid, .menu-content .wpcf7-acceptance.wpcf7-not-valid input { background-color: var(--red); } .menu-content .gform_wrapper .gfield_error [aria-invalid=true] { background-color: var(--red); border: inherit; border-width: 0 0 2px 0; border-color: var(--red); border-style: solid; } .menu-content .gform_wrapper .gfield_error input[type=checkbox][aria-invalid=true] { border-width: 2px; } .menu-content .gform_wrapper .gform_validation_errors { background-color: var(--ina80); border-radius: 0; border: 2 solid var(--red); box-shadow: none; margin-bottom: 1rem; margin-top: 1rem; padding: 1rem; position: relative; width: 100%; } .menu-content .gform_wrapper .gform_validation_errors h2 { font-size: 1.5rem; font-weight: 800; line-height: 1; margin: 0; padding: 0 0 1rem 0; } .menu-content .gform_wrapper .gform-icon.gform-icon--close { display: none; } .menu-content .wpcf7-not-valid-tip { color: var(--red); text-transform: uppercase; position: absolute; bottom: 100%; right: 0; font-size: 0.6rem; line-height: 1rem; display: block; margin: 0; padding: 0 0.3rem; font-weight: bold; background-color: var(--red); font-weight: 400; } .menu-content .wpcf7-form-control-wrap.gdpr .wpcf7-not-valid-tip { position: relative; bottom: auto; top: 2px; } .menu-content .gform_confirmation_message { color: var(--shark); font-size: 1rem; } .menu-content .validation_message.gfield_validation_message { color: var(--shark); position: relative; text-transform: uppercase; width: auto !important; font-size: 0.6rem !important; line-height: 1rem !important; display: inline-block; margin: 0 !important; padding: 0 0.3rem !important; font-weight: bold !important; background-color: var(--red); } .menu-content form.invalid .wpcf7-response-output { background-color: var(--white); font-style: italic; padding: 0.5rem; } .menu-content .gform_drop_instructions { color: var(--shark); font-size: 1rem !important; line-height: 1; padding: 0; } .menu-content .gform_fileupload_rules { color: var(--shark); font-size: 1rem !important; line-height: 1; padding: 0 0 0.25rem 0; } .menu-content .gform_drop_area { border: 1px var(--ina) dashed !important; } .menu-content .gfield_error .gform_drop_area { background-color: var(--red); } .menu-content textarea { border-radius: 0; text-align: left; line-height: 1.4rem; height: 5rem; font-size: 1rem; padding: 0.5rem; margin: 0 0 1rem 0; width: 100%; color: var(--shark); background-color: var(--ina10); outline: none; border-width: 0 0 2px 0; border-color: var(--ina); border-style: solid; transition: all .25s ease-in-out; } .menu-content textarea:active, .menu-content textarea:focus, .menu-content textarea:hover { background-color: var(--shark10); } .menu-content select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; text-align: left; line-height: 2rem; font-size: 1rem; padding: 0.25rem 2.5rem 0.25rem 1rem; margin: 0 0 1rem 0; width: 100%; color: var(--shark); background-color: var(--ina10); outline: none; border-width: 0 0 2px 0; border-color: var(--ina); border-style: solid; transition: all .25s ease-in-out; background-repeat: no-repeat; background-position: calc(100% - 0.5rem) center; background-size: auto 50%; background-image: url('/wp-content/themes/ina.karriere/img/icon-drowdown-383838.svg'); } .menu-content select:active, .menu-content select:focus, .menu-content select:hover { background-color: var(--shark10); } .menu-content select option { background-color: var(--shark); color: var(--white); } .menu-content select option:hover { background-color: var(--ina); color: var(--white); } .menu-content input[type=button] { border-radius: 0; text-align: left; line-height: 2rem; font-size: 1rem; padding: 0.25rem 1rem; margin: 0 0 1rem 0; width: 100%; color: var(--white); background-color: var(--white10); outline: none; border-width: 0; text-transform: uppercase; transition: all .25s ease-in-out; background-repeat: no-repeat; background-position: calc(100% - 0.5rem) center; background-size: 1.25rem auto; background-image: url('/wp-content/themes/ina.karriere/img/button-details-ffffff.svg'); } .menu-content input[type=button]:active, .menu-content input[type=button]:focus, .menu-content input[type=button]:hover { background-color: var(--white80); background-image: url('/wp-content/themes/ina.karriere/img/button-details-383838.svg'); color: var(--shark); } .menu-content button.gform_button_select_files { border-radius: 0; text-align: left; line-height: 2rem; font-size: 1rem; padding: 0.25rem 1rem; margin: 0 0 1rem 0; width: auto; color: var(--shark); background-color: transparent; outline: none; border-width: 0; text-transform: uppercase; transition: all .25s ease-in-out; } .menu-content button.gform_button_select_files:active, .menu-content button.gform_button_select_files:focus, .menu-content button.gform_button_select_files:hover { background-color: var(--ina10); color: var(--shark); } .menu-content .ginput_preview { color: var(--shark); border: 1px var(--shark) dashed; line-height: 1; } .menu-content .dashicons-trash::before { content: "\f335"; color: var(--white); } .menu-content .dashicons-trash:hover::before { content: "\f460"; color: var(--shark); } .menu-content .gfield_fileupload_progress { padding-left: 0.5rem; padding-right: 0.5rem; } .menu-content .gfield_fileupload_cancel { color: var(--ina) !important; padding-left: 0.5rem; text-decoration: underline; } .menu-content .gfield_description.gform_fileupload_rules { line-height: 1.4 !important; } .menu-content button[type=submit] { border-radius: 0; text-align: left; line-height: 2rem; font-size: 1rem; padding: 0.25rem 1rem; margin: 1rem 0 1rem 0; width: 100%; color: var(--white); background-color: var(--ina); outline: none; border-width: 0; text-transform: uppercase; transition: all .25s ease-in-out; background-repeat: no-repeat; background-position: calc(100% - 0.5rem) center; background-size: 1.25rem auto; background-image: url('/wp-content/themes/ina.karriere/img/button-details-ffffff.svg'); } .menu-content button[type=submit]:active, .menu-content button[type=submit]:focus, .menu-content button[type=submit]:hover { background-color: var(--ina80); } .menu-content input[type=submit] { border-radius: 0; text-align: left; line-height: 2rem; font-size: 1rem; padding: 0.25rem 1rem; margin: 2rem 0 1rem 0; width: 100%; color: var(--white); background-color: var(--ina); outline: none; border-width: 0; text-transform: uppercase; transition: all .25s ease-in-out; background-repeat: no-repeat; background-position: calc(100% - 0.5rem) center; background-size: 1.25rem auto; background-image: url('/wp-content/themes/ina.karriere/img/button-details-ffffff.svg'); } .menu-content input[type=submit]:active, .menu-content input[type=submit]:focus, .menu-content input[type=submit]:hover { background-color: var(--ina80); } .menu-content input[type=checkbox] { border-radius: 0; cursor: pointer;margin: 0.25rem 0.5rem 0.25rem 0; height: 2rem; width: 2rem; float: left; background-color: var(--ina10); outline: none; border: 2px var(--ina) solid; transition: all .25s ease-in-out; background-size: 70% auto; background-position: -3rem center; background-repeat: no-repeat; background-image: url('/wp-content/themes/ina.karriere/img/icon-check-383838.svg'); } .menu-content input[type=checkbox]:checked { background-position: center center; } .menu-content .ajax-loader { position: relative; width: 2.5rem; height: 2.5rem; left: .5rem; top: .9rem; background-image: url('/wp-content/themes/ina.karriere/img/ajax-loader.gif'); background-size: contain; } .menu-content form[data-status="submitting"] .ajax-loader { display: inline-block; } .menu-content form[data-status="submitting"] button[type=submit] { width: calc(100% - 3rem); } /* SIDE NAV ... */ #screen-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1030; opacity: 0; visibility: hidden; transition: opacity .5s linear, visibility .5s ease-in; background-color: var(--black70); } #screen-overlay.show { width: 100%; opacity: 1; visibility: visible; } #side-navigation-show { margin: 2rem 1rem 1rem 1rem; position: relative; top: 0; left: 0; z-index: +1; box-shadow: 0 0 !important; display: block; } #side-navigation-show span { display: block; font-size: 2rem; line-height: 0.5rem; color: var(--white); } #side-navigation.show #side-navigation-show { display: block; } #side-navigation-hide { display: none; } #side-navigation.show #side-navigation-hide { display: block; visibility: visible; } #side-navigation { position: fixed; display: block; width: calc(100% - 3rem); top: 0; height: 100%; right: 0; z-index: 1200; visibility: visible; transform: translateX(100%); transition: all 1s; background-color: var(--white); border-radius: 0; box-shadow: 0 0 25px rgba(0,0,0,0.8); } @media (min-width: calc(3rem + 400px)) { #side-navigation { width: 400px; } } #side-navigation .hide { visibility: hidden; } #side-navigation.show .hide { visibility: visible; } #side-navigation.show.menu { transform: translateX(0); } #side-navigation.show.contact, #side-navigation.show.locations, #side-navigation.show.faq, #side-navigation.show.search, #side-navigation.show.news, #side-navigation.show.application { transform: translateX(0); } @media (min-width: 1050px) { #side-navigation { width: calc(100vw * 0.5); } #side-navigation .col-pane { padding: 1px 3rem; width: 50vw; min-width: 400px; } #side-navigation .col-pane .tab-content { max-width: calc(600px - 6rem); } #side-navigation.show.menu, #side-navigation.show.contact, #side-navigation.show.locations, #side-navigation.show.faq, #side-navigation.show.search, #side-navigation.show.news, #side-navigation.show.application { transform: translateX(calc(100% - (100vw * 0.5))); } } /* SLIDER .... */ .hero-slider { position: relative; } .head { position: relative; } .head-slider { position: relative; height: calc(100vw * 0.4); width: 100%; overflow: hidden; } .head-slider.big { height: 60vh; } .head-slider.large { height: calc(100vw * 0.35); } .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .head-slider .slide, .head-slider .slick-slide { position: absolute !important; top: 0 !important; left: 0 !important; width: 100%; height: 100%; object-fit: cover; display: block; } .head-slider .slide img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .head-slider .slide img.top-left { object-position: top left; } .head-slider .slide img.top-center { object-position: top center; } .head-slider .slide img.top-right { object-position: top right; } .head-slider .slide img.center-left { object-position: center left; } .head-slider .slide img.center-center { object-position: center center; } .head-slider .slide img.center-right { object-position: center right; } .head-slider .slide img.bottom-left { object-position: bottom left; } .head-slider .slide img.bottom-center { object-position: bottom center; } .head-slider .slide img.bottom-right { object-position: bottom right; } .content-slider { position: relative; height: auto; width: 100%; margin: 2rem 0 5rem 0; } .content-slider .slide { position: absolute; width: 100%; left: 0; height: auto; display: block; } .content-slider .slick-slide { position: absolute !important; left: 0 !important; top: 0 !important; } .content-slider .slide img { position: relative; top: 0; left: 0; width: 100%; height: auto; display: block; } .slider-frame { position: relative; width: auto; height: auto; } #slider-navigation { position: absolute; left: 1rem; bottom: 1rem; z-index: +10; width: calc(100% - 2rem); height: 1rem; padding: 0; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; height: 100%; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; height: 100%; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } .nodots .slick-dots { display: none !important; } .slick-dots { position: relative; top: -1.15rem; left: 0; list-style: none outside none; margin: 0 0.5rem; padding: 0; width: calc(100% - 3rem); height: 1rem; text-align: center; float: left; } .slick-dots li { position: relative; display: inline-block; padding: 0 0.25rem; vertical-align: bottom; height: 1rem; } .slick-dots li button { font-size: 0; background-color: var(--white80); height: 0.75rem; width: 0.75rem; padding: 0; border-radius: 1rem; border: 0; transition: all 0.5s cubic-bezier(.34,.86,.46,-0.54); } .slick-dots li.slick-active button { background-color: var(--ina); } .slick-prev.slick-arrow { background-image: url('/wp-content/themes/ina.karriere/img/icon-slider-left.svg'); background-repeat: no-repeat; background-size: cover; width: 1rem; height: 1rem; border: 0; font-size: 0; line-height: 0; background-color: transparent; z-index: +10; float: left; } .slick-next.slick-arrow { background-image: url('/wp-content/themes/ina.karriere/img/icon-slider-right.svg'); background-repeat: no-repeat; background-size: cover; width: 1rem; height: 1rem; border: 0; font-size: 0; line-height: 0; background-color: transparent; z-index: +10; float: right; } .slider-overlay { position: absolute; width: calc(100vw -5rem); max-width: calc(100vw -5rem); z-index: +1; } .slider-overlay.b20-left { bottom: 1rem; left: 1rem; text-align: left; } .slider-overlay.b20-left-center { bottom: 1rem; left: 1rem; text-align: left; } .slider-overlay.b20-right { bottom: 1rem; left: 1rem; right: auto; text-align: left; } .slider-overlay.b20-right-center { bottom: 1rem; left: 1rem; right: auto; text-align: left; } .slider-headline { position: relative; margin: 0; background-color: var(--ina); text-align: center; } .slider-tags { display: block; padding-top: 0.5rem; } .slider-headline span { position: relative; display: inline-block; padding: 1rem; margin: 0 0 -1rem 0; font-size: 2rem; line-height: 1.5rem; font-weight: 700; color: var(--white); text-transform: uppercase; background-size: cover; background-position: center center; background-repeat: no-repeat; } .slider-headline span.middle { margin: -0.5rem 0; } .slider-headline b { position: relative; display: inline-block; line-height: 0rem; z-index: +1; transform: translateY(10px) rotate(-2deg); font-size: 3.5rem; font-weight: 800; color: var(--shark); font-family: 'INA-handwriting', sans-serif; } .slider-headline b::after { position: absolute; display: block; content: ""; background-image: url('/wp-content/themes/ina.karriere/img/echt-underline.svg'); background-position: center center; background-repeat: no-repeat; background-size: 100% auto; left: 0; right: 0; top: 1rem; height: 10px; } .slider-text { background-color: var(--white); color: var(--shark); padding: 1rem; display: none; } .slider-headline span.tag { font-size: 1.1rem; color: var(--shark); font-family: 'INA-handwriting', sans-serif; font-weight: 800; text-transform: uppercase; padding: 0 0.5rem 0.5rem 0.5rem; margin: 0; display: inline-block; } .slider-headline span.tag:first-of-type { padding: 0 0.5rem 0.5rem 1rem; } .slider-headline span.tag:last-of-type { padding: 0 1rem 0.5rem 0.5rem; } .slider-headline .filz-rand-oben { width: 100%; } .slider-headline .filz-rand-unten::after { display: none; } @media (min-width: 768px) { .head-slider.big { height: 60vh; } .slider-text { display: block; } .slider-overlay { position: absolute; width: calc(100% - 2rem); max-width: 600px; z-index: +1; background-image: none; } .slider-overlay.b20-left { bottom: 10%; left: 10vw; text-align: left; } .slider-overlay.b20-left-center { bottom: 10%; left: 10vw; text-align: center; } .slider-overlay.b20-right { bottom: 10%; left: auto; right: 10vw; text-align: right; } .slider-overlay.b20-right-center { bottom: 10%; left: auto; right: 10vw; text-align: center; } .slider-headline { margin: 0 0 1.5rem 0; background-color: transparent; } .slider-headline::after { display: none; } .slider-headline span { padding: 1.5rem; font-size: 3rem; line-height: 2rem; background-color: var(--ina);/* background-image: url('/wp-content/themes/ina.karriere/img/ina-filz.jpg');*/ } .slider-headline span.filz-rand-oben:first-of-type { right: 1.5rem; } .slider-headline span.middle { margin: 0 0 -1rem 0; } .slider-headline span.middle:nth-of-type(2n) { right: -0.5rem; } .slider-headline b { font-size: 5rem; transform: translateY(10px) rotate(-5deg); } .slider-headline b::after { top: 1.4rem; } .slider-headline span.tag { font-size: 1.5rem; padding: 0.5rem 1.5rem; margin: 0.5rem 0 0 0; } .slider-headline span.tag:first-of-type { padding: 0.5rem 0.5rem 0.5rem 2rem; } .slider-headline span.tag:last-of-type { padding: 0.5rem 1rem 0.5rem 0.5rem; margin: 0 1rem 0 0; } .slider-headline .filz-rand-oben { width: auto; } .slider-headline .filz-rand-unten::after { display: block; } .slider-tags { padding-top: 0; } } .arrow-down { position: absolute; display: none; bottom: 4vh; right: 4rem; margin: 0 -1.5rem; width: 3rem; height: 3rem; z-index: 1000; cursor: pointer; background-image: url('/wp-content/themes/ina.karriere/img/icon-down-ffffff.svg'); background-repeat: no-repeat; background-size: cover; animation: down-ani linear 2s; animation-iteration-count: infinite; transform-origin: 50% 50%; font-size: 0; -webkit-animation: down-ani linear 2s; -webkit-animation-iteration-count: infinite; -webkit-transform-origin: 50% 50%; -moz-animation: down-ani linear 2s; -moz-animation-iteration-count: infinite; -moz-transform-origin: 50% 50%; -o-animation: down-ani linear 2s; -o-animation-iteration-count: infinite; -o-transform-origin: 50% 50%; -ms-animation: down-ani linear 2s; -ms-animation-iteration-count: infinite; -ms-transform-origin: 50% 50%; } @media (min-width: 768px) { .arrow-down { display: block; } .arrow-down.white { } } hr.wp-block-separator.is-style-ina-line-shark { height: 5px; width: 100%; border: 0 !important; background-image: url('/wp-content/themes/ina.karriere/img/hr-line-shark.svg'); background-size: auto 5px; background-position: center; } hr.wp-block-separator.is-style-ina-line-ina { height: 5px; width: 100%; border: 0 !important; background-image: url('/wp-content/themes/ina.karriere/img/hr-line-ina.svg'); background-size: auto 5px; background-position: center; } hr.wp-block-separator.is-style-ina-line-white { height: 5px; width: 100%; border: 0 !important; background-image: url('/wp-content/themes/ina.karriere/img/hr-line-white.svg'); background-size: auto 5px; background-position: center; } hr.wp-block-separator.is-style-ina-dotted-shark { height: 5px; width: 100%; border: 0 !important; background-image: url('/wp-content/themes/ina.karriere/img/hr-dashed-shark.svg'); background-size: auto 5px; background-position: center; } hr.wp-block-separator.is-style-ina-dotted-ina { height: 5px; width: 100%; border: 0 !important; background-image: url('/wp-content/themes/ina.karriere/img/hr-dashed-ina.svg'); background-size: auto 5px; background-position: center; } hr.wp-block-separator.is-style-ina-dotted-white { height: 5px; width: 100%; border: 0 !important; background-image: url('/wp-content/themes/ina.karriere/img/hr-dashed-white.svg'); background-size: auto 5px; background-position: center; } .is-style-no-padding { padding: 0; margin: 0; } .is-style-ina-rotate-m1 { position: relative; transform: rotate(-0.5deg); } .is-style-ina-rotate-m2 { position: relative; transform: rotate(-0.75deg); } .is-style-ina-rotate-p1 { position: relative; transform: rotate(0.5deg); } .is-style-ina-rotate-p2 { position: relative; transform: rotate(0.75deg); } .is-style-ina-image-dots { position: relative; width: calc(100% - 4rem); margin: 0px auto 1rem auto; border: 1rem transparent solid; } .is-style-ina-image-dots::before { content: ''; position: absolute; top: -1rem; left: -1rem; height: calc(100% + 2rem); width: 5px; background-image: url('/wp-content/themes/ina.karriere/img/blog-dots-v.svg'); background-size: 5px auto; background-position: center center; background-repeat: no-repeat; } .is-style-ina-image-dots::after { content: ''; position: absolute; top: -1rem; right: -1rem; height: calc(100% + 2rem); width: 5px; background-image: url('/wp-content/themes/ina.karriere/img/blog-dots-v.svg'); background-size: 5px auto; background-position: center center; background-repeat: no-repeat; } .is-style-ina-image-dots figure { overflow: hidden; } .is-style-ina-image-dots figure::before { content: ''; position: absolute; top: -1rem; left: -1rem; width: calc(100% + 2rem); height: 5px; background-image: url('/wp-content/themes/ina.karriere/img/blog-dots-h.svg'); background-size: auto 5px; background-position: center center; background-repeat: no-repeat; } .is-style-ina-image-dots figure::after { content: ''; position: absolute; bottom: -1rem; left: -1rem; width: calc(100% + 2rem); height: 5px; background-image: url('/wp-content/themes/ina.karriere/img/blog-dots-h.svg'); background-size: auto 5px; background-position: center center; background-repeat: no-repeat; } .is-style-ina-image-dots-w { position: relative; width: calc(100% - 4rem); margin: 0px auto 1rem auto; border: transparent solid; } .is-style-ina-image-dots-w::before { content: ''; position: absolute; top: -1rem; left: -1rem; height: calc(100% + 2rem); width: 5px; background-image: url('/wp-content/themes/ina.karriere/img/blog-dots-v-darkmode.svg'); background-size: 5px auto; background-position: center center; background-repeat: no-repeat; } .is-style-ina-image-dots-w::after { content: ''; position: absolute; top: -1rem; right: -1rem; height: calc(100% + 2rem); width: 5px; background-image: url('/wp-content/themes/ina.karriere/img/blog-dots-v-darkmode.svg'); background-size: 5px auto; background-position: center center; background-repeat: no-repeat; } .is-style-ina-image-dots-w figure { overflow: hidden; } .is-style-ina-image-dots-w figure::before { content: ''; position: absolute; top: -1rem; left: -1rem; width: calc(100% + 2rem); height: 5px; background-image: url('/wp-content/themes/ina.karriere/img/blog-dots-h-darkmode.svg'); background-size: auto 5px; background-position: center center; background-repeat: no-repeat; } .is-style-ina-image-dots-w figure::after { content: ''; position: absolute; bottom: -1rem; left: -1rem; width: calc(100% + 2rem); height: 5px; background-image: url('/wp-content/themes/ina.karriere/img/blog-dots-h-darkmode.svg'); background-size: auto 5px; background-position: center center; background-repeat: no-repeat; } .is-style-ina-image-frame { display: block; overflow: hidden; padding: 1.5rem; background-image: url('/wp-content/themes/ina.karriere/img/ina-news-home-frame.svg'); background-size: contain; background-position: center center; background-repeat: no-repeat; } .is-style-ina-image-frame img { width: 100%; height: auto; aspect-ratio: 3 / 2.1; object-fit: cover; object-position: center center; } .is-style-ina-quicklinks { font-size: 1.2rem; margin: 0; padding: 0; } .is-style-ina-quicklinks a { text-decoration: none; opacity: 1; display: inline-block; position: relative; } .is-style-ina-quicklinks a:hover { text-decoration: none; opacity: 1; } .is-style-ina-quicklinks a::after { content: ''; position: absolute; left: 0; bottom: 0px; width: 0; height: 2px; transition: width 0.5s ease-in-out; background-color: var(--ina); overflow: hidden; } .is-style-ina-quicklinks a:hover::after { width: 100%; } .accordion-frame { position: relative; padding: 0 0 2rem 0; display: block; } .accordion-button { font-size: 2rem; line-height: 0.8; text-transform: uppercase; font-family: 'INA-handwriting', sans-serif; font-weight: 700; text-align: left; color: var(--ina); position: relative; display: block; border: 0; background-color: var(--ina10); margin: 0 -1rem; padding: 1rem; width: calc(100% + 2rem); transition: all 0.25s ease-in-out; background-repeat: no-repeat; background-position: calc(100% - 1rem) center; background-size: .9rem auto; background-image: url('/wp-content/themes/ina.karriere/img/icon-drowdown-ec6752.svg'); } .accordion-button:hover, .accordion-button:active { color: var(--shark); background-color: var(--ina25); } .no-hero .head { padding-top: 3rem; } /* HOME .... */ #ina-intro { height: calc(100vh - 11rem); min-height: calc(100vh - 11rem); } @media (min-width: 767px) { #ina-intro { height: calc(100vh - 7rem); min-height: calc(100vh - 7rem); } } #ina-intro .kt-inner-column-height-full { height: 100%; min-height: 100%; } /* STELLEN ..... */ #template-stellen { } #template-stellen .head { margin-bottom: 3rem; padding-top: 0; } #template-stellen .head .h3 { padding: 0 0 2rem 0; margin: -1.5rem 0 0 0; color: var(--white); } #template-stellen h2 { margin-top: 0 } /* STANDORTE ..... */ #template-standort { } #template-standort .head { margin-bottom: 3rem; padding-top: 0; } #template-standort h2 { margin-top: 3rem; } #template-standort .grey { padding: 3rem 0; margin: 3rem 0 0 0; } #template-standort .grey h2 { margin: 0; padding: 0; } #template-standort .cta::after { display: none; } /* STELLENANZEIGEN .... */ #list-stellenanzeigen { list-style: none outside none; padding: 0; } #list-stellenanzeigen li { position: relative; display: block; overflow: hidden; } #list-stellenanzeigen .frame { position: relative; display: block; padding: 3rem 0 5px 0; } #list-stellenanzeigen .frame::before { content: ''; position: absolute; top: 1.4rem; left: 0; height: 5px; width: 100%; background-image: url('/wp-content/themes/ina.karriere/img/hr-dashed-ina.svg'); background-size: auto 5px; background-position: center; } #list-stellenanzeigen li:first-of-type .frame::before { display: none; } #list-stellenanzeigen .frame::after { content: ''; position: relative; height: 0; width: 100%; clear: both; overflow: hidden; display: block; } #list-stellenanzeigen .stellen-image { position: relative; width: 100%; height: 250px; display: block; } #list-stellenanzeigen .stellen-image .image-frame { position: relative; width: 100%; height: 250px; display: block; overflow: hidden; } #list-stellenanzeigen .stellen-image .image-frame img { position: absolute; width: 100%; height: 250px; object-fit: cover; transition: 1s all ease-in-out; } #list-stellenanzeigen .stellen-image:hover .image-frame img { transform: scale(1.1); } #list-stellenanzeigen .quickfacts { position: absolute; bottom: 2rem; left: -1rem; width: 100%; } #list-stellenanzeigen .quickfact { position: relative; z-index: +1; margin: 0.5rem 0 0 0; width: auto; display: inline-block; padding: 0.25rem 1rem; color: var(--white); background-color: var(--ina); font-family: 'INA-handwriting'; line-height: 1; font-size: 1.5rem; font-weight: 800; } #list-stellenanzeigen .stellen-text { width: 100%; } #list-stellenanzeigen .stellen-text h3 { font-size: 1.9rem; color: var(--black); line-height: 0.8; padding: 2rem 0 1rem 0; } #list-stellenanzeigen .stellen-text h3 span { font-size: 2.3rem; color: var(--ina); } #list-stellenanzeigen .stellen-text a.text { text-decoration: none; color: inherit; display: block; cursor: pointer; } #list-stellenanzeigen .stellen-text a.text:hover { opacity: 0.6; } #list-stellenanzeigen .stellen-text button { display: inline-block; width: auto; padding-right: 4rem; margin: 0 1rem 1rem 0; } @media (min-width: 768px) { #list-stellenanzeigen .stellen-image { height: 350px; } #list-stellenanzeigen .stellen-image .image-frame { height: 350px; } #list-stellenanzeigen .stellen-image .image-frame { height: 350px; } #list-stellenanzeigen .stellen-image .image-frame img { height: 350px; } } @media (min-width: 1000px) { #list-stellenanzeigen .stellen-text h3 { font-size: 2rem; } #list-stellenanzeigen .stellen-text h3 span { font-size: 3rem; } #list-stellenanzeigen .stellen-image { width: 350px; height: 300px; float: left; } #list-stellenanzeigen .stellen-image .image-frame { height: 300px; } #list-stellenanzeigen .stellen-image .image-frame img { height: 300px; } #list-stellenanzeigen .stellen-text { width: calc(100% - 350px - 1rem - 30px); float: right; } } #stellen-filter select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; text-align: left; line-height: 2rem; font-size: 1.25rem; padding: 0.25rem 2.5rem 0.25rem 1rem; margin: 0 0 1rem 0; width: 100%; color: var(--white); background-color: var(--white10); outline: none; border-width: 0 0 2px 0; border-color: var(--white); border-style: solid; transition: all .25s ease-in-out; background-repeat: no-repeat; background-position: calc(100% - 0.5rem) center; background-size: auto 50%; background-image: url('/wp-content/themes/ina.karriere/img/icon-drowdown-ffffff.svg'); } #stellen-filter select:active, #stellen-filter select:focus, #stellen-filter select:hover { background-color: var(--white25); } #stellen-filter select option { background-color: var(--shark); color: var(--white); } #stellen-filter select option:hover { background-color: var(--ina); color: var(--white); } #stellen-filter button { border-radius: 0; text-align: left; line-height: 2rem; font-size: 1rem; padding: 0.25rem 1rem; margin: 0 0 1rem 0; width: 100%; color: var(--white); background-color: var(--white10); outline: none; border-width: 0; text-transform: uppercase; transition: all .25s ease-in-out; background-repeat: no-repeat; background-position: calc(100% - 1rem) center; background-size: .7rem auto; background-image: none; } #stellen-filter button:active, #stellen-filter button:focus, #stellen-filter button:hover { background-color: var(--white25); } #no-results { display: block; height: 0; overflow: hidden; } .no-results, #no-results .narrow { display: block; padding: 5rem 0 0 0; } .no-results a, #no-results a { text-decoration: underline; color: var(--ina); } .no-results a:hover, #no-results a:hover { opacity: 0.5; } .page form { padding: 1rem 0 0 0; } .page label { color: var(--ina); clear: both; } .page input[type=email] { border-radius: 0; text-align: left; line-height: 1.4rem; font-size: 1rem; padding: 0.5rem; margin: 0 0 1rem 0; width: 100%; color: var(--shark); background-color: var(--ina10); outline: none; border-width: 0 0 2px 0; border-color: var(--ina); border-style: solid; transition: all .25s ease-in-out; } .page input[type=email]:active, .page input[type=email]:focus, .page input[type=email]:hover { background-color: var(--ina25); } .page input[type=text] { border-radius: 0; text-align: left; line-height: 1.4rem; font-size: 1rem; padding: 0.5rem; margin: 0 0 1rem 0; width: 100%; color: var(--shark); background-color: var(--ina10); outline: none; border-width: 0 0 2px 0; border-color: var(--ina); border-style: solid; transition: all .25s ease-in-out; } .page input[type=text]:active, .page input[type=text]:focus, .page input[type=text]:hover { background-color: var(--ina25); } .page .screen-reader-response { display: none; } .page .wpcf7-form-control-wrap { position: relative; display: block; } .page label .wpcf7-list-item-label { text-transform: none; } .page label .wpcf7-list-item-label a { text-decoration: underline; } .page .wpcf7-form-control-wrap.gdpr .wpcf7-list-item-label { font-weight: 400; line-height: 0.9rem; padding: 0.3rem 0 0 0; display: inline-block; width: calc(100% - 3rem); max-width: 400px; } .page input.wpcf7-not-valid, .page .wpcf7-acceptance.wpcf7-not-valid input { background-color: var(--red); } .page .wpcf7-not-valid-tip { color: var(--white); text-transform: uppercase; position: absolute; bottom: 100%; right: 0; font-size: 0.6rem; line-height: 1rem; display: block; margin: 0; padding: 0 0.3rem; font-weight: bold; background-color: var(--red); font-weight: 400; } .page .wpcf7-form-control-wrap.gdpr .wpcf7-not-valid-tip { position: relative; bottom: auto; top: 2px; } .page form.invalid .wpcf7-response-output { background-color: var(--white); font-style: italic; padding: 0.5rem 0; } .page button[type=submit] { border-radius: 0; text-align: left; line-height: 2rem; font-size: 1rem; padding: 0.25rem 3rem 0.25rem 1rem; margin: 1rem 0 1rem 0; width: auto; color: var(--white); background-color: var(--ina); outline: none; border-width: 0; text-transform: uppercase; transition: all .25s ease-in-out; display: block; clear: both; background-repeat: no-repeat; background-position: calc(100% - 1rem) center; background-size: .7rem auto; background-image: url('/wp-content/themes/ina.karriere/img/icon-details-ffffff.svg'); } .page button[type=submit]:active, .page button[type=submit]:focus, .page button[type=submit]:hover { background-color: var(--ina80); } .wp-block-search button[type=submit] { margin: 0 !important; } .page input[type=checkbox] { border-radius: 0; cursor: pointer;margin: 0.25rem 0.5rem 1rem 0; height: 2rem; width: 2rem; float: left; background-color: var(--ina10); outline: none; border: 2px var(--ina) solid; transition: all .25s ease-in-out; background-size: 0 auto; background-position: center center; background-repeat: no-repeat; background-image: url('/wp-content/themes/ina.karriere/img/icon-check-383838.svg'); } .page input[type=checkbox]:checked { background-size: 70% auto; } .ina-image { position: relative; } .ina-image .imagetitle { position: absolute; width: auto; color: var(--white); z-index: +1; margin: 0.5rem 0 0 0; width: auto; display: inline-block; padding: 0.25rem 1rem; } .ina-image .imagetitle.left-top { top: 3rem; left: -1rem; } .ina-image .imagetitle.left-center { bottom: 40%; left: -1rem; } .ina-image .imagetitle.left-bottom { bottom: 2rem; left: -1rem; } .ina-image .imagetitle.right-top { top: 3rem; right: -1rem; } .ina-image .imagetitle.right-center { bottom: 40%; right: -1rem; } .ina-image .imagetitle.right-bottom { bottom: 2rem; right: -1rem; } .ina-image img { width: 100%; height: auto; } /* GLOBAL CONTACT ..... */ .global-contact { background-color: var(--black05); padding: 5rem 3rem 3rem 0; margin: 0 0 0 0; } .global-contact .ma-frame { position: relative; width: 100%; } .global-contact .ma-card { display: inline-block; width: 50%; margin: 0 0 1rem 0; background-color: var(--black05); float: left; } .global-contact .ma-card:first-of-type { } .global-contact .ma-img { display: block; width: 100%; height: auto; } .global-contact .ma-img img { width: 100%; height: auto; } .global-contact .ma-card p { padding: 0.5rem; margin: 0; height: 5rem; } .global-contact .ma-card .quickfacts { position: absolute; right: -1rem; bottom: 6rem; width: calc(190px + 1rem); text-align: right; } .global-contact .ma-card .quickfact { position: relative; z-index: +1; margin: 0.5rem 0 0 0; width: auto; display: inline-block; padding: 0.25rem 1rem; text-transform: uppercase; color: var(--white); background-color: var(--ina); font-family: 'INA-handwriting'; line-height: 1; font-size: 1rem; font-weight: 800; } .global-contact .ma-card .quickfact b { font-size: 1.4rem; float: right; } .global-contact .ma-card:first-of-type .quickfacts { left: -1rem; right: auto; bottom: 5rem; text-align: left; } .global-contact .ma-card:first-of-type .quickfact b { float: left; } .global-contact .ma-card a { border-top: 4px var(--white)solid; border-left: 2px var(--white) solid; } .global-contact .ma-card:first-of-type a { border-right: 2px var(--white) solid; border-left: 0; } .global-contact .contact-frame { position: relative; width: 100% } .global-contact .contact-info { display: block; padding: 1rem 2rem; margin: 0 0 1rem 0; } .global-contact .contact-info.filz * { color: var(--white); } @media (min-width: 450px) { } @media (min-width: 768px) { .global-contact .ma-frame { width: calc(380px + 1rem); float: left; } .global-contact .contact-frame { width: calc(100% - 380px - 4rem); float: right; } } @media (min-width: 1000px) { .global-contact .ma-frame { width: calc(380px + 1rem); } .global-contact .contact-frame { width: calc(100% - 380px - 4rem); } } /* GLOBAL NEWSLETTER ..... */ .global-newsletter { position: relative; padding: 3rem 0 3rem 0; background-image: url('/wp-content/themes/ina.karriere/img/global-newsletter-2000.jpg'); background-repeat: no-repeat; background-size: cover; background-position: top center; } .global-newsletter .h2 { padding: 0 0 1rem 0; color: var(--shark); } .global-newsletter::before { content: ""; position: absolute; top: 0; width: 100%; height: 1rem; background-image: url('/wp-content/themes/ina.karriere/img/global-newsletter-top.png'); background-repeat: no-repeat; background-size: 100% auto; background-position: top center; } .global-newsletter::after { content: ""; position: absolute; bottom: 0; width: 100%; height: 1rem; background-image: url('/wp-content/themes/ina.karriere/img/global-newsletter-btm.png'); background-repeat: no-repeat; background-size: 100% auto; background-position: bottom center; } /* BUTTONS ..... */ .address { background-color: var(--black10); padding: 0.5rem 1rem; margin: 0 0 2rem 0; } #template-stellen .address { margin: 2rem 0 2rem 0; } .info { position: relative; background-color: var(--black10); padding: 0.5rem 1rem; margin: 0 0 1rem 0; font-weight: normal; } .fact { position: relative; background-color: var(--black10); padding: 0.5rem 1rem; margin: 0 0 1rem 0; font-weight: bold; } .fact.special { background-color: var(--ina25) !important; } .btn-phone { display: block; width: 100%; padding: 0.5rem 1rem 0.5rem 3rem; margin: 0 0 1rem 0; text-decoration: none; text-align: left; line-height: 1.2rem; font-size: 1rem; text-transform: uppercase; color: var(--ina); background-color: var(--ina10); outline: none; border-width: 0; border-radius: 0; transition: background-color .25s ease-in-out; background-repeat: no-repeat; background-position: .5rem center; background-size: 1.5rem auto; background-image: url('/wp-content/themes/ina.karriere/img/button-phone-ec6752.svg'); } .btn-phone:active, .btn-phone:focus, .btn-phone:hover { background-color: var(--ina25); text-decoration: none; color: var(--ina); } .global-contact .btn-phone { color: var(--black) !important; background-color: var(--black10); margin: 0 0 1px 0; background-image: url('/wp-content/themes/ina.karriere/img/button-phone-383838.svg'); } .global-contact .btn-phone:active, .global-contact .btn-phone:focus, .global-contact .btn-phone:hover { background-color: var(--black25); color: var(--black); } .btn-google { display: block; width: 100%; padding: 0.5rem 1rem 0.5rem 3rem; margin: 0 0 1rem 0; text-decoration: none; text-align: left; line-height: 1.2rem; font-size: 1rem; text-transform: uppercase; color: var(--ina); background-color: var(--ina10); outline: none; border-width: 0; border-radius: 0; transition: background-color .25s ease-in-out; background-repeat: no-repeat; background-position: .5rem center; background-size: 1.5rem auto; background-image: url('/wp-content/themes/ina.karriere/img/button-location-ec6752.svg'); } .btn-google:active, .btn-google:focus, .btn-google:hover { background-color: var(--ina25) !important; text-decoration: none; color: var(--ina); } .btn-location { display: block; width: 100%; padding: 0.5rem 1rem 0.5rem 3rem; margin: 0 0 1rem 0; text-decoration: none; text-align: left; line-height: 1.2rem; font-size: 1rem; text-transform: uppercase; color: var(--ina) !important; background-color: var(--ina10); outline: none; border-width: 0; border-radius: 0; transition: background-color .25s ease-in-out; background-repeat: no-repeat; background-position: .5rem center; background-size: 1.5rem auto; background-image: url('/wp-content/themes/ina.karriere/img/button-location-ec6752.svg'); } .btn-location:active, .btn-location:focus, .btn-location:hover { background-color: var(--ina25) !important; text-decoration: none; } .btn-360 { display: block; width: 100%; padding: 0.5rem 1rem 0.5rem 3rem; margin: 0 0 1rem 0; text-decoration: none; text-align: left; line-height: 1.2rem; font-size: 1rem; text-transform: uppercase; color: var(--ina) !important; background-color: var(--ina10); outline: none; border-width: 0; border-radius: 0; transition: background-color .25s ease-in-out; background-repeat: no-repeat; background-position: .5rem center; background-size: 1.5rem auto; background-image: url('/wp-content/themes/ina.karriere/img/button-location-ec6752.svg'); } .btn-360:active, .btn-360:focus, .btn-360:hover { background-color: var(--ina25) !important; text-decoration: none; } .btn-url { display: block; width: 100%; padding: 0.5rem 1rem 0.5rem 3rem; margin: 0 0 1rem 0; text-decoration: none; text-align: left; line-height: 1.2rem; font-size: 1rem; text-transform: uppercase; color: var(--ina) !important; background-color: var(--ina10); outline: none; border-width: 0; border-radius: 0; transition: background-color .25s ease-in-out; background-repeat: no-repeat; background-position: .5rem center; background-size: 1.5rem auto; background-image: url('/wp-content/themes/ina.karriere/img/button-url-ec6752.svg'); } .btn-url:active, .btn-url:focus, .btn-url:hover { background-color: var(--ina25) !important; text-decoration: none; } .btn-mail { display: block; width: 100%; padding: 0.5rem 1rem 0.5rem 3rem; margin: 0 0 1rem 0; text-decoration: none; text-align: left; line-height: 1.2rem; font-size: 1rem; text-transform: uppercase; color: var(--ina) !important; background-color: var(--ina10); outline: none; border-width: 0; border-radius: 0; transition: background-color .25s ease-in-out; background-repeat: no-repeat; background-position: .5rem center; background-size: 1.5rem auto; background-image: url('/wp-content/themes/ina.karriere/img/button-mail-ec6752.svg'); } .btn-mail:active, .btn-mail:focus, .btn-mail:hover { background-color: var(--ina25); text-decoration: none; } .global-contact .btn-mail { color: var(--black) !important; background-color: var(--black10); margin: 0 0 0 0; background-image: url('/wp-content/themes/ina.karriere/img/button-mail-383838.svg'); } .global-contact .btn-mail:active, .global-contact .btn-mail:focus, .global-contact .btn-mail:hover { background-color: var(--black25); color: var(--black); } button[type=application] { display: inline-block; border-radius: 0; padding: 0.25rem 3rem 0.25rem 1rem; margin: 0 1rem 1rem 0; width: auto; color: var(--ina); background-color: var(--ina10); text-align: left; line-height: 2rem; font-size: 1rem; outline: none; border-width: 0; text-transform: uppercase; transition: all .25s ease-in-out; background-repeat: no-repeat; background-position: calc(100% - 0.5rem) center; background-size: 1.5rem auto; background-image: url('/wp-content/themes/ina.karriere/img/button-application-ec6752.svg'); } button[type=application]:active, button[type=application]:focus, button[type=application]:hover { background-color: var(--ina25); } .global-contact button[type=application] { color: var(--shark) !important; background-color: var(--white); margin: 0 1rem 1rem 0; background-image: url('/wp-content/themes/ina.karriere/img/button-application-383838.svg'); } .global-contact button[type=application]:active, .global-contact button[type=application]:focus, .global-contact button[type=application]:hover { background-color: var(--white80); } button[type=contact].cta { color: var(--white) !important; background-image: url('/wp-content/themes/ina.karriere/img/button-callback-ffffff.svg'); margin: 0 1rem 1rem 0 !important; } button[type=locations].cta { color: var(--white) !important; background-image: url('/wp-content/themes/ina.karriere/img/button-location-ffffff.svg'); margin: 0 1rem 1rem 0 !important; } button[type=faq].cta { color: var(--white) !important; background-image: url('/wp-content/themes/ina.karriere/img/button-info-ffffff.svg'); margin: 0 1rem 1rem 0 !important; } button[type=search].cta { color: var(--white) !important; background-image: url('/wp-content/themes/ina.karriere/img/button-search-ffffff.svg'); margin: 0 1rem 1rem 0 !important; } button[type=news].cta { color: var(--white) !important; background-image: url('/wp-content/themes/ina.karriere/img/button-mail-ffffff.svg'); margin: 0 1rem 1rem 0 !important; } button[type=application].cta { color: var(--white) !important; background-image: url('/wp-content/themes/ina.karriere/img/button-application-ffffff.svg'); margin: 0 1rem 1rem 0 !important; } button[type=contact] { display: inline-block; border-radius: 0; text-align: left; line-height: 2rem; font-size: 1rem; padding: 0.25rem 3rem 0.25rem 1rem; margin: 0 1rem 1rem 0; width: auto; color: var(--shark) !important; background-color: var(--white); outline: none; border-width: 0; text-transform: uppercase; transition: all .25s ease-in-out; background-repeat: no-repeat; background-position: calc(100% - 0.5rem) center; background-size: 1.5rem auto; background-image: url('/wp-content/themes/ina.karriere/img/button-callback-383838.svg'); } button[type=contact]:active, button[type=contact]:focus, button[type=contact]:hover { background-color: var(--white80); } .mitarbeiter button[type=contact] { display: inline-block; padding: 0.25rem 3rem 0.25rem 1rem; width: auto; } button[type=locations] { display: inline-block; border-radius: 0; text-align: left; line-height: 2rem; font-size: 1rem; padding: 0.25rem 3rem 0.25rem 1rem; margin: 0 1rem 1rem 0; width: auto; color: var(--shark) !important; background-color: var(--white); outline: none; border-width: 0; text-transform: uppercase; transition: all .25s ease-in-out; background-repeat: no-repeat; background-position: calc(100% - 0.5rem) center; background-size: 1.5rem auto; background-image: url('/wp-content/themes/ina.karriere/img/button-location-383838.svg'); } button[type=locations]:active, button[type=locations]:focus, button[type=locations]:hover { background-color: var(--white80); } .mitarbeiter button[type=locations] { display: inline-block; padding: 0.25rem 3rem 0.25rem 1rem; width: auto; } a[type=details] { display: inline-block; text-decoration: none; border-radius: 0; width: auto; padding: 0.25rem 3rem 0.25rem 1rem; margin: 0 1rem 1rem 0; text-align: left; line-height: 2rem; font-size: 1rem; color: var(--ina) !important; background-color: var(--ina10); outline: none; border-width: 0; text-transform: uppercase; transition: all .25s ease-in-out; background-repeat: no-repeat; background-position: calc(100% - 0.5rem) center; background-size: 1.5rem auto; background-image: url('/wp-content/themes/ina.karriere/img/button-details-ec6752.svg'); } a.cta[type=details] { color: var(--white) !important; background-color: var(--ina); background-image: url('/wp-content/themes/ina.karriere/img/button-details-ffffff.svg'); } a[type=details]:active, a[type=details]:focus, a[type=details]:hover { background-color: var(--ina25); text-decoration: none; } a.cta[type=details]:active, a.cta[type=details]:focus, a.cta[type=details]:hover { background-color: var(--ina); text-decoration: none; } .filz a[type=details] { background-color: var(--white); } .filz a[type=details]:active, .filz a[type=details]:focus, .filz a[type=details]:hover { background-color: var(--white80); } a[type=details][target=_blank] { background-image: url('/wp-content/themes/ina.karriere/img/icon-extern-383838.svg'); } .filz a[type=details][target=_blank] { background-image: url('/wp-content/themes/ina.karriere/img/icon-extern-ec6752.svg'); } a[type=details][target=_blank]::after { display: none; } button.cta, a.button.cta { display: inline-block; border-radius: 0; padding: 0.70rem 3rem 0.70rem 1rem; margin: 0 0.5rem 0.75rem 0; width: auto; color: var(--white); background-color: var(--ina); text-align: left; text-decoration: none; line-height: 1.1rem; font-size: 1rem; outline: none; border-width: 0; text-transform: uppercase; transition: all .25s ease-in-out; background-repeat: no-repeat; background-position: calc(100% - 0.5rem) center; background-size: 1.5rem auto; border: 1px var(--ina) solid; background-image: url('/wp-content/themes/ina.karriere/img/button-details-ffffff.svg'); } a.button.cta:active, a.button.cta:focus, a.button.cta:hover, button.cta:active, button.cta:focus, button.cta:hover { background-color: var(--ina80); text-decoration: none; } a.button.cta[target=_blank] { background-image: url('/wp-content/themes/ina.karriere/img/icon-extern-ffffff.svg'); } a.button.cta[target=_blank]::after { display: none; } a.button.anchor { display: inline-block; border-radius: 0; padding: 0.70rem 1rem 0.70rem 1rem; margin: 0 0.5rem 0.75rem 0; width: auto; color: var(--ina); background-color: var(--ina10); text-align: left; text-decoration: none; line-height: 1.1rem; font-size: 1rem; outline: none; border-width: 0; text-transform: uppercase; transition: all .25s ease-in-out; background-image: none; border: 1px var(--white) solid; } a.button.anchor:active, a.button.anchor:focus, a.button.anchor:hover { opacity: 1 !important; background-color: var(--ina); color: var(--white) text-decoration: none; } .has-white-color a.button.anchor { background-color: var(--white10); color: var(--white); } .has-white-color a.button.anchor:active, .has-white-color a.button.anchor:focus, .has-white-color a.button.anchor:hover { background-color: var(--white) !important; color: var(--ina) !important; } .has-ina-background-color button.cta, .has-ina-background-color a.button.cta { color: var(--ina); background-color: var(--white); background-image: url('/wp-content/themes/ina.karriere/img/button-details-ec6752.svg'); } .has-ina-background-color a.button.cta:active, .has-ina-background-color a.button.cta:focus, .has-ina-background-color a.button.cta:hover, .has-ina-background-color button.cta:active, .has-ina-background-color button.cta:focus, .has-ina-background-color button.cta:hover { background-color: var(--white80); } .has-ina-background-color a.button.cta[target=_blank] { background-image: url('/wp-content/themes/ina.karriere/img/icon-extern-ec6752.svg'); } .menu-content a.button.menu { border-radius: 0; text-align: left; line-height: 2rem; font-size: 1rem; padding: 0.25rem 1rem; margin: 1rem 0 1rem 0; width: 100%; color: var(--white); background-color: var(--ina); outline: none; border-width: 0; text-transform: uppercase; transition: all .25s ease-in-out; display: block; background-repeat: no-repeat; background-position: calc(100% - 0.5rem) center; background-size: 1.25rem auto; background-image: url('/wp-content/themes/ina.karriere/img/button-details-ffffff.svg'); } .menu-content a.button.menu:active, .menu-content a.button.menu:focus, .menu-content a.button.menu:hover { background-color: var(--ina80); } .menu-content a.button.menu::after { display: none; } .menu-content a.button.menu[target=_blank] { background-image: url('/wp-content/themes/ina.karriere/img/icon-extern-ffffff.svg'); } .wp-block-image.narrow figure { width: 100%; height: auto; } .wp-block-image.narrow img { width: 100%; height: auto; } .kt-title-text { font-size: 1rem; line-height: 2.5rem; } .kt-tab-inner-content-inner { padding: 1rem 0 0 0; } .kt-tab-title:hover { opacity: 1 !important; } .kt-title-item { border-right: 2px var(--white) solid; border-left: 2px var(--white) solid; } .kt-title-item:last-of-type { border-right: 0px; } .kt-title-item:first-of-type { border-left: 0px; } .kt-tab-title-active a { cursor: default !important; } video, iframe { width: 100%; height: auto; position: relative; margin: 0; padding: 0; /* background-image: url('/wp-content/themes/ina.karriere/img/line-vert-3-ffffff.svg'), url('/wp-content/themes/ina.karriere/img/line-horz-3-ffffff.svg'), url('/wp-content/themes/ina.karriere/img/line-vert-2-ffffff.svg'), url('/wp-content/themes/ina.karriere/img/line-horz-2-ffffff.svg'); background-position: top left, top left, top right, bottom left; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; */ } @media (min-width: 768px) { video, iframe { height: auto /*calc((90vw - 30px - 3rem) / 1.777)*/; } } @media (min-width: 980px) { .narrow iframe, .narrow video { height: auto /*450px !important*/; } } @media (min-width: 1050px) { video, iframe { height: auto /*calc((85vw - 30px - 3rem) / 1.777)*/; } } @media (min-width: 1500px) { video, iframe { height: auto /*calc((1200px - 30px - 3rem) / 1.777)*/; } } .BorlabsCookie ._brlbs-content-blocker ._brlbs-default { background-color: var(--shark70) !important; } /* FOOTER ..... */ .cn-button.wp-default { background-color: var(--ina) !important; } footer { position: relative; width: 100%; height: auto; padding: 5rem 0; background-color: var(--shark); color: var(--white); } footer .ina-logo svg { height: 4.5rem; } footer .ina-logo .svg-style-0 { fill: var(--white); } footer .ina-logo .svg-style-1, footer .ina-logo .svg-style-2 { fill: var(--white); } footer .ina-logo .svg-style-3 { fill: var(--white); } footer * { line-height: calc(1.5rem + 1px); } footer p { margin: 0; } footer a { transition: all .25s ease-in-out; } footer a:hover, footer a:active { color: var(--ina); } footer a[target=_blank]::after { display: block; position: absolute; right: 2px; top: 2px; background-image: url('/wp-content/themes/ina.karriere/img/icon-extern-ffffff.svg'); } footer ul { list-style: none outside none; margin: 0; padding: 0; } footer li { padding: 0; line-height: 1.5rem; border-bottom: 1px var(--white25) dotted; } footer li a { display: block; min-width: 200px; padding-right: 3rem; text-decoration: none !important; } footer .cert { height: 3rem; margin: 3rem 0 0 1rem; } #ina-redirect { position: relative; width: 100%; height: auto; } #ina-redirect .frame { position: relative; width: 100%; height: 30rem; top: 0; bottom: 0; overflow: hidden; } #ina-redirect .frame .ina-bg { position: absolute; top: 0; left: 0; width: 100%; height: 30rem; } #ina-redirect .frame img { position: fixed; bottom: 0; left: 0; width: 100%; height: 30rem; object-fit: cover; opacity: 0.8; } #ina-redirect .frame .cta-container { position: absolute; top: 50%; margin: -1rem auto -1rem auto; width: 100%; } #ina-redirect .frame a::after { display: none !important; } #ina-redirect .frame a.cta { position: relative; margin: 0 auto; } ul.location-list-mobile { list-style: none outside none; padding: 0; margin: 3rem 0 0 0; display: block; } ul.location-list-mobile ul { list-style: disc outside none; padding: 0 0 0 2rem; margin: 0 0 2rem 0; } ul.location-list-mobile .h4 { color: var(--ina); } ul.location-list-mobile .filter-button span { text-decoration: underline; } @media (min-width: 768px) { ul.location-list-mobile { } } #svgani { position: relative; display: block; width: 100vw; height: 100vh; overflow: hidden; } #svgani #ina-map { position: relative; display: block; width: calc(100vh / 0.8); height: 70vh; left: 50%; margin: 15vh calc(-1 * (100vh / 0.8 / 2)); enable-background: new 0 0 1500 1201; transition: all 500ms ease-in-out; transform-origin: center; } #ina-map .dot { cursor: pointer; } #ina-map .dot .hg { fill-rule: evenodd; clip-rule: evenodd; fill: #e18266; } #ina-map .dot circle { } #ina-map .bez.link { cursor: pointer; outline: none !important; border: 0 !important } #ina-map .bez.off .hg path { fill: var(--shark10); } #ina-map .bez .area { fill: var(--white); } #ina-map .bez.link .area { fill: var(--white); transition: all 500ms ease-in-out; } #svgani #ina-map .bez.link:hover .area { fill: var(--ina25); } #svgani .intro { position: absolute; z-index: +10; width: 300px; height: 300px; top: 10rem; left: 50%; margin: 0 -150px; background-color: transparent; border-radius: 100%; transition: all 1500ms ease-in-out; text-align: center; cursor: pointer; transform: scale(0) rotate(15deg); opacity: 0; } #svgani.start .intro { transform: scale(1) rotate(-5deg); opacity: 1; transition: all 500ms ease-in-out; } #svgani.start .intro:hover { transform: scale(1.05) rotate(-5deg); } #svgani .intro .headline { padding: 0 0 0 0; -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-duration: 5s; animation-duration: 5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } #svgani .intro .headline span.intro-left { position: absolute; right: 50%; top: calc((300px - 10rem) / 2); width: auto; text-align: right; } #svgani .intro .headline span.intro-right { position: absolute; left: 50%; top: calc((300px - 10rem) / 2); width: auto; text-align: left; } #svg_echt, #svg_deine, #svg_chance { height: 3rem; width: auto; } .svg_subtitle { height: 2rem; width: auto; display: inline-block; position: relative; margin: 0 -0.1rem; } #svg_echt { position: relative; top: -0.5rem; margin: 0 0 0.5rem 0.5rem; } #svg_echt path { fill: var(--shark); position: relative; top: -0.5rem; margin: 0 0 0.5rem 0.5rem; } #svg_deine path { fill: var(--white); } #svg_chance path { fill: var(--white); } #svgani .intro .headline span.head1, #svgani .intro .headline span.head2, #svgani .intro .headline span.head3 { background-color: var(--ina); display: inline-block; transition: all 500ms ease-in-out; /*background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url('/wp-content/themes/ina.karriere/img/ina-filz.jpg');*/ } #svgani .intro .headline .head1 { position: relative; left: -2rem; color: var(--shark); font-size: 6rem; padding: 0 1.5rem 0.5rem 1rem; line-height: 6rem; font-weight: 800; text-transform: uppercase; transition-delay: 0.1s; font-family: 'INA-handwriting', sans-serif; z-index: +1; } #svgani .intro .headline .head1::after { position: absolute; display: block; content: ""; background-image: url('/wp-content/themes/ina.karriere/img/echt-underline.svg'); background-position: center center; background-repeat: no-repeat; background-size: 100% auto; left: 1rem; right: 1.5rem; bottom: 1rem; height: 10px; } #svgani .intro .headline .head2 { position: relative; left: 2.4rem; color: var(--white); font-size: 4rem; padding: 0 2rem 0.5rem 1rem; margin: -1rem 0 0 0; line-height: 5rem; font-weight: 700; text-transform: uppercase; transition-delay: 0.5s; } #svgani .intro .headline .head3 { position: relative; left: -2rem; color: var(--white); font-size: 4rem; padding: 0 1.5rem 0.5rem 1.3rem; line-height: 5rem; font-weight: 700; text-transform: uppercase; transition-delay: 1s; } #svgani.start .intro .headline .head1 { opacity: 1; } #svgani.start .intro .headline .head2 { opacity: 1; } #svgani.start .intro .headline .head3 { opacity: 1; } #svgani .subline { position: absolute; bottom: auto; top: 27rem; width: 100%; left: 50%; opacity: 0; text-align: center; font-family: 'INA-handwriting', sans-serif; font-weight: 700; color: var(--shark); font-size: 2.2rem; line-height: 1.1; padding: 2rem; margin: 0 -50vw; transition: all 1000ms ease-in-out; transform: translateY(1rem) translateX(0) scale(0) rotate(15deg); } #svgani.start .subline { opacity: 1; transform: translateY(1rem) translateX(0) scale(1) rotate(-5deg); } @media (min-width: 768px) { #svgani #ina-map { width: calc(100vh / 0.8); height: 100vh; left: 50%; margin: 0 calc(-1 * (100vh / 0.8 / 2)); } #svgani .intro { top: calc(50vh - 150px); } #svgani .intro .headline .head1 { left: -2rem; font-size: 7rem; padding: 0 2rem 1rem 1.5rem; line-height: 7rem; } #svgani .intro .headline .head1::after { left: 2rem; right: 2.5rem; } #svgani .intro .headline .head2 { left: 2.4rem; font-size: 5rem; padding: 0 3rem 0 1rem; margin: -1rem 0 0 0; line-height: 6rem; } #svgani .intro .headline .head3 { left: -2rem; font-size: 5rem; padding: 0 1.8rem 1rem 1.4rem; line-height: 6rem; } #svg_echt, #svg_deine, #svg_chance { height: 4rem; } #svgani .subline { bottom: calc(50vh - 300px); top: auto; transform: translateY(1rem) translateX(2rem) scale(0) rotate(15deg); } #svgani.start .subline { bottom: calc(50vh - 300px); top: auto; transform: translateY(1rem) translateX(2rem) scale(1) rotate(-5deg); } } /* INA HEADLINE */ .ina-headline { position: relative; } .ina-headline .ina-headline-hashtag { position: relative; background-color: var(--white); color: var(--black); display: inline-block; width: auto; z-index: +1; font-size: 1.4rem; line-height: 0.8; padding: 0.5rem 0.5rem; margin: 0 0 0.5rem 0; transform: rotate(-1deg); } .ina-headline .ina-headline-row { position: relative; background-color: var(--ina); color: var(--white); display: inline-block; width: auto; font-size: 1.5rem; line-height: 1; padding: 0.65rem; margin: -0.65rem 0 0 0; font-weight: bold; /*background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url('/wp-content/themes/ina.karriere/img/ina-filz.jpg');*/ } @media (min-width: 767px) { .ina-headline .ina-headline-hashtag { font-size: 1.8rem; padding: 0.5rem 1rem; margin: 0 0 0.5rem 0; } .ina-headline .ina-headline-row { font-size: 2.2rem; padding: 1rem; margin: -1rem 0 0 0; } } @media (min-width: 1000px) { .ina-headline .ina-headline-hashtag { font-size: 1.8rem; padding: 0.5rem 1rem; margin: 0 0 0.5rem 0; } .ina-headline .ina-headline-row { font-size: 2.2rem; padding: 1rem; margin: -1rem 0 0 0; } } /* INA HEADLINE */ .ina-disruptor { position: absolute; z-index: 999; } .ina-disruptor .ina-disruptor-row { position: relative; background-color: var(--ina); color: var(--white); display: inline-block; width: auto; font-size: 1rem; line-height: 1; padding: 0.5rem; margin: -0.5rem 0 0 0; font-weight: bold } .ina-disruptor .ina-disruptor-row[target=_blank] { text-decoration: underline; } @media (min-width: 767px) { .ina-disruptor { padding-top: 1rem; } .ina-disruptor .ina-disruptor-row { font-size: 1.1rem; padding: 0.65rem; margin: -0.55rem 0 0 0; } } @media (min-width: 878px) { .ina-disruptor { padding-top: 2rem; } .ina-disruptor .ina-disruptor-row { font-size: 1.1rem; padding: 0.65rem; margin: -0.55rem 0 0 0; } } @media (max-width: 767px) { .ina-disruptor img { max-width: 150px !important; } } #svgani.start .svg-ani-1, #svgani.start .svg-ani-2, #svgani.start .svg-ani-3, #svgani.start .svg-ani-4, #svgani.start .svg-ani-5, #svgani.start .svg-ani-6, #svgani.start .svg-ani-7, #svgani.start .svg-ani-8, #svgani.start .svg-ani-9, #svgani.start .svg-ani-10, #svgani.start .svg-ani-11, #svgani.start .svg-ani-12 { transform: scale(1); opacity: 0.1; } #svgani .svg-ani-1 { opacity: 1; transition-delay: 0s; transform: scale(1); transform-origin: 585px 559px; } #svgani .svg-ani-2 { opacity: 1; transition-delay: 0.03s; transform: scale(1); transform-origin: 736px 638px; } #svgani .svg-ani-3 { opacity: 1; transition-delay: 0.06s; transform: scale(1); transform-origin: 398px 683.5px; } #svgani .svg-ani-4 { opacity: 1; transition-delay: 0.09s; transform: scale(1); transform-origin: 449px 352.5px; } #svgani .svg-ani-5 { opacity: 1; transition-delay: 0.12s; transform: scale(1); transform-origin: 684.5px 304.5px; } #svgani .svg-ani-6 { opacity: 1; transition-delay: 0.15s; transform: scale(1); transform-origin: 901.5px 517.5px; } #svgani .svg-ani-7 { opacity: 1; transition-delay: 0.18s; transform: scale(1); transform-origin: 1044px 531px; } #svgani .svg-ani-8 { opacity: 1; transition-delay: 0.21s; transform: scale(1); transform-origin: 1103.5px 908px; } #svgani .svg-ani-9 { opacity: 1; transition-delay: 0.24s; transform: scale(1); transform-origin: 835.5px 843px; } #svgani .svg-ani-10 { opacity: 1; transition-delay: 0.27s; transform: scale(1); transform-origin: 658px 892.5px; } #svgani .svg-ani-11 { opacity: 1; transition-delay: 0.30s; transform: scale(1); transform-origin: 363px 977.5px; } #svgani .svg-ani-12 { opacity: 1; transition-delay: 0.33s; transform: scale(1); transform-origin: 240px 684px; } #svgani.start .svg-dot-1, #svgani.start .svg-dot-2, #svgani.start .svg-dot-3, #svgani.start .svg-dot-4, #svgani.start .svg-dot-5, #svgani.start .svg-dot-6, #svgani.start .svg-dot-7, #svgani.start .svg-dot-8, #svgani.start .svg-dot-9, #svgani.start .svg-dot-10, #svgani.start .svg-dot-11, #svgani.start .svg-dot-12, #svgani.start .svg-dot-13, #svgani.start .svg-dot-14, #svgani.start .svg-dot-15, #svgani.start .svg-dot-16, #svgani.start .svg-dot-17, #svgani.start .svg-dot-18, #svgani.start .svg-dot-19, #svgani.start .svg-dot-20, #svgani.start .svg-dot-21 { transform: scale(0); } #svgani.ready .svg-dot-1, #svgani.ready .svg-dot-2, #svgani.ready .svg-dot-3, #svgani.ready .svg-dot-4, #svgani.ready .svg-dot-5 #svgani.ready .svg-dot-6, #svgani.ready .svg-dot-7, #svgani.ready .svg-dot-8, #svgani.ready .svg-dot-9, #svgani.ready .svg-dot-10 #svgani.ready .svg-dot-11, #svgani.ready .svg-dot-12, #svgani.ready .svg-dot-13, #svgani.ready .svg-dot-14, #svgani.ready .svg-dot-15 #svgani.ready .svg-dot-16, #svgani.ready .svg-dot-17, #svgani.ready .svg-dot-18, #svgani.ready .svg-dot-19, #svgani.ready .svg-dot-20, #svgani.ready .svg-dot-21 { transition-delay: 0s !important; transition: all 500ms ease-in-out; } #ina-map .svg-dot-1 { transform-origin: 450px 272px; transform: scale(1.2); transition-delay: 0.8s; } #ina-map .svg-dot-2 { transform-origin: 710px 436px; transform: scale(1.2); transition-delay: 0.9s; } #ina-map .svg-dot-3 { transform-origin: 751px 1050px; transform: scale(1.2); transition-delay: 0.7s; } #ina-map .svg-dot-4 { transform-origin: 890px 884px; transform: scale(1.2); transition-delay: 1s; } #ina-map .svg-dot-5 { transform-origin: 633px 576px; transform: scale(1.2); transition-delay: 1.1s; } #ina-map .svg-dot-6 { transform-origin: 589px 698px; transform: scale(1.2); transition-delay: 0.7s; } #ina-map .svg-dot-7 { transform-origin: 559px 728px; transform: scale(1.2); transition-delay: 0.9s; } #ina-map .svg-dot-8 { transform-origin: 566px 706px; transform: scale(1.2); transition-delay: 1s; } #ina-map .svg-dot-9 { transform-origin: 691px 668px; transform: scale(1.2); transition-delay: 0.8s; } #ina-map .svg-dot-10 { transform-origin: 573px 601px; transform: scale(1.2); transition-delay: 0.5s; } #ina-map .svg-dot-11 { transform-origin: 569px 659px; transform: scale(1.2); transition-delay: 0.6s; } #ina-map .svg-dot-12 { transform-origin: 614px 459px; transform: scale(1.2); transition-delay: 1s; } #ina-map .svg-dot-13 { transform-origin: 363px 556px; transform: scale(1.2); transition-delay: 1.1s; } #ina-map .svg-dot-14 { transform-origin: 541px 530px; transform: scale(1.2); transition-delay: 0.9s; } #ina-map .svg-dot-15 { transform-origin: 587px 728px; transform: scale(1.2); transition-delay: 0.8s; } #ina-map .svg-dot-16 { transform-origin: 702px 546px; transform: scale(1.2); transition-delay: 0.7; } #ina-map .svg-dot-17 { transform-origin: 657px 663px; transform: scale(1.2); transition-delay: 0.9s; } #ina-map .svg-dot-18 { transform-origin: 522px 520px; transform: scale(1.2); transition-delay: 0.8s; } #ina-map .svg-dot-19 { transform-origin: 597px 572px; transform: scale(1.2); transition-delay: 0.7s; } #ina-map .svg-dot-20 { transform-origin: 735px 499px; transform: scale(1.2); transition-delay: 0.8s; } #ina-map .svg-dot-21 { transform-origin: 544px 769px; transform: scale(1.2); transition-delay: 0.95s; } .svg-ani-1, .svg-ani-4, .svg-ani-7, .svg-ani-10 { transition: all 600ms ease-in-out; } .svg-ani-2, .svg-ani-5, .svg-ani-8, .svg-ani-11 { transition: all 750ms ease-in-out; } .svg-ani-3, .svg-ani-6, .svg-ani-9, .svg-ani-12 { transition: all 1150ms ease-in-out; } .svg-dot-1, .svg-dot-2, .svg-dot-3, .svg-dot-4, .svg-dot-5, .svg-dot-6, .svg-dot-7, .svg-dot-8, .svg-dot-9, .svg-dot-10, .svg-dot-11, .svg-dot-12, .svg-dot-13, .svg-dot-14, .svg-dot-15, .svg-dot-16, .svg-dot-17, .svg-dot-18, .svg-dot-19, .svg-dot-20, .svg-dot-21 { transition: all 1500ms cubic-bezier(.34,.86,.46,-0.54); } .wa__button { position: relative; display: block; margin: 0 0 2rem 0; } .wa__button::after { position: absolute !important; bottom: 0.5rem; right: 0.25rem; top: auto !important; } .wa__dsgvo { font-size: 0.7rem; line-height: 1.2; display: block; } .wa__btn_status { color: var(--ina) !important; } #whatsapp-detail span.nowrap { white-space: nowrap; } @keyframes down-ani{ 0% { opacity: 0; transform: translate(0px,-1rem); } 80% { opacity: 1; transform: translate(0px,0px); } 100% { opacity: 0; transform: translate(0px,0px); } } @-moz-keyframes down-ani{ 0% { opacity: 0; -moz-transform: translate(0px,-1rem); } 80% { opacity: 1; -moz-transform: translate(0px,0px); } 100% { opacity: 0; -moz-transform: translate(0px,0px); } } @-webkit-keyframes down-ani { 0% { opacity: 0; -webkit-transform: translate(0px,-1rem); } 80% { opacity: 1; -webkit-transform: translate(0px,0px); } 100% { opacity: 0; -webkit-transform: translate(0px,0px); } } @-o-keyframes down-ani { 0% { opacity: 0; -o-transform: translate(0px,-1rem); } 80% { opacity: 1; -o-transform: translate(0px,0px); } 100% { opacity: 0; -o-transform: translate(0px,0px); } } @-ms-keyframes down-ani { 0% { opacity: 0; -ms-transform: translate(0px,-1rem); } 80% { opacity: 1; -ms-transform: translate(0px,0px); } 100% { opacity: 0; -ms-transform: translate(0px,0px); } } @-webkit-keyframes tada { 0% { -webkit-transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -3deg); } 100% { -webkit-transform: scale3d(1, 1, 1); } } @keyframes tada { 0% { transform: scale3d(1, 1, 1); } 10%, 20% { transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -1.5deg); } 30%, 50%, 70%, 90% { transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 1.5deg); } 40%, 60%, 80% { transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -1.5deg); } 100% { transform: scale3d(1, 1, 1); } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); } 100% { -webkit-transform: scale3d(1, 1, 1); } } @keyframes pulse { 0% { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(1.05, 1.05, 1.05); } 100% { transform: scale3d(1, 1, 1); } }