/* Theme Name: HG Meyer Metallbau GmbH Description: HG Meyer Metallbau GmbH WordPress Child Theme Author: Neckarmedia Author URI: https://www.neckarmedia.com Template: enfold Version: 1.0 */ /*TT Commons Pro*/ @font-face { font-family: 'TT Commons Pro'; src: url('fonts/tt_commons_pro_regular-webfont.woff2') format('woff2'), url('fonts/tt_commons_pro_regular-webfont.woff') format('woff'); font-weight: 400; font-style: normal; } @font-face { font-family: 'TT Commons Pro'; src: url('fonts/tt_commons_pro_medium-webfont.woff2') format('woff2'), url('fonts/tt_commons_pro_medium-webfont.woff') format('woff'); font-weight: 500; font-style: normal; } @font-face { font-family: 'TT Commons Pro'; src: url('fonts/tt_commons_pro_demibold-webfont.woff2') format('woff2'), url('fonts/tt_commons_pro_demibold-webfont.woff') format('woff'); font-weight: 600; font-style: normal; } @font-face { font-family: 'Dienstag'; src: url('fonts/DienstagMedium-webfont.woff2') format('woff2'), url('fonts/DienstagMedium-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } /* @link https://utopia.fyi/type/calculator?c=375,16,1.2,1240,20,1.333,8,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.6944rem, 0.6905rem + 0.0167vw, 0.7035rem); --step--1: clamp(0.8333rem, 0.7881rem + 0.1931vw, 0.9377rem); --step-0: clamp(1rem, 0.8916rem + 0.4624vw, 1.25rem); --step-1: clamp(1.2rem, 0.9979rem + 0.8624vw, 1.6663rem); --step-2: clamp(1.44rem, 1.1014rem + 1.4448vw, 2.2211rem); --step-3: clamp(1.728rem, 1.1936rem + 2.2802vw, 2.9607rem); --step-4: clamp(2.0736rem, 1.2616rem + 3.4646vw, 3.9467rem); --step-5: clamp(2.4883rem, 1.2863rem + 5.1285vw, 5.2609rem); --step-6: clamp(2.986rem, 1.2403rem + 7.4484vw, 7.0128rem); --step-7: clamp(3.5832rem, 1.084rem + 10.6633vw, 9.3481rem); --step-8: clamp(4.2998rem, 0.7618rem + 15.0957vw, 12.461rem); } :root { --primary-font: 'TT Commons Pro', sans-serif; --heading-font: 'TT Commons Pro', sans-serif; --primary: #D83930; --secondary: #131A2B; --grey: #F0F0EF; --black: #000; --white: #fff; } /* ======================================================================================================================================= Typo ======================================================================================================================================= */ html{-webkit-tap-highlight-color: transparent;} body{-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;} body,p{font-family: var(--primary-font); font-size: var(--step-0); font-weight: 400; line-height: 1.6} p{margin: 0 0 1em;} h1,.h1,h2,.h2,h3,.h3,h4,h5,h6{font-family: var(--heading-font); font-weight: 500 !important; line-height: 1.2; letter-spacing: 0 !important; text-transform: inherit !important; margin: 0 0 .4em 0 !important; hyphens: auto;} #top h1, #top .h1{font-size: var(--step-4);} #top h2, #top .h2{font-size: var(--step-3);} #top h3, #top .h3{font-size: var(--step-2);} #top h4{font-size: var(--step-1);} #top h5{font-size: var(--step-0);} #top h6{font-size: var(--step-0);} #top .special_amp{color: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;} #top .av-special-heading{padding: 0 !important; margin-bottom: var(--step--2);} #top .av-special-heading .special-heading-border{display: none;} #top .av-special-heading.avia-builder-el-no-sibling:not(:has(.av-subheading_below)) .av-special-heading-tag{margin: 0 !important} #top .avia-section b, #top .avia-section strong, #top .footer_color b, #top .footer_color strong, #top .socket_color b, #top .socket_color strong{color: inherit} #top .av-subheading.av-subheading_below p{font-size: var(--step-1);} #top a{text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--primary)} #top a:hover{text-decoration: none !important;} /* Button */ #top .avia-button{ --button-cut: clamp(14px, 5vw, 28px); --button-border: 3px; --button-border-color: var(--primary); position: relative; display: inline-block; font-size: var(--step-1); font-weight: 500; padding: .4em 1.5em .4em 1.5em; background-color: var(--grey); color: var(--secondary); border-color: var(--button-border-color) !important; border-style: solid; border-width: var(--button-border) !important; border-radius: 0; text-decoration: none !important; overflow: visible; transition: .2s; margin: .5em .5em .5em 0; clip-path: polygon( var(--button-cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--button-cut) ); overflow: hidden; } #top .avia-button::after{ content: ""; position: absolute; top: 0; left: 0; width: 0; height: 0; border-top: calc(var(--button-cut) - 1px) solid var(--button-border-color); border-right: calc(var(--button-cut) - 1px) solid transparent; z-index: 2; visibility: visible; pointer-events: none; transition: .2s; } #top .avia-button.avia-color-theme-color{background-color: var(--grey); color: var(--secondary); --button-border-color: var(--primary);} #top .avia-button.avia-color-dark{background-color: transparent; color: var(--secondary); --button-border-color: var(--secondary);} #top .avia-button.avia-color-light{background-color: transparent; color: var(--white); --button-border-color: var(--white);} #top .avia-button.avia-color-theme-color-highlight{background-color: var(--secondary); color: var(--white); --button-border-color: var(--secondary);} #top .avia-button.avia-size-large{font-size: var(--step-2);} #top .avia-button:hover{opacity: 1; background-color: var(--primary) !important; color: var(--white) !important; --button-border-color: transparent} /* Blockquote */ #top blockquote{border: 0; font-size: var(--step-1); margin: 2em 0 2em; padding: 0 0 0 2em; position: relative; max-width: 420px; font-style: italic; line-height: 1.6} #top blockquote:before{content: '\e833'; font-family: 'entypo-fontello'; position: absolute; top: -.3em; left: 0; opacity: .1; font-size: 4em; font-style: normal; line-height: 1} #top blockquote p{font-size: 1em; margin: 0} /* List */ #top .avia_textblock ul{ list-style: none; margin: 0 0 1em 0; } #top .avia_textblock ul > li{ margin: 0 0 0.5em 0; padding: 0 0 0 1em; position: relative; } #top .avia_textblock ul > li:before{ content: '\e8bd'; font-family: 'entypo-fontello'; font-size: 1.25em; position: absolute; left: 0; display: inline-block; } /* ======================================================================================================================================= 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;} } /* 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{height: 22px !important; width: auto} @media only screen and (min-width: 990px){ #header_main .inner-container > .logo a svg, #header_main .inner-container > .logo a img{height: 36px !important} } @media only screen and (min-width: 1440px){ #header_main .inner-container > .logo a svg, #header_main .inner-container > .logo a img{height: 44px !important} } @media only screen and (min-width: 1280px){ span.logo.avia-svg-logo:after { content: 'Konstruktion, Fertigung & Sicherheitslösungen'; max-width: 11em; line-height: 1.1; margin-left: 4em; border-left: 2px solid var(--primary); padding-left: 1em; font-size: var(--step-0); font-weight: 600; } } /* Navigation */ @media only screen and (min-width: 768px){ #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.2 !important; height: auto !important; font-size: var(--step-0); font-weight: 600; text-decoration: none; padding: 0 1em;} #header_main .inner-container > nav ul#avia-menu > li > a .avia-menu-text{display: inline-block; border-bottom: 2px solid transparent;} #header_main .inner-container > nav ul#avia-menu > li > a:hover .avia-menu-text, #header_main .inner-container > nav ul#avia-menu > li.current-menu-item > a .avia-menu-text{border-color: var(--primary);} } /* Hamburger Menu */ .av-hamburger-box{width: 32px} .av-hamburger-inner, .av-hamburger-inner::before, .av-hamburger-inner::after{border-radius: 0} .av-hamburger-inner, .av-hamburger-inner::after, .av-hamburger-inner::before{height: 2px;} #top ul#av-burger-menu-ul{vertical-align: top} #top ul#av-burger-menu-ul li a:hover{background: inherit !important;} #top ul#av-burger-menu-ul > li > a{font-size: var(--step-1); font-weight: 600; line-height: 1.2 !important; border: 0;} #top ul#av-burger-menu-ul > li > a .avia-menu-text{display: inline-block;} #top ul#av-burger-menu-ul > li.current-menu-item > a .avia-menu-text{border-bottom: 2px solid;} /* ======================================================================================================================================= Accessibility / Barrierefreiheit ======================================================================================================================================= */ #top :focus-visible, #top .av-column-link:has(a:focus){ outline: 0.2rem solid var(--secondary) !important; outline-offset: .2rem !important; } #top .alternate_color :focus-visible, #top .alternate_color .av-column-link:has(a:focus){ outline-color: var(--white); } /* ======================================================================================================================================= Misc ======================================================================================================================================= */ /* Layout */ #top .avia-section-default .content{padding-top: clamp(40px, 8vh, 60px); padding-bottom: clamp(40px, 8vh, 60px);} #top .avia-section-huge .content{padding-top: clamp(80px, 12vh, 120px); padding-bottom: clamp(80px, 12vh, 120px);} #top .d-none{display: none !important;} #top .__section--small .container{max-width: 1440px;} @media (min-width: 768px){ #top .avia-section-default .content{padding-top: clamp(80px, 15vh, 120px); padding-bottom: clamp(80px, 15vh, 120px);} #top .avia-section-huge .content{padding-top: clamp(180px, 25vh, 290px); padding-bottom: clamp(180px, 25vh, 290px);} } @media only screen and (max-width: 767px){ .responsive #top #wrap_all .container{ width: 92%; max-width: 92%; } } /* Images */ #top .image-overlay{display: none !important;} #top .avia_image, #top .av-image-caption-overlay, #top .avia-image-container-inner{border-radius: 0} /* Toggle */ #top section.av_toggle_section .toggler{padding: 1em 3em 1em 1rem; margin: 0 0 .8em; font-size: var(--step-0); font-weight: 600; background: transparent; border: 3px solid; border-radius: 0} #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-0);} /* Social Icons */ #top ul.__social--media--icons{ display: inline-flex; gap: .25em; font-size: var(--step-1); line-height: 1; margin: 0 1em 1em 0; } #top ul.__social--media--icons > li > a{ padding: 0 .25em; text-decoration: none !important; display: inline-block; transition: .2s ease; } #top ul.__social--media--icons > li > a:focus, #top ul.__social--media--icons > li:hover > a{ background: transparent !important; color: var(--primary) !important; } /* Steps */ #top .steps{ list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 2.5em 5em; grid-template-columns: 1fr; padding: 0 0 0 1.5em; } #top .steps li{ counter-increment: step; margin-bottom: 1em; position: relative; padding-left: 3.5em; margin: 0; font-weight: 500; } #top .steps li::before{ content: "0" counter(step); position: absolute; left: 0; top: 0; color: var(--primary); font-weight: 600; font-size: var(--step-2); } @media screen and (min-width: 768px){ #top .steps{ grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, auto); grid-auto-flow: column; } } /* Icon List --> Benefits */ #top .avia-icon-list-container.__benefits ul.av-iconlist-small{ display: flex; gap: 2em; flex-wrap: wrap; } #top .avia-icon-list-container.__benefits ul.av-iconlist-small > li{ display: inline-flex; align-items: center; gap: .75em; } #top .avia-icon-list-container.__benefits ul.av-iconlist-small > li .av-icon-char:before{font-size: 1.2em} #top .avia-icon-list-container.__benefits ul.av-iconlist-small .iconlist_icon{ font-size: 1.5em; height: 1.5em; width: 1.5em; min-width: 1.5em; line-height: 1.5em; margin: 0; } #top .avia-icon-list-container.__benefits ul.av-iconlist-small .avia-icon-list article.article-icon-entry{margin-left: 3.5em;} #top .avia-icon-list-container.__benefits ul.av-iconlist-small > li .av_iconlist_title{font-size: var(--step-1); font-weight: 600;} @media (min-width: 768px){ #top .avia-icon-list-container.__benefits ul.av-iconlist-small{padding-left: 10%;} } /* Card */ #top .__card{ --card-cut: clamp(24px, 5vw, 48px); --card-border: 2px; position: relative; border: var(--card-border) solid var(--primary) !important; overflow: hidden; clip-path: polygon( var(--card-cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--card-cut) ); } #top .__card .avia-image-container{margin: 0;} #top .__card .avia-image-container-inner{width: 100%;} #top .__card .avia-image-container-inner img{margin: 0; width: 100%; aspect-ratio: 3/2; object-fit: cover;} #top .__card .av_textblock_section{padding: 3em 12%;} #top .__card::after{ content: ""; position: absolute; top: 0; left: 0; width: 0; height: 0; border-top: calc(var(--card-cut) - 1px) solid var(--primary); border-right: calc(var(--card-cut) - 1px) solid transparent; z-index: 2; visibility: visible; } /* Masonry Animation */ @keyframes avia_masonry_show{ 0%{ transform: translateY(80px); opacity: .1; } 100%{ transform: translateY(0); opacity: 1; } } /* Section --> BG 2 */ #top .avia-section.__section--bg--2{position: relative;} #top .avia-section.__section--bg--2::before{ content: ''; width: 2560px; height: 600px; position: absolute; bottom: 0; left: 50%; margin-left: calc(-1 * (2560px / 2)); background-image: url(data:image/svg+xml,%3Csvg%20height%3D%22600%22%20viewBox%3D%220%200%202560%20600%22%20width%3D%222560%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m-1.22%201.37%20622.9%20490.69v105.89h1936.75%22%20fill%3D%22none%22%20stroke%3D%22%23d83930%22%20stroke-miterlimit%3D%22266.86%22%20stroke-width%3D%223%22%2F%3E%3C%2Fsvg%3E); background-size: contain; background-repeat: no-repeat; background-position: center; pointer-events: none; } /* Layout Grid --> Style 1 */ #top .av-layout-grid-container.__layout--grid--style--1{background-color: var(--grey); position: relative;} #top .av-layout-grid-container.__layout--grid--style--1 > .flex_cell{padding: clamp(80px, 12vw, 240px) 50px} #top .av-layout-grid-container.__layout--grid--style--1 > .flex_cell .flex_cell_inner{display: flex; flex-direction: column;} #top .av-layout-grid-container.__layout--grid--style--1 > .flex_cell .flex_cell_inner > *{max-width: 100%;} #top .av-layout-grid-container.__layout--grid--style--1 > .flex_cell .flex_cell_inner > .av-special-heading{max-width: 767px;} @media (max-width: 767px){ .responsive #top #wrap_all .av-layout-grid-container.__layout--grid--style--1 > .flex_cell{padding-left: 5% !important; padding-right: 5% !important;} } @media (min-width: 1800px){ #top .av-layout-grid-container.__layout--grid--style--1 > .flex_cell:nth-child(1){padding-left: calc((100vw - 1700px) / 2); padding-right: 5%;} #top .av-layout-grid-container.__layout--grid--style--1 > .flex_cell .avia-button-wrap{display: flex; justify-content: flex-end;} } #top .av-layout-grid-container.__layout--grid--style--1::after{ content: ''; aspect-ratio: 2560 / 874; width: 100vw; min-width: 2560px; translate: -50% 0; position: absolute; bottom: 0; left: 50%; background-image: url(data:image/svg+xml,%3Csvg%20height%3D%22874%22%20viewBox%3D%220%200%202560%20874%22%20width%3D%222560%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m2560%203.85-845.28%20665.85v105.9h-1714.82%22%20fill%3D%22none%22%20stroke%3D%22%23d93830%22%20stroke-miterlimit%3D%22266.86%22%20stroke-width%3D%223%22%2F%3E%3C%2Fsvg%3E); background-size: contain; background-repeat: no-repeat; background-position: center; pointer-events: none; } /* ======================================================================================================================================= Blog: Single Post ======================================================================================================================================= */ #top .template-single-blog article.post-entry .big-preview{max-width: 720px; margin: auto;} #top .fullsize .template-blog .post .entry-content-wrapper{max-width: 720px; text-align: left; line-height: 1.6; font-size: var(--step-0);} #top .template-single-blog article.post-entry .entry-content-wrapper header h1{text-align: left; font-size: var(--step-3); padding: 1rem 0} #top .template-single-blog article.post-entry .entry-content-wrapper header .post-meta-infos{text-align: left; font-size: var(--step--1);} /* ======================================================================================================================================= Hero ======================================================================================================================================= */ .html_header_transparency #top #main:has(.__hero) .avia-builder-el-0 .container{padding-top: 0;} #top .__hero{position: relative; overflow: hidden; background-color: var(--grey);} #top .__hero::before{ content: ''; width: 100vw; height: 20%; display: block; background: var(--primary); position: absolute; left: 0; bottom: 0; pointer-events: none; } #top .__hero .content{padding: 0;} #top .__hero .content .__wrap{padding: 4em 0 0; position: relative;} #top .__hero .content .__wrap a.__back{display: inline-flex; align-items: center; gap: .75em; line-height: 1.2;} #top .__hero .content .__wrap a.__back:hover svg{translate: -.25em 0;} #top .__hero .content .__wrap h1, #top .__hero .content .__wrap .h1{margin-top: 1em !important; z-index: 2; position: relative; hyphens: auto; text-wrap: balance;} #top .__hero .content .__wrap p{max-width: 540px; font-size: var(--step-1); z-index: 2; position: relative; font-weight: 500; line-height: 1.3;} #top .__hero .content .__wrap .__button{position: relative; margin: calc(var(--step-2) * 4) 0 0;} #top .__hero .content .__wrap .__button .avia-button{margin: 0; translate: 0 -50%;} #top .__hero .content .__wrap figure{display: block; aspect-ratio: 1; margin: 0; pointer-events: none; z-index: 1;} #top .__hero .content .__wrap figure img{display: block; width: auto; height: 100%; object-fit: contain; object-position: bottom left; max-width: unset;} @media (min-width: 990px){ .html_header_transparency #main > div:nth-child(1).__hero .content{padding-top: 200px;} #top .__hero::before{ content: ''; height: 100%; left: unset; bottom: unset; right: 0; top: 2em; transform: rotate(320deg); transform-origin: top right; } #top .__hero .content .__wrap h1, #top .__hero .content .__wrap .h1{max-width: 66%;} #top .__hero .content .__wrap .__button::before{ content: ''; width: 100vw; height: 100%; display: block; background: var(--primary); position: absolute; left: -50px; bottom: 0; pointer-events: none; } #top .__hero .content .__wrap .__button{ max-width: 50%; display: flex; justify-content: flex-end; padding-bottom: 10vh; } #top .__hero .content .__wrap figure{ position: absolute; left: 55%; bottom: 0; height: 94%; } } @media (min-width: 1800px){ #top .__hero .content .__wrap figure{left: 65%;} #top .__hero .content .__wrap .__button::before{left: calc(-1 * ((100vw - 1700px) / 2));} } /* ======================================================================================================================================= Formular ======================================================================================================================================= */ #top .input-text, #top input[type=email], #top input[type=input], #top input[type=number], #top input[type=password], #top input[type=search], #top input[type=tel], #top input[type=text], #top input[type=url], #top select, #top textarea{ font-family: var(--primary-font); padding: 1em 1.75em 1em 1.75em; border-radius: 0; border: 3px solid; border-color: var(--primary); margin: 0; font-size: var(--step-1); } #top form textarea::placeholder, #top form input::placeholder{ opacity: 1; } #top form label span, #top form legend span{ font-size: inherit; } /* Formidable Forms */ #top .frm_style_formidable-style > form{ --field-font-size: var(--step-0) !important; --field-height: unset; } #top .frm_style_formidable-style > form *{color: var(--text-color)} #top .frm_style_formidable-style > form .frm_dropzone{max-width: 100%;} #top .frm_style_formidable-style > form .frm_dropzone .dz-message{ background-color: transparent; border: 3px dashed var(--primary); padding: 5em 5%; } #top .frm_style_formidable-style > form .frm_form_field:has(.frm_dropzone) label{ font-size: var(--step-1) !important; font-weight: 500 !important; } #top .frm_style_formidable-style > form .frm_submit{ justify-content: flex-end; } #top .frm_style_formidable-style > form .frm_submit .frm_button_submit{ font-size: var(--step-1) !important; } /* ======================================================================================================================================= Section before Footer ======================================================================================================================================= */ #top .__section--before--footer{position: relative;} #top .__section--before--footer .content{padding: 3em 0;} #top .__section--before--footer .content p{margin: 0; line-height: 1.2; font-weight: 600; font-size: var(--step-1);} #top .__section--before--footer .__gf{ position: absolute; aspect-ratio: 2560 / 456; width: 100vw; min-width: 2560px; translate: -50% 0; bottom: 0; left: 50%; background-image: url(data:image/svg+xml,%3Csvg%20height%3D%22456%22%20viewBox%3D%220%200%202560%20456%22%20width%3D%222560%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m2559.7%203.27-438.18%20345.17v105.9h-2121.52%22%20fill%3D%22none%22%20stroke%3D%22%23d93830%22%20stroke-miterlimit%3D%22266.86%22%20stroke-width%3D%223%22%2F%3E%3C%2Fsvg%3E); background-size: contain; background-repeat: no-repeat; background-position: center; pointer-events: none; } @media (min-width: 768px){ #top .__section--before--footer .content{padding: 9em 0 3em;} } /* ======================================================================================================================================= Footer ======================================================================================================================================= */ #footer{ padding-top: clamp(60px, 16vw, 80px); padding-bottom: clamp(80px, 16vw, 100px); font-size: var(--step-0); border: 0; } #footer *{font-size: 1em;} #footer .widget{margin: 0; overflow: visible;} #footer .container{ display: flex; flex-wrap: wrap; gap: 1em 6em; } #footer .container::before, #footer .container::after{display: none;} #footer .container .flex_column{width: auto !important; margin: 0 !important; float: unset;} #footer .container .flex_column:nth-child(1){margin-right: auto !important;} #footer .container .flex_column:nth-child(1) img{width: auto; height: clamp(22px, 4vw, 44px) !important;} @media screen and (max-width: 1279px){ #footer .container .flex_column:nth-child(1){width: 100%; flex-basis: 100%;} } #socket{ font-size: var(--step--1); border: 0; } #socket .container{ padding-top: 3em; padding-bottom: 6em; display: flex; flex-wrap: wrap; gap: 1em 6em; justify-content: space-between; } #socket .container:after{display: none;} #socket .container .copyright{float: none;} #socket .container .copyright ul.__social--media--icons{margin: 0 2em 0 0;} #socket .container nav.sub_menu_socket{float: none; margin: 0;} #socket .container nav.sub_menu_socket div{overflow: visible;} #socket .container nav.sub_menu_socket ul.menu{margin: 0; display: flex; gap: 1em;} #socket .container nav.sub_menu_socket ul.menu li{float: none; line-height: inherit; padding: 0; border: 0;} @media screen and (max-width: 767px){ #socket .container .copyright ul.__social--media--icons{display: flex; margin: 0 0 1em 0;} } #scroll-top-link{display: none;} /* #top div .avia-button{ --cut: 22px; --line: 3px; --btn-border-color: var(--primary); position: relative; display: inline-block; font-size: var(--step-1); font-weight: 500; padding: .7em 1.5em; margin-top: .5em; border: none !important; border-radius: 0; background: transparent; color: var(--black); text-decoration: none !important; overflow: visible; transition: .2s ease; } #top div .avia-button::before{ content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(var(--btn-border-color), var(--btn-border-color)) top right / calc(100% - var(--cut)) var(--line) no-repeat, linear-gradient(var(--btn-border-color), var(--btn-border-color)) top right / var(--line) 100% no-repeat, linear-gradient(var(--btn-border-color), var(--btn-border-color)) bottom left / 100% var(--line) no-repeat; } #top div .avia-button::after{ content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(var(--btn-border-color), var(--btn-border-color)) bottom left / var(--line) calc(100% - var(--cut)) no-repeat, linear-gradient( to bottom right, transparent calc(50% - var(--line)/2), var(--btn-border-color) calc(50% - var(--line)/2), var(--btn-border-color) calc(50% + var(--line)/2), transparent calc(50% + var(--line)/2) ) top left / var(--cut) var(--cut) no-repeat; } #top div .avia-button.avia-color-dark{color: var(--black); --btn-border-color: var(--secondary);} #top div .avia-button.avia-color-light{color: var(--white); --btn-border-color: var(--white);} #top .socket_color .avia-button, #top .main_color .avia-button, #top .header_color .avia-button{color: var(--black);} #top .alternate_color .avia-button{ color: var(--white); --btn-border-color: var(--white);} #top div .avia-button:hover{opacity: 1;} html.no-touch-device #top div .avia-button:hover{translate: 0 -2px;} */ /* #top div .avia-button.avia-color-theme-color-highlight{ --btn-border-color: var(--secondary); background: var(--secondary); color: #fff; clip-path: polygon( var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut) ); } #top div .avia-button.avia-color-theme-color-highlight.avia-size-large{font-size: var(--step-2)} #top div .avia-button {--cut: 28px !important;} #top div .avia-button {padding: .5em 1.5em !important;} #top div .avia-button{transition: .25s ease;} #top div .avia-button::before,#top div .avia-button::after{transition: .25s ease;} #top div .avia-button:hover{--btn-border-color: var(--secondary);} #top div .avia-button.avia-color-dark:hover{--btn-border-color: var(--primary);} #top div .avia-button.avia-color-light:hover{--btn-border-color: var(--secondary); color: var(--secondary);} #top div .avia-button.avia-color-theme-color-highlight:hover{--btn-border-color: #313131; background: #313131} */