/* Theme Name: G POWER Version: 1.0 Author: Joar Staab URL: www.livit-center.de; Template: enfold */ * {box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} :root { --primary: #e30513; --secondary: #f39500; --green: #A8D17E; --black: #000; --white: #fff; --default: #f7f7f7; } /*---TEXT ALIGN---*/ .left {text-align:left !important;} .right {text-align:right !important;} .center {text-align:center !important;} .justify {text-align:justify !important;} .hidden {visibility: hidden;} /*---FONT COLOR---*/ .white {color: var(--white) !important;} .black {color:var(--black) !important;} .primary {color: var(--primary) !important; } .secondary {color: var(--secondary) !important;} .grey {color: var(--default) !important;} .red {color: #ec8d68 !important;} /* ---BACKGROUND COLOR--- */ .bg-primary {background:var(--primary) !important;} .bg-secondary {background: var(--secondary) !important} .bg-default{background: var(--default) !important} .bg-gradient {background: linear-gradient(to right,var(--primary) 0,var(--secondary) 100%) center center no-repeat !important} /*---FONT STYLING---*/ body {font-family:'Poppins',sans-serif !important; box-sizing:border-box; color:#0c0c0c; font-weight:400 !important; font-style:normal; font-size:16px ; line-height:1.5;} a {cursor:pointer; font-weight:400; text-decoration:none } a:hover, a:focus {text-decoration:underline} p {font-family:'Poppins',sans-serif !important; font-size:16px ; line-height:1.3; margin:20px 0; font-weight:400 !important; color:#0c0c0c;} small, .small {font-size:12px !important; line-height:1.3 !important} * {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale} /*---All - Headlines---*/ h1, .hl-xl, h2, .hl-l, h3, .hl-m, h4, .hl-s, h5, .hl-xs, h6, .hl-xxs {font-family:'Poppins',sans-serif !important; font-weight:normal !important; font-style:normal !important; text-transform:none !important; letter-spacing:0px !important} h1, .hl-xl {font-size:50px; line-height:1.3;} h2, .hl-l {font-size:42px; line-height:1.3;} h3, .hl-m {font-size:30px; line-height:1.3} h4, .hl-s {font-size:26px; line-height:1.3;} h5, .hl-xs {font-size:22px; line-height:1.3} h6, .hl-xxs {font-size:16px; line-height:1.3} /*---All - Font Styles---*/ .normal {font-weight:400 !important; font-style:normal !important; text-transform:none !important} .light {font-weight:200 !important} .semi-light {font-weight:300 !important} .regular {font-weight:400 !important} .medium {font-weight:600 !important} b, strong {font-weight:700 !important} .bold {font-weight:900 !important;} .heavy {font-weight:900 !important} .italic {font-style:italic} .upper {text-transform:uppercase !important} /*---All - Text Alignment---*/ .align-left {text-align:left !important} .align-right {text-align:right !important} .align-center {text-align:center !important} .align-justify {text-align:justify !important; text-justify:inter-word !important} /*---All - Floats---*/ .float-left {float:left !important} .float-right {float:right !important} .float-none {float:none !important} /*---All - Hide content---*/ .desktop-hidden {display:block !important} .mobile-hidden {display:none !important} .hidden {display:none !important} /*---LINKS---*/ #top a.content-link {text-decoration: underline; text-decoration-color: currentcolor; -webkit-text-decoration-color: rgba(0, 0, 0, 0.25); text-decoration-color: rgba(0, 0, 0, 0.25); text-underline-position: under; font-weight: 500; word-break: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;} #top a.content-link:hover, #top a.content-link:focus {-webkit-text-decoration-color: var(--secondary); text-decoration-color: var(--secondary); color: var(--secondary);} #top .content-link + .content-link {margin-left: 20px;} /*---HEADER STYLES---*/ #top #wrap_all #main {padding-top: 100px !important;} #header_main {background: linear-gradient(to right,var(--primary) 0,var(--secondary) 100%) center center no-repeat fixed;} /*---LOGO SYTLES---*/ .logo, .logo a, .logo a img {height: 90% !important; top: 5% !important;} /*---MENU STYLES---*/ .main_menu {right:20px;} .main_menu .avia-menu a span {font-size:18px; line-height:1.1; text-transform:none; transition: cubic-bezier(1,0,0,1) 0.2s;} .main_menu .avia-menu a:hover .avia-menu-text, .main_menu .avia-menu a:active .avia-menu-text, .main_menu .avia-menu a:focus .avia-menu-text, #top .button-menu {height: 100px; width: auto; display: inline;} #top .header-scrolled .button-menu {height: 70px;} #top .button-menu:hover a {color: #fff;} #top .button-menu:hover .avia-menu-text {box-shadow: 0 20px 20px -15px rgba(0, 0, 0, 0.39), 0 20px 20px -20px rgba(0, 0, 0, 0.48); color: #fff !important;} #top .button-menu a:first-child {display: none;} #top .button-menu a.open-modal {background: var(--white);height: 40px !important; position: relative; top: 47%; color: var(--secondary) !important; transform: translateY(-50%); font-size: 18px; line-height: 40px !important; border-radius: 10px; padding: 0px 20px; cursor: pointer; overflow: hidden; transition: color 0.3s ease; contain: content; } #top .button-menu a.open-modal::before {content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: rgba(243, 149, 0, 0.2); transition: left 0.4s ease;} #top .button-menu a.open-modal:hover::before {left: 100%;} #top .button-menu a.open-modal::before {color: var(--black);} #top .av_header_transparency #header_meta, #top .av_minimal_header #header_meta {display: none !important} /*---BUTTON STYLES-------------------------------------------------------------------------- */ #top .button-liv {display: inline-block; text-align:center; min-height:30px; height:auto; margin-top:20px; contain: content; border-radius: 50px; width: max-content; background: var(--white); border:1px solid transparent;} #top .button-liv a, #top .button-liv button {padding: 8px 20px; cursor: pointer; overflow: hidden; transition: color 0.3s ease; contain: content; font-size: 16px !important; color: var(--black); font-weight: 600; line-height: 40px; text-decoration: none !important;} #top .button-liv a:hover, #top .button-liv a:focus, #top .button-liv button:hover, #top .button-liv button:focus {color: var(--black); text-decoration:none;} #top .button-liv::before {content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: rgba(243, 149, 0, 0.2); transition: left 0.4s ease;} #top .button-liv:hover::before {left: 100%;} #top .button-liv::before {color: var(--black);} /*Coloring*/ #top .button-liv.primary {background: var(--secondary) !important;} #top .button-liv.primary a, #top .button-liv.primary button {color: var(--white) !important;} #top .button-liv.primary a:hover, #top .button-liv.primary a:focus, #top .button-liv.primary button:hover, #top .button-liv.primary button:focus {color: var(--white) !important;} #top .button-liv.primary::before {background: rgba(255, 255, 255, 0.2); } #top .button-liv.primary::before {color: var(--white);} /*Outline*/ #top .button-liv.primary-2 {background: transparent !important; border:1px solid var(--secondary);} #top .button-liv.primary-2 a, #top .button-liv.primary-2 button {color: var(--secondary) !important;} #top .button-liv.primary-2 a:hover, #top .button-liv.primary-2 a:focus, #top .button-liv.primary-2 button:hover, #top .button-liv.primary-2 button:focus {color: var(--secondary) !important;} #top .button-liv.primary-2::before {background: rgba(243, 149, 0, 0.2); } #top .button-liv.primary-2::before {color: var(--white);} /*--- Scroll-Top-Link ---*/ #scroll-top-link {box-shadow: 0 2px 6px rgba(0,0,0,0.1), 0 3px 6px rgba(0,0,0,0.15); position: fixed; border-radius: 10px !important; border:2px solid #fff !important; background-color: #fff !important; color: #575757 !important; height: 50px; width: 35px; line-height: 50px; text-decoration: none; text-align: center; opacity: 1 !important; left: 30px; bottom: 40px; z-index: 1030; visibility: hidden;} #scroll-top-link:hover {border: 2px solid #fff !important; background-color: #fff !important; color: var(--primary) !important; } .toggle_content {color:var(--primary) !important} /*--- COOKIE BANNER ---*/ #top .cmplz-cookiebanner{position: fixed !important; max-width: 1100px !important; width: 80% !important; left: 50% !important; transform: translateX(-50%) translateY(-50%) !important; border-radius: 10px !important; top:50% !important; bottom: initial !important;} #top .cmplz-cookiebanner::before {content: ''; position: absolute; height: 100%; width: 150px; left: 0; background: linear-gradient(-282deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1) 40px, transparent 40px); top: 0; z-index: -1; border-top-left-radius: 10px; border-bottom-left-radius: 10px;} #top .cmplz-cookiebanner::after {content: ''; position: absolute; height: 100%; width: 180px; left: 0; background: linear-gradient(70deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1) 160px, transparent 160px); top: 0; z-index: -1; border-top-left-radius: 10px; border-bottom-left-radius: 10px;} #top .cmplz-cookiebanner .cmplz-header { grid-column-start: 1 !important; grid-row-start: 1 !important; transform: translateX(40%); -webkit-transform: translateX(40%); width: 100% !important; min-width: 100% !important; max-width: 100% !important; overflow: visible !important;} #top .cmplz-cookiebanner .cmplz-header::before {content: ''; background: url(https://go-livit.de/wp-content/uploads/icons/cookies.svg); background-position: center; background-size: contain; background-repeat: no-repeat; width: 150px !important; height: 150px !important; position: absolute; top: 20px; left: 0; transform: translateX(-120%); -webkit-transform: translateX(-120%);} #top .cmplz-cookiebanner .cmplz-body { grid-column-start: 1 !important; grid-row-start: 2 !important; transform: translateX(40%); -webkit-transform: translateX(40%); width: 100% !important; min-width: 70% !important; max-width: 100% !important;} #top .cmplz-cookiebanner .cmplz-buttons { grid-column-start: 1 !important; grid-row-start: 3 !important; transform: translateX(40%); -webkit-transform: translateX(40%); width: 100% !important; min-width: 100% !important; max-width: 100% !important;} #top .cmplz-cookiebanner .cmplz-documents { grid-column-start: 1 !important; grid-row-start: 4 !important; justify-content: end !important; transform: translateX(40%); -webkit-transform: translateX(40%); width: 60% !important; max-width: 100% !important;} /*--- COOKIE CONSENT ---*/ #top .avia-cookie-consent {background:#f7f7f7 !important;} #top .avia-cookie-consent .avia-cookie-consent-button, #top .avia-cookie-consent .avia-popup .avia-cookie-consent-button { cursor: pointer; display: inline-block; background-color: var(--primary) !important; border: 2px solid var(--primary) !important; color: #fff !important;padding: 1.1em; min-width: 80px; border-radius: 0px !important; font-weight:700;} #top .avia-cookie-consent .avia-cookie-consent-button:hover {background-color: #000 !important; border: 2px solid #000 !important; border-radius: 0px !important; color: var(--secondary) !important;} #top #hs-eu-cookie-confirmation {display: none !important;} /*--- COMPLZ STYLES ---*/ #cmplz-document {margin: auto; max-width: 100% !important; } #cmplz-document table tbody > tr:nth-child(2n) > td, #cmplz-document table tbody > tr:nth-child(2n+1) > td {background: #000 !important;} #cmplz-cookies-overview .cmplz-service-header {background-color: #ebebeb !important;} #cmplz-cookies-overview .cookies-per-purpose div {background-color: #f7f7f7 !important;} #av-consent-extra-info {background: #f7f7f7; border-color: #f7f7f7 !important;} .mfp-content .main_color div {border-color: #f7f7f7 !important;} .mfp-content .tab_inner_content {padding: 10px !important;} #socket .container {padding-top: 25px !important; padding-bottom: 25px !important;} .sub_menu_socket, #top .sub_menu_socket ul li {font-size: 13px !important; line-height: 1 !important;} /* Footer */ #top #footer {background: #eaebeb !important;} #top #footer .container, #top #footer .content {padding-top: 0; padding-bottom: 10px;} #top #footer h4, #top #footer p, #top #footer .small {color: #4a4742;} #top #footer a {text-decoration: none;} #top #footer a:hover {cursor: pointer; text-decoration: #4a4742 underline;} /*--- Blog/Veranstaltungen ---------------------------------------------------------------*/ #top #blog article {border-radius: 10px; overflow: hidden; box-shadow: 2px -2px 5px rgba(0,0,0,0.1);} #top #blog .avia-content-slider .slide-image { margin-bottom: 0 !important;} #top #blog .slide-content { background: #f7f7f7;} #top #blog .slide-entry-title { font-size: 20px; text-align: left; padding: 10px 10px 10px; margin-bottom: 0 !important;} #top #blog .blog-categories.minor-meta {text-align: left; padding: 0 10px 10px;} #top #blog .av-vertical-delimiter {display: none;} /*--- FAQ ---*/ #top .faq-minimal section.av_toggle_section {width: 100%;} #top .faq-minimal .single_toggle {border:none; transition: all 0.3s cubic-bezier(.25,.8,.25,1); margin:0 0 10px} #top .faq-minimal .single_toggle .toggler {position:relative; border:0 !important; border-radius:3px; font-size:16px; color:#000 !important; padding:10px 30px 10px 10px !important; background:#fff; font-size: 0.9em;} #top .faq-minimal .single_toggle .toggle_content {background:#f7f7f7; border-radius: 5px;} #top .faq-minimal .single_toggle .toggle_content hr {border-color:rgba(0,0,0,.1); margin:25px 0} #top .faq-minimal .single_toggle .toggler .toggle_icon {right:20px; top:24px; left:initial; border:0; height:12px; width:12px; transition:all .5s ease} #top .faq-minimal .single_toggle .toggler .toggle_icon .vert_icon {height:12px; left:6px; border:1px solid #a8a8a8} #top .faq-minimal .single_toggle .toggler .toggle_icon .hor_icon {width:12px; top:6px; border:1px solid #a8a8a8} #top .faq-minimal .single_toggle .toggler.activeTitle .toggle_icon {transform:rotate(0deg)} #top .faq-minimal .single_toggle .toggler.activeTitle .toggle_icon .vert_icon {visibility: hidden;} #top .faq-minimal .single_toggle .toggler::before {content: 'Q'; position: relative; padding: 15px 12px; background: #f7f7f7; border-radius: 5px; margin-right: 10px; transition: all .5s ease} #top .faq-minimal .single_toggle .toggler.activeTitle::before {background: var(--secondary); color:#fff; top:8px; padding: 20px 12px;} /*BG-DEFAULT OVERRIDES*/ #top .bg-default .faq-minimal .single_toggle .toggler {background: #f7f7f7;} #top .bg-default .faq-minimal .single_toggle .toggler::before {background: #fff;} #top .bg-default .faq-minimal .single_toggle .toggler.activeTitle::before {background: var(--secondary) !important;} #top .bg-default .faq-minimal .single_toggle .toggle_content {background: #fff !important;} /*--- Popups ---*/ .pum-theme-lightbox .pum-container {border: 1px solid #ddd !important; box-shadow: 0 2px 2px rgba(0,0,0,0.2) !important;} .pum-container .popmake-content .flex.one-third {display: flex; gap: 20px;} .pum-container .popmake-content .flex.one-third img {width: 200px;flex-basis: 140px; height: 200px; } .pum-container .popmake-content .flex.one-third .text {width: calc(100% - 220px);} /*NEW BASE STYLES*/ /*--- SLIDER ---*/ /*HERO*/ #top .hero .container {padding: 0 20px;} #top .hero .container .content {padding: 20px 0 60px;} #top .hero .avia-slideshow {border-radius: 20px;} #top .hero .avia-slideshow .av-slideshow-caption .avia-caption-title, #top .hero .avia-slideshow .av-slideshow-caption p {background: transparent !important;} #top .hero .avia-slideshow .av-slideshow-caption::before {content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: linear-gradient(to top,rgba(0,0,0,0.8) 0,rgba(0,0,0,0) 100%) center center no-repeat !important; z-index: -1;} #top .hero .avia-slideshow .av-slideshow-caption {top: 0; left: 0; width: 100%; height: 100%; align-content: end;} #top .hero .avia-slideshow .av-slideshow-caption h2 {text-align: center; display: block; color: var(--white); font-weight: bold !important; padding: 0 2em 15px;} #top .hero .avia-slideshow .avia-caption-content {text-align: center; color: var(--white); padding: 0 4em;} #top .hero .avia-slideshow .avia-caption-content small {color:var(--white);} #top .hero .avia-slideshow .avia-caption-content .badge {position: absolute; bottom: 19em; left: 50%; transform: translateX(-50%); background: var(--secondary); padding: 8px 12px; border-radius: 50px; color: var(--white); width: max-content;} #top .hero .avia-slideshow .avia-caption-content .button-liv {display: block; text-align: center; left: 50%; transform: translateX(-50%); position: relative; margin-bottom: 30px;} /*SECTION PADDING*/ #top .avia-section-large .content, #top .avia-section-large .sidebar {padding-top: 60px; padding-bottom: 60px;} #top .avia-section-huge .content, #top .avia-section-huge .sidebar {padding-top: 120px; padding-bottom: 120px;} /* TABS */ #top .tabs {width: 100%; margin-top: 30px;} #top .tabs .tab-buttons {display: flex; justify-content: space-between; width: max-content; background: var(--white); padding: 6px; border-radius: 50px;} #top .tabs .tab-buttons .tab-button {flex: 1; padding: 8px 20px; border: none; background: var(--white); cursor: pointer; transition: background 0.3s ease, color 0.3s ease; border-radius: 50px;} #top .tabs .tab-buttons .tab-button.active {background: var(--secondary); color: var(--white); transition: background 0.3s ease, color 0.3s ease;} #top .tabs .tab-buttons .tab-button.active:hover {background: var(--secondary);} #top .tabs .tab-buttons .tab-button:hover {background:var(--default); transition: background 0.3s ease, color 0.3s ease;} #top .tabs .tab-content .tab-panel {display: none;} #top .tabs .tab-content .tab-panel.active {display:block} /*--- CARDS ---*/ #top .cards.wrap {display: flex; flex-direction: row; flex-wrap: nowrap; gap: 20px; position: relative; width: calc(100vw + 210px); left: -20vw; padding: 60px 0 10px 20vw; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-behavior: smooth;} #top .cards.wrap::-webkit-scrollbar {display: none;} #top .cards.wrap section {flex: 0 0 25%; width: 25%; max-width: 400px; min-width: 380px; min-height: 500px; border-radius: 20px; overflow: hidden; box-shadow: 0 1px 8px 1px rgba(0,0,0,0.1); contain: content;} #top .cards.wrap section:last-child {margin-right: 50px;} #top .cards.wrap section img {position: absolute; top: 0; object-fit: cover; max-width: 400px; height: 100%; border-radius: 20px; z-index: -1;} #top .cards.wrap section .content {padding: 20px;} #top .cards.wrap section .content .subline, #top .cards.wrap section .content h3 {color:var(--white) !important; word-break: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;} #top .cards.wrap section .content::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom,rgba(0,0,0,0.6) 0,rgba(0,0,0,0.1) 100%) center center no-repeat !important; z-index: -1;} /*Card - Prices*/ #top .cards.wrap .card.price {min-height: 600px;} #top .cards.wrap .card.price .content {padding: 60px 20px 20px; text-align: center;} #top .cards.wrap .card.price .content::before {background: none !important;} #top .cards.wrap .card.price .content .no-list {list-style-type: none; margin: 40px 0 60px;} #top .cards.wrap .card.price .content .no-list li {margin-left: 0; padding: 10px 15px;} #top .cards.wrap .card.price .content h3 + .subline {margin-top: 20px;} #top .cards.wrap .card.price .content h3 {margin: 0; padding: 10px 0 0 0;} #top .cards.wrap .card.price .content h3, #top .cards.wrap .card.price .content .subline {color:var(--black) !important} #top .cards.wrap .card.price .content .no-list + h3 {position: relative; left: 50%; transform: translateX(-50%);} #top .cards.wrap .card.price .content .no-list + .button-liv {position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);} /*Card - Colors*/ #top .cards.wrap .card.price.primary {background: var(--secondary);} #top .cards.wrap .card.price.primary .content .no-list, #top .cards.wrap .card.price.primary .content h3, #top .cards.wrap .card.price.primary .content .subline {color: var(--white) !important;} /*Card - Badges*/ #top .cards.wrap .card .content .badge {position: absolute; width: max-content; top: 20px; left: 50%; transform: translateX(-50%); text-align: center; padding: 5px 12px; border-radius: 10px; font-size: 12px; z-index: 10;} #top .cards.wrap .card .content .badge {background: var(--secondary); color: var(--white);} #top .cards.wrap .card.primary .content .badge {background: var(--white); color: var(--black);} /*Card - USP*/ #top .cards.wrap .card.usp {min-height: 200px;} #top .cards.wrap .card.usp .icon {padding: 20px 20px 0 20px;} #top .cards.wrap .card.usp .icon img {position: initial; top: initial; object-fit: initial; border-radius: 0; z-index: 1;} #top .cards.wrap .card.usp .content {padding: 0 20px 40px 20px;} #top .cards.wrap .card.usp .content::before {background: none !important;} #top .cards.wrap .card.usp .content h5 {margin-bottom: 10px;} /*Card - Team*/ #top .cards.wrap .card.team img {width: 400px;} #top .cards.wrap .card.team .content::before {background: linear-gradient(to top,rgba(0,0,0,0.4) 0,rgba(0,0,0,0) 100%) center center no-repeat !important;} #top .cards.wrap .card.team .content .subline {position: absolute; bottom: 55px;} #top .cards.wrap .card.team .content h5 {position: absolute; bottom: 20px; color: var(--white);} /*Card - Reviews*/ #top .cards.wrap .card.review {flex: 0 0 33.3333333%; width: 33.3333333%; max-width: 600px; min-height: 400px;} #top .cards.wrap .card.review img {width: 100%; max-width: 600px;} #top .cards.wrap .card.review .content::before {background: linear-gradient(to top,rgba(0,0,0,0.4) 0,rgba(0,0,0,0) 100%) center center no-repeat !important;} #top .cards.wrap .card.review .content .body {position: absolute; bottom: 55px; color:var(--white)} #top .cards.wrap .card.review .content h5 {position: absolute; bottom: 20px; color: var(--white);} /*Card - Employer*/ #top .cards.wrap .card.employer .content {height: calc(100% - 40px); align-content: end;} #top .cards.wrap .card.employer .content::before {background: linear-gradient(to top,rgba(0,0,0,0.9) 0,rgba(0,0,0,0.1) 100%) center center no-repeat !important;} /*Card - Jobs*/ #top .cards.wrap .card.job {min-height: 600px; background: #fff;} #top .cards.wrap .card.job .content {padding: 60px 20px 20px; text-align: left;} #top .cards.wrap .card.job .content::before {background: none !important;} #top .cards.wrap .card.job .content .job-title + .subline {margin-top: 20px;} #top .cards.wrap .card.job .content .job-title {margin: 0; padding: 10px 0 0 0;} #top .cards.wrap .card.job .content .job-title, #top .cards.wrap .card.job .content .subline {color:var(--black) !important} #top .cards.wrap .card.job .job-meta { margin: 20px 0;} /*Card - Scroll Buttons*/ #top .scroll-buttons {display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px;} #top .scroll-buttons button {padding: 15px; font-size: 18px; background: #ebebeb; color: var(--black); border: none; border-radius: 50%; cursor: pointer; transition: background 0.3s ease;} #top .scroll-buttons button:hover {background: var(--secondary); color: var(--white); transition: background 0.3s ease;} #top .scroll-buttons .fa-angle-left, #top .scroll-buttons .fa-angle-right {font-weight: 900 !important;} #top .cards-container.three .scroll-buttons {display: none !important;} /*--- TEXT-IMAGE 50/50 ---*/ #top .text-image-50-50 {display: flex; flex-direction: row; flex-wrap: wrap; gap: 120px; align-content: center; align-items: center; background: var(--default); padding: 80px; border-radius: 20px; margin-top: 60px; transition: scale 0.3s ease;} .text-image-50-50:hover {scale: 1.01; transition: scale 0.3s ease;} #top .text-image-50-50 .content {flex: 0 0 calc(50% - 60px); padding: 0 !important;} #top .text-image-50-50 .content img {min-height: 400px; object-fit: cover; border-radius: 20px;} /*--- TEXT-IMAGE 50/100 ---*/ #top .text-image-50-100 {background: var(--white); padding: 80px; border-radius: 20px; margin-top: 60px; overflow: hidden; min-height: 500px; position: relative; display: flex; flex-direction: row; align-items: center;} #top .text-image-50-100 .content.text {padding: 0 !important; width: 40%; z-index: 2 !important; position: relative;} #top .text-image-50-100 .content.text h3 {color: var(--white) !important} #top .text-image-50-100 .content.img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; border-radius: 20px; overflow: hidden; padding: 0 !important;} #top .text-image-50-100 .content.img img {object-fit: cover; width: 100%; height: 100%;} #top .text-image-50-100 .content.img::after {content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: rgba(0,0,0,0.4);} /*GENERAL FLEX CONTAINER*/ #top .flex.col-3 {display: flex; flex-direction: row; flex-wrap: wrap; gap: 30px; justify-content: space-evenly;} #top .flex.col-3 div {flex: 0 0 30%; padding: 0 20px;} /*--- COURSE TABLE ---*/ .classes-table {margin: 60px 0 !important; display: block !important; border-radius: 20px; background: transparent; overflow: hidden; box-shadow: 0 1px 8px 1px rgba(0,0,0,0.1);} .classes-table * {background: transparent !important;} .classes-table table tr {padding: 10px !important; display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: flex-start; width: 1400px; background: var(--default) !important; gap: 10px;} .classes-table table .avia-heading-row {background: var(--secondary) !important; border-radius: 20px 20px 0 0; overflow: hidden;} .classes-table table .avia-heading-row th {color: var(--white) !important;} .classes-table table tr th, .classes-table table tr td {flex: 1 0 220px; background: transparent !important; border: 0;} .classes-table table tr:last-child {border-radius: 0 0 20px 20px;} .classes-table table tr td {padding: 20px !important; background: var(--white) !important; border-radius: 20px;} .classes-table table tr td:first-child {background: transparent !important; align-content: center; align-items: center; font-weight: 600;} .classes-table table tr:nth-child(2) td:nth-child(3), .classes-table table tr:nth-child(2) td:nth-child(4), .classes-table table tr:nth-child(3) td:nth-child(4), .classes-table table tr:nth-child(4) td:nth-child(4), .classes-table table tr:nth-child(5) td:nth-child(5), .classes-table table tr:nth-child(5) td:nth-child(6), .classes-table table tr:nth-child(6) td:nth-child(5), .classes-table table tr:nth-child(6) td:nth-child(6), .classes-table table tr:nth-child(7) td:nth-child(2), .classes-table table tr:nth-child(7) td:nth-child(3), .classes-table table tr:nth-child(7) td:nth-child(5), .classes-table table tr:nth-child(7) td:nth-child(6), .classes-table table tr:nth-child(8) td:nth-child(2), .classes-table table tr:nth-child(8) td:nth-child(3), .classes-table table tr:nth-child(8) td:nth-child(5), .classes-table table tr:nth-child(8) td:nth-child(6) {background: transparent !important;} /*--- ACCORDION-IMAGE 40/60 ---*/ #top .accordion-image-40-60 {display: flex; max-width: 100%; margin: auto; gap: 60px; padding: 80px; background: var(--white); border-radius: 20px; margin-top: 60px; align-content: center; align-items: center; flex-wrap: wrap;} #top .accordion-image-40-60 .accordion {flex:1 0 40%; display: flex; flex-direction: column;} #top .accordion-image-40-60 .accordion .accordion-item {border-bottom: 2px solid #ddd; transition: 0.3s ease-in-out;} #top .accordion-image-40-60 .accordion .accordion-item:last-child {border-bottom: 0;} #top .accordion-image-40-60 .accordion .accordion-item .accordion-header {color: var(--black); padding: 15px 0; cursor: pointer; transition: background 0.3s ease;} #top .accordion-image-40-60 .accordion .accordion-item .accordion-header::after {content: '\f105'; font: var(--fa-font-solid); position: relative; position: relative; float: right; top: 0px;} #top .accordion-image-40-60 .accordion .accordion-item .accordion-content {display: none; font-size: 16px; font-weight: 300; padding: 15px 0;} #top .accordion-image-40-60 .accordion .accordion-item.active .accordion-header::after { transform: rotate(90deg); transition: 0.3s ease-in-out;} #top .accordion-image-40-60 .accordion .accordion-item.active .accordion-content {display: block;} #top .accordion-image-40-60 .image-container {flex: 1 0 calc(60% - 80px); border-radius: 20px; overflow: hidden;} #top .accordion-image-40-60 .image-container img { width: 100%; transition: opacity 0.5s ease; height:500px; object-fit: cover;} /* IMAGE SECTIONS*/ #top .bg-image-left .container {margin: 0 auto 0 0; padding: 0;max-width: 85vw;} #top .bg-image-right .container {margin: 0 0 0 auto; padding: 0;max-width: 85vw;} #top .bg-image-left .container .hr {height: 50vh !important;} /* MODAL */ #top .modal {display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6);backdrop-filter: blur(2px);} #top .modal .modal-content {background: #fff; box-shadow: 0 0 5px 0 rgba(0,0,0,.2); margin: auto; padding: 35px 20px 25px; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); max-width: 90vw; width:800px; height: auto; max-height: 90vh; overflow-y: auto; overflow-x: auto; z-index: 1000; box-sizing: border-box; border-radius: 20px; border: 0;} #top .modal .close {position: absolute;top: 10px;right: 15px;font-size: 20px;cursor: pointer;} /* CONTACT FORM */ /* GENERAL */ #top .kontakt-form .form-section {background: var(--default); padding: 5px 15px; margin-bottom: 10px; border-radius: 5px;} #top .kontakt-form > div::after {content:''; clear:both; display:table} #top .kontakt-form input, #top .kontakt-form textarea, #top .kontakt-form select {font-family:'Poppins',sans-serif !important; font-size:16px; line-height:20px; font-weight:400; border-top-left-radius:5px; border-top-right-radius:5px; border:1px solid #ebebeb !important; border-bottom:2px solid #ebebeb !important; background-color:#fff; height:42px; padding:8px 12px; color:#000000; margin:0 0 10px} #top .kontakt-form textarea {resize:vertical; overflow:auto; height:120px} #top .kontakt-form input[disabled=disabled], #top .kontakt-form textarea[disabled=disabled], #top .kontakt-form select[disabled=disabled] {background-color:#ebebeb; border-color:#ebebeb !important; color:#727271} #top .kontakt-form input:hover, #top .kontakt-form textarea:hover, #top .kontakt-form select:hover {-webkit-box-shadow:none; box-shadow:none} #top .kontakt-form input:focus, #top .kontakt-form textarea:focus, #top .kontakt-form select:focus {border-bottom-color:var(--secondary) !important; -webkit-box-shadow:0 10px 20px rgba(0,0,0,.05), 0 5px 10px rgba(0,0,0,.05); box-shadow:0 10px 20px rgba(0,0,0,.05), 0 5px 10px rgba(0,0,0,.05)} #top .kontakt-form .wpcf7-date {width: 100%;} #top .kontakt-form .wpcf7-acceptance .wpcf7-list-item-label {padding:5px 20px 5px 40px; display:inline-block; cursor:pointer; position:relative; color:#000000 !important; font-size:16px !important; line-height:24px !important} #top .kontakt-form button[type=submit], #top .kontakt-form input[type=submit] {font-family:'Poppins',sans-serif !important; height:auto; border:0 !important; font-weight:500; background:transparent; width:100%; font-size:18px; line-height:26px; padding:0; text-align:center} #top .kontakt-form .button-liv {position: absolute;right: 0; bottom: 26px;} #top .kontakt-form .button-liv p {margin: 0; color: var(--white) !important; line-height: 30px; color: var(--white);} #top .kontakt-form .button-liv p input {margin: 0 !important; float: none !important; display: inline-block !important; width: calc(100% - 50px) !important; padding: 8px 22px !important; color:var(--white);} #top .kontakt-form .button-liv p input + .wpcf7-spinner { margin: 0 0 0 24px;} #top .kontakt-form input::-webkit-input-placeholder {color:#727271} #top .kontakt-form input::-moz-placeholder {color:#727271} #top .kontakt-form input:-ms-input-placeholder {color:#727271} #top .kontakt-form input::-ms-input-placeholder {color:#727271} #top .kontakt-form input::placeholder {color:#727271} #top .kontakt-form input::-moz-placeholder {color:#727271} #top .kontakt-form input::-webkit-input-placeholder {color:#727271} #top .kontakt-form input:-ms-input-placeholder {color:#727271} #top .kontakt-form textarea::-webkit-input-placeholder {color:#727271} #top .kontakt-form textarea::-moz-placeholder {color:#727271} #top .kontakt-form textarea:-ms-input-placeholder {color:#727271} #top .kontakt-form textarea::-ms-input-placeholder {color:#727271} #top .kontakt-form textarea::placeholder {color:#727271} #top .kontakt-form textarea::-moz-placeholder {color:#727271} #top .kontakt-form textarea::-webkit-input-placeholder {color:#727271} #top .kontakt-form textarea:-ms-input-placeholder {color:#727271} #top .kontakt-form input::-webkit-input-placeholder {color:#727271} #top .kontakt-form input::-moz-placeholder {color:#727271} #top .kontakt-form input:-ms-input-placeholder {color:#727271} #top .kontakt-form input::-ms-input-placeholder {color:#727271} #top .kontakt-form input::placeholder {color:#727271} #top .kontakt-form input::-moz-placeholder {color:#727271} #top .kontakt-form input::-webkit-input-placeholder {color:#727271} #top .kontakt-form input:-ms-input-placeholder {color:#727271} #top .kontakt-form .kontakt-full {clear:both; padding:15px 0} #top .kontakt-form .fileupload label {width:auto !important} #top .kontakt-form .wpcf7-validation-errors {width:400px; border:0 !important} #top .kontakt-form .wpcf7-not-valid, #top .kontakt-form .wpcf7-acceptance.wpcf7-not-valid input[type=checkbox] + span::after, #top .kontakt-form .wpcf7-checkbox.wpcf7-not-valid input[type=checkbox] + span::after, #top .kontakt-form .wpcf7-radio.wpcf7-not-valid input[type=radio] + span::after {border-color:#E6001E !important} #top .kontakt-form .wpcf7-acceptance.wpcf7-not-valid input[type=checkbox]:checked + span::after, #top .kontakt-form .wpcf7-checkbox.wpcf7-not-valid input[type=checkbox]:checked + span::after, #top .kontakt-form .wpcf7-radio.wpcf7-not-valid input[type=radio]:checked + span::after {border-color:#A8D17E !important} #top .kontakt-form .wpcf7-not-valid-tip {background: var(--primary);color: var(--white);padding: 5px 10px; font-weight: 500; font-size: 10px; margin: 10px 0 0px 0px !important; width: max-content; border-radius: 5px;} #top .kontakt-form .btn-text-hidden {display:none !important} #top .kontakt-form .btn-text-visible {display:inline !important} #top .wpcf7-response-output {padding:10px 0; margin:0; background:transparent; font-weight:500; font-size:12px; line-height:16px; color:#E6001E; float:left; border:0; clear:both} #top .kontakt-form :not(.cf7-card-group) label, #top .kontakt-form :not(.cf7-card-group) .wpcf7-list-item-label { font-size:16px; line-height:24px; font-weight:400 !important; display:inline-block} #top .kontakt-form :not(.cf7-card-group) label {width:100% !important; font-weight:500 !important} #top .kontakt-form :not(.cf7-card-group) .agb .wpcf7-list-item-label {margin:0 0 0 40px} #top .kontakt-form :not(.cf7-card-group) .wpcf7-list-item {margin:0 !important} #top .kontakt-form :not(.cf7-card-group) .wpcf7-checkbox .wpcf7-list-item-label, #top .kontakt-form :not(.cf7-card-group) .wpcf7-radio .wpcf7-list-item-label {padding:5px 20px 5px 40px; display:inline-block; cursor:pointer; position:relative; color:#000000 !important; font-size:16px !important; line-height:24px !important} #top .kontakt-form :not(.cf7-card-group) input[type=checkbox], #top .kontakt-form :not(.cf7-card-group) input[type=checkbox]:active, #top .kontakt-form :not(.cf7-card-group) input[type=checkbox]:checked {display:none !important} #top .kontakt-form :not(.cf7-card-group) input[type=checkbox] + span::after {content:''; font-size:14px; position:absolute; top:50%; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); left:0; color:#000000; background:#fff; border-radius:5px; border:2px solid #ebebeb; -webkit-box-shadow:none !important; box-shadow:none !important; outline:none; padding:9px; -webkit-box-sizing:border-box; box-sizing:border-box; height:30px; width:30px; display:inline-block !important; cursor:pointer} #top .kontakt-form :not(.cf7-card-group) input[type=checkbox]:active + span::after, #top .kontakt-form :not(.cf7-card-group) input[type=checkbox]:checked:active + span::after {border-color:#DBD9D9} #top .kontakt-form :not(.cf7-card-group) input[type=checkbox]:checked + span::after {background:#A8D17E !important; border-color:#A8D17E !important; -webkit-box-shadow:none; box-shadow:none; content: '\f00c'; font: var(--fa-font-solid); font-weight:600; font-size:16px; position:absolute; top:50%; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); left:0; color:#fff; line-height:28px; text-indent:5px; padding:0} #top .kontakt-form :not(.cf7-card-group) .wpcf7-form-control-wrap + label {display:block; white-space:nowrap; overflow:hidden; -o-text-overflow:ellipsis; text-overflow:ellipsis; margin:0 0 -15px; direction:rtl; text-align:center; background:var(--secondary); border:1px solid var(--secondary); padding:8px 22px; cursor:pointer; color:#fff !important; font-family:'Poppins',sans-serif !important; font-size:16px; line-height:20px; font-weight:normal} #top .kontakt-form :not(.cf7-card-group) .wpcf7-form-control-wrap + label:active, #top .kontakt-form :not(.cf7-card-group) .wpcf7-form-control-wrap + label:hover, #top .kontakt-form :not(.cf7-card-group) .wpcf7-form-control-wrap + label:focus, #top .kontakt-form :not(.cf7-card-group) .wpcf7-form-control-wrap + label:active span, #top .kontakt-form :not(.cf7-card-group) .wpcf7-form-control-wrap + label:hover span, #top .kontakt-form :not(.cf7-card-group) .wpcf7-form-control-wrap + label:focus span {background:#04141D; border-color:#04141D} #top .kontakt-form :not(.cf7-card-group) .wpcf7-form-control-wrap + label span {color:#fff; font-size:16px; line-height:20px; font-weight:400} #top .kontakt-form :not(.cf7-card-group) .wpcf7-form-control-wrap ~ small {text-align:center; display:block} /* RADIO/CHECKBOX CARDS */ #top .kontakt-form .cf7-card-group .wpcf7-radio, #top .kontakt-form .cf7-card-group .wpcf7-checkbox {display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding: 0 5px;} #top .kontakt-form .cf7-card-group .wpcf7-list-item {border-radius: 5px; cursor: pointer; text-align: center; font-size: 16px; font-weight: bold; transition: all 0.3s ease-in-out; box-shadow: 0 1px 8px 1px rgba(0,0,0,0.1);} #top .kontakt-form .cf7-card-group .wpcf7-list-item .wpcf7-list-item-label {background: var(--white); color: var(--black); border: 2px solid var(--white); border-radius: 5px;} #top .kontakt-form .cf7-card-group .wpcf7-list-item:hover .wpcf7-list-item-label, #top .kontakt-form .cf7-card-group .wpcf7-list-item .wpcf7-list-item-label:hover {background: var(--white); color: var(--black); border: 2px solid var(--green);} #top .kontakt-form .cf7-card-group .wpcf7-list-item label {height: 100%; display: flex; justify-content: center; align-items: center; width: 100%;} #top .kontakt-form .cf7-card-group .wpcf7-list-item-label {cursor: pointer; display: block; width: 100%; text-align: center; padding: 20px !important; height: 100%; align-content: center;} #top .kontakt-form .cf7-card-group .wpcf7-list-item input[type="radio"], #top .kontakt-form .cf7-card-group .wpcf7-list-item input[type="checkbox"] {position: absolute; opacity: 0;width: 0; height: 0 !important;} #top .kontakt-form .cf7-card-group .wpcf7-list-item input[type="radio"]:checked + .wpcf7-list-item-label, #top .kontakt-form .cf7-card-group .wpcf7-list-item input[type="checkbox"]:checked + .wpcf7-list-item-label {background: var(--green); color: var(--white) !important; border: 2px solid var(--green); border-radius: 5px;} #top .kontakt-form .cf7-card-group input[type="checkbox"] + span::after, #top .kontakt-form .cf7-card-group input[type="checkbox"]:checked + span::after {background: transparent !important; border-color: transparent !important;} /*Fragebogen*/ #top .kontakt-form.umfrage label, #top .kontakt-form.umfrage .wpcf7-list-item-label {padding:5px 0; font-size:16px; line-height:24px; font-weight:400 !important; display:inline-block} #top .kontakt-form.umfrage label {width:100% !important; font-weight:500 !important} #top .kontakt-form.umfrage .agb .wpcf7-list-item-label {margin:0 0 0 40px} #top .kontakt-form.umfrage .wpcf7-list-item {margin:0 !important} #top .kontakt-form.umfrage .wpcf7-checkbox .wpcf7-list-item-label, #top .kontakt-form.umfrage .wpcf7-radio .wpcf7-list-item-label {padding:5px 20px 5px 40px; display:inline-block; cursor:pointer; position:relative; color:#000000 !important; font-size:16px !important; line-height:24px !important} #top .kontakt-form.umfrage input[type=radio], #top .kontakt-form.umfrage input[type=radio]:active, #top .kontakt-form.umfrage input[type=radio]:checked {display:none !important} #top .kontakt-form.umfrage input[type=radio] + span::after {content:''; font-size:14px; position:absolute; top:50%; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); left:0; color:#000000; background:#fff; border-radius:100%; border:2px solid #ebebeb; -webkit-box-shadow:none !important; box-shadow:none !important; outline:none; padding:9px; -webkit-box-sizing:border-box; box-sizing:border-box; height:30px; width:30px; display:inline-block !important; cursor:pointer} #top .kontakt-form.umfrage input[type=radio]:active + span::after, #top .kontakt-form.umfrage input[type=radio]:checked:active + span::after {border-color:#DBD9D9} #top .kontakt-form.umfrage input[type=radio]:checked + span::after {background: #a8d17e !important; border-color: #a8d17e !important; -webkit-box-shadow:none; box-shadow:none; content:'\f111'; font-family:'Font Awesome 5 Free', sans-serif; font-weight: 600; font-size:14px; position:absolute; top:50%; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); color:#fff; line-height:25px; text-align:center; padding:0} #top .kontakt-form.umfrage .step-description {border-left:3px solid #f8f8f8; padding:10px 125px 10px 25px; margin:25px 0 50px; display:block; position:relative} #top .kontakt-form.umfrage .step-description::after {content:'\f30b'; font-family:'Font Awesome 5 Free', sans-serif; font-weight: 600; color:#f8f8f8; font-size:80px; position:absolute; right:0; top:50%; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%)} #top .kontakt-form.umfrage .form-row {background:#f8f8f8; border-radius:5px; padding:25px; margin:0 0 15px; position:relative} #top .kontakt-form.umfrage .form-row .checkbox-row {position:relative; padding:5px 0} #top .kontakt-form.umfrage .form-row .checkbox-row > div {position:absolute; right:0; top:0; min-width:75%} #top .kontakt-form.umfrage .form-row .checkbox-row > div .av_one_fourth {text-align:right; padding-right:5px} #top .kontakt-form.umfrage .form-row .checkbox-row > div > div {vertical-align:top; line-height:42px} #top .kontakt-form.umfrage .form-row .checkbox-row > div input {margin:0} #top .kontakt-form.umfrage .wpcf7-list-item {display:block} #top .kontakt-form.umfrage .wpcf7-form-control-wrap {margin-top: 20px;} #top .kontakt-form.umfrage #cf7mls-next-btn-cf7mls_step-1 {float: left;} /*Google Recaptcha*/ #top .grecaptcha-badge, .grecaptcha-badge {display: none !important;} /*Single Job Page*/ /* Layout */ #top .job-detail .job-layout{ display:flex; gap:40px; align-items:flex-start; } #top .job-detail .job-main{ flex: 1 1 auto; min-width: 0; } #top .job-detail .job-aside{ flex: 0 0 340px; } /* Hero */ #top .job-hero{ position: relative; border-radius: 20px; overflow: hidden; margin-top: 20px; } #top .job-hero .container{ position: relative; z-index: 2; } #top .job-hero--hasimg .job-hero-inner{ color: var(--white); } #top .job-hero--hasimg .job-hero-inner h1, #top .job-hero--hasimg .job-hero-inner p{ color: var(--white) !important; } #top .job-hero-img{ position:absolute; inset:0; z-index:1; } #top .job-hero-img img{ width:100%; height:100%; object-fit:cover; } #top .job-hero--hasimg::after{ content:''; position:absolute; inset:0; background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 100%); z-index:1; } /* Meta grid */ #top .job-meta-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin: 25px 0 10px; } #top .job-meta-item{ background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; padding: 12px; } #top .job-hero:not(.job-hero--hasimg) .job-meta-item{ background: var(--default); border-color: #ebebeb; } #top .job-meta-label{ display:block; font-size:12px; opacity: .85; } #top .job-meta-value{ display:block; font-weight: 700; margin-top: 4px; } /* Sections */ #top .job-section{ background: var(--white); border-radius: 20px; padding: 30px; margin: 0 0 20px; box-shadow: 0 1px 8px 1px rgba(0,0,0,0.06); } #top .job-wysiwyg ul{ margin-left: 18px; } #top .job-wysiwyg li{ margin: 8px 0; } /* Aside apply box */ #top .job-apply-box{ position: sticky; top: 120px; background: var(--default); border-radius: 20px; padding: 24px; box-shadow: 0 1px 8px 1px rgba(0,0,0,0.06); } #top .job-apply-box__meta{ display:flex; flex-direction: column; gap: 10px; margin: 15px 0 20px; } #top .job-mini{ display:flex; justify-content: space-between; gap: 10px; background: var(--white); border-radius: 12px; padding: 10px 12px; } #top .job-mini span{ font-size: 12px; opacity: .85; } #top .job-mini strong{ font-weight: 700; } /*--- RESPONSIVE DESIGN---*/ @media only screen and (min-width: 1281px ) { /*CARDS*/ #top .cards.wrap section:last-child {margin-right: 10vw;} } @media only screen and ( max-width: 989px) { .responsive #top #wrap_all #main {padding-top: 0px !important;} .responsive #header_meta {display: none;} /*Headlines*/ h1, .hl-xl {font-size:2.2em; line-height:1.3;} h2, .hl-l {font-size:1.8em; line-height:1.3;} h3, .hl-m {font-size:1.6em; line-height:1.3} h4, .hl-s {font-size:1.4em; line-height:1.3;} h5, .hl-xs {font-size:1.2em; line-height:1.3} h6, .hl-xxs {font-size:1em; line-height:1.3} /*--- DISPLAY STYLES ---*/ .padding-40-mobile {padding-top:40px !important} #top .mobile-hidden {display:block !important} #top .desktop-hidden {display:none !important} /*--- MENU ---*/ .responsive #top .button-menu a.open-modal { top: initial; height: initial !important; line-height: 18px !important; transform: none; position: initial; margin: 0 20px; padding: 15px !important; text-align: center !important; font-weight: 700;} .responsive #top .button-menu a.open-modal:hover, .responsive #top .button-menu a.open-modal:focus, .responsive #top .button-menu a.open-modal:active {background:var(--white) !important;; color: var(--secondary) !important;;} /*--- COOKIE BANNER ---*/ #top .cmplz-cookiebanner .cmplz-header {display: block !important; transform: translateX(0); -webkit-transform: translateX(0); width: 100% !important; text-align: center;} #top .cmplz-cookiebanner .cmplz-header::before {content: ''; background: url(https://go-livit.de/wp-content/uploads/icons/cookies.svg); background-position: center; background-size: contain; background-repeat: no-repeat; width: 150px !important; height: 150px !important; position: relative; top: 0; left: calc(50% - 75px); display: block; margin-bottom: 30px; transform: translateX(0); -webkit-transform: translateX(0);} #top .cmplz-cookiebanner .cmplz-header .cmplz-title {display: block !important;} #top .cmplz-cookiebanner .cmplz-body {grid-column-start: 1 !important; grid-row-start: 2 !important; transform: translateX(0); -webkit-transform: translateX(0);width: 100% !important; min-width: 70% !important; max-width: 100% !important;text-align: center;} #top .cmplz-cookiebanner .cmplz-buttons {grid-column-start: 1 !important; grid-row-start: 3 !important; transform: translateX(0); -webkit-transform: translateX(0); width: 100% !important; min-width: 100% !important; max-width: 100% !important;} #top .cmplz-cookiebanner .cmplz-documents {grid-column-start: 1 !important; grid-row-start: 4 !important; justify-content: center !important; transform: translateX(0); -webkit-transform: translateX(0); width: 100% !important;} /*--- FAQ - Accordion---*/ #top .faq-minimal {max-width: 100% !important; margin: auto;} #top .faq-minimal .single_toggle .toggler {padding:10px 30px 10px 40px !important; min-height: 65px;} #top .faq-minimal .single_toggle .toggler::before {position: absolute; left: 0px; transform: translateY(-50%); top: 50%;} #top .faq-minimal .single_toggle .toggler.activeTitle::before {top:50px;} /*--- Popups ---*/ .pum-theme-lightbox .pum-container {padding: 10px;} .pum-container .popmake-content .flex.one-third {display: flex; gap: 20px;flex-direction: column;} .pum-container .popmake-content .flex.one-third img {width: 150px; height: auto;} .pum-container .popmake-content .flex.one-third .text {width: 100%;} /*SECTION PADDING*/ .responsive #top .avia-section-large .content, .responsive #top .avia-section-large .sidebar {padding-top: 30px; padding-bottom: 30px;} .responsive #top .avia-section-huge .content, .responsive #top .avia-section-huge .sidebar {padding-top: 60px; padding-bottom: 60px;} /*LINKS*/ .responsive #top .links .content-link {display: block; text-align: left;} .responsive #top .links .content-link + .content-link {margin-left:0px !important;} /*HERO*/ .responsive #top .hero .avia-slideshow .avia-slideshow-inner {min-height: 300px;} .responsive #top .hero .avia-slideshow li img {object-fit: cover;min-height: 300px;} .responsive #top .hero .avia-slideshow .av-slideshow-caption h2 {padding: 0 10px; font-size: 1.2em;} .responsive #top .hero .avia-slideshow .avia-caption-content {padding:0 10px;} .responsive #top .hero .avia-slideshow .avia-caption-content .badge {display: none;} .responsive #top .hero .avia-slideshow .avia-caption-content small {display: none;} .responsive #top .hero .avia-slideshow .avia-caption-content .button-liv {margin: 10px 0;} .responsive #top .hero .avia-slideshow .avia-caption-content .button-liv a {text-transform: none; text-decoration: none;} /*Text-Image 50/50*/ .responsive #top .text-image-50-50 {gap: 20px; padding: 20px; margin-top: 20px;} .responsive #top .text-image-50-50 .content {flex: 1 0 100%;} .responsive #top .text-image-50-50 .content.text {order: 2; text-align: center;} .responsive #top .text-image-50-50 .content img {min-height: 200px;} /*Text-Image 50/100*/ .responsive #top .text-image-50-100 {padding: 40px;} .responsive #top .text-image-50-100 .content.text {width: 80%; min-width: 300px;} /*Cards*/ .responsive #top .cards.wrap {padding: 20px 0 10px 20vw;} .responsive #top .cards.wrap section {max-width: 370px; min-width: 340px;} .responsive #top .cards.wrap section:last-child {margin-right: 10rem;} /*--- ACCORDION-IMAGE 40/60 ---*/ #top .accordion-image-40-60 {gap: 20px; padding: 20px;} #top .accordion-image-40-60 .accordion {flex: 1 0 100%; order: 2;} #top .accordion-image-40-60 .image-container {flex: 1 0 100%; order: 1;} #top .accordion-image-40-60 .image-container img {height:300px;} /*Scroll Buttons*/ #top .cards-container.three .scroll-buttons {display: flex !important;} /*--- KONTAKT FORM ---*/ .responsive #top .kontakt-form .button-liv {position: relative; bottom: 0; left: 50%; transform: translateX(-50%);} /* RADIO/CHECKBOX CARDS */ .responsive #top .kontakt-form .cf7-card-group .wpcf7-radio, .responsive #top .kontakt-form .cf7-card-group .wpcf7-checkbox {grid-template-columns: 1fr 1fr;} /*Single Job Page*/ #top .job-detail .job-layout{ flex-direction: column; gap: 20px; } #top .job-detail .job-aside{ flex: 1 1 auto; width: 100%; } #top .job-meta-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } #top .job-apply-box{ position: relative; top: auto; } } @media only screen and ( max-width: 768px ) { /*--- FOOTER ---*/ #footer .widget {margin: 0;} #footer .widgettitle, #footer .textwidget {text-align:center; } #footer .footer-logo {float: none; width: 50% !important; position: relative; background: 50% 50%;} /*--- Web - Überarbeitet ---*/ .responsive #top #wrap_all .container { width: 90%; max-width: 90%;} .responsive #top .bg-primary {background: linear-gradient(45deg, var(--primary), var(--secondary)) !important} /*--- KONTAKT FORM ---*/ /* RADIO/CHECKBOX CARDS */ .responsive #top .kontakt-form .cf7-card-group .wpcf7-radio, .responsive #top .kontakt-form .cf7-card-group .wpcf7-checkbox {grid-template-columns: 1fr;} } @media only screen and ( max-width: 500px ) { /*Cards*/ .responsive #top .cards.wrap section {max-width: calc(75% - 50px); min-width: calc(75% - 50px); flex: 1 0 calc(75% - 50px); width: calc(75% - 50px);} .responsive #top .cards.wrap section:last-child {margin-right: 50vw;} /*Text-Image 50/50*/ .responsive #top .text-image-50-100 {padding: 30px; min-height: 400px;} .responsive #top .text-image-50-100 .content.text {width: 80%; min-width: 260px;} /*GENERAL FLEX CONTAINER*/ .responsive #top .flex.col-3 {gap: 20px;} .responsive #top .flex.col-3 div {flex: 0 0 100%; padding: 0 60px;} /*IMAGE SECTIONS*/ .responsive #top .bg-image-left .container {width: 100%; max-width: 100%; padding: 0 !important; margin: 0 !important;} }