:root { --vetsch-theme-colour:#f39501; --vetsch-theme-colour-2:#e14c22; --vetsch-font-colour:#222222; --vetsch-theme-colour-alpha-soft:rgba(243, 149, 1, 0.1); --wp--style--gallery-gap-default: 2rem; --gallery-block--gutter-size: 2rem; --wp--style--block-gap:2rem; } @media(min-width:768px) { :root { --wp--style--gallery-gap-default: 4rem; --gallery-block--gutter-size: 4rem; --wp--style--block-gap:4rem; } } *:not(text) { margin:0; padding:0; border:none; font-size:inherit; font-family:inherit; line-height:inherit; vertical-align:baseline; box-sizing:border-box; } article, aside, figure, footer, header, hgroup, menu, nav, section, address, meter, main { display:block; } html { min-height:100%; height:auto; width:100%; overflow:visible; font-size:62.5%; line-height:1.5; font-family:Verdana, Arial, sans-serif; -ms-touch-action:manipulation; touch-action:manipulation; } @media (max-width:800px) { html { width:100vw; } } body { height:100%; width:100%; min-width:100%; max-width:100%; position:relative; float:left; overflow:visible; -webkit-overflow-scrolling:touch; } b, strong { font-weight:bold; } i, em { font-style:italic; } sup { vertical-align:super; } sub { vertical-align:sub; } sup,sub { line-height:0; font-size:50% !important; padding-left:1px; } h1, h2, h3, h4 { line-height:1.2; } h1, h2, h3, h4, h5, h6, td h1, td h2, td h3, td h4, td h5 { margin-bottom:11px; } h1 *, h2 *, h3 *, h4 *, h5 *, h6 * { font-size:inherit; color:inherit; } * { outline:none; } a { text-decoration:none; font:inherit; outline:none; } a * { cursor:pointer; } figure { line-height:0; } img { outline:none; color:#777; max-width:100%; } br { clear:both; } a:focus, object, embed { outline:none; } object, embed, iframe { vertical-align:middle; } table { border-spacing:0px; } table, tr, td, th, tf { border-collapse :collapse; } table, tr, td, th, tf, span { font-size:inherit; font:inherit; font-style:inherit; color:inherit; font-weight:inherit; line-height:inherit; text-transform:inherit; } td, th, tf { text-align:left; vertical-align:top; padding:0px 3px 3px 0px; min-height:11px; } optgroup { font-weight:bold; font-style:italic; padding:5px; } optgroup option { font-weight:normal; text-indent:10px; } li, ul, ol { height:auto; } .zen-pixel { position:absolute; top:0; left:0; pointer-events:none; } .clear { clear:both; } .hide { display:none; } .clearfix::after { content:" "; visibility:hidden; display:block; height:0; clear:both; } .noSelect { -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; -o-user-select:none; user-select:none; } .float { position:relative; float:left; } .floatAndClear { position:relative; float:left; clear:both; width:100%; } textarea { overflow:auto; } p, h1, h2, h3, h4, h5, table, ul, ol { position:relative; width:100%; float:left; clear:both; } @font-face { font-family:'Roboto'; src:url('fonts/Roboto-Light.woff2') format('woff2'), url('fonts/Roboto-Light.woff') format('woff'); font-weight:300; font-style:normal; font-display:swap; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:antialiased; font-smoothing:antialiased; } @font-face { font-family:'Roboto'; src:url('fonts/Roboto-LightItalic.woff2') format('woff2'), url('fonts/Roboto-LightItalic.woff') format('woff'); font-weight:300; font-style:italic; font-display:swap; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:antialiased; font-smoothing:antialiased; } @font-face { font-family:'Roboto'; src:url('fonts/Roboto-Medium.woff2') format('woff2'), url('fonts/Roboto-Medium.woff') format('woff'); font-weight:500; font-style:normal; font-display:swap; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:antialiased; font-smoothing:antialiased; } @font-face { font-family:'Roboto'; src:url('fonts/Roboto-Bold.woff2') format('woff2'), url('fonts/Roboto-Bold.woff') format('woff'); font-weight:700; font-style:normal; font-display:swap; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:antialiased; font-smoothing:antialiased; } @media(max-width:1400px){ html { font-size:55%; } } @media(max-width:1200px){ html { font-size:50%; } } @media(max-width:600px){ html { font-size:47%; } } @media(max-width:540px){ html { font-size:45%; } } .site-header *, .entry-content *, .entry-header *, .site-footer * { font-family:'Roboto'; line-height:1.4; font-size:2rem; font-weight:300; color:var(--vetsch-font-colour); } b, strong { font-weight:500 !important; } h1 { font-size:3.5rem !important; color:var(--vetsch-theme-colour) !important; font-weight:500 !important; text-align:center; margin:8rem 0; } .entry-header h1 { font-size:4rem !important; margin:8rem 0; } h2 { font-size:3rem !important; margin-bottom:2rem; } p + h2 { margin-top:2rem; } h3 { font-weight:500 !important; margin-bottom:0rem; } p { margin-bottom:2rem; } p:last-of-type { margin-bottom:4rem; } .entry-content ul { margin-left:2rem; margin-bottom:2re;m } .entry-content > figure { margin-bottom:8rem; } .entry-content .wp-block-column > figure { margin-bottom:4rem; } .entry-content .wp-block-column > figure:last-of-type { margin-bottom:0; } .entry-content p a { text-decoration:underline; text-decoration-color:var(--vetsch-theme-colour); text-decoration-skip:true; } .entry-content p a, .entry-content p a * { transition:color 200ms ease-out 0ms; } @media(any-hover:hover) { .entry-content p a:hover, .entry-content p a:hover * { color:var(--vetsch-theme-colour); } } body { position:relative; float:left; width:100%; overflow-x:hidden; overflow-y:auto; min-width:320px; } .site { position:relative; width:100%; min-width:320px; min-height:100vh; } @media(max-width:800px) { body, .site { width:100vw; margin:0; } } .entry-content > *, .entry-content > form > *, .site-footer-inner > *, .wp-block-column > * { position:relative; float:left; clear:both; width:100%; } .site-main { padding-bottom:8rem; min-height:calc(100vh - var(--header-height) - var(--footer-height)); } .site-main, .widget-area, .site-footer { position:relative; float:left; clear:both; width:100%; z-index:1; } .site-header { position:sticky; top:0; background:#fff; box-shadow:0 0 15px rgba(0,0,0,0.3); z-index:3; } .site-header-inner { position:relative; max-width:1920px; margin:0 auto; padding:1rem 20px; display:flex; align-items:end; justify-content:space-between; } @media(max-width:600px) { .wp-block-gallery > figure { width:100% !important; } } .site-branding, .site-branding * { position:relative; float:left; z-index:2; } .site-branding { width:15%; max-width:200px; min-width:100px; transition:height 300ms ease-out 0ms; } .site-branding img { width:100%; height:auto !important; max-height:500px; transition:max-height 300ms ease-out 0ms; } @media(min-width:891px) { body.scrolled .side-branding { height:80px; } body.scrolled .site-branding img { max-height:80px; } } .post-thumbnail, .bg-thumbnail { position:relative; float:left; clear:both; width:100%; } .bg-thumbnail { height:50vh; min-height:220px; background-position:50% 50%; background-size:cover; background-repeat:no-repeat; display:flex; align-items:center; justify-content:center; } .bg-thumbnail .bg-caption { font-family:'Roboto'; color:#fff; font-weight:700; font-size:3rem; line-height:1.2; text-align:center; text-shadow:0 0 10px rgba(0,0,0,0.6); padding:10px; } .bg-thumbnail .bg-teaser { cursor:pointer; position:absolute; top:3.5rem; right:3.5rem; } .bg-teaser, .vetch-teaser { display:block; width:15vw; min-width:90px; max-width:250px; transition:transform 200ms ease-out 0ms !important; transform-origin:50% 50%; backface-visibility:hidden; } .site-footer .vetch-teaser { margin:0 auto; max-width:150px; float:none; } @media(any-hover:hover) { .bg-teaser:hover, .vetch-teaser:hover { transform:rotate(10deg) scale(1.1) !important; } } @media(min-width:768px) { .bg-thumbnail { min-height:0; } .bg-thumbnail .bg-caption { font-size:6rem; } } @media(max-width:600px) { .bg-thumbnail { align-items:flex-end; } } .wp-block-gallery.has-nested-images figure.wp-block-image figcaption { font-family:'Roboto'; font-size:2.4rem; color:#fff; background:rgba(0,0,0,0.5); padding:2rem 2rem; text-align:left; pointer-events:none; transition:padding 200ms ease-out 0ms; text-shadow:0 0 10px rgba(0,0,0,0.5); } .wp-block-gallery.has-nested-images figure.wp-block-image img { transition:transform 200ms ease-out 0ms; backface-visibility:hidden; } .wp-block-gallery.has-nested-images figure.wp-block-image a { overflow:hidden; } .wp-block-gallery.has-nested-images figure.wp-block-image a:focus img { transform:scale(1.05); } @media(any-hover:hover) { .wp-block-gallery.has-nested-images figure.wp-block-image a:hover img { transform:scale(1.05); } .wp-block-gallery.has-nested-images figure.wp-block-image:hover figcaption { padding:3rem 2rem; } } .vetsch-team .wp-block-image img { width:100%; } .wp-block-image figcaption { text-align:center; } .wp-block-button a { color:#fff; font-weight:500; background-color:var(--vetsch-theme-colour); transition:background-color 200ms ease-out 0ms; } .wp-block-button a:focus { background-color:var(--vetsch-theme-colour-2); } @media(any-hover:hover) { .wp-block-button a:hover { background-color:var(--vetsch-theme-colour-2); } } .vetch-step { position:relative; float:right; width:100%; max-width:150px; clear:both; margin-bottom:7rem; } @media(max-width:600px) { .vetch-step { float:none; margin:3rem auto 3rem; } } @media(max-width:350px) { .vetch-step { float:none; margin:3rem auto 3rem; } } .vetch-step img { position:relative; float:left; width:100%; height:auto; } .vetch-step .no-wrapper { position:absolute; top:0; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center; } .vetch-step span { font-weight:500; color:#fff; font-size:5rem; text-shadow:0 0 10px rgba(0,0,0,0.3); } .site-header-inner > .social-fb { position:absolute; top:1rem; right:20px; } .social-fb { display:flex; align-items:center; } .social-fb span { padding-left:10px; transition:color 200ms ease-out 0ms; } .main-menu-wrapper > .social-fb { display:none; } .social-fb svg { width:3rem; height:auto !important; } .social-fb svg .fb-icon { transition:fill 200ms ease-out 0ms; fill:var(--vetsch-theme-colour); } .social-fb:focus svg .fb-icon { fill:var(--vetsch-theme-colour-2); } .social-fb:focus span { color:var(--vetsch-theme-colour); } @media(any-hover:hover) { .social-fb:hover svg .fb-icon { fill:var(--vetsch-theme-colour-2); } .social-fb:hover span { color:var(--vetsch-theme-colour); } } .main-navigation { position:relative; float:right; } .menu-hauptmenu-container { position:relative; float:left; clear:both; width:100%; } ul.nav-menu li { list-style:none; margin:0; } ul.nav-menu li a { position:relative; float:left; width:100%; } .main-navigation .menu-toggle { display:none; } ul.nav-menu .submenu-toggler { display:none; } ul.nav-menu > li ul { display:none; } ul.nav-menu > li { position:relative; float:left; } ul.nav-menu > li > ul li { position:relative; float:left; clear:both; width:100%; } ul.nav-menu li a { width:100%; padding:0 2rem; } ul.nav-menu li a span { position:relative; float:left; line-height:1.2 !important; } ul.nav-menu > li > ul li > a { padding:1rem 2rem; transition:background-color 200ms ease-out 0ms; } ul.nav-menu > li > ul li > a > span { transition: color 200ms ease-out 0ms; } .main-navigation { margin-right:-2rem; } ul.nav-menu a span { transition:color 200ms ease-out 0ms; } @media(any-hover:hover) { ul.nav-menu > li:hover > a span { color:var(--vetsch-theme-colour) !important; } ul.nav-menu > li > ul li > a:hover { background-color:var(--vetsch-theme-colour) !important; } ul.nav-menu > li > ul li > a:hover > span { color:#fff !important; } } ul.nav-menu > li > a:focus span { color:var(--vetsch-theme-colour) !important; } ul.nav-menu > li > ul li > a:focus { background-color:var(--vetsch-theme-colour) !important; } ul.nav-menu > li > ul li > a:focus > span { color:#fff !important; } ul.nav-menu li.current_page_ancestor > a > span, ul.nav-menu li.current_page_ancestor > a:focus > span, ul.nav-menu li.current_page_item > a > span, ul.nav-menu li.current_page_item > a:focus > span { color:var(--vetsch-theme-colour); } ul.nav-menu > li > ul li.current_page_item > a { background-color:var(--vetsch-theme-colour) !important; } ul.nav-menu > li > ul li.current_page_item > a > span { color:#fff !important; } @media(min-width:891px) { ul.nav-menu li > ul { position:absolute; top:100%; background:#fff; box-shadow:5px 5px 30px rgba(0,0,0,.15); padding:1rem 0 0; z-index:1; width:250px; border-radius:0 0 3px 3px; } ul.nav-menu > li > ul > li > ul { display:none !important; top:0; left:100%; border-radius:0 3px 3px 0; padding:0; } ul.nav-menu > li > ul li:last-of-type > a { border-radius:0 0 3px 3px; } ul.nav-menu > li.menu-item-has-children > a { position:relative; z-index:2; } ul.nav-menu > li.menu-item-has-children > a > span { position:relative; z-index:2; } ul.nav-menu > li.menu-item-has-children > a::after { content:''; position:absolute; display:block; bottom:-1rem; left:-2rem; right:-2rem; height:100%; background:#fff; z-index:1; } ul.nav-menu li:hover > ul, ul.nav-menu > li.focus > ul { display:block; } } @media(max-width:890px) { body.mobile-nav-open { overflow:hidden; } .main-menu-wrapper { overflow-x:hidden; overflow-y:auto; height:calc(100vh - var(--header-height)); } .site-header { position:relative; float:left; clear:both; width:100%; } ul.nav-menu li > a { z-index:1; } ul.nav-menu li > a.submenu-toggler { z-index:2; } ul.nav-menu > li.menu-item-has-children > .submenu-toggler { display:block; width:5rem; position:absolute; right:2rem; top:0; height:6.4rem; max-height:100%; cursor:pointer; text-align:center; z-index:2; } ul.nav-menu > li.menu-item-has-children > .submenu-toggler::before, ul.nav-menu > li.menu-item-has-children > .submenu-toggler::after { content:""; position:absolute; width:2.5rem; height:.2rem; left:1.25rem; top:2.85rem; background-color:var(--vetsch-font-colour); transition:all .3s ease-in-out; } ul.nav-menu > li.menu-item-has-children > .submenu-toggler::before { transform:rotate(180deg); } ul.nav-menu > li.menu-item-has-children > .submenu-toggler::after { transform:rotate(90deg); } ul.nav-menu > li.menu-item-has-children.toggled > .submenu-toggler::before, ul.nav-menu > li.menu-item-has-children.toggled > .submenu-toggler::after { transform:rotate(0deg); } ul.nav-menu > li.menu-item-has-children.toggled > ul { display:block; } .site-header-inner { display:block; } .site-header-inner > .social-fb { display:none; } .main-menu-wrapper > .social-fb { display:flex; width:100%; position:relative; float:left; clear:both; background:#fff; z-index:2; margin-top:5rem; padding:1rem 2rem; } .site-header-inner::after { content:" "; visibility:hidden; display:block; height:0; clear:both; } .main-navigation { margin:0; width:100%; position:absolute; margin-left:-10px !important; margin-bottom:0 !important; height:calc( 100% - 1rem ); z-index:1; } .main-navigation .menu-toggle { position:relative; float:right; display:block; } .main-menu-wrapper { position:absolute; bottom:1px; width:100vw; background:#fff; transform:translate3d(-100%, 100%, 0); transition:transform 500ms ease-out 0ms; } .main-navigation.toggled .main-menu-wrapper { transform:translate3d(0, 100%, 0); } .site-header-inner { align-items:center; padding:1rem 10px; } ul.nav-menu { background-color:#fff; z-index:2; padding-top:10px; } ul.nav-menu li { clear:both; width:100%; border-top:1px #d7d7d7 solid; } ul.nav-menu li a { padding:2rem 2rem; } ul.nav-menu li ul li { background-color:var(--vetsch-theme-colour-alpha-soft); } ul.nav-menu li ul li a { padding:2rem 2rem 2rem 4rem; } ul.nav-menu li ul li ul li a { padding:2rem 2rem 2rem 6rem; } } @media(max-width:1200px) { .main-navigation { margin-bottom:-0.3rem; } ul.nav-menu li > ul { padding-top:0.7rem; } ul.nav-menu li.menu-item-has-children > a::after { bottom:-0.7rem; } } .menu-toggle { cursor:pointer; margin:auto; width:7rem; height:6rem; background:none; border:none; padding:1rem; margin-right:1rem; } .menu-toggle .hamburger { background:var(--vetsch-theme-colour-2); width:5rem; height:0.5rem; position:relative; display:block; transition:background 0ms 300ms ease; transform:translateY(2rem); } .menu-toggle .hamburger::before, .menu-toggle .hamburger::after { transition:top 300ms 350ms ease, transform 300ms 0ms ease; position:absolute; background:var(--vetsch-theme-colour); width:5rem; height:0.5rem; content:''; } .menu-toggle .hamburger::before { top:-1.5rem; } .menu-toggle .hamburger::after { top:1.5rem } .main-navigation.toggled .hamburger { background:transparent; } .main-navigation.toggled .hamburger::before, .main-navigation.toggled .hamburger::after { transition:top 300ms 0ms ease, transform 300ms 350ms ease; top:0; } .main-navigation.toggled .hamburger::before { transform:rotate(45deg); } .main-navigation.toggled .hamburger::after { transform:rotate(-45deg); } .site-footer { background-color:#2a2a2a; box-shadow:inset 0 0 20px rgba(0,0,0,0.8); } .site-footer * { color:#fafafa; } .site-main .entry-header, .site-main .entry-content, .site-footer-inner { position:relative; max-width:1290px; margin:0 auto; padding:0 10px; } .site-footer-inner { padding:5rem 10px 3rem; } .site-footer h2 { text-align:center; margin-bottom:5rem; } .site-footer .wp-block-image .aligncenter { width:100%; text-align:center; } .site-footer .wp-block-image figcaption { margin-top:2rem; } .site-footer a { transition:color 200ms ease-out 0ms; } .site-footer a:focus { color:var(--vetsch-theme-colour); } @media(any-hover:hover) { .site-footer a:hover { color:var(--vetsch-theme-colour); } } .site-footer a.social-fb { margin:4rem 0 4rem; position:relative; float:left; left:50%; transform:translateX(-50%); } @media (max-width:781px) { .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { min-width:150px; flex-basis:0 !important; } .entry-content .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { min-width:200px; } .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { width:calc(50% - 20px); } } .wbm-gallery-filter-wrapper .wbm-gallery-filter.active { background-color:var(--vetsch-theme-colour) !important; } @media(any-hover:hover) { .wbm-gallery-filter-wrapper .wbm-gallery-filter:not(.active):hover { background-color:var(--vetsch-theme-colour) !important; } } .vetsch-offer-form .after-submit, .vetsch-offer-form .after-submit-error, .vetsch-offer-form.submitted .before-submit { display:none; } .vetsch-offer-form.submitted:not(.submission-error) .after-submit, .vetsch-offer-form.submitted.submission-error .after-submit-error { display:flex; } .vetsch-offer-form.showAll .after-submit, .vetsch-offer-form.showAll .after-submit-error { display:flex !important; } .vetsch-offer-form input, .vetsch-offer-form textarea { border:1px var(--vetsch-font-colour) solid; padding:10px; background-color:#fff; transition:background-color 200ms ease-out 0ms; } .vetsch-offer-form input:focus, .vetsch-offer-form textarea:focus { background-color:#F3F3F3; } .vetsch-offer-form .missing { background-color:var(--vetsch-theme-colour-alpha-soft); border-color:var(--vetsch-theme-colour-2); } .vetsch-offer-form textarea { position:relative; float:left; clear:both; width:100%; } .vetsch-form-contact-wrapper { position:relative; float:left; clear:both; width:100%; max-width:600px; } .vetsch-form-row { position:relative; float:left; clear:both; width:100%; margin-bottom:20px; display:grid; grid-gap:20px; } @media(min-width:760px) { .vetsch-form-row-double { grid-template-columns:repeat(2,minmax(0, 1fr)); } } .vetsch-form-row-double-keep { grid-template-columns:100px auto; } .vetsch-offer-form button[type="submit"] { position:relative; float:left; clear:both; width:100%; max-width:600px; padding:10px 10px; color:#fff; background-color:var(--vetsch-theme-colour); transition:background-color 200ms ease-out 0ms; cursor:pointer; } .vetsch-offer-form button[type="submit"]:focus { background-color:var(--vetsch-theme-colour-2); } @media(any-hover:hover) { .vetsch-offer-form button[type="submit"]:hover { background-color:var(--vetsch-theme-colour-2); } }