/* Theme Name: Enfold Child Description: A Child Theme for the Enfold Wordpress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating wil be much easier then. Version: 1.0 Author: Kriesi Author URI: http://www.kriesi.at Template: enfold */ /*Add your own styles here:*/ /*---------------------------------------- // FONT-RENDERING for browsers – text-rendering: optimize Legibility !important; can cause Internet Explorer to render some thicker fonts as bold when they should render as normal weight //--------------------------------------*/ body #wrap_all { -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; /* SAFARI */ font-smoothing: antialiased !important; } /*---------------------------------------- // SCROLL to top BUTTON //--------------------------------------*/ #scroll-top-link { display: none; } /*---------------------------------------- // IMPROVISED HEADER/LOGO AREA //--------------------------------------*/ /* hide regular logo */ .logo svg { display: none !important; } /* DESKTOP – hide logo container – was unnecessary empty space */ @media only screen and (min-width: 990px) { .av-logo-container { display: none !important; } } /* MOBILE – logo container – necessary – because burger menu inside */ @media only screen and (max-width: 989px) { .responsive #top #wrap_all .av-logo-container { height: 50px !important; } } /* MOBILE – container not necessary anymore */ .logo.avia-svg-logo { display: none !important; } /* TABLET – fixed header */ @media only screen and (min-width: 768px) and (max-width: 989px) { .responsive.html_mobile_menu_tablet #top #wrap_all #header { position: fixed; } /* logo-widget "subheader" – distance to top – necessary if fixed header */ #custom_html-2.widget_text.widget.clearfix.widget_custom_html { margin-top: 50px; } } /* SMARTPHONE – fixed header */ @media only screen and (min-width: 530px) and (max-width: 767px) { .responsive #top #main { margin-top: 50px; } .responsive #top #wrap_all #header { position: fixed; } } /* DESKTOP – bg-color menu */ .av_minimal_header #header_main_alternate { background-color: rgba(247, 247, 247, 1); /* box-shadow: 0 14px 35px rgba(255,255,255,1) !important; */ /* border-bottom: 4px solid #ffffff !important; */ } /* MOBILE – bg-color menu */ .av_minimal_header #header_main, .av_minimal_header #header_meta { background-color: rgba(247, 247, 247, 1); } /* LOGO-WIDGET – logo placed everywhere as image/svg – SIZE */ .hp-subheader img, .hp-subheader svg { max-height: 180px; width:auto; /* display: block; */ margin-left: auto; margin-right: auto; } @media only screen and (max-width: 479px) { .hp-subheader img, .hp-subheader svg { max-height: 170px; } } /* Remove animation on hover (circle and arrows) from images-links */ .hp-subheader .image-overlay { display: none !important; opacity: 0 !important; } .avia-image-container.avia-align-center.hp-subheader { margin: 0; background-color: #ffffff; } /* necessary for logo visibility, size, position and space between logo-container an page-content – for whatever reason */ .hp-subheader.avia-image-container.avia-align-center .avia-image-container-inner { display: block; } /* LOGO-WIDGET "subheader" */ #custom_html-2.widget_text.widget.clearfix.widget_custom_html { padding: 0; } /* DESKTOP – there was too much space to the top-menu – only on desktop view */ @media only screen and (min-width: 990px) { .html_header_top.html_header_sticky #top #wrap_all #main { padding-top: 50px !important; } } /*---------------------------------------- // BURGER MENU – bring burger container to header/logo-container-height 50px //--------------------------------------*/ /* SMARTPHONE */ @media only screen and (max-width: 767px) { .responsive #top #wrap_all .main_menu { height: 50px; } .responsive #top #header_main > .container .main_menu .av-main-nav > li > a, .responsive #top #wrap_all .av-logo-container { height: 50px; line-height: 50px; } } /* TABLET */ @media only screen and (min-width: 768px) and (max-width: 989px) { .responsive.html_mobile_menu_tablet #top #header_main > .container .main_menu .av-main-nav > li > a, .responsive.html_mobile_menu_tablet #top #wrap_all .av-logo-container { height: 50px; line-height: 50px; } } /*---------------------------------------- // SMARTPHONE – logo area placed to bottom //--------------------------------------*/ @media only screen and (max-width: 529px) { .av-section-bottom-logo.header_color { display: none !important; } .responsive #header_main .main_menu { display: none !important; } .responsive #header_main_alternate { display: block; } .responsive #top #wrap_all #header_main_alternate .main_menu { display: block !important; position: fixed !important; bottom: 0; top: auto; background: rgba(247, 247, 247, 1); height: 50px; } /* SMARTPHONE – hide top menu bar */ .responsive #top #wrap_all .av-logo-container { display: none; } /* SMARTPHONE – bring page content to top */ .responsive #top #main { margin-top: 0; } /* Burger icon background – blurry for better visibility of close-X */ .av-burger-menu-main.menu-item-avia-special .av-hamburger { -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); padding-left:130px; padding-right:130px; height:50px; } /* position burger menu – vertical */ .html_header_top .av_bottom_nav_header #header_main_alternate .main_menu ul:first-child > li > a { line-height: 48px; } } /*---------------------------------------- // MENU BURGER – overlay – background / menu-points //--------------------------------------*/ /* background-color for overlay */ .av-burger-overlay-bg { opacity: 0.80; background: #ffffff; } /* blurry background */ .av-burger-overlay { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } /* color – close "X" from burger menu */ .av-burger-overlay-active #top .av-hamburger-inner, .av-burger-overlay-active #top .av-hamburger-inner::before, .av-burger-overlay-active #top .av-hamburger-inner::after { background-color: #5f5f5e; } /* Burger menu main links */ #top #wrap_all #header .av-burger-overlay #av-burger-menu-ul li a { color:#5f5f5e; font-family: 'HP-fonts-opensans', Helvetica, Arial, sans-serif; font-weight: 600; font-size: 25px; letter-spacing: 0.05em; } /* Burger menu main links – LOCK-ICON for INTRANET */ @media only screen and (max-width: 989px) { .hp-lock-menu .av-icon-char { font-size: 30px !important; } } /* Space between menu items */ .html_av-overlay-full #av-burger-menu-ul li { padding: 0.1em 0; } /* Login-ICON – burger menu @media only screen and (max-width: 989px) { .hp-icon-login-main-menu .av-icon-char { font-size: 27px !important; line-height: 30px !important; color: #7f7f7e; } } */ /* Active main menu links */ #top #wrap_all #header .av-burger-overlay #av-burger-menu-ul li.current-menu-item a { color:#005eaa; } /* HOVER color – main menu links */ #top #wrap_all #header .av-burger-overlay #av-burger-menu-ul li a:hover { color:#005eaa; opacity: 1 !important; } /* HOVER color – menu links – SMOOTH HOVER ANIMA for color */ #top #wrap_all #header .av-burger-overlay #av-burger-menu-ul li a { -webkit-transition: color 0.4s; /* For Safari 3.0 to 6.0 */ transition: color 0.4s; /* For modern browsers */ } /* Sub-menu links */ #top #wrap_all #header .av-burger-overlay #av-burger-menu-ul .sub-menu a { font-weight: 500; font-size: 15px; line-height: 1.65em; letter-spacing: 0.02em; color:#5f5f5e !important; } #top #wrap_all #header .av-burger-overlay #av-burger-menu-ul .sub-menu a:hover { color:#005eaa !important; } /* Sub-menu - active link */ #top #wrap_all #header .av-burger-overlay #av-burger-menu-ul .sub-menu .current-menu-item a { color:#005eaa !important; font-weight: 600 !important; letter-spacing: 0.015em; } /* Sub-menu – ARROW */ .html_av-submenu-hidden .av-submenu-indicator { display: inline-block; padding: 0 10px; font-size: 18px; opacity: 1; vertical-align: top; float: right; transition: all 0.2s ease-out; position: absolute; right: 60px; top: 50%; margin-top: -9px; height: 20px; line-height: 18px; } /*---------------------------------------- // MENUE – MAIN – DESKTOP //--------------------------------------*/ /* Space between menu-points */ .av-main-nav > li > a { padding: 0 15px; } /* Login-ICON – main menu @media only screen and (min-width: 990px) { .hp-icon-login-main-menu .av-icon-char { font-size: 19px !important; line-height: 19px !important; color: #7f7f7e; } } */ /*---------------------------------------- // MENUE – SUB – DESKTOP //--------------------------------------*/ /* Font - sub-menu */ #top #header #avia-menu .sub-menu li.menu-item a .avia-menu-text { letter-spacing: 0.02em; font-weight: 500; font-size: 15px; } /* make submenu TRANSPARENT */ .header_color .main_menu .menu ul li a { background: rgba(255, 255, 255, 0); } .header_color .main_menu ul ul { background: transparent; } /* hide shadow, make hg blurry */ .av-main-nav ul { width: auto !important; box-shadow: none !important; background: rgba(255, 255, 255, 0.8) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* defines the width – take first menu-item! */ #menu-item-872 { min-width: 300px !important; } /* hover bg-color bg für single sub-menu-points - SMOOTH color changing */ #top #wrap_all #header #avia-menu ul li:hover a { background: rgba(255, 255, 255, 0); -webkit-transition: color 0.3s; /* For Safari 3.0 to 6.0 */ transition: color 0.3s; /* For modern browsers */ } /* Main menu sublevel - active */ #top #wrap_all #header #avia-menu ul li.current-menu-item a .avia-menu-text { color:#005eaa; font-weight: 600 !important; letter-spacing: 0.015em !important; } /* Move single sublevel item to the right */ #top #header #avia-menu .sub-menu li.menu-item, #top #header #avia-menu .sub-menu li.menu-item a span.avia-menu-text { transition: all 0.4s cubic-bezier(.25,.8,.25,1); } #top #header #avia-menu .sub-menu li.menu-item:hover, #top #header #avia-menu .sub-menu li.menu-item a span.avia-menu-text:hover { transform: translate(10px,0px); } /*---------------------------------------- // WIDGET-header – ICONS – mail/telefon – BOTTOM //--------------------------------------*/ @media only screen and (min-width: 530px) { #hp-icon-mail-bottom-id, #hp-icon-phone-bottom-id { display: none; } } .hp-icon-mail-bottom { position: fixed !important; bottom: 8px; right: 35px; z-index:999 !important; color: #7f7f7e; } .hp-icon-phone-bottom { position: fixed !important; bottom: 9px; left: 38px; z-index:999 !important; color: #7f7f7e; } #custom_html-3 { background-color: rgba(10, 250, 60, 1); /*change 0 to make it visisible*/ } #custom_html-4 { background-color: rgba(230, 110, 2, 1); /*change 0 to make it visisible*/ } #custom_html-5 { background-color: rgba(230, 10, 250, 1); /*change 0 to make it visisible*/ } /* WORK-ARROUND to HIDE/ placed out of screen area... the WIDGETS-custom_html elements... created automatically by the widgets with top- and bottom-pading each with 30px */ .html_header_top.html_bottom_nav_header #header_main { top: -360px; /* 60px for each custom_html-3/4/5/6-fixed Icons-right-top-AUSBILDUNG/7?-fixed Icons-BOTTOM-menu-AUSBILDUNG/7-WhatsApp-Button */ } /* DESKTO – change size of HEADER... otherwise it will cover the widget logo */ .html_header_top.html_header_sticky #header { background-color: rgba(255, 255, 22, 0); /*change 0 to make it visisible*/ height:50px; } /* MOBILE – change size of HEADER... otherwise it will cover the widget logo */ @media only screen and (max-width: 989px) { .header_color .header_bg { background-color: rgba(233, 34, 77, 0); /*change 0 to make it visisible*/ height:50px; } #header { height:50px !important; } } /* SMARTPHONE – change size of header-widget... otherwise it will cover the widget logo */ @media only screen and (max-width: 529px) { .header_color .header_bg { background-color: rgba(233, 175, 77, 0); /*change 0 to make it visisible*/ height:0px; } #header { height:0px !important; } } /* otherwise menu items will covered by the bottom menu and is not scrollible */ .av-burger-overlay-inner { padding-top:50px; padding-bottom:50px; } .av-burger-overlay-bg { top: 0px !important; } .av-burger-overlay { top: 0px !important; } /* ?????????????????????????????????????? - bringt das was???? */ .av-burger-overlay-active { -webkit-overflow-scrolling: touch; overflow: hidden; } .responsive.av-burger-overlay-active { -webkit-overflow-scrolling: touch; overflow: hidden; } /*---------------------------------------- // FONTS //--------------------------------------*/ /* Cursor-Selection - highlight color */ ::selection { background: #5f5f5e; /* WebKit/Blink Browsers */ } ::-moz-selection { background: #5f5f5e; /* Gecko Browsers */ } p { letter-spacing: 0.015em !important; line-height: 1.65em; font-size: 17px; } /* H1 */ h1 { letter-spacing: 0.037em !important; } .hp-headline h1 { padding-bottom: 15px; } @media only screen and (max-width: 479px) { h1 { font-size: 33px; } .hp-headline h1 { padding-bottom: 10px; } } @media only screen and (min-width: 480px) { h1 { font-size: 37px; } } /* H2 */ h2 { letter-spacing: 0.06em !important; } @media only screen and (max-width: 479px) { h2 { font-size: 22px; } } @media only screen and (min-width: 480px) { h2 { font-size: 24px; } } /* STRONG */ .main_color .hp-copy strong { font-weight: 700; color: #5f5f5e !important; letter-spacing: 0.009em !important; } /*---------------------------------------- // FONTS – JOBS //--------------------------------------*/ /* Headline */ #hp-headline-jobs h1 { color: #005eaa; } /* Hyphens - auto */ @media only screen and (max-width: 479px) { #hp-headline-jobs h1 { -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } } #hp-sub-hd-jobs h3 { font-weight: 600; font-size: 22px; line-height: 1.45em; letter-spacing: 0.013em; padding-bottom: 17px; } @media only screen and (max-width: 479px) { #hp-sub-hd-jobs h3 { font-size: 20px; } } /*---------------------------------------- // FONTS – KONTAKT //--------------------------------------*/ .hp-hd-small-kontakt h2 { font-size: 24px; text-transform: none !important; } @media only screen and (max-width: 479px) { .hp-hd-small-kontakt h2 { font-size: 22px; } } /* BULLET - list */ #top .hp-copy ul { font-size: 17px; letter-spacing: 0.015em; line-height: 1.6em; Font-weight: 500; } /*---------------------------------------- // FONTS – FOOTER //--------------------------------------*/ .hp-footer-copy p{ letter-spacing: 0.02em !important; font-size: 12px !important; } .hp-footer-copy-2 p{ letter-spacing: 0.03em !important; font-size: 15px !important; } /* unvisited link */ .hp-footer-copy-2 a:link, .hp-footer-copy a:link { text-decoration: none !important; color: #5f5f5e; } /* visited link */ .hp-footer-copy-2 a:visited, .hp-footer-copy a:visited { text-decoration: none !important; color: #5f5f5e; } /* mouse over link */ .hp-footer-copy-2 a:hover, .hp-footer-copy a:hover{ text-decoration: none !important; color: #005eaa; } .hp-footer-copy-2 a:active, .hp-footer-copy a:active{ text-decoration: none !important; color: #5f5f5e; } /*---------------------------------------- // LINKS - hp-copy-block //--------------------------------------*/ /* unvisited link */ .hp-copy a:link { text-decoration: none !important; font-weight: 600; color: #005eaa; letter-spacing: 0.01em !important; } /* visited link */ .hp-copy a:visited { text-decoration: none !important; color: #005eaa; } /* mouse over link */ .hp-copy a:hover { text-decoration: none !important; color: #005eaa; } .hp-copy a:active { text-decoration: none !important; color: #005eaa; } /*---------------------------------------- // SLIDER - FULL WIDTH //--------------------------------------*/ /* No outline */ #top .avia-fullwidth-slider, #top .container_wrap { box-shadow: none; border: none; } /* Caption Title */ .hp-fullwidth-slider .av_slideshow_full .avia-caption-title { font-size: 65px !important; font-weight: 400 !important; font-style: normal; letter-spacing: 0.06em !important; text-align: center; /* text-shadow: 0px 0px 55px rgba(0, 0, 0, 0.7), 0px 0px 27px rgba(0, 0, 0, 0.4); */ text-shadow: 0px 0px 55px rgba(40, 58, 74, 0.8), 0px 0px 27px rgba(40, 58, 74, 0.5); } @media only screen and (max-width: 479px) { .hp-fullwidth-slider .av_slideshow_full .avia-caption-title { font-size: 29px !important; text-shadow: 0px 0px 50px rgba(0, 0, 0, 0.4), 0px 0px 30px rgba(0, 0, 0, 0.7), 0px 0px 12px rgba(0, 0, 0, 0.4); padding-bottom:6px; } .caption_bottom .slideshow_caption .slideshow_inner_caption { padding: 0; } } @media only screen and (max-width: 767px) and (min-width: 480px) { .hp-fullwidth-slider .av_slideshow_full .avia-caption-title { font-size: 33px !important; text-shadow: 0px 0px 55px rgba(0, 0, 0, 0.3), 0px 0px 35px rgba(0, 0, 0, 0.7), 0px 0px 14px rgba(0, 0, 0, 0.4); padding-bottom:6px; } .caption_bottom .slideshow_caption .slideshow_inner_caption { padding: 0; } } @media only screen and (max-width: 989px) and (min-width: 768px) { .hp-fullwidth-slider .av_slideshow_full .avia-caption-title { font-size: 55px !important; text-shadow: 0px 0px 50px rgba(0, 0, 0, 0.7), 0px 0px 25px rgba(0, 0, 0, 0.4); padding-bottom:6px; } .caption_bottom .slideshow_caption .slideshow_inner_caption { padding: 0; } } .avia_transform .av_slideshow_full .active-slide .avia-caption-title, .avia_transform .av_fullscreen .active-slide .avia-caption-title { animation: caption-top 1s 1 cubic-bezier(0.1, 0.1, 0.1, 1) !important; } .avia-slideshow-dots a { margin-right: 8px !important; } /*---------------------------------------- // 1/1 COLUMN - position to top for headlines and copy //--------------------------------------*/ @media only screen and (max-width: 479px) { .hp-column-hd-copy { margin-top: -16px !important; } } /*---------------------------------------- // COLOR SECTION – gray/white //--------------------------------------*/ .hp-color-section-gray { background-color: #f7f7f7; } .hp-color-section-white { background-color: #ffffff; } /*---------------------------------------- // BUTTONS - back... //--------------------------------------*/ /* Button - background, border... */ .hp-button-back a.avia-button { border-radius: 100px; border: 2px solid #005eaa !important; padding-top: 3px; padding-bottom: 4px; padding-right: 18px; padding-left: 20px; background: rgba(0,94,170,1); } /* Button - background on hover */ .hp-button-back a.avia-button:hover { background: rgba(0,94,170,1) !important; } /* Button - title */ .hp-button-back a.avia-button .avia_iconbox_title { font-size:17px; font-weight: 600; letter-spacing: 0.013em; top:-10px; color: #ffffff; /* text-transform: uppercase; */ padding-left: 0px; } /* Button-Icon - size, position... */ .hp-button-back .avia-button .avia_button_icon { font-size: 35px!important; line-height: 35px!important; color: #ffffff; left: -0.2em; } /*---------------------------------------- // NEWS - POSTS – for single entry //--------------------------------------*/ /* No left right navigation - on single posts */ #top .avia-post-nav { display: none; } /* COLOR-SECTION - post */ @media only screen and (min-width: 990px) { .hp-colorsection-filter-post.avia-section .av-parallax-inner { -webkit-filter: blur(6px); filter: blur(6px); } } /* IMAGES - single post */ .hp-post-image img { border-radius: 4px !important; } /* IMAGES - single post - always 100% width */ .hp-post-image.avia-image-container .avia-image-container-inner, .hp-post-image.avia-image-container img { width: 100%; } /* COLOR-SECTION */ /* Post container width */ @media only screen and (max-width: 989px) { #hp-section-container-width .container { width: 100% !important; min-width: 100%; padding: 0; margin: 0; } /* Post */ .hp-colorsection-filter-post.avia-section .av-parallax-inner { -webkit-filter: blur(60px); filter: blur(60px); } } /*---------------------------------------- // NEWS – POSTS - blog view //--------------------------------------*/ /* Posts shown in one coloumn */ @media only screen and (max-width: 800px) { .responsive #top #wrap_all .slide-entry { width: 100%!important; margin-left: 0% !important; } } /* Makes the entire content-box as link-clickability – command in function.php */ .avia-content-slider article.slide-entry { cursor: pointer !important; } /* ------------ BLOG POST – 01 ------------ */ /* DISTANCE between POSTS - SMARTPHONE */ #top .hp-blog-post.avia-content-slider article.slide-entry { margin-bottom: 60px !important; } /* Title */ .hp-blog-post .slide-entry-title.entry-title { font-size: 15px; font-weight: 600 !important; letter-spacing: 0.02em; } /* Content */ .hp-blog-post .entry-content { font-size: 13px; letter-spacing: 0.02em; } .hp-blog-post .slide-content { padding-top: 20px; padding-left: 20px; padding-right: 20px; padding-bottom: 24px; background-color: #ffffff; } /* IMAGE */ .hp-blog-post.avia-content-slider .slide-image { margin-bottom: 0; } /* Hide date */ .hp-blog-post div.slide-meta { display: none; } /* hide overlay, circle and Icon font on hover */ .hp-blog-post .image-overlay { display: none !important; opacity: 0 !important; } /* Read more */ .hp-blog-post .read-more-link { font-weight: 500; padding-top: 10px; } .hp-blog-post .read-more-link a { color: #005eaa !important; } /* SHADOW - hover */ #top .hp-blog-post.avia-content-slider article.slide-entry { transition: all 0.4s cubic-bezier(.25,.8,.25,1); } #top .hp-blog-post.avia-content-slider article.slide-entry:hover { box-shadow: 0 14px 35px rgba(0,0,0,0.13); transform: translate(0px,-2px); } /* OVERLAY - covered shadow gets visible on hover */ #top .hp-blog-post.avia-content-slider, #top .hp-blog-post .avia-content-slider-inner { overflow: visible !important; } /* ------------ BLOG POST – 02 ------------ */ /* DISTANCE between POSTS - SMARTPHONE */ #top .hp-blog-post-2.avia-content-slider article.slide-entry { margin-bottom: 60px !important; } .hp-blog-post-2.avia-content-slider .slide-entry-wrap { margin-bottom: 0; } /* Title */ .hp-blog-post-2 .slide-entry-title.entry-title { font-size: 15px; font-weight: 600 !important; letter-spacing: 0.02em; } /* Content */ .hp-blog-post-2 .entry-content { font-size: 13px; letter-spacing: 0.02em; } .hp-blog-post-2 .slide-content { padding-top: 20px; padding-left: 20px; padding-right: 20px; padding-bottom: 24px; background-color: #f7f7f7; } /* IMAGE */ .hp-blog-post-2.avia-content-slider .slide-image { margin-bottom: 0; } /* DATE padding bottom */ .hp-blog-post-2 div.slide-meta { padding-bottom: 0; } /* hide overlay, circle and Icon font on hover */ .hp-blog-post-2 .image-overlay { display: none !important; opacity: 0 !important; } /* Read more */ .hp-blog-post-2 .read-more-link { font-weight: 500; padding-top: 10px; } .hp-blog-post-2 .read-more-link a { color: #005eaa !important; } /* SHADOW - hover */ #top .hp-blog-post-2.avia-content-slider article.slide-entry { transition: all 0.4s cubic-bezier(.25,.8,.25,1); } #top .hp-blog-post-2.avia-content-slider article.slide-entry:hover { box-shadow: 0 14px 35px rgba(0,0,0,0.17); transform: translate(0px,-2px); } /* OVERLAY - covered shadow gets visible on hover */ #top .hp-blog-post-2.avia-content-slider, #top .hp-blog-post-2 .avia-content-slider-inner { overflow: visible !important; } /*---------------------------------------- // NEWS – PAGINATION //--------------------------------------*/ /* Pagination links*/ #top .main_color .pagination a { border: none; box-shadow: none; margin-right: 8px; margin-bottom: 8px; border-radius: 100px; } /* Meta info - site xx of yy */ #top .main_color .pagination .pagination-meta { display: none; } /* Active link */ #top .main_color .pagination .current { background: #005eaa; color: #fff; border-radius: 100px; margin-right: 8px; margin-bottom: 8px; } /* Links on hover*/ #top .main_color .pagination a:hover { background: #005eaa; color:#fff; border: none; } /* Inactive link */ #top .main_color .pagination .inactive { background: #f7f7f7; border-radius: 100px; } /* Pagination – centered */ /* .pagination { padding: 0; display: flex !important; justify-content: center !important; } */ /*---------------------------------------- // JOBS – PORTFOLIO-POSTS - blog view – Stellenboerse //--------------------------------------*/ /* Font */ .grid-entry .grid-entry-title { color:#005eaa; background: transparent; font-size: 18px !important; line-height: 1.25em !important; font-weight:600 !important; letter-spacing: 0.013em !important; } /* CONTENT-BOX – for GRAY-COLOR-SECTION */ .hp-job-angebote-gray-bg .grid-entry .grid-content { background: #ffffff; border-style: none; padding-bottom:26px; margin-bottom: 35px; } /* CONTENT-BOX – for GRAY–SHADOW - hover */ .hp-job-angebote-gray-bg .grid-entry .grid-content { transition: all 0.4s cubic-bezier(.25,.8,.25,1); } .hp-job-angebote-gray-bg .grid-entry .grid-content:hover { box-shadow: 0 20px 27px rgba(0,0,0,0.09); transform: translate(0px,-2px); } /* was visible when inner-entry moved up */ .hp-job-angebote-gray-bg .main_color.inner-entry { background-color: rgba(255, 255, 255, 0); } /* CONTENT-BOX – for WHITE-COLOR-SECTION */ .hp-job-angebote-white-bg .grid-entry .grid-content { background: #f7f7f7; border-style: none; padding-bottom:26px; margin-bottom: 35px; } /* CONTENT-BOX – for WHITE-SHADOW - hover */ .hp-job-angebote-white-bg .grid-entry .grid-content { transition: all 0.4s cubic-bezier(.25,.8,.25,1); } .hp-job-angebote-white-bg .grid-entry .grid-content:hover { box-shadow: 0 20px 27px rgba(0,0,0,0.12); transform: translate(0px,-2px); } /* was visible when inner-entry moved up */ .hp-job-angebote-white-bg .main_color.inner-entry { background-color: rgba(255, 255, 255, 0); } /* DISTANCE TOP - CONTENT-BOX – for WHITE/GRAY-COLOR-SECTION */ .hp-job-angebote-gray-bg, .hp-job-angebote-white-bg { margin-top: 40px; } /* Arrow */ .avia-arrow { display: none; } /* Grid Title */ #top .grid-entry .grid-entry-title { text-align: left; } /* Grid Copy */ .grid-entry-excerpt { font-size: 15px; line-height: 1.2em; letter-spacing: 0.015em !important; font-style: normal; color:#5f5f5e; padding-top: 20px; text-align: left; } .grid-entry .inner-entry { box-shadow: none; } /* Makes the entire content-box as link-clickability – command in function.php */ .grid-content { cursor: pointer; } /*---------------------------------------- // JOBS – PORTFOLIO-POSTS - SORT-FILTER – Stellenboerse //--------------------------------------*/ /* Sort-Filter */ .sort_width_container #js_sort_items { background-color:rgba(255, 255, 255, 0) !important; } /* Sort-Filter - menu-text-buttons */ .sort_by_cat .inner_sort_button { font-size: 15px; line-height: 1.92em; letter-spacing: 0.02em; /* font-weight: 400; */ } .av-current-sort-title { display: none !important; } /* CSS - Hide sort separator */ .sort_width_container .text-sep { display: none !important; } .active_sort { background-color: #005eaa !important; color: #ffffff !important; } .all_sort_button, .elektrotechnik_sort_button, .energie-und-anlagetechnik_sort_button, .glasfasertechnik_sort_button, .netzwerktechnik_sort_button, .sicherheitstechnik_sort_button, .verwaltung_sort_button { background-color: #ffffff; border-radius: 30px; padding-left: 13px; padding-right: 13px; padding-bottom: 3px; margin-right: 13px; margin-bottom: 15px; transition: background-color 1s ease-out, color 0.3s ; } .all_sort_button:hover, .elektrotechnik_sort_button:hover, .energie-und-anlagetechnik_sort_button:hover, .glasfasertechnik_sort_button:hover, .netzwerktechnik_sort_button:hover, .sicherheitstechnik_sort_button:hover, .verwaltung_sort_button:hover { background-color: #005eaa; color: #ffffff!important; } .sort_width_container #js_sort_items a { color:#5f5f5e; } /* Distance between inner-sort-buttons */ #js_sort_items .text-sep { padding: 0 10px; line-height: 2.5em; /* necessary – that the sort buttons don't get stuck on the separating lines on line breaks... finding/testing the right line-height until it works */ } /* SHOW "Detailbeschreibung" at the end of text-excerpt */ .grid-entry-excerpt::after { content: " – Detailbeschreibung"; Font-weight: 600; } /*---------------------------------------- // SYMBOL-BOX – Icons replaced with images //--------------------------------------*/ /* FOR ALL SYMBOLBOXES – Title – for all symbol-boxes */ .iconbox .iconbox_content .iconbox_content_title { font-family: 'vag-rounded-std-bold', Helvetica, Arial, sans-serif !important; font-weight: normal; font-size: 24px; letter-spacing: 0.08em; } @media only screen and (max-width: 479px) { .iconbox .iconbox_content .iconbox_content_title { font-size: 22px; } } /* FOR HP-SYMBOLBOXES – Icon - if icon top/above title there was an outline */ #top .hp-icon-box-leistungen.iconbox.av-no-box .iconbox_icon, #top .hp-icon-box-karriere.iconbox.av-no-box .iconbox_icon{ border-width: 0; } /* -------- SYMBOL-BOX -------- LEISTUNGEN */ /* Change icon with image */ .hp-icon-box-leistungen .iconbox_icon:before { display: none; } .hp-icon-box-leistungen .iconbox_icon { background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } /* Image - size */ .hp-icon-box-leistungen .iconbox_icon { border: none; height: 160px !important; width: 160px !important; min-height: 160px !important; min-width: 160px !important; } #hp-icon-box-leistungen-energie-anlagentechnik .iconbox_icon { background-image: url(https://www.hansa-projekt.de/wp-content/uploads/2024/01/HP-ICON-Anlagentechnik.png); } #hp-icon-box-leistungen-elektrotechnik .iconbox_icon { background-image: url(https://www.hansa-projekt.de/wp-content/uploads/2024/01/HP-ICON-Elektrotechnik.png); } #hp-icon-box-leistungen-sicherheitstechnik .iconbox_icon { background-image: url(https://www.hansa-projekt.de/wp-content/uploads/2024/01/HP-ICON-Sicherheitstechniktechnik.png); } #hp-icon-box-leistungen-glasfasertechnik .iconbox_icon { background-image: url(https://www.hansa-projekt.de/wp-content/uploads/2024/01/HP-ICON-Glasfasertechnik.png); } #hp-icon-box-leistungen-netzwerktechnik .iconbox_icon { background-image: url(https://www.hansa-projekt.de/wp-content/uploads/2024/03/HP-ICON-Netzwerktechnik.png); } /* Centers the content vertically */ .hp-icon-box-leistungen { display: flex; align-items: center; } /* No bottom margin for the image */ @media only screen and (min-width: 768px) and (max-width: 989px) { #top .hp-icon-box-leistungen.iconbox_left_content .iconbox_icon { margin-bottom: 0; } } /* Distance between symbol-boxes */ @media only screen and (min-width: 560px) and (max-width: 767px) { .hp-icon-box-leistungen { margin-bottom: 30px !important; } } /* HIDES COLOR-SECTIONS – hides centered one */ @media only screen and (max-width: 559px) { #hp-color-section-icons-leistungen { display: none; } } /* HIDES COLOR-SECTIONS – hides left-aligned one */ @media only screen and (min-width: 560px) { #hp-color-section-icons-leistungen-centered { display: none; } } /* -------- SYMBOL-BOX -------- KARRIERE */ /* Change icon with image */ .hp-icon-box-karriere .iconbox_icon:before { display: none; } .hp-icon-box-karriere .iconbox_icon { background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } /* Image - size */ .hp-icon-box-karriere .iconbox_icon { border: none; height: 130px !important; width: 130px !important; min-height: 130px !important; min-width: 130px !important; } #hp-icon-box-karriere-gehaltspaket .iconbox_icon { background-image: url(https://www.hansa-projekt.de/wp-content/uploads/2024/01/HP-ICON-Gehaltspaket.png); } #hp-icon-box-karriere-sicherheit .iconbox_icon { background-image: url(https://www.hansa-projekt.de/wp-content/uploads/2024/01/HP-ICON-Sicherheit.png); } #hp-icon-box-karriere-familienfreundlich .iconbox_icon { background-image: url(https://www.hansa-projekt.de/wp-content/uploads/2024/01/HP-ICON-Familienfreundlich.png); } #hp-icon-box-karriere-firmenwagen .iconbox_icon { background-image: url(https://www.hansa-projekt.de/wp-content/uploads/2024/01/HP-ICON-Firmenwagen.png); } #hp-icon-box-karriere-work-life-balance .iconbox_icon { background-image: url(https://www.hansa-projekt.de/wp-content/uploads/2024/01/HP-ICON-Work-Life-Balance.png); } #hp-icon-box-karriere-groesse .iconbox_icon { background-image: url(https://www.hansa-projekt.de/wp-content/uploads/2024/01/HP-ICON-Groesse.png); } #hp-icon-box-karriere-tradition .iconbox_icon { background-image: url(https://www.hansa-projekt.de/wp-content/uploads/2024/01/HP-ICON-Tradition.png); } #hp-icon-box-karriere-kollegialitaet .iconbox_icon { background-image: url(https://www.hansa-projekt.de/wp-content/uploads/2024/01/HP-ICON-Kollegialitaet.png); } #hp-icon-box-karriere-betriebsrat .iconbox_icon { background-image: url(https://www.hansa-projekt.de/wp-content/uploads/2024/01/HP-ICON-Betriebsrat.png); } #hp-icon-box-karriere-weiterbildung .iconbox_icon { background-image: url(https://www.hansa-projekt.de/wp-content/uploads/2024/01/HP-ICON-Weiterbildung.png); } #hp-icon-box-karriere-zertifizierungen .iconbox_icon { background-image: url(https://www.hansa-projekt.de/wp-content/uploads/2024/01/HP-ICON-Zertifizierungen.png); } #hp-icon-box-karriere-werkzeug .iconbox_icon { background-image: url(https://www.hansa-projekt.de/wp-content/uploads/2024/01/HP-ICON-Werkzeug.png); } #hp-icon-box-karriere-firmenhandy .iconbox_icon { background-image: url(https://www.hansa-projekt.de/wp-content/uploads/2024/01/HP-ICON-Firmenhandy.png); } #hp-icon-box-karriere-arbeitszeitkonto .iconbox_icon { background-image: url(https://www.hansa-projekt.de/wp-content/uploads/2024/01/HP-ICON-Arbeitszeitkonto.png); } #hp-icon-box-karriere-arbeitsbedingungen .iconbox_icon { background-image: url(https://www.hansa-projekt.de/wp-content/uploads/2024/01/HP-ICON-Arbeitsbedingungen.png); } #hp-icon-box-karriere-firmenfeiern .iconbox_icon { background-image: url(https://www.hansa-projekt.de/wp-content/uploads/2024/01/HP-ICON-Firmenfeiern-.png); } /* Centers the content vertically */ @media only screen and (max-width: 989px) { .hp-icon-box-karriere { display: flex; align-items: center; } } /* Distance between symbol-boxes */ @media only screen and (min-width: 480px) and (max-width: 767px) { .hp-icon-box-karriere { margin-bottom: 20px !important; } } #top .hp-icon-box-karriere.iconbox.av-no-box .iconbox_icon { border-style: solid; border-width: 0; } /*---------------------------------------- // SYMBOL-BOX – FIXED – tel-mail-buttons //--------------------------------------*/ /* .page-id-2136 .hp-sb-fixed-tel, .page-id-2136 .hp-sb-fixed-mail{ display: none; } */ @media only screen and (max-width: 529px) { #hp-sb-fixed-tel-id, #hp-sb-fixed-mail-id { display: none; } } @media only screen and (min-width: 530px) { /* -------- SYMBOL-BOX -------- FIXED-tel.mail */ /* Icon box content background */ #top .hp-sb-fixed-tel.iconbox .iconbox_content, #top .hp-sb-fixed-mail.iconbox .iconbox_content { background: #005eaa; padding-top: 15px; padding-bottom: 13px; padding-left: 17px; border: 0px solid #005eaa !important; border-radius: 100px; } /* Title */ .hp-sb-fixed-tel.iconbox .iconbox_content .iconbox_content_title, .hp-sb-fixed-mail.iconbox .iconbox_content .iconbox_content_title { font-family: 'hp-fonts-opensans', Helvetica, Arial, sans-serif !important; text-transform: none; font-size: 17px; font-weight: 600 !important; letter-spacing: 0.035em; color: #ffffff; margin: 0; } /* Icon font color*/ .hp-sb-fixed-tel.iconbox .iconbox_icon:before, .hp-sb-fixed-mail.iconbox .iconbox_icon:before { font-size: 27px!important; line-height: 30px!important; color: #ffffff; } .hp-sb-fixed-tel.iconbox_left .iconbox_icon { top: -5px; left: -8px; margin: 0; width: 37px; } .hp-sb-fixed-mail.iconbox_left .iconbox_icon { top: -4px; left: -8px; margin: 0; width: 37px; } /* Position and movement */ #hp-sb-fixed-mail-id { top: 143px !important; } .hp-sb-fixed-mail.iconbox { z-index: 999999 !important; position: fixed; right: -303px !important; width: 350px; transition: all 0.3s ease-in-out; transition-behavior: normal; transition-duration: 0.3s; transition-timing-function: ease-in-out; transition-delay: 0s; transition-property: all; } .hp-sb-fixed-mail.iconbox:hover { right: -95px !important; } #hp-sb-fixed-tel-id { top: 84px !important; } .hp-sb-fixed-tel.iconbox { z-index: 999999 !important; position: fixed; right: -303px !important; width: 350px; transition: all 0.3s ease-in-out; transition-behavior: normal; transition-duration: 0.3s; transition-timing-function: ease-in-out; transition-delay: 0s; transition-property: all; } .hp-sb-fixed-tel.iconbox:hover { right: -140px !important; } } /*---------------------------------------- // ACCORDION – FAQ //--------------------------------------*/ /* Distance betwenn single toggles */ .hp-akkordeon-faq .single_toggle { padding-bottom: 35px; } /* Content */ .hp-akkordeon-faq.av-elegant-toggle .toggle_content { padding-top: 10px !important; padding-bottom: 0px !important; border-bottom-width: 0px; } @media only screen and (max-width: 767px) { .hp-akkordeon-faq.av-elegant-toggle .toggle_content { padding-left: 15px !important; padding-right: 15px !important; } } /* Title */ .hp-akkordeon-faq .toggler { font-weight: 600 !important; font-size: 22px !important; line-height: 1.45em; letter-spacing: 0.013em !important; padding-bottom: 17px !important; padding-top: 25px !important; padding-bottom: 25px !important; } @media only screen and (max-width: 479px) { .hp-akkordeon-faq .toggler { font-size: 20px !important; } } @media only screen and (max-width: 767px) { .hp-akkordeon-faq .toggler { padding-left: 15px !important; /* padding-right: 15px !important; */ } } /* Title - smooth hover COLOR transisition */ .hp-akkordeon-faq .activeTitle.toggler, .hp-akkordeon-faq .toggler { transition: all 0.3s; } .hp-akkordeon-faq .activeTitle.toggler:hover, .hp-akkordeon-faq .toggler:hover { color: #005eaa; } /* Active Tab Title */ .hp-akkordeon-faq .activeTitle.toggler { color: #005eaa; } /* Tab Background */ .hp-akkordeon-faq .toggler { background: rgba(255, 255, 255, 1) !important; } /* SHADOW - hover */ .hp-akkordeon-faq .toggler { transition: all 0.4s cubic-bezier(.25,.8,.25,1); } .hp-akkordeon-faq .toggler:hover { box-shadow: 0 20px 27px rgba(0,0,0,0.09); transform: translate(0px,-2px); } /* Overflow – visible/ .hp-akkordeon-faq .single_toggle:hover { overflow: visible !important; } * /* Shadow for active toggle */ .hp-akkordeon-faq .toggler.activeTitle { box-shadow: 0 20px 27px rgba(0,0,0,0.09) !important; transform: translate(0px,-2px); } .hp-akkordeon-faq .single_toggle { overflow: visible !important; } /* Borders between toogles */ .hp-akkordeon-faq.av-elegant-toggle.togglecontainer .av_toggle_section:first-of-type .toggler { border-top-width: 0px; border-top-style: solid; border-bottom-width: 0px; } /* Remove default icon border */ .hp-akkordeon-faq .toggle_icon { border: 4px solid #005eaa; border-radius: 2px; background-color: #005eaa; opacity: 1.0; } @media only screen and (min-width: 768px) { .hp-akkordeon-faq .toggle_icon { right: 35px; } } /* Icon-color + - */ .hp-akkordeon-faq .toggle_icon .vert_icon, .hp-akkordeon-faq .toggle_icon .hor_icon { background-color: #ffffff; } /* STRONG - COLOR of bold words */ .toggle_content strong { font-weight: 700; color: #5f5f5e !important; letter-spacing: 0.009em !important; } /* LINKS - COPY BLOCK, toogler-copy */ .hp-akkordeon-faq .toggle_content a { text-decoration: none !important; font-weight: 600; color: #005eaa; letter-spacing: 0.01em !important; } /* BULLET - list */ #top .toggle_content ul { font-size: 17px; letter-spacing: 0.015em; line-height: 1.6em; Font-weight: 400; } /*---------------------------------------- // BUTTON - JETZT BEWERBEN //--------------------------------------*/ /* Remove animation on hover (circle and arrows) from images-links */ .hp-icon-initiativ-bewerbung .image-overlay { display: none !important; opacity: 0 !important; } /* Position, size... */ .hp-icon-initiativ-bewerbung { width: 180px; height: 180px; position: absolute; top: -190px; right:-10px; margin:0; } @media only screen and (max-width: 479px) { .hp-icon-initiativ-bewerbung { width: 130px; height: 130px; top: -134px; right:-20px; } } /* ZOOM - on hover */ .hp-icon-initiativ-bewerbung { transition: transform 0.25s; overflow: visible; } .hp-icon-initiativ-bewerbung:hover { transform: scale(1.07); overflow: visible; } /*---------------------------------------- // CONTACT FORM 7 - CLASSIC styling //--------------------------------------*/ /* Textarea email and input fields */ #top .wpcf7-form input[type='text'], #top .wpcf7-form input[type='email'], #top .wpcf7-form input[type='tel'], #top .wpcf7-form .wpcf7-textarea { background: #ffffff; color: #5f5f5e; font-family: 'HP-fonts-opensans', Helvetica, Arial, sans-serif; font-size: 17px; font-weight:600; letter-spacing: 0.015em; line-height: 1em; padding: 13px; border-radius: 2px; } .wpcf7 input::placeholder { color: #8f8f8e; font-weight:400; } /* Shadow effect for input fields */ #top input[type="text"], #top input[type="email"], #top input[type="tel"] { transition: all 0.4s cubic-bezier(.25,.8,.25,1); } #top input[type="text"]:focus, #top input[type="email"]:focus, #top input[type="tel"]:focus { box-shadow: 0 20px 27px rgba(0,0,0,0.09) !important; transform: translate(0px,-2px) !important; } /* Label */ .wpcf7 label { font-size: 17px !important; letter-spacing: 0.015em !important; font-weight: 400 !important; color: #8f8f8e !important; } /* Distance from .stellenangebor to Label */ .stellenangebot-class { margin-top: 10px !important; } /* Stellenausschrebung in cf7 for auto fillout */ .stellenangebot-class { color: #5f5f5e !important; /* font-size: 18px !important; */ line-height: 1.25em !important; font-weight:600 !important; letter-spacing: 0.013em !important; background-color: rgba(255, 255, 255, 1) !important; /* padding: 0 !important; */ } /* NO shadow effect for this input field */ #top input[type="text"].stellenangebot-class:focus { box-shadow: 0 0 0 rgba(0,0,0,0) !important; transform: translate(0px,0px) !important; } /* Error message – input fields */ .wpcf7-not-valid-tip { color: #fd8017; font-size: 15px; font-weight: 500; } /* Error message – under submit button */ .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output { border: 0; } .wpcf7 form .wpcf7-response-output { margin: 0; padding: 0; border: 0; color: #fd8017; font-size: 15px; font-weight: 500; } /* Checkbox - text */ #top .wpcf7-list-item-label { color: #5f5f5e !important; font-family: 'HP-fonts-opensans', Helvetica, Arial, sans-serif !important; font-size: 15px !important; letter-spacing: 0.02em !important; line-height: 1.3em; } input[type=checkbox]:checked { -webkit-appearance: checkbox !important; } input[type=checkbox]{ accent-color: #5f5f5e !important; background-color: #5f5f5e !important; } /* SUBMIT BUTTON – HP classic design */ #top .wpcf7-form .wpcf7-submit { margin-top: 80px !important; border-radius: 100px !important; border: 2px solid #005eaa !important; padding-top: 10px !important; padding-bottom: 12px !important; padding-right: 40px !important; padding-left: 40px !important; background-color: #005eaa !important; width: 150px !important; -webkit-transition: width 0.3s; transition: width 0.3s; } #top .wpcf7-form .wpcf7-submit:hover { width: 200px !important; } /* SUBMIT BUTTON – HP classic design */ input[type="submit"] { font-family: 'HP-fonts-opensans', Helvetica, Arial, sans-serif !important; font-size:17px !important; font-weight: 600 !important; letter-spacing: 0.013em !important; top:-10px !important; color: #ffffff !important; padding-left: 0px !important; } /* Sending-Spinner */ .wpcf7-spinner { top: 7px !important; background-color: #5f5f5e !important; opacity: 1 !important; } /*---------------------------------------- // CONTACT FORM 7 – CLASSIC styling - new UPLOAD-BUTTONS – without cookies like from Drag&Drop Upload Plugin //--------------------------------------*/ /* UPLOAD-BOTTON – CLASSIC */ .hp-upload-classic { width: 100%; /* passt sich an Container an */ max-width: 100%; /* verhindert Abschneiden */ box-sizing: border-box; font-family: 'HP-fonts-opensans', Helvetica, Arial, sans-serif !important; font-size: 15px !important; letter-spacing: 0.015em !important; } .hp-upload-classic::file-selector-button { font-family: 'HP-fonts-opensans', Helvetica, Arial, sans-serif !important; /* font-weight: 600 !important; */ font-size: 15px !important; letter-spacing: 0.015em !important; background-color: #005eaa; color: #fff; border: none; padding: 6px 5px 8px 5px; border-radius: 100px; cursor: pointer; /* Mauszeiger ändern */ margin-bottom: 0px; margin-right: 10px; width: 180px; -webkit-transition: width 0.3s; transition: width 0.3s; } .hp-upload-classic:hover::file-selector-button { width: 230px; } .wpcf7-form-control-wrap { display: block; width: 100%; } /* hp-quiz */ .wpcf7-quiz-label { font-family: 'HP-fonts-opensans', Helvetica, Arial, sans-serif !important; font-size: 15px !important; letter-spacing: 0.015em !important; color:red !important; } /* UPLOAD-BOTTONS – AUSBILDUNG... scroll down to AUSBILDUNG */ /*---------------------------------------- // +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ // +++ AUSBILDUNG +++ // +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ //--------------------------------------*/ /*---------------------------------------- // MENU - neuer Punkt – Ausbildung bei HANSA PROJEKT //--------------------------------------*/ /* MAIN MENU */ #menu-item-4770 a .avia-menu-text { color: white !important; background: linear-gradient(-45deg, rgba(0,250,255,1) 15%, rgba(0,93,182,1) 77%); border-radius: 50px; padding: 4px 10px 5px 10px; } /* MAIN MENU - sublevel - active HAT NOCH NICHT FUNKTIONIERT #top #wrap_all #header #avia-menu ul li.current-menu-item #menu-item-4770 a .avia-menu-text { color:#f9dc0a !important; font-weight: 600 !important; letter-spacing: 0.015em !important; } */ /* BURGER MENU */ .av-burger-overlay #av-burger-menu-ul .sub-menu .menu-item-4770 a .avia-menu-text { color: white !important; background: linear-gradient(-45deg, rgba(0,250,255,1) 15%, rgba(0,93,182,1) 77%); border-radius: 50px; padding: 4px 10px 5px 10px; } /*---------------------------------------- // HP-LOGO – change with gradient logo – KORR-2 //--------------------------------------*/ /* START */ .page-id-4116 .hp-subheader img, /* AUSSCHREIBUNG - Informationseletroniker (m/w/d) - Brand- und Gefahrenmeldeanlagen */ .postid-4263 .hp-subheader img, /* AUSSCHREIBUNG - Informationseletroniker (m/w/d) - Telekommunikation */ .postid-4713 .hp-subheader img, /* AUSSCHREIBUNG - Informationseletroniker (m/w/d) - Energie- und Gebäudetechnik */ .postid-4724 .hp-subheader img, /* FORMULAR */ .page-id-4366 .hp-subheader img, /* FORMULAR-BESTÄTIGUNG */ .page-id-4551 .hp-subheader img { content: url(https://www.hansa-projekt.de/wp-content/uploads/2024/11/HANSA-PROJEKT_Logo-Icons-Claim-RGB_Ausbildung_editable_231114.svg); } /*---------------------------------------- // SYMBOL-BOX – HIDE FIXED-RIGHT-TOP – tel-mail-BUTTONS – KORR-2 //--------------------------------------*/ /* HIDE tel-mail-buttons top-right-fixed – from current HP-site*/ @media only screen and (min-width: 530px) { /* START */ .page-id-4116 .hp-sb-fixed-tel.iconbox .iconbox_content, /* START */ .page-id-4116 .hp-sb-fixed-mail.iconbox .iconbox_content, /* AUSSCHREIBUNG - Informationseletroniker (m/w/d) - Brand- und Gefahrenmeldeanlagen */ .postid-4263 .hp-sb-fixed-tel.iconbox .iconbox_content, /* AUSSCHREIBUNG - Informationseletroniker (m/w/d) - Brand- und Gefahrenmeldeanlagen */ .postid-4263 .hp-sb-fixed-mail.iconbox .iconbox_content, /* AUSSCHREIBUNG - Informationseletroniker (m/w/d) - Telekommunikation */ .postid-4713 .hp-sb-fixed-tel.iconbox .iconbox_content, /* AUSSCHREIBUNG - Informationseletroniker (m/w/d) - Telekommunikation */ .postid-4713 .hp-sb-fixed-mail.iconbox .iconbox_content, /* AUSSCHREIBUNG - Informationseletroniker (m/w/d) - Energie- und Gebäudetechnik */ .postid-4724 .hp-sb-fixed-tel.iconbox .iconbox_content, /* AUSSCHREIBUNG - Informationseletroniker (m/w/d) - Energie- und Gebäudetechnik */ .postid-4724 .hp-sb-fixed-mail.iconbox .iconbox_content, /* FORMULAR */ .page-id-4366 .hp-sb-fixed-tel.iconbox .iconbox_content, /* FORMULAR */ .page-id-4366 .hp-sb-fixed-mail.iconbox .iconbox_content, /* FORMULAR-BESTÄTIGUNG */ .page-id-4551 .hp-sb-fixed-tel.iconbox .iconbox_content, /* FORMULAR-BESTÄTIGUNG */ .page-id-4551 .hp-sb-fixed-mail.iconbox .iconbox_content { display: none; } } /*---------------------------------------- // SYMBOL-BOX – HIDE FIXED-BOTTOM – tel-mail-BUTTONS – KORR-2 //--------------------------------------*/ /* START */ .page-id-4116 #hp-icon-mail-bottom-id, /* START */ .page-id-4116 #hp-icon-phone-bottom-id, /* AUSSCHREIBUNG - Informationseletroniker (m/w/d) - Brand- und Gefahrenmeldeanlagen */ .postid-4263 #hp-icon-mail-bottom-id, /* AUSSCHREIBUNG - Informationseletroniker (m/w/d) - Brand- und Gefahrenmeldeanlagen */ .postid-4263 #hp-icon-phone-bottom-id, /* AUSSCHREIBUNG - Informationseletroniker (m/w/d) - Telekommunikation */ .postid-4713 #hp-icon-mail-bottom-id, /* AUSSCHREIBUNG - Informationseletroniker (m/w/d) - Telekommunikation */ .postid-4713 #hp-icon-phone-bottom-id, /* AUSSCHREIBUNG - Informationseletroniker (m/w/d) - Energie- und Gebäudetechnik */ .postid-4724 #hp-icon-mail-bottom-id, /* AUSSCHREIBUNG - Informationseletroniker (m/w/d) - Energie- und Gebäudetechnik */ .postid-4724 #hp-icon-phone-bottom-id, /* FORMULAR */ .page-id-4366 #hp-icon-mail-bottom-id, /* FORMULAR */ .page-id-4366 #hp-icon-phone-bottom-id, /* FORMULAR-BESTÄTIGUNG */ .page-id-4551 #hp-icon-mail-bottom-id, /* FORMULAR-BESTÄTIGUNG */ .page-id-4551 #hp-icon-phone-bottom-id { display: none; } /*---------------------------------------- // WIDGET-header – NEW-ICONS-BOTTOM – tel-mail-icons – KORR-2 //--------------------------------------*/ #hp-icon-mail-bottom-id-ausbildung, #hp-icon-phone-bottom-id-ausbildung { display: none; } @media only screen and (max-width: 529px) { /* START */ .page-id-4116 #hp-icon-mail-bottom-id-ausbildung, /* START */ .page-id-4116 #hp-icon-phone-bottom-id-ausbildung, /* AUSSCHREIBUNG - Informationseletroniker (m/w/d) - Brand- und Gefahrenmeldeanlagen */ .postid-4263 #hp-icon-mail-bottom-id-ausbildung, /* AUSSCHREIBUNG - Informationseletroniker (m/w/d) - Brand- und Gefahrenmeldeanlagen */ .postid-4263 #hp-icon-phone-bottom-id-ausbildung, /* AUSSCHREIBUNG - Informationseletroniker (m/w/d) - Telekommunikation */ .postid-4713 #hp-icon-mail-bottom-id-ausbildung, /* AUSSCHREIBUNG - Informationseletroniker (m/w/d) - Telekommunikation */ .postid-4713 #hp-icon-phone-bottom-id-ausbildung, /* AUSSCHREIBUNG - Informationseletroniker (m/w/d) - Energie- und Gebäudetechnik */ .postid-4724 #hp-icon-mail-bottom-id-ausbildung, /* AUSSCHREIBUNG - Informationseletroniker (m/w/d) - Energie- und Gebäudetechnik */ .postid-4724 #hp-icon-phone-bottom-id-ausbildung, /* FORMULAR */ .page-id-4366 #hp-icon-mail-bottom-id-ausbildung, /* FORMULAR */ .page-id-4366 #hp-icon-phone-bottom-id-ausbildung, /* FORMULAR-BESTÄTIGUNG */ .page-id-4551 #hp-icon-mail-bottom-id-ausbildung, /* FORMULAR-BESTÄTIGUNG */ .page-id-4551 #hp-icon-phone-bottom-id-ausbildung { display: block; } } .hp-icon-mail-bottom-ausbildung { position: fixed !important; bottom: 8px; right: 35px; z-index:999 !important; color: #7f7f7e; } .hp-icon-phone-bottom-ausbildung { position: fixed !important; bottom: 9px; left: 38px; z-index:999 !important; color: #7f7f7e; } /*---------------------------------------- // SYMBOL-BOX – NEW-FIXED-RIGHT-TOP – tel-mail-buttons – KORR-2 //--------------------------------------*/ #hp-sb-fixed-tel-id-ausbildung, #hp-sb-fixed-mail-id-ausbildung { display: none; } @media only screen and (min-width: 530px) { /* START */ .page-id-4116 #hp-sb-fixed-tel-id-ausbildung, /* START */ .page-id-4116 #hp-sb-fixed-mail-id-ausbildung, /* AUSSCHREIBUNG - Informationseletroniker (m/w/d) - Brand- und Gefahrenmeldeanlagen */ .postid-4263 #hp-sb-fixed-tel-id-ausbildung, /* AUSSCHREIBUNG - Informationseletroniker (m/w/d) - Brand- und Gefahrenmeldeanlagen */ .postid-4263 #hp-sb-fixed-mail-id-ausbildung, /* AUSSCHREIBUNG - Informationseletroniker (m/w/d) - Telekommunikation */ .postid-4713 #hp-sb-fixed-tel-id-ausbildung, /* AUSSCHREIBUNG - Informationseletroniker (m/w/d) - Telekommunikation */ .postid-4713 #hp-sb-fixed-mail-id-ausbildung, /* AUSSCHREIBUNG - Informationseletroniker (m/w/d) - Energie- und Gebäudetechnik */ .postid-4724 #hp-sb-fixed-tel-id-ausbildung, /* AUSSCHREIBUNG - Informationseletroniker (m/w/d) - Energie- und Gebäudetechnik */ .postid-4724 #hp-sb-fixed-mail-id-ausbildung, /* FORMULAR */ .page-id-4366 #hp-sb-fixed-tel-id-ausbildung, /* FORMULAR */ .page-id-4366 #hp-sb-fixed-mail-id-ausbildung, /* FORMULAR-BESTÄTIGUNG */ .page-id-4551 #hp-sb-fixed-tel-id-ausbildung, /* FORMULAR-BESTÄTIGUNG */ .page-id-4551 #hp-sb-fixed-mail-id-ausbildung { display: block; } } @media only screen and (min-width: 530px) { /* -------- SYMBOL-BOX -------- FIXED-tel.mail */ /* Icon box content background */ #top .hp-sb-fixed-tel-ausbildung.iconbox .iconbox_content, #top .hp-sb-fixed-mail-ausbildung.iconbox .iconbox_content { background: linear-gradient(-45deg, rgba(0,250,255,1) 15%, rgba(0,93,182,1) 77%); padding-top: 15px; padding-bottom: 13px; padding-left: 17px; border: 0px solid #005eaa !important; border-radius: 100px; } /* Title */ .hp-sb-fixed-tel-ausbildung.iconbox .iconbox_content .iconbox_content_title, .hp-sb-fixed-mail-ausbildung.iconbox .iconbox_content .iconbox_content_title { font-family: 'hp-fonts-opensans', Helvetica, Arial, sans-serif !important; text-transform: none; font-size: 17px; font-weight: 600 !important; letter-spacing: 0.035em; color: #ffffff; margin: 0; } /* Icon font color*/ .hp-sb-fixed-tel-ausbildung.iconbox .iconbox_icon:before, .hp-sb-fixed-mail-ausbildung.iconbox .iconbox_icon:before { font-size: 27px!important; line-height: 30px!important; color: #ffffff; } .hp-sb-fixed-tel-ausbildung.iconbox_left .iconbox_icon { top: -5px; left: -8px; margin: 0; width: 37px; } .hp-sb-fixed-mail-ausbildung.iconbox_left .iconbox_icon { top: -4px; left: -8px; margin: 0; width: 37px; } /* Position and movement */ #hp-sb-fixed-mail-id-ausbildung { top: 143px !important; } .hp-sb-fixed-mail-ausbildung.iconbox { z-index: 999999 !important; position: fixed; right: -253px !important; width: 300px; transition: all 0.3s ease-in-out; transition-behavior: normal; transition-duration: 0.3s; transition-timing-function: ease-in-out; transition-delay: 0s; transition-property: all; } .hp-sb-fixed-mail-ausbildung.iconbox:hover { right: -35px !important; } #hp-sb-fixed-tel-id-ausbildung { top: 84px !important; } .hp-sb-fixed-tel-ausbildung.iconbox { z-index: 999999 !important; position: fixed; right: -253px !important; width: 300px; transition: all 0.3s ease-in-out; transition-behavior: normal; transition-duration: 0.3s; transition-timing-function: ease-in-out; transition-delay: 0s; transition-property: all; } .hp-sb-fixed-tel-ausbildung.iconbox:hover { right: -65px !important; } } /*---------------------------------------- // SYMBOL-BOX – FIXED – tel-mail-BUTTONS – KANN ALLES WEG, WENN KOMPLETT NEUE BUTTONS INTERGRIERT //--------------------------------------*/ /* Icon box content background – KANN ALLES WEG, WENN KOMPLETT NEUE BUTTONS INTERGRIERT WURDEN!!! */ @media only screen and (min-width: 530px) { .page-id-2677 .hp-sb-fixed-tel.iconbox .iconbox_content, .page-id-2677 .hp-sb-fixed-mail.iconbox .iconbox_content { background: linear-gradient(-45deg, rgba(5,221,240,1) 0%, rgba(0,94,170,1) 85%) !important; } } @media only screen and (min-width: 530px) { .page-id-3339 .hp-sb-fixed-tel.iconbox .iconbox_content, .page-id-3339 .hp-sb-fixed-mail.iconbox .iconbox_content, .page-id-3947 .hp-sb-fixed-tel.iconbox .iconbox_content, .page-id-3947 .hp-sb-fixed-mail.iconbox .iconbox_content { background: linear-gradient(-45deg, rgba(5,216,237,1) 50%, rgba(0,94,170,1) 80%) !important; } } @media only screen and (min-width: 530px) { .postid-3579 .hp-sb-fixed-tel.iconbox .iconbox_content, .postid-3579 .hp-sb-fixed-mail.iconbox .iconbox_content { background: linear-gradient(-45deg, rgba(5,216,237,1) 50%, rgba(0,94,170,1) 80%) !important; } } /*---------------------------------------- // SLIDER - FULL WIDTH - AUSBILDUNG //--------------------------------------*/ /* Background - gradient */ .hp-fullwidth-slider-ausbildung.avia-fullwidth-slider { background: linear-gradient(-45deg, #05ddf0, #005eaa, #005eaa, #05ddf0); background-size: 400% 400%; animation: hp-slider-gradient 15s ease infinite; /* height: 100vh; */ } @keyframes hp-slider-gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Caption Title */ .hp-fullwidth-slider-ausbildung .av_slideshow_full .avia-caption-title { font-size: 90px !important; font-weight: 400 !important; font-style: normal; letter-spacing: 0.09em !important; text-align: center; margin-bottom: 1px !important; } @media only screen and (max-width: 389px) { .hp-fullwidth-slider-ausbildung .av_slideshow_full .avia-caption-title { font-size: 40px !important; margin-bottom: 0px !important; margin-top: 9px !important; } .caption_bottom .slideshow_caption .slideshow_inner_caption { padding: 0; } } @media only screen and (max-width: 529px) and (min-width: 390px) { .hp-fullwidth-slider-ausbildung .av_slideshow_full .avia-caption-title { font-size: 43px !important; margin-bottom: 0px !important; margin-top: 9px !important; } .caption_bottom .slideshow_caption .slideshow_inner_caption { padding: 0; } } @media only screen and (max-width: 767px) and (min-width: 530px) { .hp-fullwidth-slider-ausbildung .av_slideshow_full .avia-caption-title { font-size: 58px !important; margin-bottom: 0px !important; margin-top: 9px !important; } .caption_bottom .slideshow_caption .slideshow_inner_caption { padding: 0; } } @media only screen and (max-width: 989px) and (min-width: 768px) { .hp-fullwidth-slider-ausbildung .av_slideshow_full .avia-caption-title { font-size: 85px !important; margin-top: -8px !important; } .caption_bottom .slideshow_caption .slideshow_inner_caption { padding: 0; } } /* Animation - Title */ .avia_transform .hp-fullwidth-slider-ausbildung .active-slide .avia-caption-title { -webkit-animation: avia_pop 0.5s 1 cubic-bezier(0.175, 0.885, 0.320, 14.275) !important; animation: avia_pop 0.5s 1 cubic-bezier(0.175, 0.885, 0.320, 14.275) !important; } /*---------------------------------------- // FONTS - AUSBILDUNG //--------------------------------------*/ /* Bigger Copy – sub-Headline */ .hp-sub-hd-ausbildung p { color:#5f5f5e; background: transparent; font-size: 23px !important; line-height: 1.25em !important; font-weight: 600 !important; letter-spacing: 0.015em !important; } /* Job offers/description - HD */ #hp-sub-hd-ausbildung-id p { color:#5f5f5e; background: transparent; font-size: 32px !important; line-height: 1.1em !important; font-weight: 700 !important; letter-spacing: 0.015em !important; } @media only screen and (max-width: 479px) { #hp-sub-hd-ausbildung-id p { font-size: 29px !important; } } #hp-sub-hd-light-ausbildung-id p { color:#5f5f5e; background: transparent; font-size: 32px !important; line-height: 1.1em !important; font-weight: 600 !important; letter-spacing: 0.015em !important; } @media only screen and (max-width: 479px) { #hp-sub-hd-light-ausbildung-id p { font-size: 29px !important; } } /* POSITION – job description */ #hp-sub-hd-ausbildung-tab-section { margin-top: -20px!important; } /* WhatsApp - info */ .hp-sub-hd-ausbildung-white p { color:#ffffff; background: transparent; font-size: 23px !important; line-height: 1.25em !important; font-weight: 700 !important; letter-spacing: 0.015em !important; } /* Title - with gradients */ #hp-hd-ausbildung-gradient-hd h1 { letter-spacing: 0.03em !important; background: linear-gradient(-45deg, rgba(5,221,240,1) 0%, rgba(0,94,170,1) 77%); -webkit-text-fill-color: transparent; background-clip: text; -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10 and IE 11 */ user-select: none; /* Standard syntax */ } /* Title - with gradients – 02 */ #hp-hd-ausbildung-gradient-hd-2 h1 { letter-spacing: 0.03em !important; background: linear-gradient(-45deg, rgba(0,250,255,1) 15%, rgba(0,93,182,1) 77%); -webkit-text-fill-color: transparent; background-clip: text; -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10 and IE 11 */ user-select: none; /* Standard syntax */ text-transform: none !important; } #hp-hd-ausbildung-gradient-hd-2 h1::after { content: "."; color: #f9dc0a !important; -webkit-text-fill-color: #f9dc0a !important; } /* Title - with gradients – 02 */ #hp-hd-ausbildung-gradient-hd-3 h1 { letter-spacing: 0.03em !important; background: linear-gradient(-45deg, rgba(0,250,255,1) 15%, rgba(0,93,182,1) 77%); -webkit-text-fill-color: transparent; background-clip: text; -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10 and IE 11 */ user-select: none; /* Standard syntax */ text-transform: none !important; } #hp-hd-ausbildung-gradient-hd-3 h1::after { content: "?"; color: #f9dc0a !important; -webkit-text-fill-color: #f9dc0a !important; } /* Title - with gradients – 02 */ #hp-hd-ausbildung-gradient-hd-4 h1 { letter-spacing: 0.03em !important; background: linear-gradient(-45deg, rgba(0,250,255,1) 15%, rgba(0,93,182,1) 77%); -webkit-text-fill-color: transparent; background-clip: text; -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10 and IE 11 */ user-select: none; /* Standard syntax */ text-transform: none !important; } #hp-hd-ausbildung-gradient-hd-4 h1::after { content: "..."; color: #f9dc0a !important; -webkit-text-fill-color: #f9dc0a !important; } /* Title - without gradient - color */ #hp-hd-ausbildung-white-hd h1 { color: #ffffff; text-transform: none !important; } /* Title - without gradient - color */ #hp-hd-ausbildung-white-hd-02 h1 { color: #ffffff; text-transform: none !important; } /* Title - pop animation */ #hp-column-hd-white.avia-animate-admin-preview.pop-up, .avia_transform .avia_start_delayed_animation.pop-up { -webkit-animation: avia_pop 0.5s 1 cubic-bezier(0.175, 0.885, 0.320, 14.275) !important; animation: avia_pop 0.5s 1 cubic-bezier(0.175, 0.885, 0.320, 14.275) !important; } /* Title - sizes */ .hp-hd-ausbildung h1 { font-size: 90px !important; font-weight: 700 !important; font-style: normal; /* letter-spacing: 0.09em !important; */ letter-spacing: 0.06em!important; text-align: center; text-transform: uppercase !important; /* margin-bottom: 0px !important; */ } @media only screen and (max-width: 389px) { .hp-hd-ausbildung h1 { font-size: 40px !important; } } @media only screen and (max-width: 529px) and (min-width: 390px) { .hp-hd-ausbildung h1 { font-size: 43px !important; } } @media only screen and (max-width: 767px) and (min-width: 530px) { .hp-hd-ausbildung h1 { font-size: 58px !important; } } @media only screen and (max-width: 989px) and (min-width: 768px) { .hp-hd-ausbildung h1 { font-size: 85px !important; } } /*---------------------------------------- // VIDEOS - AUSBILDUNG //--------------------------------------*/ /* Background color - HEADER VIDEO */ #top .av-video-slide .avia-slide-wrap, #top .av-video-slide iframe { background: rgba(76, 175, 80, 0) !important; } /* VIDEOS - Ausbildungsangebote */ /* Background color */ .avia-video, .avia-video iframe, .avia-video video { background-color: rgba(76, 175, 80, 0) !important; /* outline: #ffffff solid 6px !important; */ } /* VIDEOS - Animation */ .avia_transform .flex_column { animation-duration: 0.2s !important; } /* VIDEO-ICONS – Arrows - forward-backward */ @media only screen and (min-width: 990px) { .hp-ausbildung-forward-icon { position: absolute !important; top: 6px; right: 37%; z-index: 999; color: #f9dc0a !important; text-shadow: 2px 2px 18px rgba(0, 0, 0, 0.1); animation: moveforward infinite; animation-duration: 2s; } @keyframes moveforward { 0% {right: 37%; opacity: 0;} 30% {opacity: 1;} 100% {right: 34%; opacity: 0;} } .hp-ausbildung-backward-icon { position: absolute !important; top: 6px; left: 37%; z-index: 999; color: #f9dc0a !important; text-shadow: 2px 2px 18px rgba(0, 0, 0, 0.1); animation: movebackward infinite; animation-duration: 2s; } @keyframes movebackward { 0% {left: 37%; opacity: 0;} 30% {opacity: 1;} 100% {left: 34%; opacity: 0;} } } @media only screen and (min-width: 480px) and (max-width: 989px) { .hp-ausbildung-forward-icon { position: absolute !important; top: 6px; right: 29%; z-index: 999; color: #f9dc0a !important; text-shadow: 2px 2px 18px rgba(0, 0, 0, 0.1); animation: moveforward infinite; animation-duration: 2s; } @keyframes moveforward { 0% {right: 29%; opacity: 0;} 30% {opacity: 1;} 100% {right: 26%; opacity: 0;} } .hp-ausbildung-backward-icon { position: absolute !important; top: 6px; left: 29%; z-index: 999; color: #f9dc0a !important; text-shadow: 2px 2px 18px rgba(0, 0, 0, 0.1); animation: movebackward infinite; animation-duration: 2s; } @keyframes movebackward { 0% {left: 29%; opacity: 0;} 30% {opacity: 1;} 100% {left: 26%; opacity: 0;} } } @media only screen and (max-width: 479px) { .hp-ausbildung-forward-icon { position: absolute !important; top: 6px; right: 9%; z-index: 999; color: #f9dc0a !important; text-shadow: 2px 2px 18px rgba(0, 0, 0, 0.1); animation: moveforward infinite; animation-duration: 2s; } @keyframes moveforward { 0% {right: 9%; opacity: 0;} 30% {opacity: 1;} 100% {right: 2%; opacity: 0;} } .hp-ausbildung-backward-icon { position: absolute !important; top: 6px; left: 9%; z-index: 999; color: #f9dc0a !important; text-shadow: 2px 2px 18px rgba(0, 0, 0, 0.1); animation: movebackward infinite; animation-duration: 2s; } @keyframes movebackward { 0% {left: 9%; opacity: 0;} 30% {opacity: 1;} 100% {left: 2%; opacity: 0;} } } /* VIDEO-ICONS – info/play */ .hp-ausbildung-info-icon { position: absolute !important; top: 13px; left: 34%; z-index: 999; color: white !important; } .hp-ausbildung-play-icon { position: absolute !important; top: 6px; right: 33.5%; z-index: 999; color: white !important; } @media only screen and (min-width: 480px) and (max-width: 989px) { .hp-ausbildung-info-icon { position: absolute !important; top: 13px; left: 26.5%; z-index: 999; color: white !important; } .hp-ausbildung-play-icon { position: absolute !important; top: 6px; right: 26%; z-index: 999; color: white !important; } } @media only screen and (max-width: 479px) { .hp-ausbildung-info-icon { position: absolute !important; top: 13px; left: 13px; z-index: 999; color: white !important; } .hp-ausbildung-play-icon { position: absolute !important; top: 6px; right: 10px; z-index: 999; color: white !important; } } /* ZOOM - on hover */ .hp-ausbildung-info-icon { transition: transform 0.25s !important; } .hp-ausbildung-info-icon:hover { transform: scale(1.5) !important; } .hp-ausbildung-play-icon { transition: transform 0.25s !important; } .hp-ausbildung-play-icon:hover { transform: scale(1.25) !important; } /* BUTTON – Mehr erfahren... */ /* Button - background, border... */ .hp-button-tab-section a.avia-button { border-radius: 100px; border: 0px solid #005eaa !important; background: linear-gradient(-45deg, rgba(0,250,255,1) 11%, rgba(0,93,182,1) 77%) !important; animation: pulsar-button-more 2s infinite; transition: transform 0.3s !important; width: 200px; padding-top: 20px; padding-bottom: 20px; } @keyframes pulsar-button-more { 0% {box-shadow: 0 0 0 0em rgba(249,220,10,1);} 100% {box-shadow: 0 0 0 1.5em rgba(249,10,240,.0);} } /* Button - hover */ .hp-button-tab-section a.avia-button:hover { transform: scale(1.5); animation: pulsar-button-hover-more 2s infinite; } @keyframes pulsar-button-hover-more { 0% {box-shadow: 0 0 0 0em rgba(249,220,10,0);} 100% {box-shadow: 0 0 0 1.5em rgba(249,10,240,.0);} } /* Button - title */ .hp-button-tab-section a.avia-button .avia_iconbox_title { font-size:17px; font-weight: 600; letter-spacing: 0.015em; color: #ffffff; /* font-weight: 700; */ /* top:-10px; padding-left: 0px; */ } .hp-button-tab-section a.avia-button .avia_iconbox_title::after { content: "..."; color: #f9dc0a !important; -webkit-text-fill-color: #f9dc0a !important; font-weight: 800; } /* POSITION – button tab-section */ .hp-button-tab-section { position: absolute !important; /* top: 50%; */ /* transform: translate(-50%, -50%); */ left: 50%; top: 48%; transform: translate(-50%, -50%); /* bottom: 180px; */ z-index: 999; } /*---------------------------------------- // VIDEOS - LIGHT BOX - AUSBILDUNG //--------------------------------------*/ /* Ratio – bring 16/9 to 9/16 */ #top.page-id-2677 .mfp-iframe-holder, #top.page-id-3339 .mfp-iframe-holder, #top.page-id-3947 .mfp-iframe-holder, #top.page-id-3947 .mfp-iframe-holder /* korr-2 - start */{ padding: 0px !important; } #top.page-id-2677 .mfp-iframe-holder .mfp-content, #top.page-id-3339 .mfp-iframe-holder .mfp-content, #top.page-id-3947 .mfp-iframe-holder .mfp-content, #top.page-id-4116 .mfp-iframe-holder .mfp-content /* korr-2 - start */{ width: 50vh !important; } /*** 100 x 16 / 9 = 177.88 ***/ #top.page-id-2677 .mfp-iframe-scaler, #top.page-id-3339 .mfp-iframe-scaler, #top.page-id-3947 .mfp-iframe-scaler, #top.page-id-4116 .mfp-iframe-scaler /* korr-2 - start */{ padding-top: 178%; } /* Shadow video – hide */ .page-id-2677 .mfp-iframe-scaler iframe, .page-id-3339 .mfp-iframe-scaler iframe, .page-id-3947 .mfp-iframe-scaler iframe, .page-id-4116 .mfp-iframe-scaler iframe /* korr-2 - start */{ box-shadow: 0 0 8px rgba(0, 0, 0, 0); } /* Overlay - background color and opacity */ .mfp-zoom-in.mfp-ready.mfp-bg { /* opacity: 1; */ /* background-color: #900; */ } /*---------------------------------------- // TAB SECTION - AUSBILDUNG //--------------------------------------*/ /* Hover - title (buletts) */ #top .hp-tab-section-ausbildung-01 .av-section-tab-title:hover { color:#005eaa !important; } /* Increase tab spacing */ #top .hp-tab-section-ausbildung-01 .av-section-tab-title { padding-right:0px!important; padding-left:0px!important; } /* ZOOM - on hover */ #top .hp-tab-section-ausbildung-01 .av-section-tab-title { transition: transform 0.25s !important; } #top .hp-tab-section-ausbildung-01 .av-section-tab-title:hover { transform: scale(1.15) !important; } /*---------------------------------------- // TAB SECTION - AUSBILDUNG – 02 //--------------------------------------*/ /* Hover - title (buletts) - 02 */ #top .hp-tab-section-ausbildung-02 .av-section-tab-title:hover { color:#005eaa !important; } /* Increase tab spacing */ @media only screen and (max-width: 767px) { #top .hp-tab-section-ausbildung-02 .av-section-tab-title { padding-right:8px!important; padding-left:8px!important; } } @media only screen and (min-width: 768px) { #top .hp-tab-section-ausbildung-02 .av-section-tab-title { padding-right:14px!important; padding-left:14px!important; } } /* ZOOM - on hover */ #top .hp-tab-section-ausbildung-02 .av-section-tab-title { transition: transform 0.25s !important; } #top .hp-tab-section-ausbildung-02 .av-section-tab-title:hover { transform: scale(1.2) !important; } /* ICONS-IMAGES */ .hp-tab-section-ausbildung-02 .av-tab-section-image { opacity: .25 !important; /* filter: none !important; */ height: 75px !important; } .hp-tab-section-ausbildung-02 .av-tab-image-circle .av-tab-section-image { border-radius: 300px !important; } .hp-tab-section-ausbildung-02 .av-inner-tab-title, .av-tab-arrow-container, .av-tab-section-icon, .av-tab-section-image { width: 75px; } .hp-tab-section-ausbildung-02 .av-active-tab-title .av-tab-section-image { opacity: 1 !important; filter: grayscale(0) !important; } /* .hp-tab-section-ausbildung-02 .av-tab-section-outer-container.av-1jfhk9n-335a6451a7f13e2a4442f13c7ad6c3f9 .av-tab-section-tab-title-container { background: linear-gradient(-45deg, #00f8ff, #005eaa, #00f8ff); background-size: 400% 400%; animation: hp-slider-gradient 15s ease infinite; } */ /*---------------------------------------- // TAB SECTION - AUSBILDUNG – 03 //--------------------------------------*/ #top .hp-tab-section-ausbildung-03 .av-section-tab-title { border-radius: 300px; } #top .hp-tab-section-ausbildung-03 .av-section-tab-title { /* background: #ffffff; */ animation: pulsar-tab-section 2s infinite; transition: transform 0.3s !important; } @keyframes pulsar-tab-section { 0% {box-shadow: 0 0 0 0em rgba(249,220,10,1);} 100% {box-shadow: 0 0 0 1.5em rgba(249,10,240,.0);} } .hp-tab-section-ausbildung-03 .av-tab-section-tab-title-container a { height: 65px !important; width: 65px !important; } @media only screen and (max-width: 767px) { .hp-tab-section-ausbildung-03 .av-tab-section-tab-title-container a { height: 45px !important; width: 45px !important; } } .hp-tab-section-ausbildung-03 .av-tab-image-circle .av-tab-section-image { border-radius: 300px !important; height: 65px !important; width: 65px !important; padding: 0px !important; } @media only screen and (max-width: 767px) { .hp-tab-section-ausbildung-03 .av-tab-image-circle .av-tab-section-image { height: 45px !important; width: 45px !important; } } /* ZOOM - on hover */ #top .hp-tab-section-ausbildung-03 .av-section-tab-title { transition: transform 0.25s !important; } #top .hp-tab-section-ausbildung-03 .av-section-tab-title:hover { transform: scale(1.7) !important; } #top .hp-tab-section-ausbildung-03 .av-section-tab-title { padding: 0px!important; margin-right:30px!important; margin-left:30px!important; } @media only screen and (max-width: 767px) { #top .hp-tab-section-ausbildung-03 .av-section-tab-title { padding: 0px!important; margin-right:20px!important; margin-left:20px!important; } } /* Spaceing top/bottom – bar with icons */ .hp-tab-section-ausbildung-03 .av-tab-section-tab-title-container { padding: 60px 0 60px 0 !important; } @media only screen and (max-width: 767px) { .hp-tab-section-ausbildung-03 .av-tab-section-tab-title-container { padding: 50px 0 50px 0 !important; } } .hp-tab-section-ausbildung-03 .av-tab-section-image { filter: none!important; opacity: 1 !important; } /* ICONS-IMAGES */ .hp-tab-section-ausbildung-03 .av-tab-section-image { opacity: .50 !important; } .hp-tab-section-ausbildung-03 .av-tab-section-image:hover { opacity: 1 !important; } .hp-tab-section-ausbildung-03 .av-active-tab-title .av-tab-section-image { opacity: 1 !important; filter: grayscale(0) !important; } /* Background - tab-bar */ .hp-tab-section-ausbildung-03 .av-tab-section-tab-title-container { background: linear-gradient(-45deg, rgba(0,250,255,1) 10%, rgba(0,93,182,1) 77%) !important; /* background: #ffffff!important; */ } /* Active tab */ .hp-tab-section-ausbildung-03 .av-active-tab-title { transform: scale(1.7); } /* Tab arrow */ .hp-tab-section-ausbildung-03 .av-tab-arrow-container { /* opacity: 0 !important; */ display: none; } /*---------------------------------------- // COLOR SECTION – gradient - AUSBILDUNG //--------------------------------------*/ .hp-color-section-gradient { background: linear-gradient(-45deg, #05ddf0, #005eaa, #005eaa, #05ddf0); background-size: 400% 400%; animation: hp-slider-gradient-02 15s ease infinite; } @media only screen and (max-width: 800px) and (min-width: 480px) { .hp-color-section-gradient { background: linear-gradient(-45deg, #05ddf0, #005eaa, #005eaa, #05ddf0); background-size: 400% 250%; animation: hp-slider-gradient-02 15s ease infinite; } } @media only screen and (max-width: 479px) { .hp-color-section-gradient { background: linear-gradient(-45deg, #05ddf0, #005eaa, #005eaa, #05ddf0); background-size: 400% 180%; animation: hp-slider-gradient-02 15s ease infinite; } } .hp-color-section-gradient-2 { background: linear-gradient(-45deg, #00f8ff, #005db6, #00f8ff); background-size: 400% 100%; animation: hp-slider-gradient-02 15s ease infinite; } @media only screen and (max-width: 800px) and (min-width: 480px) { .hp-color-section-gradient-2 { background: linear-gradient(-45deg, #00f8ff, #005db6, #00f8ff); background-size: 400% 100%; animation: hp-slider-gradient-02 15s ease infinite; } } @media only screen and (max-width: 479px) { .hp-color-section-gradient-2 { background: linear-gradient(-45deg, #00f8ff, #005db6, #00f8ff); background-size: 400% 100%; animation: hp-slider-gradient-02 15s ease infinite; } } @keyframes hp-slider-gradient-02 { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* .hp-color-section-gradient-2 .av-parallax .av-parallax-inner { background-color: rgba(76, 175, 80, 0) !important; } */ /*---------------------------------------- // CONTENT-SLIDER - AUSBILDUNG //--------------------------------------*/ /* Navigation (Dots/Arrows) - centered and position */ #top .hp-content-slider-ausbildung-01 .avia-smallarrow-slider-heading> div { display: table; /* margin: 0 auto; */ margin-top: -10px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } /* BULLETS */ .hp-content-slider-ausbildung-01 .avia-slideshow-dots a { height: 20px; width: 20px; border-radius: 300px; text-indent: 100px; overflow: hidden; /* margin: 0 15px; */ margin-top: 0px; margin-right: 15px; margin-bottom: 0px; margin-left: 15px; padding: 7px; position: relative; } /* BULLETS – behavior */ .hp-content-slider-ausbildung-01 .avia-slideshow-dots a.active { background-color: #f9dc0a !important; opacity: 1 !important; transform: scale(1.5) !important; } .hp-content-slider-ausbildung-01 .avia-slideshow-dots a:hover { background-color: #f9dc0a !important; opacity: 1 !important; } .hp-content-slider-ausbildung-01 .avia-slideshow-dots a { opacity: 0.3 !important; } /* ZOOM - on hover */ .hp-content-slider-ausbildung-01 .avia-slideshow-dots a { transition: transform 0.25s !important; } .hp-content-slider-ausbildung-01 .avia-slideshow-dots a:hover { transform: scale(1.5) !important; } /* Text */ .hp-content-slider-ausbildung-01 p { color:#ffffff; font-size: 23px !important; line-height: 1.25em !important; font-weight:600 !important; letter-spacing: 0.015em !important; } /* Spacing image */ .hp-content-slider-ausbildung-01 .aligncenter { clear: both; display: block; margin: 0px auto; padding: 10px 0; position: relative; } /* Distance to Headline - top */ @media only screen and (max-width: 767px) { .hp-content-slider-ausbildung-01.avia-content-slider { margin-top: 0px; } } /*---------------------------------------- // TIME LINE - AUSBILDUNG //--------------------------------------*/ /* Font – HD */ .hp-time-line-ausbildung .avia-timeline .av-milestone-date { font-family: 'hp-fonts-opensans', Helvetica, Arial, sans-serif !important; text-transform: none; letter-spacing: 0.02em !important; padding-bottom: 10px; font-size: 32px !important; line-height: 1.1em !important; font-weight: 700 !important; letter-spacing: 0.015em !important; } /* Bullets/Icons */ .hp-time-line-ausbildung.avia-timeline-container .av-milestone .av-milestone-icon-inner { background: linear-gradient(-45deg, rgba(5,216,237,1) 0%, rgba(0,94,170,1) 77%) !important; } .hp-time-line-ausbildung.avia-timeline-container .av-milestone .av-milestone-indicator { background-color: #5f5f5e !important; } /* Spacings */ /* Space between single content (HD and copy) */ .hp-time-line-ausbildung .avia-timeline-vertical .av-milestone-content-wrap { padding-bottom: 0px !important; } @media only screen and (max-width: 989px) { .hp-time-line-ausbildung .avia-timeline-vertical .av-milestone-content-wrap { padding-bottom: 40px !important; } } /* Space copy to HD – every second one – if switching to left aligned */ @media only screen and (max-width: 989px) { .av-no-preview .hp-time-line-ausbildung .avia-timeline-vertical.av-milestone-placement-alternate li.av-milestone-even .av-milestone-date { padding-bottom: 10px !important; } } /* Space content (HD and copy) to top – every second one */ @media only screen and (max-width: 767px) { .av-no-preview .avia-timeline-vertical.av-milestone-placement-alternate li.av-milestone-even .av-milestone-date { padding-top: 13px !important; } } /* Space content (HD and copy) to top – every first one */ @media only screen and (max-width: 767px) { .av-no-preview .avia-timeline-vertical .av-milestone-date { padding-top: 13px !important; } } /*---------------------------------------- // TIME LINE – 02 - AUSBILDUNG //--------------------------------------*/ /* Font – HD */ .hp-time-line-ausbildung-2 .avia-timeline .av-milestone-date { font-family: 'hp-fonts-opensans', Helvetica, Arial, sans-serif !important; text-transform: none; letter-spacing: 0.02em !important; padding-bottom: 10px; font-size: 32px !important; line-height: 1.1em !important; font-weight: 700 !important; letter-spacing: 0.015em !important; } @media only screen and (max-width: 479px) { .hp-time-line-ausbildung-2 .avia-timeline .av-milestone-date { font-size: 29px !important; } } /* Font – copy */ .hp-time-line-ausbildung-2 .av-milestone-content strong { font-weight: 700; color: #5f5f5e !important; } /* Bullets/Icons */ .hp-time-line-ausbildung-2.avia-timeline-container .av-milestone .av-milestone-icon-inner { background: linear-gradient(-45deg, rgba(0,250,255,1) 15%, rgba(0,93,182,1) 77%) !important; } .hp-time-line-ausbildung-2.avia-timeline-container .av-milestone .av-milestone-indicator { background-color: #5f5f5e !important; } /* Numbers*/ .hp-time-line-ausbildung-2 .avia-timeline .milestone_icon { color: #f9dc0a; font-size: 18px; font-weight: 700; } /* Spacings */ /* Space between single content (HD and copy) */ .hp-time-line-ausbildung-2 .avia-timeline-vertical .av-milestone-content-wrap { padding-bottom: 0px !important; } @media only screen and (max-width: 989px) { .hp-time-line-ausbildung-2 .avia-timeline-vertical .av-milestone-content-wrap { padding-bottom: 40px !important; } } /* Space copy to HD – every second one – if switching to left aligned */ @media only screen and (max-width: 989px) { .av-no-preview .hp-time-line-ausbildung-2 .avia-timeline-vertical.av-milestone-placement-alternate li.av-milestone-even .av-milestone-date { padding-bottom: 10px !important; } } /* Space content (HD and copy) to top – every second one */ @media only screen and (max-width: 767px) { .av-no-preview .avia-timeline-vertical.av-milestone-placement-alternate li.av-milestone-even .av-milestone-date { padding-top: 13px !important; } } /* Space content (HD and copy) to top – every first one */ @media only screen and (max-width: 767px) { .av-no-preview .avia-timeline-vertical .av-milestone-date { padding-top: 13px !important; } } /*---------------------------------------- // TIME LINE – 03 - AUSBILDUNG – Alles auf einen Blick //--------------------------------------*/ /* Font – HD */ .hp-time-line-ausbildung-3 .avia-timeline .av-milestone-date { color: #ffffff; font-family: 'hp-fonts-opensans', Helvetica, Arial, sans-serif !important; text-transform: none; letter-spacing: 0.02em !important; padding-bottom: 10px; font-size: 32px !important; line-height: 1.1em !important; font-weight: 700 !important; letter-spacing: 0.025em !important; } @media only screen and (max-width: 479px) { .hp-time-line-ausbildung-3 .avia-timeline .av-milestone-date { font-size: 29px !important; } } .hp-time-line-ausbildung-3 p { color:#ffffff ; font-weight: 600 !important; } /* Bullets/Icons */ .hp-time-line-ausbildung-3.avia-timeline-container .av-milestone .av-milestone-icon-inner { background: linear-gradient(-45deg, rgba(0,250,255,1) 15%, rgba(0,93,182,1) 77%) !important; } .hp-time-line-ausbildung-3.avia-timeline-container .av-milestone .av-milestone-indicator { background-color: #f9dc0a !important; } /* Numbers*/ .hp-time-line-ausbildung-3 .avia-timeline .milestone_icon { color: #f9dc0a; font-size: 18px; font-weight: 600; } /* Spacings */ /* Space between single content (HD and copy) */ .hp-time-line-ausbildung-3 .avia-timeline-vertical .av-milestone-content-wrap { padding-bottom: 0px !important; /* padding-left: 30px !important; */ } @media only screen and (max-width: 989px) { .hp-time-line-ausbildung-3 .avia-timeline-vertical .av-milestone-content-wrap { padding-bottom: 40px !important; } } /* Space copy to HD – every second one – if switching to left aligned */ @media only screen and (max-width: 989px) { .av-no-preview .hp-time-line-ausbildung-3 .avia-timeline-vertical.av-milestone-placement-alternate li.av-milestone-even .av-milestone-date { padding-bottom: 10px !important; } } /* Space content (HD and copy) to top – every second one */ @media only screen and (max-width: 767px) { .av-no-preview .avia-timeline-vertical.av-milestone-placement-alternate li.av-milestone-even .av-milestone-date { padding-top: 13px !important; } } /* Space content (HD and copy) to top – every first one */ @media only screen and (max-width: 767px) { .av-no-preview .avia-timeline-vertical .av-milestone-date { padding-top: 13px !important; } } /* Vertical line */ .avia_transform .hp-time-line-ausbildung-3 .avia-timeline-vertical.avia-timeline-animate .avia_start_animation .av-milestone-icon-wrap:after { color: #f9dc0a; /* opacity: 0 !important; */ } /* BULLET - list #top .hp-time-line-ausbildung-3 ul { color: #ffffff; letter-spacing: 0.015em !important; line-height: 1.65em; font-size: 17px; } .hp-time-line-ausbildung-3 li::marker { color: #f9dc0a; } */ /*---------------------------------------- // PROGRESS BAR - AUSBILDUNG //--------------------------------------*/ /* Pprogress bar inside - shadow and bg color */ .hp-progress-bar-ausbildung .avia-progress-bar .progress { box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, .0); background-color: #f7f7f7; border-radius: 40px !important; } /* Pprogress bar - bg gradient */ #top .avia-progress-bar div.progress .bar { background: #005eaa; /* fallback for old browsers */ /* Chrome 10-25, Safari 5.1-6 */ background: -webkit-linear-gradient(right, #41c8e0, #005eaa); background: -o-linear-gradient(right, #41c8e0, #005eaa); background: linear-gradient(to left, #41c8e0, #005eaa); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ animation:none; background-size: 100%!important; border-radius: 40px !important; } /* Title */ .hp-progress-bar-ausbildung .progressbar-title { color:#5f5f5e; background: transparent; font-size: 36px; line-height: 1.25em; font-weight: 500 !important; letter-spacing: 0.015em; text-transform: none; font-weight: 700; padding-bottom: 5px; } /* Percent */ .progressbar-percent { opacity: 1; color:#5f5f5e; background: transparent; font-size: 36px; line-height: 1.25em; font-weight: 500 !important; letter-spacing: 0.015em ; text-transform: none; font-weight: 700; padding-bottom: 5px; } /*---------------------------------------- // PROGRESS BAR – 2 - AUSBILDUNG //--------------------------------------*/ /* Pprogress bar inside - shadow and bg color */ .hp-progress-bar-ausbildung-2 .avia-progress-bar .progress { box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, .0); background-color: #f7f7f7; border-radius: 40px !important; } /* Pprogress bar - bg gradient */ #top .avia-progress-bar div.progress .bar { background: #005db6; /* fallback for old browsers */ /* Chrome 10-25, Safari 5.1-6 */ background: -webkit-linear-gradient(right, #00f8ff, #005db6); background: -o-linear-gradient(right, #00f8ff, #005db6); background: linear-gradient(to left, #00f8ff, #005db6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ animation:none; background-size: 100%!important; border-radius: 40px !important; } /* Title */ .hp-progress-bar-ausbildung-2 .progressbar-title { color:#5f5f5e; background: transparent; font-size: 23px !important; line-height: 1.25em !important; font-weight: 600 !important; letter-spacing: 0.015em !important; text-transform: none; padding-bottom: 5px; } /* Percent */ .hp-progress-bar-ausbildung-2 .progressbar-percent { opacity: 1; color:#5f5f5e; background: transparent; font-size: 23px !important; line-height: 1.25em !important; font-weight: 600 !important; letter-spacing: 0.015em !important; text-transform: none; padding-bottom: 5px; } /*---------------------------------------- // IMAGE WITH HOTSPOTS - AUSBILDUNG //--------------------------------------*/ /* Tooltip – copy area – */ .avia-tooltip.av-tt-pos-left { text-align: left !important; border-radius: 20px 2px 20px 20px; } .avia-tooltip.av-tt-pos-right { text-align: left !important; border-radius: 2px 20px 20px 20px; } /* Copy - bold – for HD-effect */ .inner_tooltip strong, .av-hotspot-fallback-tooltip-inner strong { font-size: 23px; font-weight: 700; color: #5f5f5e !important; letter-spacing: 0.009em !important; } /* Circle with number - if visible info */ .av-hotspot-fallback-tooltip-count { color: #5f5f5e !important; height: 25px; width: 25px; line-height: 25px; border-style: solid; border-width: 1px; text-align: center; border-radius: 100px; position: absolute; top: 15px; left: 15px; z-index: 10; } /* Circle with number - 2 - if visible info */ .hp-image-hotspots-ausbildung-2 .av-hotspot-fallback-tooltip-count { color: #f9dc0a !important; font-weight: 800; height: 25px; width: 25px; line-height: 25px; border-style: solid; border-width: 0px; text-align: center; border-radius: 100px; position: absolute; top: 19px; left: 26px; z-index: 10; /* background: linear-gradient(-45deg, rgba(0,250,255,1) 10%, rgba(0,93,182,1) 77%) !important; */ background: linear-gradient(-45deg, rgba(0,250,255,1) 10%, rgba(0,93,182,1) 77%) !important; } /* Content – position / border-radius etc - if visible info */ .av-hotspot-fallback-tooltip-inner { margin-left: 35px; border: 1px solid; padding: 0 0 0 12px; position: relative; border-radius: 2px; border-radius: 2px 20px 20px 20px; /* background-color: red!important; */ } /* .av-hotspot-container .av-image-hotspot-pulse { background: #f9dc0a!important; } */ /* GRADIENT in imga-hotspot-container .av-hotspot-image-container { background: linear-gradient(-45deg, #00f8ff, #005db6, #00f8ff); background-size: 400% 100%; animation: hp-slider-gradient 15s ease infinite; } @media only screen and (max-width: 800px) and (min-width: 480px) { .av-hotspot-image-container { background: linear-gradient(-45deg, #00f8ff, #005db6, #00f8ff); background-size: 400% 100%; animation: hp-slider-gradient 15s ease infinite; } } @media only screen and (max-width: 479px) { .av-hotspot-image-container { background: linear-gradient(-45deg, #00f8ff, #005db6, #00f8ff); background-size: 400% 100%; animation: hp-slider-gradient 15s ease infinite; } } */ /*---------------------------------------- // WHATSAPP ICON - AUSBILDUNG – start //--------------------------------------*/ /* .hp-whats-app-icon.av_font_icon .av-icon-char { font-size: 80px!important; line-height: 80px!important; width: 80px!important; padding: 0px; border: 0px solid red; } */ /* Change icon with image */ .hp-whats-app-icon.av_font_icon .av-icon-char:before { display: none; } .hp-whats-app-icon.av_font_icon .av-icon-char { background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } /* Image - size */ .hp-whats-app-icon.av_font_icon .av-icon-char { border: none; height: 60px !important; width: 60px !important; min-height: 60px !important; min-width: 60px !important; } .hp-whats-app-icon.av_font_icon .av-icon-char { background-image: url(https://www.hansa-projekt.de/wp-content/uploads/2025/05/HP_WhatsApp_ICON.svg); } /* WHATSAPP - disclaimer - copy */ .hp-hinweis-white-ausbildung p { color:white; font-size: 12px !important; /* line-height: 1.1em !important; */ font-weight: 500 !important; letter-spacing: 0.015em !important; } .hp-hinweis-white-ausbildung strong { color:white; font-weight: 700 !important; letter-spacing: 0.015em !important; } .hp-sub-hd-bigger-ausbildung-white p { color:white; font-size: 32px !important; /* line-height: 1.1em !important; */ font-weight: 700 !important; } @media only screen and (max-width: 479px) { .hp-sub-hd-bigger-ausbildung-white p { font-size: 29px !important; } } /* ZOOM - on hover */ .hp-whats-app-icon.av_font_icon .av-icon-char { transition: transform 0.3s !important; } .hp-whats-app-icon.av_font_icon .av-icon-char:hover { transform: scale(1.3) !important; } /* Pulsar */ #hp-whats-app-icon-id.av_font_icon .av-icon-char { animation: pulsar-wa 2s infinite; transition: transform 0.3s !important; } @keyframes pulsar-wa { 0% {box-shadow: 0 0 0 0em rgba(255,255,255,1);} 100% {box-shadow: 0 0 0 1em rgba(255,255,255,.0);} } /*---------------------------------------- // WHATSAPP ICON – FIXED-ICON - AUSBILDUNG //--------------------------------------*/ /* Hide everywhere */ #hp-sb-fixed-wp-id-ausbildung { display: none; } /*Show only on these sites */ .page-id-4116 #hp-sb-fixed-wp-id-ausbildung, /* START */ .page-id-4116 #hp-sb-fixed-wp-id-ausbildung, /* AUSSCHREIBUNG - Informationseletroniker (m/w/d) - Brand- und Gefahrenmeldeanlagen */ .postid-4263 #hp-sb-fixed-wp-id-ausbildung, /* AUSSCHREIBUNG - Informationseletroniker (m/w/d) - Telekommunikation */ .postid-4713 #hp-sb-fixed-wp-id-ausbildung, /* AUSSCHREIBUNG - Informationseletroniker (m/w/d) - Energie- und Gebäudetechnik */ .postid-4724 #hp-sb-fixed-wp-id-ausbildung, /* FORMULAR */ .page-id-4366 #hp-sb-fixed-wp-id-ausbildung, /* FORMULAR */ .page-id-4551 #hp-sb-fixed-wp-id-ausbildung { display: block; } /* Icon box content background */ #top .hp-sb-fixed-wp-ausbildung.iconbox .iconbox_content { background: white; padding-top: 18px; padding-bottom: 7px; padding-left: 17px; border: 0px solid #005eaa !important; border-radius: 100px; box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.1); z-index: 99999 !important; } /* Title */ .hp-sb-fixed-wp-ausbildung.iconbox .iconbox_content .iconbox_content_title { font-family: 'hp-fonts-opensans', Helvetica, Arial, sans-serif !important; text-transform: none; font-size: 17px; font-weight: 600 !important; letter-spacing: 0.035em; color: #5f5f5e; margin: 0; padding: 0 0 5px 0; } /* Icon – font color*/ .hp-sb-fixed-wp-ausbildung.iconbox .iconbox_icon:before { font-size: 38px!important; line-height: 30px!important; color: #25d366; } /* Icon – position*/ @media only screen and (max-width: 529px) { .hp-sb-fixed-wp-ausbildung.iconbox_left .iconbox_icon { bottom: -4px; left: -10px; margin: 0; width: 37px; } } @media only screen and (min-width: 530px) { .hp-sb-fixed-wp-ausbildung.iconbox_left .iconbox_icon { bottom: -4px; left: -9px; margin: 0; width: 37px; } } /* Iconbox has always 30px for margin-bottom – for easier positioning changed to 0px */ #top .hp-sb-fixed-wp-ausbildung.iconbox { margin: 0; } /* Position and movement */ @media only screen and (max-width: 529px) { #hp-sb-fixed-wp-id-ausbildung { bottom: 67px ; } } @media only screen and (min-width: 530px) { #hp-sb-fixed-wp-id-ausbildung { top:202px; } } .hp-sb-fixed-wp-ausbildung.iconbox { z-index: 999 !important; position: fixed; right: -273px !important; width: 320px; transition: all 0.3s ease-in-out; transition-behavior: normal; transition-duration: 0.3s; transition-timing-function: ease-in-out; transition-delay: 0s; transition-property: all; } .hp-sb-fixed-wp-ausbildung.iconbox:hover { right: -20px !important; } /*---------------------------------------- //IMAGE - HANDELSKAMMER //--------------------------------------*/ .hp-image-handelskammer{ width: 38%; height: auto; transition: transform 0.25s; overflow: visible; } .hp-image-handelskammer:hover{ transform: scale(1.9); overflow: visible; } .hp-image-handelskammer img { border-radius: 10px; } /*---------------------------------------- //BUTTON - BEWIRB DICH //--------------------------------------*/ /* Button - background, border... */ .hp-button-bewerben a.avia-button { border-radius: 100px; border: 0px solid #005eaa !important; background: linear-gradient(-45deg, rgba(0,250,255,1) 11%, rgba(0,93,182,1) 77%) !important; animation: pulsar-bewerben 2s infinite; transition: transform 0.3s !important; } @keyframes pulsar-bewerben { 0% {box-shadow: 0 0 0 0em rgba(249,220,10,1);} 100% {box-shadow: 0 0 0 2em rgba(249,10,240,.0);} } /* Button - hover */ .hp-button-bewerben a.avia-button:hover { transform: scale(1.5); animation: pulsar-bewerben-hover 2s infinite; } @keyframes pulsar-bewerben-hover { 0% {box-shadow: 0 0 0 0em rgba(249,220,10,0);} 100% {box-shadow: 0 0 0 1.5em rgba(249,10,240,.0);} } /* Button - title */ .hp-button-bewerben a.avia-button .avia_iconbox_title { font-size:23px; font-weight: 700; letter-spacing: 0.015em; color: #ffffff; /* font-weight: 700; */ /* top:-10px; padding-left: 0px; */ } .hp-button-bewerben a.avia-button .avia_iconbox_title::after { content: "!"; color: #f9dc0a !important; -webkit-text-fill-color: #f9dc0a !important; font-weight: 800; } /* Button-Icon - size, position... */ /* .hp-button-bewerben .avia-button .avia_button_icon { font-size: 35px!important; line-height: 35px!important; color: #ffffff; left: -0.2em; } */ /* Column - button - spacing – using no sticky effect!!!... just placing! */ .hp-column-sticky-01 { padding: 0 0 0 0 !important; } /*---------------------------------------- //ROTATING HEADLINES //--------------------------------------*/ /* Fixed part */ .hp-ausbildung-rotating-hd .av-rotator-container-inner { color:#5f5f5e; background: transparent; font-size: 32px !important; line-height: 1.1em !important; font-weight: 700 !important; letter-spacing: 0.015em !important; } @media only screen and (max-width: 479px) { .hp-ausbildung-rotating-hd .av-rotator-container-inner { font-size: 29px !important; } } /* Animated part */ .hp-ausbildung-rotating-hd .av-rotator-multiline-on.av-rotator-text { color:#5f5f5e; background: transparent; font-size: 23px !important; line-height: 1.36em !important; font-weight: 600 !important; letter-spacing: 0.015em !important; padding-top: 10px; } /* Selection color */ .hp-ausbildung-rotating-hd.av-marked-text .av-rotator-text-single { background: linear-gradient(-45deg, rgba(0,250,255,1) 10%, rgba(0,93,182,1) 77%) !important; border-radius: 40px; padding-left:20px; padding-right:20px; } /*---------------------------------------- //ICON-CIRCLES //--------------------------------------*/ /* Outline – big circle */ .hp-icon-circle.av-icon-circles-container .avia-icon-circles-inner { border-style: dashed !important; border-width: 1px !important; } /* Text */ .hp-icon-circle p { color:#ffffff; font-size: 23px !important; line-height: 1.25em !important; font-weight:600 !important; letter-spacing: 0.015em !important; } /* Icon – color */ .hp-icon-circle.av-icon-circles-container .avia-icon-circles-icon { color: #f9dc0a; background: linear-gradient(-45deg, rgba(0,250,255,1) 15%, rgba(0,93,182,1) 77%) !important; border: 0px!important; animation: pulsar-icon-circle 2s infinite; transition: transform 0.3s !important; } @keyframes pulsar-icon-circle { 0% {box-shadow: 0 0 0 0em rgba(249,220,10,1);} 100% {box-shadow: 0 0 0 .6em rgba(249,10,240,.0);} } .hp-icon-circle.av-icon-circles-container .avia-icon-circles-icon:hover { transform: scale(1.85) !important; } .hp-icon-circle.av-icon-circles-container .avia-icon-circles-icon { transition: transform 0.3s !important; } /* Background – big circle – aktive */ .hp-icon-circle.av-icon-circles-container .avia-icon-circles-icon-text { background: linear-gradient(-45deg, rgba(0,250,255,1) 15%, rgba(0,93,182,1) 77%) !important; } /* Icon */ .hp-icon-circle .avia-icon-circles-icon { font-size: 42px!important; } /* Image – center of big circle */ .hp-icon-circle .avia-icon-circles-main-logo { padding-left: 30px; padding-right: 30px; } /*---------------------------------------- // CONTACT FORM 7 - AUSBILDUNG styling //--------------------------------------*/ /* Textarea email and input fields */ #top #wpcf7-f4387-p4366-o1 input[type='text'], #top #wpcf7-f4387-p4366-o1 input[type='email'], #top #wpcf7-f4387-p4366-o1 input[type='tel'], #top #wpcf7-f4387-p4366-o1 .wpcf7-textarea { background: linear-gradient(-45deg, rgba(0,250,255,1) 10%, rgba(0,93,182,1) 77%)!important; color: #ffffff; font-family: 'HP-fonts-opensans', Helvetica, Arial, sans-serif; font-size: 23px; font-weight:600; letter-spacing: 0.015em; line-height: 1em; padding: 20px; border-radius: 200px; border-style: solid; border-width: 0px; text-align: center; } #wpcf7-f4387-p4366-o1 input::placeholder { color: #ffffff; font-weight:400; } /* ZOOM effect for input fields */ #top #wpcf7-f4387-p4366-o1 input[type="text"], #top #wpcf7-f4387-p4366-o1 input[type="email"], #top #wpcf7-f4387-p4366-o1 input[type="tel"] { transition: all 0.25s cubic-bezier(.25,.8,.25,1)!important; } #top #wpcf7-f4387-p4366-o1 input[type="text"]:focus, #top #wpcf7-f4387-p4366-o1 input[type="email"]:focus, #top #wpcf7-f4387-p4366-o1 input[type="tel"]:focus { transform: scale(1.15)!important; box-shadow: none!important; } /* Label */ #wpcf7-f4387-p4366-o1 label { font-size: 23px !important; letter-spacing: 0.015em !important; font-weight: 600 !important; color: #5f5f5e !important; text-align: center !important; } /* Distance from .stellenangebor to Label */ #wpcf7-f4387-p4366-o1 .stellenangebot-class-ausbildung { margin-top: 10px !important; } /* AUTO FILLING – Stellenausschrebung in cf7 */ .stellenangebot-class-ausbildung { color: #f9dc0a !important; /* font-size: 18px !important; */ /* line-height: 1.25em !important; */ /* font-weight:600 !important; */ /* letter-spacing: 0.013em !important; */ /* background-color: blue !important; */ /* padding: 0 !important; */ } /* NO scale effect for this input field */ #top #wpcf7-f4387-p4366-o1 input[type="text"].stellenangebot-class-ausbildung:focus { transform: scale(1)!important; } /* Headlines in H2 */ #wpcf7-f4387-p4366-o1 h2 { font-family: 'HP-fonts-opensans', Helvetica, Arial, sans-serif !important; text-transform: none; font-size: 32px !important; letter-spacing: 0.015em !important; font-weight: 700 !important; color: #5f5f5e !important; text-align: center; } @media only screen and (max-width: 479px) { #wpcf7-f4387-p4366-o1 h2 { font-size: 29px !important; } } /* Copy in p */ #wpcf7-f4387-p4366-o1 p { font-family: 'HP-fonts-opensans', Helvetica, Arial, sans-serif !important; text-transform: none; font-size: 23px !important; line-height: 1.25em; letter-spacing: 0.015em !important; font-weight: 600 !important; color: #5f5f5e !important; text-align: center; } /* Error message – input fields */ #wpcf7-f4387-p4366-o1 .wpcf7-not-valid-tip { color: #fd8017; font-size: 15px; font-weight: 500; } /* Error message – under submit button */ #wpcf7-f4387-p4366-o1 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, #wpcf7-f4387-p4366-o1 form.payment-required .wpcf7-response-output { border: 0; } #wpcf7-f4387-p4366-o1 form .wpcf7-response-output { margin: 0; padding: 0; border: 0; color: #fd8017; font-size: 15px; font-weight: 500; text-align: center; } /* Checkbox - text */ #top #wpcf7-f4387-p4366-o1 .wpcf7-list-item-label { color: #5f5f5e !important; font-family: 'HP-fonts-opensans', Helvetica, Arial, sans-serif !important; font-size: 15px !important; letter-spacing: 0.02em !important; } /* Checkbox - text */ #top #wpcf7-f4387-p4366-o1 .checkbox-datenschutz, #top #wpcf7-f4387-p4366-o1 .checkbox-bewerberdaten { line-height: 1.15em !important; } input[type=checkbox]:checked { -webkit-appearance: checkbox !important; } input[type=checkbox]{ accent-color: #5f5f5e !important; background-color: #5f5f5e !important; } /* Submit button */ #top #wpcf7-f4387-p4366-o1 .wpcf7-form .wpcf7-submit { margin-top: 80px !important; margin-bottom: 80px !important; border-radius: 100px !important; border: 0px solid #005eaa !important; padding: 17px 50px 20px !important; width: 220px !important; background: linear-gradient(-45deg, rgba(0,250,255,1) 11%, rgba(0,93,182,1) 77%) !important; animation: pulsar-submit 2s infinite; transition: transform 0.3s !important; } @keyframes pulsar-submit { 0% {box-shadow: 0 0 0 0em rgba(249,220,10,1);} 100% {box-shadow: 0 0 0 1.5em rgba(249,10,240,.0);} } /* button-hover */ #top #wpcf7-f4387-p4366-o1 .wpcf7-form .wpcf7-submit:hover { transform: scale(1.5); animation: pulsar-submit-hover 2s infinite; } @keyframes pulsar-submit-hover { 0% {box-shadow: 0 0 0 0em rgba(249,220,10,0);} 100% {box-shadow: 0 0 0 1.5em rgba(249,10,240,.0);} } #wpcf7-f4387-p4366-o1 input[type="submit"] { font-family: 'HP-fonts-opensans', Helvetica, Arial, sans-serif !important; font-size:23px !important; font-weight: 700 !important; letter-spacing: 0.015em !important; /* top:-10px !important; */ color: #ffffff !important; } /* Sending-Spinner – hide to center submit button */ #wpcf7-f4387-p4366-o1 .wpcf7-spinner { top: 7px !important; background-color: #5f5f5e !important; opacity: 1 !important; display: none; } /*---------------------------------------- // UPLOAD-BUTTON – SELF-GENERATED – only for Ausbildung – CONTACT FORM 7 //--------------------------------------*/ /* Container pro Upload (Button oben, Dateiname unten) */ .hp-custom-file { display: inline-flex; flex-direction: column; /* übereinander */ align-items: center; /* zentriert horizontale Achse -> Button + Text */ justify-content: flex-start; /* Abstand untereinander (falls du mehrere nebeneinander hast) */ box-sizing: border-box; /* Falls du feste Breiten willst, kannst du hier width setzen */ } /* Sichtbarer Button */ .hp-custom-file .hp-upload-btn { background: linear-gradient(-45deg, rgba(0,250,255,1) 10%, rgba(0,93,182,1) 77%); color: #fff!important; padding: 14px 18px 15px 18px; border-radius: 100px; font-weight: 600; display: inline-block; margin-bottom: 6px !important; font-family: 'HP-fonts-opensans', Helvetica, Arial, sans-serif !important; font-size: 17px !important; letter-spacing: 0.02em !important; line-height: 1; /* konsistente Höhe in allen Browsern */ width: 260px !important; transition: transform 0.3s !important; cursor: pointer; /* Mauszeiger ändern */ } /* Hover/Effekt */ .hp-custom-file:hover .hp-upload-btn { transform: scale(1.3)!important; } /* Abstand zwischen Button und Dateiname (explizit, funktioniert überall) */ .hp-custom-file .hp-upload-btn { /* margin-bottom: 35px!important; passe Variable weiter unten an */ } /* Dateiname unter dem Button — zentriert */ .hp-custom-file .hp-file-name { display: block; width: 100%; /* max-width: 220px; optional: verhindert zu breite Texte; anpassen nach Bedarf */ text-align: center; /* zentriert Text unter Button */ font-family: 'HP-fonts-opensans', Helvetica, Arial, sans-serif !important; font-size: 15px !important; letter-spacing: 0.02em !important; line-height: 1; /* konsistente Höhe in allen Browsern */ color: #5f5f5e; margin-bottom: 35px; /* Abstand kontrolliert durch button margin-bottom */ word-break: break-word; /* lange Dateinamen umbrechen */ } /* Unsichtbares natives Input: nicht pointer-events:none - sonst Probleme */ .hp-upload-ausbildung { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; left: -9999px; /* sicher unsichtbar und kein Layout-Einfluss */ } /* NECESSARY because cf7 automatically sets br... this creates large gaps */ /* Verstecke alle
innerhalb unserer custom-file-Wrapper */ .hp-custom-file br { display: none !important; line-height: 0 !important; margin: 0 !important; padding: 0 !important; } /* Falls WP/CF7 leere

oder

um unsere Elemente setzt: entfernen wir überschüssige Margins */ .hp-custom-file p { margin: 0 !important; padding: 0 !important; line-height: 1 !important; } /* Extra: stelle sicher, dass unsere Elemente block-level sind und keinen zusätzlichen Abstand erzeugen */ .hp-custom-file > * { margin: 0; padding: 0; } /* Falls WP
als   oder ähnliches einfügt, zwingen wir konsistente line-height */ .hp-custom-file .hp-upload-btn, .hp-custom-file .hp-file-name { line-height: 1; display: block; }