/* Theme Name: Divi Child-Theme Theme URI: http://www.elegantthemes.com Description: Divi Child-Theme Author: Silke Vogel Author URI: https://el-vogel-design.com Template: Divi Version: 1.0.0 */ /* ========================================================================= 1. SCHRIFTEN ========================================================================= */ /* geist-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: 'Geist'; font-style: normal; font-weight: 300; src: url('fonts/geist-v5-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('fonts/geist-v5-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } @font-face { font-display: swap; font-family: 'Geist'; font-style: normal; font-weight: 600; src: url('fonts/geist-v5-latin-600.woff2') format('woff2'); } /* geist-800italic - 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: 'Geist'; font-style: italic; font-weight: 800; src: url('fonts/geist-v5-latin-800italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('fonts/geist-v5-latin-800italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* ========================================================================= 2. BASIS & TYPOGRAFIE ========================================================================= */ body { font-family: 'Geist', sans-serif !important; font-weight: 300; } h1, h2, h3, h4, h5, h6 { font-family: 'Geist', sans-serif !important; font-weight: 800; font-style: italic; } .ost-600 { font-family: 'Geist', sans-serif !important; font-weight: 600 !important; font-style: normal; } /* ========================================================================= 3. MARKEN-BAUSTEINE (Utilities) ========================================================================= */ /* Abgeschrägte Buttons/Tags – Modul-Klasse: ost-clip */ .ost-clip, .ost-clip .et_pb_button { clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%); } /* Wachsender Grünstrich beim Karten-Hover – Modul-Klasse: ost-card */ .ost-card { position: relative; overflow: hidden; } .ost-card::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #A3C91D; transform: scaleX(0); transform-origin: left; transition: transform .35s; } .ost-card:hover::after { transform: scaleX(1); } /* Strich vor Section-Labels – Modul-Klasse: ost-label */ .ost-label .et_pb_text_inner::before { content: ""; display: inline-block; width: 28px; height: 2px; background: #A3C91D; vertical-align: middle; margin-right: 10px; } /* Diagonalmuster im Vereine-Hintergrund – Section-Klasse: ost-diag */ .ost-diag { position: relative; } .ost-diag::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(-45deg, transparent, transparent 40px, rgba(163,201,29,.015) 40px, rgba(163,201,29,.015) 41px); } /* Verstecktes, beschreibendes h1 (genau 1x pro Seite, oben einfügen) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ========================================================================= 4. HERO / SLIDER ========================================================================= */ /* Hero randlos: bricht aus der 1200er-Row aus, geht über die volle Browserbreite. (Text bleibt durch .os-headline/.os-sub/.os-eyebrow auf 1200 zentriert.) Wichtig: am overflow-x:hidden setzen, sonst evtl. horizontaler Scrollbalken. */ .os-hero { position: relative; left: 50%; right: 50%; width: 100vw; max-width: 100vw; margin-left: -50vw; margin-right: -50vw; } html, body { overflow-x: hidden; } /* Text-Container auf Seitenbreite 1200 (Bild bleibt randlos) */ .os-hero .et_pb_slide_description { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 0 32px; text-align: left; } /* Gerichtetes Lese-Overlay über dem Bild (links satt → rechts offen) + Boden-Scrim */ .os-hero .et_pb_slide { position: relative; overflow: hidden; } .os-hero .et_pb_slide::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.62) 32%, rgba(0,0,0,0.18) 66%, rgba(0,0,0,0) 100%), linear-gradient(0deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 28%); } /* Bild-Ebene + Ken-Burns: Das Foto liegt auf ::after (eigene Ebene) und wird per transform:scale gezoomt -> GPU-beschleunigt und FLÜSSIG (background-size-Animation ruckelt, daher raus). Stapelung: ::after = Bild (z0) · ::before = Overlay (z1) · Text (z2). */ .os-hero .et_pb_slide::after { content: ""; position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; transform: scale(1); will-change: transform; backface-visibility: hidden; } .os-hero .et-pb-active-slide::after { animation: osKenBurns 8s ease-out forwards; } @keyframes osKenBurns { from { transform: scale(1); } to { transform: scale(1.08); } } /* Barrierefrei: kein Zoom bei "Bewegung reduzieren" */ @media (prefers-reduced-motion: reduce){ .os-hero .et-pb-active-slide::after { animation: none; } } /* ===== Hintergrundbilder pro Slide (3 Slides) ===================== Server kann AVIF nicht skalieren -> Bilder per FTP nach /wp-content/uploads/hero/ legen und hier referenzieren. Benennung: os-teamsport-hero-training-, os-teamsport-hero-teamshop-, os-teamsport-hero-textilveredelung-. Jedem Slide im Divi-Slider die passende Klasse geben: os-slide-01 / os-slide-02 / os-slide-03 (Slide → CSS-Klasse). 1. Zeile = WebP-Fallback, 2. Zeile = AVIF via image-set. */ /* --- Slide 1 --- */ .os-slide-01::after { background-image: url('/wp-content/uploads/hero/os-teamsport-hero-training-2560.webp'); background-image: image-set( url('/wp-content/uploads/hero/os-teamsport-hero-training-2560.avif') type('image/avif'), url('/wp-content/uploads/hero/os-teamsport-hero-training-2560.webp') type('image/webp')); } @media (max-width:1280px){ .os-slide-01::after{ background-image: url('/wp-content/uploads/hero/os-teamsport-hero-training-1280.webp'); background-image: image-set( url('/wp-content/uploads/hero/os-teamsport-hero-training-1280.avif') type('image/avif'), url('/wp-content/uploads/hero/os-teamsport-hero-training-1280.webp') type('image/webp')); } } @media (max-width:768px){ .os-slide-01::after{ background-image: url('/wp-content/uploads/hero/os-teamsport-hero-training-768.webp'); background-image: image-set( url('/wp-content/uploads/hero/os-teamsport-hero-training-768.avif') type('image/avif'), url('/wp-content/uploads/hero/os-teamsport-hero-training-768.webp') type('image/webp')); } } /* --- Slide 2 --- */ .os-slide-02::after { background-image: url('/wp-content/uploads/hero/os-teamsport-hero-teamshop-2560.webp'); background-image: image-set( url('/wp-content/uploads/hero/os-teamsport-hero-teamshop-2560.avif') type('image/avif'), url('/wp-content/uploads/hero/os-teamsport-hero-teamshop-2560.webp') type('image/webp')); } @media (max-width:1280px){ .os-slide-02::after{ background-image: url('/wp-content/uploads/hero/os-teamsport-hero-teamshop-1280.webp'); background-image: image-set( url('/wp-content/uploads/hero/os-teamsport-hero-teamshop-1280.avif') type('image/avif'), url('/wp-content/uploads/hero/os-teamsport-hero-teamshop-1280.webp') type('image/webp')); } } @media (max-width:768px){ .os-slide-02::after{ background-image: url('/wp-content/uploads/hero/os-teamsport-hero-teamshop-768.webp'); background-image: image-set( url('/wp-content/uploads/hero/os-teamsport-hero-teamshop-768.avif') type('image/avif'), url('/wp-content/uploads/hero/os-teamsport-hero-teamshop-768.webp') type('image/webp')); } } /* --- Slide 3 --- */ .os-slide-03::after { background-image: url('/wp-content/uploads/hero/os-teamsport-hero-textilveredelung-2560.webp'); background-image: image-set( url('/wp-content/uploads/hero/os-teamsport-hero-textilveredelung-2560.avif') type('image/avif'), url('/wp-content/uploads/hero/os-teamsport-hero-textilveredelung-2560.webp') type('image/webp')); } @media (max-width:1280px){ .os-slide-03::after{ background-image: url('/wp-content/uploads/hero/os-teamsport-hero-textilveredelung-1280.webp'); background-image: image-set( url('/wp-content/uploads/hero/os-teamsport-hero-textilveredelung-1280.avif') type('image/avif'), url('/wp-content/uploads/hero/os-teamsport-hero-textilveredelung-1280.webp') type('image/webp')); } } @media (max-width:768px){ .os-slide-03::after{ background-image: url('/wp-content/uploads/hero/os-teamsport-hero-textilveredelung-768.webp'); background-image: image-set( url('/wp-content/uploads/hero/os-teamsport-hero-textilveredelung-768.avif') type('image/avif'), url('/wp-content/uploads/hero/os-teamsport-hero-textilveredelung-768.webp') type('image/webp')); } } /* Eyebrow-Zeile (im Slider als Subtitle/erste Zeile, Klasse os-eyebrow setzen) */ .os-hero .os-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: 'Geist', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: #A3C91D; margin-top: 60px; margin-bottom: 20px; /* Abstand oberhalb der Eyebrow – Wert nach Geschmack */ } .os-hero .os-eyebrow::before { content: ""; display: inline-block; width: 36px; height: 2px; background: #A3C91D; } /* Headline – steht im INHALT-/Body-Feld als

, weil das Divi-Titel-Feld kein HTML rendert. Zweite Wortgruppe per . / .os-hero .os-headline { font-family: 'Geist', sans-serif; font-weight: 800; font-style: italic; text-transform: uppercase; line-height: 0.92; color: #ffffff; font-size: clamp(48px, 6.5vw, 92px); margin: 0 0 24px; } .os-hero .os-headline .hl-green, .os-hero .hl-green { color: #A3C91D; } / Subline/Fließtext – als
im Inhalt-Feld / .os-hero .os-sub { font-family: 'Geist', sans-serif; font-weight: 300; font-size: 17px; color: #aaaaaa; max-width: 460px; line-height: 1.7; margin: 0 0 32px; } / Text-Einblendung: GESTAFFELT von LINKS ins Bild sliden (überschreibt Divis "von unten"). Reihenfolge Eyebrow → Headline → Subline → Button (steigende Delays). Distanz/Dauer/Delays nach Geschmack. / .os-hero .et-pb-active-slide .et_pb_slide_description { animation: none !important; } / Divis Default aus / .os-hero .et-pb-active-slide .os-eyebrow { animation: osTextInLeft 0.9s cubic-bezier(0.22,1,0.36,1) 0.10s both !important; } .os-hero .et-pb-active-slide .os-headline { animation: osTextInLeft 0.9s cubic-bezier(0.22,1,0.36,1) 0.30s both !important; } .os-hero .et-pb-active-slide .os-sub { animation: osTextInLeft 0.9s cubic-bezier(0.22,1,0.36,1) 0.55s both !important; } .os-hero .et-pb-active-slide .et_pb_button { animation: osTextInLeft 0.9s cubic-bezier(0.22,1,0.36,1) 0.80s both !important; } @keyframes osTextInLeft { from { opacity: 0; transform: translateX(-160px); } to { opacity: 1; transform: translateX(0); } } @media (prefers-reduced-motion: reduce){ .os-hero .et-pb-active-slide .os-eyebrow, .os-hero .et-pb-active-slide .os-headline, .os-hero .et-pb-active-slide .os-sub, .os-hero .et-pb-active-slide .et_pb_button { animation: none !important; } } / Button: Marken-Grün + Clip-Path (Divi-Slide-Button) / .os-hero .et_pb_slide .et_pb_button { background: #A3C91D !important; color: #000000 !important; border: 0 !important; border-radius: 0 !important; font-family: 'Geist', sans-serif !important; font-weight: 600 !important; letter-spacing: 0.1em; text-transform: uppercase; padding: 16px 36px !important; clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%); transition: background 0.2s; display: inline-block; margin-bottom: 60px; / Abstand unter dem Button – Wert nach Geschmack / } .os-hero .et_pb_slide .et_pb_button:hover { background: #8AAC10 !important; } .os-hero .et_pb_slide .et_pb_button::after { display: none !important; } / Divi-Pfeil-Icon aus / / Dots als Linien/Striche (statt Punkte) / .os-hero .et-pb-controllers a { width: 28px !important; height: 3px !important; border: 0 !important; border-radius: 0 !important; background-color: rgba(255,255,255,0.3); margin: 0 5px; transition: width 0.3s, background-color 0.3s; } .os-hero .et-pb-controllers a.et-pb-active-control { width: 48px !important; background-color: #A3C91D !important; } / Abstand Slider oben unter Header – entfernt das Auto-Padding der ersten Section bei transparentem Header. HINWEIS: page-id-33 ist projektspezifisch (diese Seite). Bei anderem Projekt die ID anpassen oder der Section eine eigene Klasse geben. / .page-id-33 .et_pb_section_first { padding-top: 0 !important; padding-bottom: 0 !important; } / ===== HERO-SLIDER: Pfeile, Button, Eyebrow ===== / / Pfeile: 50% Größe + weiter außen (Desktop) / .os-hero .et-pb-arrow-prev, .os-hero .et-pb-arrow-next { font-size: 24px !important; } .os-hero .et_pb_slider:hover .et-pb-arrow-prev { left: 6px !important; } .os-hero .et_pb_slider:hover .et-pb-arrow-next { right: 6px !important; } / Mobil: Pfeile ausblenden + Button kleiner / @media (max-width: 767px) { .os-hero .et-pb-slider-arrows, .os-hero .et-pb-arrow-prev, .os-hero .et-pb-arrow-next { display: none !important; } .os-hero .et_pb_slide .et_pb_button { font-size: 14px !important; padding: 12px 24px !important; } } / Eyebrow-Linie auf die erste Zeile zentrieren / .os-hero .os-eyebrow { align-items: flex-start; } .os-hero .os-eyebrow::before { margin-top: 13px; } / ===== USP-Bar: nur Handy ===== / @media (max-width: 767px) { / 2×2, kompakt, Inhalt oben, wenig Rand / .os-usp .et_pb_column { width: 50% !important; flex: 0 0 50% !important; max-width: 50% !important; margin: 0 !important; padding: 10px 4px !important; justify-content: flex-start !important; } / Reihen: Abstand + oben ausrichten + Basis für Mittellinie / .os-usp .et_pb_row { row-gap: 8px !important; align-items: stretch !important; position: relative; } / durchgehende senkrechte Mittellinie statt Zell-Border / .os-usp .et_pb_column:nth-child(odd) { border-right: none !important; } .os-usp .et_pb_row::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(0,0,0,0.2); } / horizontale Trennlinie zwischen den Reihen / .os-usp .et_pb_column:nth-child(1), .os-usp .et_pb_column:nth-child(2) { border-bottom: 1px solid rgba(0,0,0,0.2); } / Blurb: wenig Innenabstand, Icon oben zentriert, enger Icon–Text-Abstand / .os-usp .et_pb_blurb { padding-top: 8px !important; padding-bottom: 8px !important; } .os-usp .et_pb_blurb .et_pb_blurb_content { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center; row-gap: 8px !important; } .os-usp .et_pb_blurb .et_pb_main_blurb_image { margin: 0 !important; } / Silbentrennung / .os-usp .et_pb_blurb h4, .os-usp .et_pb_blurb .et_pb_blurb_description p { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } } / ========================================================================= 5. VEREINE ========================================================================= / / Verein-Leisten: Container / body #page-container .et_pb_section .et_pb_button.os-verein { display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:space-between !important; width:100% !important; max-width:100% !important; text-align:left !important; } / WICHTIG: Hover-Padding fixieren = Wert wie im Normalzustand -> kein Springen / body #page-container .et_pb_section .et_pb_button.os-verein:hover { padding:15px 22px !important; } / "Zum Shop →" rechts / body #page-container .et_pb_section .et_pb_button.os-verein::after, body #page-container .et_pb_section .et_pb_button.os-verein:hover::after { content:"Zum Shop \2192" !important; font-family:'Geist',Arial,sans-serif !important; display:inline-block !important; align-self:center !important; line-height:inherit !important; position:static !important; top:auto !important; bottom:auto !important; transform:none !important; opacity:1 !important; transition:none !important; / stoppt das Zittern / margin:0 !important; color:#A3C91D !important; font-size:12px !important; font-weight:600 !important; letter-spacing:1.4px !important; text-transform:uppercase !important; } / Section-Label: Strich NEBEN dem Text (nicht darüber) / .ost-label .et_pb_text_inner { display: flex; align-items: center; } .ost-label .et_pb_text_inner p { margin: 0; } .ost-label .et_pb_text_inner::before { content: ""; flex: 0 0 28px; height: 2px; background: #A3C91D; margin-right: 10px; } / ========================================================================= 6. PARTNER ========================================================================= / / Titel hoch auf Logo-Mitte (nur der Titel, kein Reflow) / #partner .et_pb_blurb_description h3 { transform: translateY(-8px); } / nur der Fließtext runter auf Höhe 108 / #partner .et_pb_blurb_description h3 + p { margin-top: 15px; } #partner .ost-emblem img { height: 48px; margin-top: -4px; margin-bottom: -4px; } / ========================================================================= 7. NAVIGATION / HEADER ========================================================================= / / Menülinks (Desktop + Mobil) / #top-menu li a, .et_mobile_menu li a { font-family:'Geist',sans-serif !important; font-weight:600 !important; font-size:14px; text-transform:uppercase; letter-spacing:0.1em; color:#aaaaaa !important; } #top-menu li a:hover, .et_mobile_menu li a:hover { color:#A3C91D !important; } / "Kontakt" als grüner Clip-Path-Button / #top-menu li.nav-cta a { background:#A3C91D; color:#000 !important; padding:8px 22px !important; clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%); transition:background .2s; } #top-menu li.nav-cta a:hover { background:#8AAC10 !important; color:#000 !important; } / Anker-Sprung nicht unter dem fixen Header verstecken / #leistungen,#shops,#vereine,#partner,#kontakt { scroll-margin-top: 90px; } #main-header { border-bottom: 2px solid #A3C91D !important; } / Fix: "Kontakt"-Button behält im fixierten Header schwarze Schrift (Divis Fixed-Menu-Link-Farbe ist grün -> sonst grün auf grün = unsichtbar) / #page-container #top-menu li.nav-cta a, #page-container #top-menu li.nav-cta a:hover, #page-container .et-fixed-header #top-menu li.nav-cta a, #page-container .et-fixed-header #top-menu li.nav-cta a:hover { color: #000 !important; } / ========================================================================= 8. FOOTER ------------------------------------------------------------------------- An .et-l--footer gehängt (globaler Theme-Builder-Footer-Wrapper), NICHT an #kontakt – die ID gehört jetzt der Formular-Sektion. Legal-Hover bleibt grün. ========================================================================= / .et-l--footer .footer-about { font-size:14px; font-weight:300; color:#b3b3b3; line-height:1.8; margin:0 0 22px; max-width:280px; } .et-l--footer .footer-address { font-size:13px; color:#aaa; line-height:2; } .et-l--footer .footer-address strong { display:block; color:#A3C91D; font-family:'Geist',sans-serif; font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; margin-bottom:5px; } .et-l--footer .footer-col-title { font-family:'Geist',sans-serif; font-weight:600; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:#fff; margin:0 0 18px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.08); } .et-l--footer .footer-links { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; } .et-l--footer .footer-links a { font-size:14px; color:#b3b3b3; text-decoration:none; transition:color .2s; } .et-l--footer .footer-links a:hover { color:#A3C91D; } .et-l--footer .footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:28px; margin-top:40px; border-top:1px solid rgba(255,255,255,.06); } .et-l--footer .footer-copy { font-size:13px; color:#b3b3b3; } .et-l--footer .footer-copy span { color:#A3C91D; } .et-l--footer .footer-legal { display:flex; gap:22px; } .et-l--footer .footer-legal a { font-size:13px; color:#b3b3b3; text-decoration:none; transition:color .2s; } / Impressum & Datenschutz: Hover GRÜN (gewünscht) / .et-l--footer .footer-legal a:hover { color:#A3C91D; } / Footer-Unterleiste: Copyright links · Impressum/Datenschutz rechts / .et-l--footer .footer-bottom .et_pb_text_inner p { display: flex; justify-content: space-between; align-items: center; margin: 0; } .et-l--footer .footer-sublinks { list-style:none; margin:6px 0 4px; padding-left:14px; display:flex; flex-direction:column; gap:6px; } .et-l--footer .footer-sublinks a { font-size:12px; color:#888; text-decoration:none; transition:color .2s; } .et-l--footer .footer-sublinks a:hover { color:#A3C91D; } @media (max-width: 767px) { .et-l--footer .footer-bottom .et_pb_text_inner p { flex-direction: column; gap: 12px; align-items: center; / oder flex-start für linksbündig / } } / ========================================================================= 9. KONTAKTFORMULAR ========================================================================= / / 1) Abgeschrägte Ecke am Button (Divi kann nur runde Ecken) / .os-form .et_pb_contact_submit { clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%); } / 2) grüner Fokus-Glow (Divi bietet nur Fokus-Farbe, keinen Schatten) / .os-form .et_pb_contact_field input:focus, .os-form .et_pb_contact_field textarea:focus, .os-form .et_pb_contact_field select:focus { box-shadow: 0 0 0 2px rgba(163,201,29,0.25); } / 3) Platzhalter-Farbe (kein eigener Divi-Regler) / .os-form .et_pb_contact_field input::placeholder, .os-form .et_pb_contact_field textarea::placeholder { color: #aaa; } .os-form .et_pb_contact_form { align-content: flex-start; } @media (max-width: 767px) { / alle Felder volle Breite, untereinander / .os-form .et_pb_contact_form .et_pb_contact_field { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; } / Captcha + Button: untereinander, oben zusammen, linksbündig / .os-form .et_contact_bottom_container { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; margin-left: 0 !important; width: 100% !important; align-self: flex-start !important; / Container nicht strecken → Höhe = Inhalt */ } .os-form .et_pb_contact_form { padding-bottom: 12px !important; } .os-form .et_contact_bottom_container .et_pb_contact_right { width: 100% !important; float: none !important; margin: 0 0 16px !important; text-align: left !important; } .os-form .et_contact_bottom_container .et_pb_button_wrapper { width: 100% !important; float: none !important; justify-content: flex-start !important; margin-top: 8px !important; } .os-form .et_contact_bottom_container .et_pb_contact_submit { margin: 0 !important; } }