/* this file contains the global layout of page */ /* globals */ html, body { background: #FFF; } a { transition: all .2s ease; } /* selection */ ::selection { background: #444; color: #FFF; } a::selection, a span::selection { color: #000; } ::-moz-selection { background: #444; color: #FFF; } a::-moz-selection, a span::-moz-selection { color: #000; } /* root */ #inner-wrapper, body > #root { background: #FFF; margin: 0 auto; position: relative; min-height: 100%; width: 100%; } #inner-wrapper {} #root { margin: 0 auto; min-height: 100vh; position: relative; } /* page width */ #content-area, #mainHeader, #mainFooter .outer-wrapper { clear: both; margin: 0 auto; padding: 0 20px; max-width: 1386px; } /* row and col */ .row { margin-left: -20px; margin-right: -20px; } .col { padding-left: 20px; padding-right: 20px; } /* animation */ .header #logo, .navbar-toggler, .navbar-toggler-icon, .toggleSubNav span { transition: .25s ease-out; } /** scroll to top */ #ScrollToTop { border-color: #DE5800; } #ScrollToTop .scroll-top-icon::before { border-color: #DE5800; } #ScrollToTop .scroll-top-icon::after, #ScrollToTop.scroll-top-fixed .scroll-top-icon::after { background: #DE5800; } #ScrollToTop.scroll-top-fixed { background: none; border-color: #DE5800; margin-bottom: -60px; } #ScrollToTop.scroll-top-fixed .scroll-top-icon::before { border-color: #DE5800; } #ScrollToTop:hover { border-color: #DE5800; } #ScrollToTop:hover .scroll-top-icon::before { border-color: #FFF; } #ScrollToTop.scroll-top-fixed:hover { border-color: #FFF; } #ScrollToTop.scroll-top-fixed:hover .scroll-top-icon::before { border-color: #FFF; } /** main header */ .headerMenu { display: flex; } .headerMenu::before { content: ""; width: 100%; background: #3E4E5F; opacity: 0.14; position: absolute; left: 0; right: 0; } .headerMenu, .headerMenu::before { height: 41px; } .langselect { margin: auto auto auto 0; z-index: 1; } .langselect .language-navigation { display: flex; } .langselect .menu-item { display: inline-block; width: 23px; height: 23px; } .langselect .menu-item:not(:last-child) { margin-right: 24px; } .langselect .flag-icon { font-size: 0; background-size: cover; background-repeat: no-repeat; display: block; width: 100%; height: 100%; text-indent: -9999px; } .langselect .flag-icon-de { background-image: url("../Images/Sental-Sprache-DE-2x.png"); } .langselect .flag-icon-en { background-image: url("../Images/Sental-Sprache-EN-2x.png"); } .header-contact { margin: auto 0 auto auto; color: #DE5800; z-index: 1; } .header-contact i { margin: 0 10px; } .header-contact a { cursor: pointer; } #mainHeader .inner { padding-top: 30px; padding-bottom: 30px; display: flex; } #logo { margin: auto auto auto 0; width: 204px; height: 48px; } #logo a { display: block; height: 100%; background: url("../Images/Sental-Logo.svg") no-repeat; background-size: contain; font-size: 0; } #logo .image { display: none; } /* main menu */ .navbar-toggler--label { display: none; } #main-nav { margin: auto 0 auto auto; z-index: 200; } #main-nav .menu-item.has--child-items { position: relative; } #main-nav .main-navigation ul.menu-level-1 > li.menu-item { display: inline-block; } #main-nav .main-navigation ul.menu-level-1 > li.menu-item:not(:last-child) { margin-right: 40px;} #main-nav .main-navigation ul.menu-level-1 > li.menu-item > a { font-family: Montserrat, sans-serif; font-size: 20px; font-weight: 700; color: #000; text-decoration: none; } #main-nav .menu-level-2 .toggle--sub-nav { display: none; } #main-nav .main-navigation ul.menu-level-3 { display: none; } @media screen and (min-width: 992px) { #main-nav .main-navigation ul.menu-level-1 > li.menu-item.active > a, #main-nav .main-navigation ul.menu-level-1 > li.menu-item > a:hover { color: #DE5800; } #mainHeader .inner #main-nav .menu-item.has--child-items{ padding-bottom: 25px; } #mainHeader .inner #main-nav .menu.menu-level-2 li { width: 100%; padding: 15px 60px; position: relative; } #mainHeader .header-inner #main-nav .menu { display: flex; flex-direction: row; gap: 30px; } #mainHeader .header-inner #main-nav ul.menu.nav-menu.submenu.menu-level-2 { flex-direction: column; position: absolute; background-color: rgba(255, 255, 255, 0.9); left: -60px; gap: 0; top: 60px; width: 450px; } #mainHeader .inner #main-nav .menu li:hover > .submenu-wrapper { opacity: 1; transform: rotateX(0) translateZ(0); z-index: 100; } #mainHeader .inner #main-nav ul.menu.nav-menu.submenu.menu-level-2 li:hover { background: #fff; } #mainHeader .inner #main-nav .menu .submenu-wrapper { backface-visibility: hidden; opacity: 0; transform: rotateX(-90deg); transform-style: preserve-3d; transform-origin: top center; transition: transform .5s cubic-bezier(.2,.7,.7,1.3), opacity .1s .1s; position: absolute; top: -5px; left: 0; z-index: -1; } #mainHeader .inner #main-nav ul.menu.nav-menu.submenu.menu-level-2 { flex-direction: column; position: absolute; background-color: rgba(255, 255, 255, 0.9); left: -60px; gap: 0; top: 58px; width: 450px; } #mainHeader .inner #main-nav ul.menu.nav-menu.submenu.menu-level-2 a{ display: block; font-size: 20px; } #mainHeader .inner #main-nav ul.menu.nav-menu.submenu.menu-level-2 a:hover{ text-decoration: none; } } @media screen and (max-width: 992px){ #main-nav .main-navigation .closed ul.menu-level-2 { display: none; } #main-nav .main-navigation .menu-level-2 .menu-item{ padding: 10px 13px; } #main-nav .main-navigation a{ display: block; font-size: 19px; text-decoration: none; } #mainHeader .inner #main-nav ul.menu.nav-menu.submenu.menu-level-2 a{ color: #fff; } /* toggle--sub-nav */ #main-nav .toggle--sub-nav { display: block; cursor: pointer; height: 30px; width: 30px; position: absolute; top: 0; right: -30px; z-index: 5; transform-origin: center; } #main-nav .toggle--sub-nav::before, #main-nav .toggle--sub-nav::after { content: ""; background: #fff; border-radius: 2px; height: 3px; width: 10px; position: absolute; top: 50%; z-index: 6; transition: all .4s ease-in-out; } #main-nav .toggle--sub-nav::before { right: 7px; transform: rotate(-45deg); } #main-nav .toggle--sub-nav::after { right: 13px; transform: rotate(45deg); } #main-nav .open > .toggle--sub-nav::before, #main-nav .open > .toggle--sub-nav::after { top: 14px; } #main-nav .open > .toggle--sub-nav::before { transform: rotate(45deg); } #main-nav .open > .toggle--sub-nav::after { transform: rotate(-45deg); } @media screen and (prefers-reduced-motion: reduce) { #main-nav .toggle--sub-nav::before, #main-nav .toggle--sub-nav::after { transition: none; } } } /** content area */ #content-area {} #content-area:after, #content-area #content:after { content: ""; clear: both; display: block; width: 100%; } .row.columns-2:has(.ce-gallery), .row.columns-2:has(.teaser-icons) { align-items: center; } /** breadcrumbs */ #breadcrumbList { margin-top: 27px; } #breadcrumbList .breadcrumb-list .ce-content { list-style: none; padding-inline-start: 0; } #breadcrumbList .breadcrumb-list .ce-content > li { display: inline-block; } #breadcrumbList .breadcrumb-item[data-page-id="1"] .breadcrumb-link::before, #breadcrumbList .breadcrumb-item .breadcrumb-text, #breadcrumbList .breadcrumb-item.active .breadcrumb-text, #breadcrumbList .separator { color: #000; opacity: .3; font-family: Lato, sans-serif; font-size: 16px; font-weight: 400; line-height: 26px; } #breadcrumbList .breadcrumb-item[data-page-id="1"] .breadcrumb-link::before { content: "Start"; } #breadcrumbList .breadcrumb-item[data-page-id="1"] .breadcrumb-link:hover::before { opacity: 1; } #breadcrumbList .breadcrumb-item .breadcrumb-text { } #breadcrumbList .breadcrumb-item .breadcrumb-text:hover { opacity: 1; } #breadcrumbList .breadcrumb-item.active .breadcrumb-text { font-weight: 700; } #breadcrumbList .breadcrumb-item.active .breadcrumb-text:hover { opacity: .3; } #breadcrumbList .separator {} #breadcrumbList .separator::after { content: "\f054"; font-family: "Font Awesome 5 Free"; font-size: 11px; font-weight: 900; position: relative; bottom: 0; } /** main footer */ #mainFooter { background: #4F4F4F; } #mainFooter .inner-wrapper { padding: 40px 0 30px; } #mainFooter, #mainFooter p, #mainFooter a { font-size: 17px; color: #fff; } #mainFooter .header.h4 { font-size: 19px; color: #fff; } #mainFooter a { text-decoration: none; border-bottom: 1px solid transparent; cursor: pointer; padding-bottom: 3px; } #mainFooter a:hover { border-bottom: 1px solid #fff; } #mainFooter a.more { border: 2px solid #fff; margin-top: 15px; width: 100%; text-align: center; max-width: 200px; } #mainFooter a.more:hover { border: 2px solid #fff; color: #3E4E5F; background: #fff; } #mainFooter a.link-external:after { display: none; } #mainFooter p { margin-bottom: 3px; } #mainFooter hr { background: #fff; margin: 30px 0; } #mainFooter .footer-infos-row { display: flex; padding-left: 7%; } #mainFooter .footer-infos-item { flex: 1 1 auto; } #mainFooter .footer-infos-item:last-child { flex: 0 1 auto; } #mainFooter .footer-logo { background: url("../Images/Sental-Logo-weiss.svg") no-repeat; background-size: contain; height: 50px; margin-bottom: 20px; max-width: 210px; width: auto; } #mainFooter .footer-logo > a {position: absolute; width: 100%; height: 100%; top: 0; left: 0; bottom: 0; right: 0; border-bottom: none; } #mainFooter .footer-logo > a:hover { border-bottom: none;} #mainFooter .footer-infos .site-navigation li { margin-bottom: 6px; padding: 4px 0; } #mainFooter .footer-infos .site-navigation li > a { font-size: 19px; font-weight: 900; } #mainFooter .footer-socialmedia { position: relative; width: 100%; padding: 0 20px; display: flex; justify-content: flex-end; } #mainFooter .footer-socialmedia a {display: block;text-decoration: none;height: 27px;width: 27px;overflow: hidden;display: flex;justify-content: center;align-items: center;border-bottom: none;} #mainFooter .footer-socialmedia a:hover { border-bottom: none; color: rgba(255,255,255,0.8)} #mainFooter .footer-socialmedia a::before, #mainFooter .footer-socialmedia a .label, #mainFooter a[href*="linkedin"] { display: block;font-family: "Font Awesome 5 Brands";font-size: 27px !important;line-height: 1;} #mainFooter .footer-socialmedia a[href*="linkedin"]::before, #mainFooter .footer-socialmedia a .label, #mainFooter a[href*="linkedin"]::before{ content: "\f08c";} #mainFooter .footer-socialmedia a .label, #mainFooter a[href*="linkedin"] .label { display: none; } #mainFooter a[href*="linkedin"] { margin: 30px 0 -20px 1px; } #mainFooter a[href*="linkedin"]:hover { border-color: transparent; } #mainFooter .footer-bottom { display: flex; } #mainFooter .footer-menu { margin: 3px 0 0 auto; } #mainFooter .footer-menu .site-navigation li { display: inline-block; } #mainFooter .footer-menu .site-navigation li:not(:last-child)::after { content: "|"; padding: 0 7px; } #mainFooter .row{ margin: 0; } #mainFooter .col{ padding: 0; } /** main content */ #content-area #content { margin-top: 60px; } #mainContent { display: block; } /* * * screen width */ @media screen and (max-width: 1300px) { /* before full width of design */ }/* design */ @media screen and (max-width: 1200px) { /* width of design */ }/* design */ @media screen and (max-width: 1024px) { /* ipad - landscape */ }/* 1024px */ @media screen and (max-width: 1023px) { /* smaller than ipad - landscape */ }/* 1023px */ @media screen and (max-width: 992px) { }/* 992px */ /* main navi - as sidebar */ @media screen and (max-width: 991px), (min-width: 992px) and (max-width: 1024px) and (pointer: coarse) { html { overflow-x: hidden; overflow-y: auto; } #nav-toggle:checked ~ #outer-wrapper #inner-wrapper { position: fixed; transform: translateX(-40%); } #nav-toggle:checked ~ #outer-wrapper #inner-wrapper::after { box-shadow: none; } /* nav toggler */ .navbar-toggler { display: block; top: 70px; } .navbar-toggler-icon, .navbar-toggler-icon::before, .navbar-toggler-icon::after { height: 7px; background: #DE5800; border-radius: 2px; } #nav-toggle:checked ~ #outer-wrapper .navbar-toggler-icon, #nav-toggle:checked ~ #outer-wrapper .navbar-toggler-icon::before, #nav-toggle:checked ~ #outer-wrapper .navbar-toggler-icon::after { height: 10px; border-radius: 4px; } #nav-toggle:checked ~ #outer-wrapper .navbar-toggler-icon::before, #nav-toggle:checked ~ #outer-wrapper .navbar-toggler-icon::after { background-color: #DE5800; } /* header */ .main-navigation { background: #DE5800; border-top: 62px solid #DE5800; clear: both; display: block; height: 100vh; width: 40%; margin: 0; padding: 20px 10px 20px 30px; text-align: left; overflow: hidden; overflow-y: scroll; position: absolute; top: 0; right: 0; bottom: auto; transform: translateX(100%); touch-action: none; -webkit-overflow-scrolling: touch; } #main-nav .main-navigation ul.menu-level-1 > li.menu-item { display: block; } #main-nav .main-navigation ul.menu-level-1 > li.menu-item:not(:first-child) { margin-top: 20px; } #main-nav .main-navigation ul.menu-level-1 > li.menu-item > a { color: white; font-size: 22px; } /* footer */ #mainFooter .footer-infos-row { display: grid; grid-gap: 30px; grid-template-columns: repeat(2, 48% [col-start]); } #mainFooter .footer-infos-row { padding-left: 20px; } #mainFooter .footer-infos-item { flex: 1 1 50%; min-width: 50%; } #mainFooter .footer-infos-item:last-child { flex: 0 1 50%; } } @media screen and (max-width: 900px) { }/* 900px */ @media screen and (max-width: 812px) { /* iphone X - landscape */ } @media screen and (max-width: 800px) { }/* 800px */ @media screen and (max-width: 768px) { /* ipad - portrait */ }/* 768px */ @media screen and (max-width: 767px) { /* smaller than ipad - portrait */ #nav-toggle:checked ~ #outer-wrapper #inner-wrapper { transform: translateX(-60%); } .main-navigation { width: 60%; } #mainFooter .footer-infos-item { flex: 1 1 100%; min-width: 100%; } #mainFooter .footer-infos-item:last-child { flex: 0 1 50%; } #mainFooter .footer-bottom { display: block; } #mainFooter .footer-menu { margin-top: 15px; } #mainFooter .footer-infos-wrapper{ flex-display: column; } #mainFooter .footer-infos-item:not(:nth-child(2)){ margin-top: 20px; } }/* 767px */ @media screen and (max-width: 736px) { /* iphone 6+ - landscape */ }/* 736px */ @media screen and (max-width: 667px) { /* iphone 6 - landscape */ }/* 667px */ @media screen and (max-width: 666px) { /* smaller than iphone 6 - landscape */ }/* 666px */ @media screen and (max-width: 568px) { /* iPhone5 - landscape */ }/* 568px */ @media screen and (max-width: 567px) { /* smaller than iPhone5 - landscape */ #mainFooter .footer-infos-row { grid-template-columns: none; } }/* 567px */ @media screen and (max-width: 480px) { /* iPhone4 - landscape */ }/* 480px */ @media screen and (max-width: 479px) { /* smaller than iPhone4 - landscape */ }/* 479px */ @media screen and (max-width: 414px) { /* iPhone6+ - portrait */ }/* 414px */ @media screen and (max-width: 375px) { /* iPhone6 - portrait */ }/* 375px */ @media screen and (max-width: 374px) { /* smaller than iPhone6 - portrait */ }/* 374px */ @media screen and (max-width: 320px) { /* iPhone4/5 - portrait */ } @media screen and (max-width: 319px) { /* smaller devices */ }/* smaller */ /** * Wacon Cookie Manager */ :root { --color-primary: #DE5800; --color-h2: #DE5800; --font-family--h2: Montserrat, sans-serif; --line-height--h2: 1.4; --font-weight--h2: 500; --color-h3: #DE5800; --font-family--h3: Montserrat, sans-serif; --line-height--h3: 1.4; --font-weight--h3: 700; --color-text: #000; --font-family: Lato, Helvetica, Arial, sans-serif; --line-height: 1.4; --font-weight: 400; } #CookieBox p { font-size: 18px; } .waconcookiemanagement #CookieBox .h2 { font-size: 30px; } .waconcookiemanagement #CookieBox .h3 { font-size: 18px; } .waconcookiemanagement #CookieBox .btn { border-radius: 0; font-weight: bold; } /* eof */