/* Theme Name: CS-Autowelt Description: CS-Autowelt WordPress Child Theme Author: Antonello Vertucci Author URI: https://vertucci.de Template: enfold Version: 1.0 */ /* poppins-300 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Poppins'; font-style: normal; font-weight: 300; src: url('fonts/poppins-v23-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* poppins-regular - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Poppins'; font-style: normal; font-weight: 400; src: url('fonts/poppins-v23-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* poppins-700 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Poppins'; font-style: normal; font-weight: 700; src: url('fonts/poppins-v23-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* @link https://utopia.fyi/type/calculator?c=375,18,1.2,1420,20,1.333,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */ :root { --step--2: clamp(0.70rem, calc(0.81rem + -0.12vw), 0.78rem); --step--1: clamp(0.94rem, calc(0.94rem + 0.00vw), 0.94rem); --step-0: clamp(1.13rem, calc(1.08rem + 0.19vw), 1.25rem); --step-1: clamp(1.35rem, calc(1.24rem + 0.48vw), 1.67rem); --step-2: clamp(1.62rem, calc(1.40rem + 0.92vw), 2.22rem); --step-3: clamp(1.94rem, calc(1.58rem + 1.56vw), 2.96rem); --step-4: clamp(2.33rem, calc(1.75rem + 2.47vw), 3.95rem); --step-5: clamp(2.80rem, calc(1.92rem + 3.77vw), 5.26rem); } /* Global */ :root { --primary-font: 'Poppins', sans-serif; --heading-font: 'Poppins', sans-serif; --blue: #1d53a0; --dark-grey: #333e48; --grey: #e1e6ea; } /* ======================================================================================================================================= Typo ======================================================================================================================================= */ html{-webkit-tap-highlight-color: transparent;} body{-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;} body,p{font-family: var(--primary-font); font-weight: 300; line-height: 1.5; font-size: var(--step-0);} h1,h2,h3,h4,h5,h6{font-family: var(--heading-font); font-weight: 300 !important; text-transform: inherit !important; line-height: 1.2; letter-spacing: 0 !important; margin: 0 0 0.5em !important; position: relative;} ::selection { background-color: var(--dark-grey); color: #fff; } mark{color: var(--blue) !important} #top .special_amp{color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;} #top .special-heading-border{display: none;} #top .av-special-heading{padding: 0 !important} #top .av-special-heading .av-special-heading-tag:has(+ .av-subheading_below){margin-bottom: 0 !important;} #top h1{font-size: var(--step-3)} #top h2{font-size: var(--step-2)} #top h3{font-size: var(--step-1)} #top h4{font-size: var(--step-0)} #top h1 b{font-size: 1.2em} #top p a{text-decoration: underline; text-underline-offset: 4px;} /* Button */ input[type="submit"], #submit, .button, #top div .avia-button{ padding: .5em 2em; line-height: 1.2; border-radius: .5rem; box-shadow: 0 2px 4px rgb(0 0 0 / 25%); font-weight: 700; font-size: var(--step-0); background-color: var(--blue) !important; border: 2px solid var(--blue) !important; border-color: var(--blue) !important; color: #fff !important; transition: .5s ease; display: inline-flex; align-items: center; gap: 0.5em; } #top div .avia-button.avia-color-light{color: #fff !important; border-color: #fff !important; background: transparent !important;} #top div .avia-button.avia-color-dark{color: var(--dark-grey) !important; border-color: var(--dark-grey) !important; background-color: transparent !important;} #top div .avia-button:hover{opacity: 1; box-shadow: 0 2px 12px rgb(0 0 0 / 25%);} /* Table */ #top table{margin: 3rem 0 3rem;} #top table, #top table tr, #top table tr th, #top table tr td{ background-color: transparent !important; font-size: var(--step-0); line-height: 1.6; } #top table tr:first-child th{border-top: 4px solid !important;} #top table tr th{ font-weight: 700; letter-spacing: inherit; text-transform: inherit; text-align: inherit; padding: 1em .5em; border: 0 !important; font-size: var(--step-0); } #top table tr td{ border: 0 !important; border-top: 1px solid !important; padding: .5em .25em; font-size: var(--step-0); } #top table.avia-table ul.pricing-table > li:before{display: none} #top .avia-data-table-wrap{ width: 100%; overflow-x: scroll; overflow-y: hidden; } #top .avia-data-table-wrap > table{width: auto} #top .avia-data-table-wrap > table *{white-space: inherit !important} /* ======================================================================================================================================= Header ======================================================================================================================================= */ @media only screen and (max-width: 989px){ .responsive #top #header{position: fixed !important; top: 0; left: 0; right: 0; width: 100%} .responsive #top #main, .responsive.html_mobile_menu_tablet.html_header_top #top #main{padding-top: 80px !important} .responsive #top #wrap_all .av-logo-container, .responsive #top #header_main > .container .main_menu .av-main-nav > li > a, .responsive.html_mobile_menu_tablet #top #wrap_all .av-logo-container, .responsive.html_mobile_menu_tablet #top #header_main > .container .main_menu .av-main-nav > li > a{ height: 80px; line-height: 80px; } } @media only screen and (min-width: 990px){ #header .inner-container{ display: flex; justify-content: space-between; align-items: center; gap: 1rem; } #header .inner-container > .logo{order: 1; margin-right: auto; position: relative;} #header .inner-container > nav{order: 3; position: relative;} } /* Meta Header */ #header_meta{border: 0; background: var(--dark-grey); padding-right: 1em} #header_meta *{color: #fff} #header_meta .phone-info{width: 100%; padding: .4rem 0; line-height: 1.2; font-size: var(--step--1); font-weight: 400;} #header_meta .phone-info > div{line-height: 30px; width: 100%;} #header_meta .phone-info a{color: #fff} #header_meta .phone-info ul{margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 2rem} #header_meta .phone-info ul li{display: inline-block;} #header_meta .phone-info ul li:nth-child(3){margin-left: auto; font-weight: 700} #header_meta .phone-info ul li:before{content: '\e875'; font-family: 'entypo-fontello'; margin-right: .8em;} #header_meta .phone-info ul li.__tel:before{content: '\e854'} #header_meta .phone-info ul li.__email:before{content: '\e805'} @media only screen and (max-width: 990px){ #header_meta{min-height: 5px} #header_meta .container{display: none;} } @media only screen and (min-width: 990px){ #top #wrap_all #main{padding-top: 153px !important} } /* Logo */ #header_main .inner-container > .logo, #header_main .inner-container > .logo a{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow: visible} #header_main .inner-container > .logo a{height: auto} #header_main .inner-container > .logo a svg, #header_main .inner-container > .logo a img{width: 14rem} @media only screen and (min-width: 1440px){ #header_main .inner-container > .logo a svg, #header_main .inner-container > .logo a img{width: 22rem} } /* Navigation */ @media only screen and (min-width: 990px){ #header_main .inner-container > nav{display: flex; align-items: center;} #header_main .inner-container > nav > div, #header_main .inner-container > nav > div > ul, #header_main .inner-container > nav > div > ul > li{height: 100%} #header_main .inner-container > nav > div > ul > li.menu-item{display: flex; align-items: center} #header_main .inner-container > nav ul#avia-menu > li > a{line-height: 1.6 !important; height: auto !important; font-size: var(--step-0); font-weight: 400} #header_main .inner-container > nav ul#avia-menu > li li > a{font-size: var(--step--1); font-weight: 400} #header_main .inner-container > nav ul#avia-menu li:hover > a > .avia-menu-text, #header_main .inner-container > nav ul#avia-menu li.current-menu-item > a > .avia-menu-text{opacity: 1; color: var(--blue)} } /* Breadcrumbs */ #top .title_container{background: var(--grey); box-shadow: 0 0 5px rgb(0 0 0 / 20%), 0 0 25px rgb(0 0 0 / 20%); z-index: 10;} #top .title_container *{color: var(--dark-grey); font-size: var(--step--1);} #top .title_container .breadcrumb{right: inherit;} #top .title_container .breadcrumb .trail{display: -webkit-box;display: -ms-flexbox;display: flex;} #top .title_container .breadcrumb .breadcrumb-trail{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;} #top .title_container .breadcrumb .breadcrumb-trail:before{font-family: 'entypo-fontello'; content: '\e821'; margin-right: 10px} #top .title_container .breadcrumb .sep{margin: 0 .5em;} #top .title_container .breadcrumb .trail-end{opacity: .5} /* Burger menu */ .av-hamburger-inner, .av-hamburger-inner::before, .av-hamburger-inner::after{border-radius: 0;} .html_av-overlay-side-classic #top #wrap_all .av-burger-overlay #av-burger-menu-ul{background: var(--dark-grey); vertical-align: top;} .html_av-overlay-side-classic #top #wrap_all .av-burger-overlay #av-burger-menu-ul li a{border-color: #414b52; color: #fff; font-size: var(--step-0); border: 0} .html_av-overlay-side-classic #top #wrap_all .av-burger-overlay #av-burger-menu-ul li li a{padding: 1em 1em 1em 70px; font-size: var(--step--1);} .html_av-overlay-side-classic #top #wrap_all .av-burger-overlay #av-burger-menu-ul li li a .avia-bullet{background-color: var(--grey);} .html_av-overlay-side-classic #top #wrap_all .av-burger-overlay #av-burger-menu-ul li a:hover{background: transparent !important;} .html_av-overlay-side-classic #top #wrap_all .av-burger-overlay #av-burger-menu-ul li li a img{display: none;} .html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner, .html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner::before, .html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner::after{background-color: #fff;} /* ======================================================================================================================================= Accessibility ======================================================================================================================================= */ #top :focus-visible{ overflow: visible; outline: 3px dashed var(--blue) !important; opacity: 1 !important; border-color: transparent !important; box-shadow: none !important; } #top .alternate_color :focus-visible, #top .footer_color :focus-visible, #top .socket_color :focus-visible{ outline: 3px dashed #fff !important; } /* ======================================================================================================================================= Accessibility ======================================================================================================================================= */ #top :focus-visible{ overflow: visible; outline: -webkit-focus-ring-color auto 1px; opacity: 1 !important; box-shadow: inset 0 0 0 2px #fff; } /* ======================================================================================================================================= Misc ======================================================================================================================================= */ /* Layout */ #top .container_wrap{border: 0 !important} #top .__section--small .container{max-width: 1280px} #top .avia_codeblock{clear: both} @media only screen and (min-width: 990px){ html, body, #wrap_all{overflow: initial !important;} #top .__sticky{position: sticky !important; top: 180px} } /* Images */ #top .image-overlay{display: none !important;} .avia-image-container-inner, .avia_image, .av-image-caption-overlay{border-radius: 0} /* List */ #top ul.__arrow{list-style: none; margin: .5em 0 1.5em .5em;} #top ul.__arrow > li{margin: 0; padding: 0 0 0 1.5em; position: relative;} #top ul.__arrow > li:before{content: '\e871'; font-family: 'entypo-fontello'; position: absolute; left: 0;} /* Masonry animation */ .avia_desktop.avia_transform3d .av-masonry-animation-active .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry{ -webkit-animation: avia_msonry_show .5s 1 cubic-bezier(0.46, 0.03, 0.52, 0.96); animation: avia_msonry_show .5s 1 cubic-bezier(0.46, 0.03, 0.52, 0.96); } @-webkit-keyframes avia_msonry_show { 0% { -webkit-transform:translateZ(0px) translateY(100px) rotateX(0deg); transform:translateZ(0px) translateY(100px) rotateX(0deg); opacity: 0; } 100% { -webkit-transform:translateZ(0px) translateY(0px) rotateX(0deg); transform:translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; } } @keyframes avia_msonry_show { 0% { -webkit-transform:translateZ(0px) translateY(100px) rotateX(0deg); transform:translateZ(0px) translateY(100px) rotateX(0deg); opacity: 0; } 100% { -webkit-transform:translateZ(0px) translateY(0px) rotateX(0deg); transform:translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; } } /* Toggle */ #top section.av_toggle_section .toggler{padding: 1em 3em 1em 1rem; margin: 0 0 .8em; font-size: var(--step-0); background: transparent; border: 0; border-bottom: 2px solid;} #top section.av_toggle_section .toggler:hover{background: transparent;} #top section.av_toggle_section .toggler .toggle_icon{display: none;} #top section.av_toggle_section .toggler:after{ content: '\e87d'; font-family: 'entypo-fontello'; position: absolute; right: 1em; transition: .2s ease; } #top section.av_toggle_section .toggler.activeTitle:after{rotate: 90deg} #top section.av_toggle_section .toggle_content{border: 0; background: transparent; padding: .5em 1rem 1.5em;} #top section.av_toggle_section .toggle_content *{font-size: var(--step--1);} /* Hero */ #top .__hero h1{margin: 0 0 .25em 0 !important} #top .__hero p{font-size: var(--step-1); max-width: 600px; margin: 1em auto} /* Avia Logo Element */ #top .avia-logo-element-container img, .av-partner-fake-img{ box-shadow: none; } /* ======================================================================================================================================= Formular ======================================================================================================================================= */ #top .input-text, #top input[type="text"], #top input[type="input"], #top input[type="password"], #top input[type="email"], #top input[type="number"], #top input[type="url"], #top input[type="tel"], #top input[type="search"], #top textarea, #top select{ padding: .75em; line-height: 1.2; font-size: var(--step-0); font-family: var(--primary-font) !important; border-radius: .25em; } #top label, #top legend{ font-weight: 700; font-size: var(--step--1); } #top label span, #top legend span{ font-size: var(--step--1); color: inherit; } /* CF7 */ .wpcf7-form{clear: both} .wpcf7 .wpcf7-not-valid{border-color: red !important} .wpcf7 .wpcf7-not-valid-tip{color: red !important; margin: 0 0 1.5em 0;} /* CF7 Grid */ .wpcf7 .form_row{display: flex; flex-wrap: wrap; gap: 0 1rem;} .wpcf7 .form_row > *{flex-basis: 0; flex-grow: 1; min-width: 160px} /* ======================================================================================================================================= Footer ======================================================================================================================================= */ #footer{padding: 2rem 0;} #footer *{font-size: var(--step--1);} #footer .widget{margin: 1rem 0} #footer .container{display: -webkit-box;display: -ms-flexbox;display: flex; gap: 5%; -ms-flex-wrap: wrap; flex-wrap: wrap;} #footer .container > .flex_column{width: auto; margin: 0 !important; min-width: 280px} #footer a:hover{opacity: .5;} #footer ul.menu{list-style: none; margin: 1em 0 0 0 !important} #footer ul.menu li{position: relative; border-bottom: 1px solid #4e5a65;} #footer ul.menu li a{padding: .2em .8em; position: relative;} #footer ul.menu li a:before{content: '\e879'; font-family: 'entypo-fontello'; position: absolute; left: 0; top: .2em} @media only screen and (min-width: 768px){ #footer .container{-webkit-box-align: end;-ms-flex-align: end;align-items: flex-end;} } #top #socket *{font-size: var(--step--1); font-weight: 400; line-height: 1.2;} #top #socket .copyright{float: unset;} #top #socket .container{padding-top: 2rem; padding-bottom: 4rem;} #scroll-top-link{display: none}