.colorpicker,.colorpicker input{font-family:Arial,Helvetica,sans-serif}.accessHidden,.colorpicker{display:none}.colorpicker{width:356px;height:176px;overflow:hidden;position:absolute;background:url("https://www.gemel.net/ac/colorPicker/images/colorpicker_background.png");z-index:99999999}.colorpicker_color,.colorpicker_color div{width:150px;height:150px;position:absolute}.colorpicker_color{left:14px;top:13px;background:red;overflow:hidden;cursor:crosshair}.colorpicker_color div{top:0;left:0;background:url("https://www.gemel.net/ac/colorPicker/images/colorpicker_overlay.png")}.colorpicker_color div div{position:absolute;top:0;left:0;width:11px;height:11px;overflow:hidden;background:url("https://www.gemel.net/ac/colorPicker/images/colorpicker_select.gif");margin:-5px 0 0 -5px}.colorpicker_hue{position:absolute;top:13px;left:171px;width:35px;height:150px;cursor:n-resize}.colorpicker_hue div{position:absolute;width:35px;height:9px;overflow:hidden;background:url("https://www.gemel.net/ac/colorPicker/images/colorpicker_indic.gif") left top;margin:-4px 0 0;left:0}.colorpicker_current_color,.colorpicker_new_color{width:60px;height:30px;top:13px;background:red;position:absolute}.colorpicker_new_color{left:213px}.colorpicker_current_color{left:283px}.colorpicker input{background-color:transparent;border:1px solid transparent;position:absolute;font-size:10px;color:#898989;top:4px;right:11px;text-align:right;margin:0;padding:0;height:11px}.colorpicker_field,.colorpicker_field span,.colorpicker_hex,.colorpicker_submit{position:absolute;height:22px}.colorpicker_hex{width:72px;background:url("https://www.gemel.net/ac/colorPicker/images/colorpicker_hex.png") top;left:212px;top:142px}.colorpicker_hex input{right:6px}.colorpicker_field{width:62px;background-position:top}.colorpicker_field span{width:12px;overflow:hidden;top:0;right:0;cursor:n-resize}.colorpicker_rgb_r{background-image:url("https://www.gemel.net/ac/colorPicker/images/colorpicker_rgb_r.png");top:52px;left:212px}.colorpicker_rgb_g{background-image:url("https://www.gemel.net/ac/colorPicker/images/colorpicker_rgb_g.png");top:82px;left:212px}.colorpicker_rgb_b{background-image:url("https://www.gemel.net/ac/colorPicker/images/colorpicker_rgb_b.png");top:112px;left:212px}.colorpicker_hsb_h{background-image:url("https://www.gemel.net/ac/colorPicker/images/colorpicker_hsb_h.png");top:52px;left:282px}.colorpicker_hsb_s{background-image:url("https://www.gemel.net/ac/colorPicker/images/colorpicker_hsb_s.png");top:82px;left:282px}.colorpicker_hsb_b{background-image:url("https://www.gemel.net/ac/colorPicker/images/colorpicker_hsb_b.png");top:112px;left:282px}.colorpicker_submit{width:22px;background:url("https://www.gemel.net/ac/colorPicker/images/colorpicker_submit.png") top;left:322px;top:142px;overflow:hidden}.colorpicker_focus{background-position:center}.colorpicker_hex.colorpicker_focus,.colorpicker_slider,.colorpicker_submit.colorpicker_focus{background-position:bottom} /* kever v2 - a11y.css (owner X in the base; S1 re-skinned the few brand values for kever, the widget keeps its blue, rule 41): the accessibility widget (js/v2/a11y.js) and the modes it sets on . The panel is sized in px on purpose: it stays the same while the page text grows. Mode rules never touch the widget itself (#w2a), and the colour modes keep every layout and graphic as designed. NOT a head link (rule 66): a11y.js adds this sheet on demand (saved settings on load, intent on an opener, the first open), so nothing here may be needed by a visitor who never used the widget. When this file changes without a11y.js, bump CSS_REV in a11y.js (unless the template prints data-w2a-css with the filemtime on the a11y.js script tag). */ /* ========== 1. Panel ========== */ #w2a{--a:var(--w2-a11y,#0b5c84);--a-deep:#08425f;--a-tint:#eaf3f8;--a-tint-2:#f4f9fc;--a-line:#cfdde6;--ink:#1a1a1a;--ink-2:#4a5a62;--line:var(--w2-line,#E6E4DF); position:fixed;inset:0;z-index:2147483647;margin:0;padding:0;font:400 16px/1.45 'Heebo','Heebo Fallback','Assistant',Arial,sans-serif;color:var(--ink);direction:rtl;text-align:right;letter-spacing:normal;word-spacing:normal;-webkit-font-smoothing:antialiased} #w2a[hidden]{display:none!important} #w2a *,#w2a *::before,#w2a *::after{box-sizing:border-box} #w2a .w2a-i{display:block;flex:none;width:24px;height:24px} #w2a :focus{outline:0} #w2a :focus-visible{outline:3px solid var(--a);outline-offset:3px} #w2a .w2a-panel:focus-visible{outline:0} .w2a-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .w2a-backdrop{position:absolute;inset:0;background:rgba(20,18,14,.34);opacity:0;transition:opacity .26s ease;cursor:pointer} #w2a.is-open .w2a-backdrop{opacity:1} /* mobile first: a bottom sheet */ .w2a-panel{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;max-height:88vh;max-height:min(88dvh,780px);overflow:hidden;background:#fff;border-radius:24px 24px 0 0;box-shadow:0 -18px 50px -18px rgba(20,18,14,.45),0 0 0 1px rgba(40,35,25,.06);outline:0;transform:translateY(104%);transition:transform .34s cubic-bezier(.2,.8,.2,1)} #w2a.is-open .w2a-panel{transform:none} .w2a-handle{flex:none;width:44px;height:5px;margin:9px auto 0;border-radius:99px;background:#d9d6cf} .w2a-head{flex:none;display:flex;align-items:center;gap:12px;padding:12px 16px 14px;border-bottom:1px solid var(--line);background-color:var(--a-tint-2);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M21 15h2v6h6v2h-6v6h-2v-6h-6v-2h6z' fill='%230b5c84' fill-opacity='.07'/%3E%3C/svg%3E")} .w2a-head__ico{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:var(--a);color:#fff;box-shadow:0 8px 18px -10px rgba(11,92,132,.8)} .w2a-head__ico .w2a-i{width:27px;height:27px} .w2a-head__txt{flex:1 1 auto;min-width:0} #w2a .w2a-title{margin:0;padding:0;font-family:inherit;font-size:20px;font-weight:800;line-height:1.2;color:var(--ink);letter-spacing:normal} #w2a .w2a-desc{margin:3px 0 0;padding:0;font-size:14px;line-height:1.35;color:var(--ink-2)} .w2a-x{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:1.5px solid var(--a-line);border-radius:50%;background:#fff;color:var(--ink);cursor:pointer;transition:background-color .15s,color .15s,border-color .15s} .w2a-x:hover{background:var(--a);border-color:var(--a);color:#fff} /* rule 48: a plain scroll area (no overscroll containment); at its ends the wheel/swipe goes on to the page */ .w2a-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:auto;-webkit-overflow-scrolling:touch;padding:14px 14px 10px} /* text size: one card, minus / growing level bars / plus (RTL: smaller on the right, bigger on the left) */ .w2a-step{padding:12px 14px 14px;border:1.5px solid var(--line);border-radius:18px;background:#fff} .w2a-step__top{display:flex;align-items:center;gap:10px} .w2a-step__ico{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--a-tint);color:var(--a)} .w2a-step__t{font-size:16px;font-weight:800;line-height:1.2} #w2a .w2a-step__val{margin-inline-start:auto;min-width:66px;padding:5px 12px;border-radius:999px;background:var(--a);color:#fff;font-size:15px;font-weight:800;line-height:1.2;text-align:center;direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums} .w2a-step__row{display:flex;align-items:center;gap:12px;margin-top:12px} .w2a-step__btn{flex:none;display:grid;place-items:center;width:48px;height:48px;margin:0;padding:0;border:1.5px solid var(--a-line);border-radius:14px;background:var(--a-tint-2);color:var(--a);cursor:pointer;transition:background-color .15s,color .15s,border-color .15s} .w2a-step__btn:hover{background:var(--a);border-color:var(--a);color:#fff} .w2a-step__btn.is-off{opacity:.38;cursor:default} .w2a-step__btn.is-off:hover{background:var(--a-tint-2);border-color:var(--a-line);color:var(--a)} .w2a-step__bar{flex:1 1 auto;display:flex;align-items:flex-end;gap:6px;height:26px} .w2a-step__bar i{flex:1 1 0;display:block;border-radius:6px;background:#e1e9ed;transition:background-color .25s ease} .w2a-step__bar i:nth-child(1){height:30%} .w2a-step__bar i:nth-child(2){height:44%} .w2a-step__bar i:nth-child(3){height:58%} .w2a-step__bar i:nth-child(4){height:72%} .w2a-step__bar i:nth-child(5){height:86%} .w2a-step__bar i:nth-child(6){height:100%} .w2a-step__bar i.is-on{background:var(--a)} /* sections + tiles */ .w2a-sec{margin-top:16px} #w2a .w2a-sec__t{display:flex;align-items:center;gap:10px;margin:0 2px 9px;padding:0;font-size:14px;font-weight:800;line-height:1.3;color:var(--ink-2);letter-spacing:normal} #w2a .w2a-sec__t::after{content:"";flex:1 1 auto;height:1px;background:var(--line)} .w2a-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .w2a-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px;min-width:0;min-height:100px;margin:0;padding:13px 6px 11px;border:1.5px solid var(--line);border-radius:16px;background:#fff;color:var(--ink);font:inherit;font-size:14.5px;font-weight:700;line-height:1.25;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .15s,background-color .15s,box-shadow .15s} .w2a-tile:hover{border-color:var(--a);box-shadow:0 8px 18px -12px rgba(11,92,132,.55)} .w2a-tile__ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--a-tint);color:var(--a);transition:background-color .2s,color .2s} .w2a-tile__t{display:block;max-width:100%;overflow-wrap:anywhere} .w2a-tile__s{display:block;margin-top:-3px;font-size:14px;font-weight:600;line-height:1.2;color:var(--ink-2)} .w2a-tile__dots{display:flex;gap:4px;margin-top:auto} .w2a-tile__dots i{display:block;width:14px;height:4px;border-radius:2px;background:#d8e2e7;transition:background-color .2s} .w2a-tile__dots i.is-on{background:var(--a)} .w2a-tile__on{position:absolute;top:7px;left:7px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--a);color:#fff;transform:scale(0);transition:transform .22s cubic-bezier(.2,1.3,.4,1)} #w2a .w2a-tile__on .w2a-i{width:13px;height:13px} .w2a-tile.is-on{border-color:var(--a);background:#eef6fb;box-shadow:inset 0 0 0 1px var(--a)} .w2a-tile.is-on .w2a-tile__ico{background:var(--a);color:#fff} .w2a-tile.is-on .w2a-tile__s{color:var(--a-deep)} .w2a-tile.is-on .w2a-tile__on{transform:scale(1)} /* skip link a11y.js adds on v1 pages (v2 prints its own .w2-skip): off screen until it gets keyboard focus */ .w2a-skip{position:fixed;top:-200px;right:12px;z-index:2147483200;padding:12px 18px;border-radius:12px;background:#0b5c84;color:#fff!important;font:700 16px/1.3 Arial,sans-serif;text-decoration:none!important;box-shadow:0 8px 24px -8px rgba(0,0,0,.45)} .w2a-skip:focus{top:12px;outline:3px solid #ffbf00;outline-offset:2px} #w2a-main:focus:not(:focus-visible){outline:0} /* quick navigation: skip to the content + the page's headings (WCAG 2.4.1 / 2.4.5 / 2.4.10) */ .w2a-nav__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .w2a-navbtn{display:flex;align-items:center;gap:9px;min-width:0;min-height:52px;margin:0;padding:8px 12px;border:1.5px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);font:inherit;font-size:14.5px;font-weight:700;line-height:1.25;text-align:right;cursor:pointer;transition:border-color .15s,background-color .15s} .w2a-navbtn .w2a-i{color:var(--a)} .w2a-navbtn:hover,.w2a-navbtn[aria-expanded="true"]{border-color:var(--a);background:var(--a-tint-2)} .w2a-navbtn span{min-width:0;overflow-wrap:anywhere} #w2a .w2a-hl{margin:8px 0 0;padding:6px;list-style:none;border:1.5px solid var(--a-line);border-radius:14px;background:var(--a-tint-2);max-height:280px;overflow-y:auto} #w2a .w2a-hl[hidden]{display:none} .w2a-hl__i{margin:0;padding:0} .w2a-hl__b{display:block;width:100%;min-height:44px;margin:0;padding:10px 12px;border:0;border-radius:10px;background:transparent;color:var(--ink);font:inherit;font-size:15px;font-weight:600;line-height:1.35;text-align:right;cursor:pointer} .w2a-hl__i--l1 .w2a-hl__b{font-weight:800} .w2a-hl__i--l3 .w2a-hl__b{padding-inline-start:28px;font-size:14.5px;color:var(--ink-2)} .w2a-hl__b:hover{background:#fff;color:var(--a-deep);text-decoration:underline;text-underline-offset:3px} .w2a-hl__none{padding:10px 12px;font-size:14.5px;color:var(--ink-2)} /* footer: reset + the accessibility statement */ .w2a-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--w2-bg-2,#F6F5F2)} .w2a-reset{display:inline-flex;align-items:center;gap:8px;min-height:46px;margin:0;padding:0 16px;border:1.5px solid var(--a);border-radius:13px;background:#fff;color:var(--a);font:inherit;font-size:15px;font-weight:800;line-height:1.2;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s} #w2a .w2a-reset .w2a-i,#w2a .w2a-doc .w2a-i{width:20px;height:20px} .w2a-reset:hover{background:var(--a);color:#fff} .w2a-reset.is-dim{border-color:var(--a-line);color:#5a6a72} .w2a-reset.is-dim:hover{background:#fff;color:var(--a);border-color:var(--a)} #w2a .w2a-doc{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;color:var(--a);font-size:15px;font-weight:700;line-height:1.2;text-decoration:underline;text-underline-offset:3px} #w2a .w2a-doc:hover{color:var(--a-deep)} @media (max-width:359px){ .w2a-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .w2a-foot{flex-wrap:wrap} } /* desktop: a floating side sheet on the left, next to the bubble that opens it */ @media (min-width:700px){ .w2a-backdrop{background:rgba(20,18,14,.22)} .w2a-panel{left:16px;right:auto;top:16px;bottom:16px;width:420px;max-height:none;border-radius:24px;box-shadow:0 30px 80px -24px rgba(20,18,14,.5),0 0 0 1px rgba(40,35,25,.06);transform:translateX(calc(-100% - 28px))} .w2a-handle{display:none} .w2a-head{padding:16px 18px;border-radius:24px 24px 0 0} .w2a-body{padding:16px 18px 12px} .w2a-foot{padding:12px 18px} } @media (min-width:700px) and (max-height:560px){.w2a-panel{top:8px;bottom:8px}} /* reduced motion: the sheet fades in place instead of sliding */ @media (prefers-reduced-motion:reduce){ .w2a-panel{transform:none!important;opacity:0;transition:opacity .2s ease} #w2a.is-open .w2a-panel{opacity:1} } /* the "נגישות" bubble and the other openers show a small mark while any adjustment is on */ .w2 .w2-bubble--a11y.w2a-has :is(.w2-bubble__icon,.w2-bubble__ico){position:relative} .w2 .w2-bubble--a11y.w2a-has :is(.w2-bubble__icon,.w2-bubble__ico)::after{content:"";position:absolute;top:-4px;left:-4px;width:12px;height:12px;border-radius:50%;background:#e8a200;box-shadow:0 0 0 2px #fff} /* ========== 2. Text size (rem for the few rem sizes, body for every em size) ========== */ html.w2a-fs1{font-size:115%!important} html.w2a-fs2{font-size:130%!important} html.w2a-fs3{font-size:150%!important} html.w2a-fs1 body{font-size:18.4px!important} html.w2a-fs2 body{font-size:20.8px!important} html.w2a-fs3 body{font-size:24px!important} /* 175% and 200%: IS 5568 / WCAG 1.4.4 (text resized to 200% with no loss of content or function) */ html.w2a-fs4{font-size:175%!important} html.w2a-fs5{font-size:200%!important} html.w2a-fs4 body{font-size:28px!important} html.w2a-fs5 body{font-size:32px!important} html:is(.w2a-fs4,.w2a-fs5) body :is(h1,h2,h3,h4,p,li,td,th,a,span,label,button):not(#w2a *){overflow-wrap:break-word} /* the fixed chrome keeps its size so it never covers the content or breaks its row: the header bar (logo, phone, menu button), the floating bubbles, the mobile sticky bar, the cookie note; on desktop the whole header and its dropdowns (the menu row and the 578px dropdown box stay exactly as designed; the page text grows) */ html:is(.w2a-fs1,.w2a-fs2,.w2a-fs3,.w2a-fs4,.w2a-fs5) :is(.w2-header__bar,.w2-bubbles,.w2-sticky,.w2-cookie){font-size:16px!important} @media (min-width:1024px){html:is(.w2a-fs1,.w2a-fs2,.w2a-fs3,.w2a-fs4,.w2a-fs5) .w2-header{font-size:16px!important}} /* v1 template (the widget served as /ac/ac.js): its desktop header row (menu + the nowrap #phoneArea) keeps its size too, or it pushes the page sideways from 150% */ @media (min-width:1024px){html:not(.w2):is(.w2a-fs1,.w2a-fs2,.w2a-fs3,.w2a-fs4,.w2a-fs5) #header{font-size:16px!important}} /* ========== 3. Line height + letter / word spacing (page text; the header bar, the fixed buttons and the widget keep their size) ========== */ html.w2a-lh1 body :is(p,li,dd,dt,td,th,blockquote,figcaption,address,summary):not(:is(.w2-header,.w2-sticky,.w2-bubbles,#w2a) *){line-height:1.95!important} html.w2a-lh2 body :is(p,li,dd,dt,td,th,blockquote,figcaption,address,summary):not(:is(.w2-header,.w2-sticky,.w2-bubbles,#w2a) *){line-height:2.35!important} html.w2a-lh1 body :is(h1,h2,h3,h4,h5,h6):not(:is(.w2-header,#w2a) *){line-height:1.55!important} html.w2a-lh2 body :is(h1,h2,h3,h4,h5,h6):not(:is(.w2-header,#w2a) *){line-height:1.8!important} html.w2a-sp1 body :not(:is(.w2-header,.w2-sticky,.w2-bubbles,#w2a,.w2-header *,.w2-sticky *,.w2-bubbles *,#w2a *)){letter-spacing:.04em!important;word-spacing:.16em!important} html.w2a-sp2 body :not(:is(.w2-header,.w2-sticky,.w2-bubbles,#w2a,.w2-header *,.w2-sticky *,.w2-bubbles *,#w2a *)){letter-spacing:.08em!important;word-spacing:.3em!important} /* spacing is inherited: the excluded chrome starts again from normal */ html:is(.w2a-sp1,.w2a-sp2) body :is(.w2-header,.w2-sticky,.w2-bubbles){letter-spacing:normal!important;word-spacing:normal!important} /* ========== 4. Readable font (icon fonts and the widget untouched) ========== */ /* 'W2 Arial' = the local Arial with its weights pinned (round 9 mobile audit): plain "Arial" at weight 800 is served as ARIAL BLACK on Windows, which has no Hebrew, so every 800 heading of this mode painted in Times New Roman */ @font-face{font-family:'W2 Arial';src:local('Arial'),local('ArialMT');font-weight:100 599;font-style:normal} @font-face{font-family:'W2 Arial';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:600 1000;font-style:normal} html.w2a-font{--w2-font:'W2 Arial',Arial,'Noto Sans Hebrew','Assistant','Helvetica Neue',sans-serif;--w2-font-display:'W2 Arial',Arial,'Noto Sans Hebrew','Assistant','Helvetica Neue',sans-serif} html.w2a-font body,html.w2a-font body :not(i):not(svg):not(svg *):not([class*="fa-"]):not(.fa):not(.fas):not(.fab):not(.far):not(#w2a):not(#w2a *){font-family:'W2 Arial',Arial,'Noto Sans Hebrew','Assistant','Helvetica Neue',sans-serif!important} /* ========== 5. Highlight links and headings (outlines in the element's own colour: they read on light and dark bands) ========== */ html.w2a-links body a[href]:not(#w2a a){text-decoration-line:underline!important;text-decoration-thickness:2px!important;text-underline-offset:.2em!important;outline:2px dashed currentColor!important;outline-offset:2px!important} html.w2a-heads body :is(h1,h2,h3,h4,h5,h6,[role="heading"]):not(#w2a *){outline:2px solid currentColor!important;outline-offset:5px!important;background-color:rgba(255,206,0,.16)!important} /* ========== 6. Colour modes ========== */ /* high contrast: darker tokens here; a11y.js gives every text its strongest colour against its own surface */ html.w2a-hc{--w2-ink:#000;--w2-ink-2:#0d0d0d;--w2-ink-3:#262626;--w2-line:#827d74;--w2-brand-line:#9A7B3E;--w2-field:#262626;--w2-brand-ink:#4D3812} html.w2a-hc body ::placeholder{color:#262626!important;opacity:1!important} /* dark: the page is inverted with its hues kept (the widget panel turns dark with it); photos, video and surfaces that are already dark (marked data-w2a-keep by a11y.js) are flipped back, the logo stays light */ html.w2a-dark{background:#fff!important;-webkit-filter:invert(.9) hue-rotate(180deg);filter:invert(.9) hue-rotate(180deg)} html.w2a-dark body :is(img,video,iframe,canvas,object,embed):not(.w2-logo img), html.w2a-dark body [data-w2a-keep], html.w2a-dark:not(.w2a-marked) body :is(.w2-zone--footer,.w2-pf,.w2-hero--home), html.w2a-dark .w2a-backdrop{-webkit-filter:invert(1) contrast(1.25) hue-rotate(180deg)!important;filter:invert(1) contrast(1.25) hue-rotate(180deg)!important} html.w2a-dark body [data-w2a-keep] :is(img,video,iframe,canvas,object,embed){-webkit-filter:none!important;filter:none!important} /* light cards inside those dark surfaces: inverted again, so they are dark too (their photos flipped back) */ html.w2a-dark body [data-w2a-keep] [data-w2a-inv]{-webkit-filter:invert(.9) hue-rotate(180deg)!important;filter:invert(.9) hue-rotate(180deg)!important} html.w2a-dark body [data-w2a-keep] [data-w2a-inv] :is(img,video,iframe,canvas,object,embed){-webkit-filter:invert(1) contrast(1.25) hue-rotate(180deg)!important;filter:invert(1) contrast(1.25) hue-rotate(180deg)!important} /* greyscale, alone or with a contrast mode */ html.w2a-gray{-webkit-filter:grayscale(1);filter:grayscale(1)} html.w2a-gray.w2a-dark{-webkit-filter:invert(.9) hue-rotate(180deg) grayscale(1);filter:invert(.9) hue-rotate(180deg) grayscale(1)} /* ========== 7. Stop animations: every animation and transition ends at once, smooth scroll off; the reveal targets are shown (a11y.js also pauses the carousels and tickers and puts every graphic in its final state) ========== */ html.w2a-still{scroll-behavior:auto!important} html.w2a-still:not(#w2a-x):not(#w2a-y) *,html.w2a-still:not(#w2a-x):not(#w2a-y) *::before,html.w2a-still:not(#w2a-x):not(#w2a-y) *::after{animation-duration:1ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:1ms!important;transition-delay:0s!important;scroll-behavior:auto!important} html.w2a-still:not(#w2a-x):not(#w2a-y) .w2-rv{opacity:1!important;transform:none!important;clip-path:none!important} /* ========== 8. Big cursor (arrow; blue over anything clickable; text fields keep the text cursor) ========== */ html.w2a-cursor,html.w2a-cursor body,html.w2a-cursor body *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M9 5l29 17.5-12.6 3.4 7.8 13.6-6.3 3.6-7.8-13.6L9 39.4z' fill='%23111' stroke='%23fff' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 9 5,auto!important} html.w2a-cursor body :is(a[href],button,[role="button"],label,select,summary,[onclick],input[type="checkbox"],input[type="radio"],input[type="submit"],input[type="button"]), html.w2a-cursor body :is(a[href],button,[role="button"],label,summary) *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M9 5l29 17.5-12.6 3.4 7.8 13.6-6.3 3.6-7.8-13.6L9 39.4z' fill='%230b5c84' stroke='%23fff' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 9 5,pointer!important} html.w2a-cursor body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),textarea){cursor:text!important} /* ========== 9. Reading guide: a line that follows the pointer (or the finger), with the line above it lit ========== */ .w2a-rg{position:fixed;left:0;right:0;top:0;z-index:100040;height:0;pointer-events:none;will-change:transform} .w2a-rg__line{position:absolute;left:0;right:0;top:14px;height:6px;border-radius:3px;background:#0b5c84;box-shadow:0 0 0 2px rgba(255,255,255,.9),0 6px 16px rgba(0,0,0,.22)} .w2a-rg__line::before{content:"";position:absolute;left:0;right:0;bottom:8px;height:44px;background:rgba(255,206,0,.16);border-radius:6px 6px 0 0} /* while the panel is open a11y.js hides the guide inline (no UI-state class on , rule 66) */ /* ========== 10. Keyboard navigation: a strong three-ring focus on everything focusable ========== */ html.w2a-focus body :focus:not(#w2a .w2a-panel),html.w2a-focus body :focus-visible:not(#w2a .w2a-panel){outline:3px solid #0b5c84!important;outline-offset:3px!important;box-shadow:0 0 0 3px #fff,0 0 0 9px #ffbf00!important} /* ========== 11. Hide images (the logo and the icons stay) ========== */ html.w2a-noimg body :is(img,picture,svg image):not(.w2-logo img):not(#w2a *){visibility:hidden!important} /* photos in the article text close up (nothing is laid out around them); card photos keep their frame */ html.w2a-noimg body .textArea :is(p,figure,div:not([class]),a:not([class]),center) > img:not(:is(.w2-mod,.w2-tip,.w2-author,.w2-cc) img),html.w2a-noimg body .textArea > img{display:none!important} html.w2a-noimg body.w2-t-home .w2-hero::before{background-image:none!important} /* ========== 12. Print: the widget never prints ========== */ @media print{#w2a,.w2a-rg{display:none!important}} /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } .carousel-theme { direction: ltr; } @charset 'UTF-8'; /* Slider */ .slick-loading .slick-list { background: #fff url("https://www.gemel.net/plugins/slick/ajax-loader.gif") center center no-repeat; } /* Icons */ @font-face { font-family: 'slick'; font-weight: normal; font-style: normal; src: url("https://www.gemel.net/plugins/slick/fonts/slick.eot"); src: url("https://www.gemel.net/plugins/slick/fonts/slick.eot?#iefix") format('embedded-opentype'), url("https://www.gemel.net/plugins/slick/fonts/slick.woff") format('woff'), url("https://www.gemel.net/plugins/slick/fonts/slick.ttf") format('truetype'), url("https://www.gemel.net/plugins/slick/fonts/slick.svg#slick") format('svg'); } /* Arrows */ .slick-prev, .slick-next { font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 20px; height: 20px; padding: 0; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: transparent; border: none; outline: none; background: transparent; } .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: transparent; outline: none; background: transparent; } .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: .25; } .slick-prev:before, .slick-next:before { font-family: 'slick'; font-size: 20px; line-height: 1; opacity: .75; color: white; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-prev { left: -25px; } [dir='rtl'] .slick-prev { right: -25px; left: auto; } .slick-prev:before { content: '←'; } [dir='rtl'] .slick-prev:before { content: '→'; } .slick-next { right: -25px; } [dir='rtl'] .slick-next { right: auto; left: -25px; } .slick-next:before { content: '→'; } [dir='rtl'] .slick-next:before { content: '←'; } /* Dots */ .slick-dotted.slick-slider { margin-bottom: 30px; } .slick-dots { position: absolute; bottom: -25px; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; } .slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer; } .slick-dots li button { font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; } .slick-dots li button:hover, .slick-dots li button:focus { outline: none; } .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; } .slick-dots li button:before { font-family: 'slick'; font-size: 6px; line-height: 20px; position: absolute; top: 0; left: 0; width: 20px; height: 20px; content: '•'; text-align: center; opacity: .25; color: black; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-dots li.slick-active button:before { opacity: .75; color: black; } [dir='rtl'] .slick-prev{ right: 25px; left: auto; z-index: 3; } [dir='rtl'] .slick-next{ right: auto; left: 25px; z-index: 3; } [dir='rtl'] .slick-next, [dir='rtl'] .slick-prev { border-radius: 50%; filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.12)); background: #fff; width: 38px; height: 38px; font-size: 0; } [dir='rtl'] .slick-next:before, [dir='rtl'] .slick-prev:before { content: "\f053"; font-family: "Font Awesome 5 Free"; color: #023099; font-size: 28px; font-weight: 900; } [dir='rtl'] .slick-prev:before { content: "\f054"; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, select, input { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; font-size: inherit; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1.6; font-family: "Noto Sans Hebrew", arial, sans-serif; font-optical-sizing: auto; font-variation-settings: "wdth" 75; font-size: 16px; color: #000; background: #fff; } button { font-family: "Noto Sans Hebrew", arial, sans-serif; } ol, ul { list-style: none; } :focus { outline: 0; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; } .responsive-table { width: 100%; border-collapse: collapse; border-radius: 8px; overflow: hidden; } .responsive-table th, .responsive-table td { text-align: center; vertical-align: middle; padding: 10px; } .responsive-table th { background: #7fe4c3; color: #000000; font-size: 20px; } .responsive-table td { background-color: #f7f9fa; font-size: 18px; } .responsive-table tr:nth-child(even) td { background-color: #f0f0f0; } .responsive-table img { width: 45px; height: 45px; } /*end css reset*/ .clear:before, .clear:after, .clearfix:after, .clearfix:before { content: ""; display: table; } .clear:after, .clearfix:after { clear: both; } .clear, .clearfix { zoom: 1; } html, body { margin: 0; padding: 0; height: 100%; } b, strong { font-weight: 700; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .center { text-align: center; } .internal-links-more { margin-top: 14px } .internal-links-more > summary { list-style: none } .internal-links-more > summary::-webkit-details-marker { display: none } /* קו חוצה ולשונית באמצע בלי אלמנטים פנימיים */ .show-more-divider { cursor: pointer; user-select: none; position: relative; display: block; text-align: center; padding: 14px 0; } .show-more-divider::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,0.18); } .show-more-divider::after { content: "הצג עוד"; position: relative; display: inline-block; padding: 6px 12px; border: 1px solid rgba(0,0,0,0.18); border-radius: 999px; font-weight: 600; background: #fff; line-height: 1; } .internal-links-more[open] .show-more-divider::after { content: "הצג פחות" } /* פתיחה וסגירה של החלק המוסתר */ .internal-links-hidden { display: none } .internal-links-more[open] .internal-links-hidden { display: block } .internal-links-hidden { overflow: visible } .internal-links-hidden { height: auto } /***popup**/ .myformPop { display: none; width: 320px; min-height: 189px; padding: 8px; background: rgba(0, 0, 0, 0.3); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#10000000,endColorstr=#10000000); -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; position: relative; background: rgba(0, 0, 0, 0.1); } .myformPop *, .myformPop { box-sizing: content-box; } .myformPop i.close, .myformPop .cancelButton, .myformPop .acceptButton { position: absolute; bottom: 15px; font-family: arial; font-size: 0.75em; left: 15px; display: block; padding: 7px; color: #fff; font-weight: bold; border: 1px solid #a95151; box-shadow: 0 1px 2px 0 #cd8787 inset; -webkit-box-shadow: 0 1px 2px 0 #cd8787 inset; -moz-box-shadow: 0 1px 2px 0 #cd8787 inset; background: #c57979; background: -moz-linear-gradient(top, #c57979 0%, #a34c4c 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c57979), color-stop(100%, #a34c4c)); background: -webkit-linear-gradient(top, #c57979 0%, #a34c4c 100%); background: -o-linear-gradient(top, #c57979 0%, #a34c4c 100%); background: -ms-linear-gradient(top, #c57979 0%, #a34c4c 100%); background: linear-gradient(top, #c57979 0%, #a34c4c 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c57979', endColorstr='#a34c4c',GradientType=0 ); border: 0px; outline: none; text-shadow: 0 -1px #6f6f6f; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; cursor: pointer; } .myformPop .confirmButtons { width: 193px; margin: 0 auto; margin-top: 81px; } .myformPop .confirmButtons button { float: right; margin-right: 10px; padding: 12px 25px 12px 25px; position: relative; left: auto; bottom: auto; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; text-shadow: none; font-size: 0.875em; font-weight: normal; } .myformPop .cancelButton { border: 1px solid #6f3333; } .myformPop .acceptButton { margin-right: 0px; background: #a9ca7b; /* Old browsers */ background: -moz-linear-gradient(top, #a9ca7b 0%, #84ab58 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a9ca7b), color-stop(100%, #84ab58)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #a9ca7b 0%, #84ab58 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #a9ca7b 0%, #84ab58 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #a9ca7b 0%, #84ab58 100%); /* IE10+ */ background: linear-gradient(to bottom, #a9ca7b 0%, #84ab58 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9ca7b', endColorstr='#84ab58',GradientType=0 ); /* IE6-9 */ border: 1px solid #567a34; } .myformPop i.close:hover, .myformPop .confirmButtons button { opacity: 0.95; filter: alpha(opacity=95); -webkit-transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; } .myformPop i.close:active, .myformPop .confirmButtons button:active { background: #b15e5e; box-shadow: 0 0 2px #707070 inset, 0 1px 0 #fff; -webkit-box-shadow: 0 0 2px #707070 inset, 0 1px 0 #fff; -moz-box-shadow: 0 0 2px #707070 inset, 0 1px 0 #fff; } .myformPop .confirmButtons .acceptButton:active { background: #a9ca7b; } .myformPop .heading { width: 320px; height: 44px; background-image: -webkit-linear-gradient(top, rgb(249, 249, 249), rgb(233, 233, 233)); background-image: -moz-linear-gradient(top, rgb(249, 249, 249), rgb(233, 233, 233)); background-image: -o-linear-gradient(top, rgb(249, 249, 249), rgb(233, 233, 233)); background-image: -ms-linear-gradient(top, rgb(249, 249, 249), rgb(233, 233, 233)); background-image: linear-gradient(top, rgb(249, 249, 249), rgb(233, 233, 233)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f9f9f9', EndColorStr='#e9e9e9'); border-bottom: 1px solid #bababa; -webkit-box-shadow: inset 0px -1px 0px #fff, 0px 1px 3px rgba(0, 0, 0, 0.08); -moz-box-shadow: inset 0px -1px 0px #fff, 0px 1px 3px rgba(0, 0, 0, 0.08); box-shadow: inset 0px -1px 0px #fff, 0px 1px 3px rgba(0, 0, 0, 0.08); -webkit-border-radius: 4px 4px 0px 0px; -moz-border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px; font-family: arial; font-weight: bold; text-align: center; line-height: 44px; color: #444444; text-shadow: 0px 1px 0px #fff; } .myformPop .output { font-family: arial; font-size: 0.875em; width: 300px; min-height: 114px; background: #f3f3f3; -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25); -webkit-border-radius: 0px 0px 4px 4px; -moz-border-radius: 0px 0px 4px 4px; border-radius: 0px 0px 4px 4px; padding: 10px; padding-bottom: 42px; } .myformPop .output.delete { color: #a70505; } .myformPop .output span.success { color: #4f8a10; border: 1px solid #4f8a10; background: #dff2bf; display: block; padding: 3%; width: 94%; text-align: center; } .myformPop .output span.error { color: #a70505; } .myformPop .output ul { list-style-type: disc; color: #d8000c; background-color: #ffbaba; padding: 3%; width: 94%; margin: 0; border: 1px solid #d8000c; } .myformPop .output ul li { margin-right: 20px; } /***popup**/ /***FORMS***/ /*****HE****/ .myform { display: block; padding-bottom: 10px; } .myform fieldset { display: block; margin-bottom: 10px; position: relative; } .myform fieldset label { width: 28%; float: right; font-size: 1em; color: #777777; margin-left: 2%; } .myform fieldset.req:before { content: "*"; color: red; position: absolute; top: -9px; right: 1px; display: block; } .myform fieldset div.inputArea { float: right; width: 70%; } .myform fieldset.full div.inputArea { float: none; width: 100%; } .myform fieldset div.inputArea input[type="text"], .myform fieldset div.inputArea input[type="tel"], .myform fieldset div.inputArea input[type="password"], .myform fieldset div.inputArea textarea, .myform fieldset div.inputArea select { background: #fff; padding-right: 51px; -webkit-appearance: none; padding-left: 2%; width: 100%; line-height: 50px; color: #000; font-size: 1.375em; text-align: right; direction: rtl; outline: 0px; border: 0; position: relative; font-family: "Noto Sans Hebrew", arial, sans-serif; border: 2px solid #000; border-radius: 15px; } .myform fieldset div.inputArea select { padding-left: 30px; } input.errorField, textarea.errorField { border-color: red !important; background-color: #ffbaba !important; } .myform fieldset div.inputArea textarea { min-height: 70px; line-height: normal; resize: none; } .myform button, .mybutton { display: flex; width: 100%; justify-content: center; text-align: center; align-items: center; gap: 10px; white-space: nowrap; font-size: 1.5em; padding: 16px 10px; outline: 0; cursor: pointer; background-color: #000000; color: #ffffff; border: 0; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; text-decoration: none !important; text-align: center; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; } .myform button:hover, .myform .mybutton:hover { color: #2ad09d; } .myform button i, .mybutton i { color: #2ad09d; } .myform button:disabled { cursor: auto; background: #d0d0d0; } .myform button:disabled, .myform button:disabled:hover, .myform button:disabled i { color: #fff; } .myform button:active, .mybutton:active { position: relative; } .mybutton.green { background: #2ad09d; color: #fff; } .mybutton.green:hover { color: #fff; background: #26b186; } .myform fieldset div.inputArea input::-webkit-input-placeholder, .myform fieldset div.inputArea textarea::-webkit-input-placeholder { color: #000; } .myform fieldset div.inputArea input:-moz-placeholder, .myform fieldset div.inputArea textarea:-moz-placeholder { color: #000; } .myform fieldset div.inputArea input::-moz-placeholder, .myform fieldset div.inputArea textarea::-moz-placeholder { color: #000; } .myform fieldset div.inputArea input:-ms-input-placeholder, .myform fieldset div.inputArea textarea:-ms-input-placeholder { color: #000; } .form_wrap { width: 100%; max-width: 600px; margin: 0 auto; background: #f1f1f1; padding: 20px; border-radius: 8px; } /*****HE****/ .material-icons::after, .material-symbols-outlined:after { content: attr(data-icon); } .spacing { margin-bottom: 20px; } #header { width: 100%; border-bottom: 1px solid #000000; } .inputArea:before { content: "\f0ad"; font-weight: 800; font-family: "Font Awesome 5 Free"; position: absolute; right: 20px; top: 13px; color: #000; font-size: 1.25em; display: block; z-index: 1; } .inputArea.email:before { content: "\f0e0"; } .inputArea.phone:before { content: "\f095"; } .inputArea.professionType:before { content: "\f06c"; } .inputArea.professionType::after { position: absolute; top: 6px; left: 8px; content: "\f0d7"; color: #2ad09d; font-family: "Font Awesome 5 Free"; font-weight: 600; font-size: 1.25em; } .inputArea.city:before { content: "\f015"; } .inputArea.note:before { content: ""; } .inputArea.name:before { content: "\f007"; } .center { text-align: center; display: block; } /*****EN****/ .myform.ltr fieldset.req:before { right: none; left: 1px; } .myform.ltr fieldset label { float: left; margin-right: 2%; margin-left: 0; } .myform.ltr fieldset div.inputArea { float: left; } .myform.ltr button { float: right; } /*****EN****/ /***FORMS***/ /***PAGE***/ .page { position: relative; margin: 0 auto; margin-bottom: 20px; } .page.ltr { direction: ltr; text-align: left; } .pageTitle, h1, h2, h3 { display: block; font-size: 3em; line-height: normal; padding-bottom: 12px; margin-bottom: 0px; margin-top: 20px; } .subTitle { display: block; font-size: 1.5em; line-height: normal; padding-bottom: 12px; margin-bottom: 0px; } .subPage h2 { padding-top: 20px; } .customTitle { font-size: 2em; text-align: center; line-height: normal; padding-bottom: 5px; margin-bottom: 15px; font-weight: bold; } .customTitle span { padding: 0 15px; } #mainPageContent .wrap > h1, #mainPageContent .wrap > .pageTitle { margin-bottom: 0px; } #mainPageContent .textArea .pageTitle, #mainPageContent .textArea h1 { margin-bottom: 0px; } h2 { font-size: 2.2em; } h3 { font-size: 1.875em; } .underlineTitle { border-bottom: 1px solid #000; } .flexWrap { width: 100%; display: grid; column-gap: 40px; grid-template-columns: minmax(0, 3fr) minmax(300px, 1fr); } .flexWrap .leftBlocks { position: relative; } .flexWrap .leftBlocks .leftContact { position: sticky; top: 80px; box-sizing: border-box; text-align: center; padding: 10px; } .flexWrap .leftBlocks .leftContact:before { content: ""; width: 3px; height: 40px; position: absolute; top: 6px; right: -12px; background: #7fe4c3; } .flexWrap .leftBlocks .leftContact > b { font-size: 1.4em; line-height: normal; } .flexWrap .leftBlocks .leftContact > span { font-size: 1.125em; line-height: normal; } .flexWrap .leftBlocks .leftContact .note a { color: #000; } .leftContact .myform { margin-top: 15px; } .leftContact .myform .rightContact { display: flex; flex-direction: column; gap: 15px; } .leftContact .note { margin-top: 10px; display: block; } .flexBox { display: flex; margin-bottom: 20px; } .flexBox > div { flex: 1; width: 50%; } .flexBox > div:first-child { margin-left: 3%; width: 60%; } .moreTextArea { border-top: 1px solid #000; margin-top: 10px; padding-top: 10px; } .textArea { font-size: 1.125em; line-height: 1.8em; } .textArea a { color: #2ad09d; font-weight: bold; text-decoration: none; } .textArea a:hover { color: #000; text-decoration: underline; } .textArea ul, .textArea ol { display: block; margin: 1.12em 0; margin-right: 40px; list-style: disc outside none; } .textArea ol { list-style-type: decimal; } .textArea.ulTick ul { list-style-image: url("https://www.gemel.net/img/tick.png"); } .textArea.ulMark ul { list-style-image: url("https://www.gemel.net/img/mark.png"); } .textArea h1:first-of-type { padding-top: 0; } .page.ltr .textArea ul, .page.ltr .textArea ol { margin-left: 40px; margin-right: 0; } .page-nav { margin: 10px 0; color: #8f8f8f; } .page-nav a { display: inline-block; color: #8f8f8f; text-decoration: none; } .page-nav a:hover { text-decoration: underline; color: #8f8f8f; } .page-nav li { display: inline-block; } .page-nav li:after { content: "/"; margin-left: 5px; margin-right: 5px; display: inline-block; } .page-nav li:last-child:after { content: ""; } .linkMap a { color: #730c1d; font-size: 0.813em; } .map { width: 80%; margin: 0 auto; margin-top: 30px; } .center_text { background: #ececec; padding: 20px; border-top: 8px solid #dbdbdb; border-bottom: 8px solid #dbdbdb; margin: 10px 0; } /*****************ERROR******************/ #errorpage h4 { color: #311413; font-size: 2.875em; font-weight: bold; } #errorpage h3 { color: #311413; font-size: 2.25em; font-weight: bold; } #errorpage p { color: #311413; font-size: 1em; margin-bottom: 5px; font-weight: bold; } #errorpage ul li, #errorpage ol li { color: #311413; font-size: 0.875em; } #errorpage ol li a { color: #311413; text-decoration: underline; } /*****************ERROR******************/ /***PAGE***/ #wrapper { min-height: 100%; position: relative; overflow: hidden; } .wrap { width: 96%; max-width: 1400px; margin: 0 auto; position: relative; } #header header { display: flex; align-items: center; justify-content: space-between; max-width: 1400px; width: 96%; margin: 0 auto; padding: 10px 0px; gap: 20px; } a#logo { background: url("https://www.gemel.net/img/logo.png") no-repeat; width: 167px; height: 24px; flex-shrink: 0; } /* ===== Logo + small goodbit stack ===== */ #logoWrap { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; } #goodbit-sub { height: 14px !important; width: auto !important; opacity: 0.8; } /* ===== Header "צרו קשר" button ===== */ .gn-contact-btn { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; background: #2ad09d; color: #fff !important; font-weight: 700; font-size: 15px; line-height: 1; padding: 10px 16px; border-radius: 8px; text-decoration: none; white-space: nowrap; box-shadow: 0 3px 10px rgba(42, 208, 157, 0.35); transition: 0.15s; } .gn-contact-btn:hover { background: #20b487; color: #fff !important; box-shadow: 0 5px 14px rgba(42, 208, 157, 0.45); } .gn-contact-btn svg { width: 16px; height: 16px; flex-shrink: 0; } /* ===== Header contact popup ===== */ @keyframes gnRvIn { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } } #gnContactOverlay { display: none; position: fixed; inset: 0; z-index: 100050; background: rgba(15, 23, 42, 0.6); align-items: center; justify-content: center; padding: 18px; } #gnContactOverlay.gn-show { display: flex; } #gnContactPop { position: relative; width: 100%; max-width: 440px; background: #fff; border-radius: 16px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35); padding: 34px 28px 24px; direction: rtl; text-align: center; animation: gnRvIn 0.25s ease; box-sizing: border-box; } #gnContactPop .gnContactX { position: absolute; top: 12px; left: 16px; background: none; border: 0; font-size: 26px; line-height: 1; color: #b6bcc6; cursor: pointer; padding: 2px 8px; } #gnContactPop .gnContactX:hover { color: #333; } #gnContactPop .gnContactHead { font-size: 22px; font-weight: 800; color: #0f1b2d; margin-bottom: 6px; } #gnContactPop .gnContactSub { font-size: 14.5px; color: #66707d; line-height: 1.6; margin-bottom: 20px; } #gnContactPop .gnContactForm input[type="text"], #gnContactPop .gnContactForm input[type="tel"] { width: 100%; box-sizing: border-box; padding: 13px 14px; margin-bottom: 11px; border: 1px solid #d7dde5; border-radius: 9px; font-size: 15px; font-family: inherit; direction: rtl; background: #fff; } #gnContactPop .gnContactForm input[type="text"]:focus, #gnContactPop .gnContactForm input[type="tel"]:focus { outline: none; border-color: #2ad09d; box-shadow: 0 0 0 3px rgba(42, 208, 157, 0.15); } #gnContactPop .gnContactSubmit { width: 100%; padding: 14px; background: #2ad09d; color: #fff; border: 0; border-radius: 9px; font-size: 16px; font-weight: 700; cursor: pointer; transition: 0.15s; } #gnContactPop .gnContactSubmit:hover { background: #20b487; } #gnContactPop .gnContactTerms { display: block; margin-top: 12px; font-size: 11.5px; color: #8a93a0; line-height: 1.5; text-align: right; } #gnContactPop .gnContactTerms a { color: #2ad09d; text-decoration: none; } #gnContactPop .gnContactTerms input { margin-left: 5px; vertical-align: middle; } .primaryButton, .blueButton, .secondaryButton, .thirdButton, .fourthButton, .fifthButton, .textArea .primaryButton, .textArea .blueButton, .textArea .secondaryButton, .textArea .thirdButton, .textArea .fourthButton, .textArea .fifthButton { cursor: pointer; display: inline-flex; justify-content: center; text-align: center; align-items: center; gap: 10px; white-space: nowrap; font-size: 1.125em; padding: 5px 10px; background-color: #000000; color: #ffffff; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; text-decoration: none !important; text-align: center; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; border: 0; outline: 0; } .primaryButton i, .blueButton i, .secondaryButton i, .thirdButton i, .fourthButton i, .fifthButton i, .textArea .primaryButton i, .textArea .blueButton i, .textArea .secondaryButton i, .textArea .thirdButton i, .textArea .fourthButton i, .textArea .fifthButton i { color: #2ad09d; } .primaryButton:hover, .blueButton:hover, .secondaryButton:hover, .thirdButton:hover, .fourthButton:hover, .fifthButton:hover, .textArea .primaryButton:hover, .textArea .blueButton:hover, .textArea .secondaryButton:hover, .textArea .thirdButton:hover, .textArea .fourthButton:hover { color: #2ad09d; } .primaryButton { box-shadow: 0px 7px 8px 0px rgba(0, 248, 164, 0.43); } .primaryButton:disabled { box-shadow: 0px 7px 8px 0px rgba(193, 193, 193, 0.43); } .secondaryButton { padding: 13px 10px; } .fourthButton { background: #80e5c3; color: #000; padding: 3px 10px; border: 2px solid #000; } .fourthButton i { color: #000; } .fourthButton:hover { background: #000; color: #fff; } .fourthButton:hover i { color: #fff; } .fifthButton { background: #ffffff; color: #000; padding: 3px 10px; border: 2px solid #000; } .fifthButton i { color: #000; } .fifthButton:hover { background: #000; color: #fff; } .fifthButton:hover i { color: #fff; } .centerButton { margin: 20px auto; display: table; font-size: 1em; } .blueButton i { font-size: 0.9em; transform: scaleX(-1); -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); } .redButton { display: inline-flex; text-decoration: none; background: transparent; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; color: #172c96; gap: 5px; border: 1px solid #172c96; align-items: center; justify-content: center; font-weight: 700; padding: 5px 10px; white-space: nowrap; transition: all 0.2s; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; } .redButton img { max-width: none !important; } .redButton:hover { background: #172c96; color: #fff; } .button-container { display: flex; justify-content: center; align-items: center; gap: 15px; flex-wrap: nowrap; padding: 10px; } header .redButton { height: 41px; } .linkButton { color: #2ad09d; font-weight: bold; text-decoration: none; transition: all 0.2s; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; } .linkButton:hover { color: #000; } .pcardButton { margin-left: 8px; } .pcardButton i { background: url("https://www.gemel.net/img/pcard-p.png"); width: 20px; height: 22px; } nav#menuArea { position: relative; flex: 1; } ul#navigator { display: flex; gap: 24px; } ul#navigator > li { position: relative; display: block; } ul#navigator > li > div { display: flex; align-items: center; height: 100%; } ul#navigator > li > div > a, ul#navigator > li > a, ul#navigator > li > div .text { display: block; color: #000; font-size: 1.125em; text-decoration: none; white-space: nowrap; line-height: 36px; padding: 10px 5px; } ul#navigator > li:hover > div > a, ul#navigator > li:hover > a { color: #2ad09d; } ul#navigator > li > ul.drop { display: none; background: #fff; border-top: 4px solid #2ad09d; position: absolute; right: 0; padding: 15px; -webkit-box-shadow: -4px 6px 18px 0px rgba(0, 0, 0, 0.45); -moz-box-shadow: -4px 6px 18px 0px rgba(0, 0, 0, 0.45); box-shadow: -4px 6px 18px 0px rgba(0, 0, 0, 0.45); z-index: 99; width: 622px; border-radius: 10px; } ul#navigator > li.edge > ul.drop { left: 0; right: auto; } ul#navigator > li:hover > ul { display: block; } ul#navigator > li > ul.drop li > a { display: block; text-decoration: none; padding: 5px; color: #000; width: 48%; float: right; margin-left: 2%; border-bottom: 1px solid #2ad09d; } ul#navigator > li > ul.drop li:nth-child(2n) > a { margin-left: 0; } ul#navigator > li > ul.drop > li > a:hover { color: #2ad09d; } i#menuBar { display: none !important; /* Hide by default, only show in mobile */ font-size: 1.5em; cursor: pointer; color: #000; transition: color 0.3s ease; outline: none; position: relative; width: 24px; height: 18px; transform: rotate(0deg); transition: 0.5s ease-in-out; } i#menuBar:hover, i#menuBar:focus { color: #2ad09d; } /* Create custom hamburger lines */ i#menuBar:before, i#menuBar:after, i#menuBar span { display: block; position: absolute; height: 3px; width: 100%; background: currentColor; border-radius: 2px; opacity: 1; left: 0; transform: rotate(0deg); transition: 0.25s ease-in-out; content: ""; } i#menuBar:before { top: 0px; } i#menuBar span { top: 7px; } i#menuBar:after { top: 14px; } /* Transform to X when menu is open */ i#menuBar.menu-open:before { top: 7px; transform: rotate(135deg); } i#menuBar.menu-open span { opacity: 0; left: -60px; } i#menuBar.menu-open:after { top: 7px; transform: rotate(-135deg); } #searchButton { font-size: 1.3em; cursor: pointer; color: #000; transition: color 0.3s ease; outline: none; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid #000; text-decoration: none; } #searchButton:hover, #searchButton:focus { color: #2ad09d; } /* Search Overlay */ #searchOverlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(5px); z-index: 9999; display: none; opacity: 0; transition: opacity 0.15s ease; } #searchOverlay.show { display: flex; opacity: 1; align-items: center; justify-content: center; flex-direction: column; } #searchOverlay .search-container { width: 90%; max-width: 600px; text-align: center; transform: translateY(-50px) scale(0.8); opacity: 0; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s ease; } #searchOverlay.show .search-container { transform: translateY(0) scale(1); opacity: 1; } #searchOverlay .search-title { font-size: 2.5em; font-weight: bold; margin-bottom: 30px; color: #333; animation: slideInDown 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s both; } #searchOverlay .search-input-container { position: relative; margin-bottom: 20px; animation: slideInUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both; z-index: 1; } #searchOverlay .search-input { width: 100%; padding: 20px 20px 20px 60px; font-size: 1.5em; border: 2px solid #e0e0e0; border-radius: 50px; outline: none; text-align: right; direction: rtl; background: white; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; } #searchOverlay .search-input:focus { border-color: #2ad09d; box-shadow: 0 4px 30px rgba(42, 208, 157, 0.2); transform: scale(1.02); } #searchOverlay .search-input-container .search-input-icon { outline: 0; border: 0; background: transparent; position: absolute; left: 25px; top: 50%; transform: translateY(-50%); font-size: 1.5em; color: #999; transition: color 0.2s ease, transform 0.15s ease; pointer-events: none; } #searchOverlay .search-input:focus + .search-input-icon { color: #2ad09d; transform: translateY(-50%) scale(1.1); } #searchOverlay .search-suggestions { text-align: right; color: #666; font-size: 1.1em; animation: fadeInUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both; } #searchOverlay .search-suggestions span { display: inline-block; margin: 5px 10px; padding: 8px 15px; background: #f5f5f5; border-radius: 20px; cursor: pointer; transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); opacity: 0; transform: translateY(20px); animation: fadeInUp 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } #searchOverlay .search-suggestions span a { color: #666; text-decoration: none; } #searchOverlay .search-suggestions span:nth-child(1) { animation-delay: 0.3s; } #searchOverlay .search-suggestions span:nth-child(2) { animation-delay: 0.4s; } #searchOverlay .search-suggestions span:nth-child(3) { animation-delay: 0.5s; } #searchOverlay .search-suggestions span:nth-child(4) { animation-delay: 0.6s; } #searchOverlay .search-suggestions span:hover { background: #2ad09d; color: white; transform: translateY(-3px) scale(1.05); box-shadow: 0 6px 20px rgba(42, 208, 157, 0.3); } /* Search Autocomplete Dropdown */ .search-autocomplete { position: absolute; top: 100%; left: 0; right: 0; background: white; border-radius: 12px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 5px 15px rgba(0, 0, 0, 0.08); border: 1px solid #e1e8ed; max-height: min(400px, calc(100vh - var(--autocomplete-top-offset, 300px))); overflow-y: auto; z-index: 1000; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } .search-autocomplete.show { opacity: 1; visibility: visible; transform: translateY(0); } .search-autocomplete-item { padding: 12px 16px; cursor: pointer; border-bottom: 1px solid #f0f3f7; transition: all 0.15s ease; display: flex; align-items: center; text-align: right; } .search-autocomplete-item:last-child { border-bottom: none; } .search-autocomplete-item:hover { background: #f8fafc; color: #2ad09d; } .search-autocomplete-item.selected, .search-autocomplete-item:active { background: #e8f5f1; color: #2ad09d; } .search-autocomplete-item .item-icon { margin-right: 8px; color: #999; font-size: 0.9em; transition: color 0.15s ease; } .search-autocomplete-item:hover .item-icon { color: #2ad09d; } .search-autocomplete-item .item-title { font-weight: 500; color: #2c3e50; transition: color 0.15s ease; } .search-autocomplete-item:hover .item-title { color: #2ad09d; } .search-autocomplete-empty { padding: 16px; text-align: center; color: #999; font-style: italic; } /* Loading state */ .search-autocomplete-loading { padding: 16px; text-align: center; color: #999; } .search-autocomplete-loading::after { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 8px; border: 2px solid #f3f3f3; border-top: 2px solid #2ad09d; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Positioning relative for autocomplete container */ #searchOverlay .search-input-container { position: relative; } /* Search Overlay Keyframe Animations */ @keyframes slideInDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulseGlow { 0%, 100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); } 50% { box-shadow: 0 4px 30px rgba(42, 208, 157, 0.2); } } .mainSection { margin-bottom: 30px; } .gridContainer { display: grid; grid-template-columns: 2fr 1fr; gap: 15px; } .main_page .mainContainer { grid-template-columns: 1fr 1fr; } #main_calculator { background: #80e5c3; border-radius: 10px; padding: 20px; display: flex; flex-direction: column; align-items: center; font-size: 1rem; } #main_calculator .calcs { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; width: 90%; text-align: center; } #main_calculator .calcs .calc_title { font-size: 3em; line-height: normal; } #main_calculator .calcs sub { font-size: 1.75em; line-height: normal; } #main_calculator .secondaryButton { margin: 0 auto; margin-top: 20px; padding: 20px; font-weight: bold; } .slider-container { position: relative; margin-top: 75px; } #main_calculator .slider-container { margin: 0 auto; margin-top: 95px; width: 78%; } .slider-container input[type="range"] { -webkit-appearance: none; width: 100%; background: transparent; direction: ltr; } .slider-container input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; height: 24px; width: 24px; border-radius: 50%; background: white; border: 1px solid #000; cursor: pointer; position: relative; z-index: 2; margin-top: -8px; } .slider-container input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to left, #999, #000); } .slider-container .bubble { position: absolute; top: -50px; background: white; padding: 0px 14px; border: 1px solid black; font-size: 1.5em; border-radius: 0; } .slider-container .bubble::after { content: ""; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%) rotate(-45deg); width: 10px; height: 10px; background: white; border-left: 1px solid black; border-bottom: 1px solid black; box-sizing: border-box; } .slider-container .slider-labels { display: flex; justify-content: space-between; color: #369f7c; font-size: 1.125em; } .slider-container .slider-labels span { direction: ltr; } .slider-container .slider-labels span:first-child { order: 2; } .slider-container .slider-labels span:last-child { order: 1; } aside .block { width: 100%; margin-bottom: 25px; position: relative; margin-top: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 10px; } aside .block:last-of-type { margin-bottom: 0; } .sub_page aside .block { background: #f3f3f3; } aside .block .block_header { line-height: 66px; background: #2ad09d; font-size: 1.2em; width: 100%; color: #fff; position: relative; padding: 0 14px; display: flex; align-items: center; border-radius: 10px 10px 0px 0px; } aside .block .block_header span { background: #fff; height: 31px; width: 31px; display: flex; margin-left: 15px; align-items: center; justify-content: center; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: relative; } aside .block .block_header i { color: #2ad09d; margin-left: 4%; } aside .block .block_body { background: #f3f3f3; padding: 10px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; overflow: hidden; margin-top: -4px; } .sub_page aside .block .block_body { background: none; padding: 15px 10px; } aside .block .block_body .inner_block { position: relative; } .sub_page aside .block .block_body .inner_block { background: transparent; } aside .block .block_body .inner_block.videoWrapper { height: 240px; } .inner_block#calc_box { padding: 20px; } a.green_button { font-size: 1.25em; color: #fff; background: #2ad09d; font-weight: 700; padding: 13px; width: 100%; display: block; margin: 13px 0px; text-decoration: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } a.green_button:hover { background: #1cb579; } #handyman { display: block; background: url("https://www.gemel.net/img/sprite.png") -4px -113px; width: 68px; height: 150px; position: absolute; right: -11px; bottom: -4px; } .block ul.list > li { display: block; overflow: hidden; } .block ul.list > li > a { line-height: 28px; color: #3b3a45; text-decoration: underline; display: block; padding-left: 1em; } .foot-list li { font-weight: 700; border-top: 1px solid #2ad09d; } .full_link { text-align: center; font-weight: bold; color: #2ad09d; text-decoration: none; display: block; } #tickers { min-height: 290px; width: 100%; margin: auto; } #tickers ul { display: block; width: 100%; } #tickers ul li, .tickers_list li { overflow: hidden; border-bottom: 1px solid #2ad09d; padding: 7px; margin-bottom: 7px; } #tickers ul li a, .tickers_list li a { text-decoration: none; color: #3b3a45; display: inline; } #tickers ul li a > b { color: #2ad09d; } #tickers ul li a:hover > b { color: #2ad09d; } .tickers_list li .q i { color: #2ad09d; } #tickers ul li:hover a, .tickers_list li:hover a, .tickers_list li:hover a b { color: #2ad09d; } .tickers_list li a > strong { color: #2ad09d; } .tickers_list li a:hover > strong { color: #3b3a45; } #tickers ul li .foot, .tickers_list li .foot { color: #2ad09d; margin-top: 5px; font-size: 0.75em; float: left; margin-left: 9px; } #mainPageContent { position: relative; width: 100%; min-height: 109px; overflow: hidden; } #mainPageContent .wrap > .textArea { float: right; width: 60%; } #decorative { margin-top: 20px; background: url("https://www.gemel.net/img/footer-bg.webp"); width: 100%; height: 152px; } footer { width: 100%; padding-top: 0; position: relative; bottom: 0; background: #000000; padding-top: 30px; } footer .wrap { padding: 10px; padding-top: 0px; } footer .wrap .footer_wrap { display: grid; grid-template-columns: 0.8fr 1fr; flex: 1; overflow: hi; gap: 0 13%; } footer .wrap .social { flex: 0.4; } footer .wrap .social ul { display: flex; flex-direction: column; gap: 10px; } footer .wrap .social ul li { display: flex; gap: 10px; color: #fff; align-items: center; } footer .wrap .social ul li a { color: #fff; text-decoration: none; font-size: 1.6em; } footer .wrap .social ul li .icon { border-radius: 50%; height: 53px; width: 53px; display: flex; align-items: center; justify-content: center; background: #fff; font-size: 1.6em; } footer .wrap .social ul li i { color: #2ad09d; } footer .blocks { width: 100%; display: flex; } footer h3 { display: block; margin-bottom: 20px; font-size: 1.875em; font-weight: bold; line-height: normal; color: #fff; padding-bottom: 5px; } footer .blocks .block { flex: 1; } footer .block.last { margin-left: 0; } footer .block ul > li > a { display: block; padding: 4px 0px; color: #fff; font-size: 1.125em; line-height: normal; text-decoration: none; } footer .block ul > li > a:hover { color: #2ad09d; } footer .footer_note { width: 80%; color: #fff; text-align: center; padding: 10px; border-radius: 10px; margin: 20px auto; margin-top: 35px; } footer .footer_note a { color: #fff; } footer .footer_cp { text-align: center; color: #fff; } footer .footer_cp .cp { font-size: 0.75em; } #footer_plain { margin: 40px auto; display: block; } .innerWrap { width: 84%; margin: 0 auto; } #topArea .topArea_title { font-size: 3em; font-weight: bold; text-align: center; color: #000; } #topArea .topArea_activities { display: flex; gap: 60px; justify-content: center; } #activities { overflow: hidden; position: relative; width: calc(100% - 348px - 20px); } #activities ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } #activities li { flex: 1; } #activities li:hover a { box-shadow: 0px 9px 9px 0px rgba(42, 208, 157, 0.42); border: 1px solid #000; } #activities li a { color: #000; text-decoration: none; display: flex; align-items: center; justify-content: center; flex-direction: column; border: 1px solid #d9d9d9; height: 124px; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; transition: all 0.1s linear; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; transition: all 0.1s linear; border-radius: 10px; } #activities li a i { height: 129px; width: 129px; display: flex; align-items: center; justify-content: center; border: 1px solid #2ad09d; margin-bottom: 20px; } #activities li a span { padding: 4px; font-size: 1.25em; } #activities li a img { display: block; margin: 0 auto; } #activities li.last a { margin-left: 0; } /* Base responsive styles for topImg */ .topImg { max-width: 348px; height: auto; display: block; } .phoneBox { font-size: 1.125em; line-height: 51px; background: #ffa800; position: relative; padding-right: 3%; margin-top: 20px; display: block; text-decoration: none !important; color: #000 !important; } .phoneBox:hover { background: #f4a204; } .phoneBox small { display: inline-block; background: url("https://www.gemel.net/img/sprite.png") -169px -46px; width: 196px; height: 24px; text-align: center; color: #fff; text-decoration: none; line-height: 21px; font-size: 1.25em; } .phoneBox i { display: block; background: url("https://www.gemel.net/img/sprite.png") -4px -113px; width: 68px; height: 150px; position: absolute; left: -4px; top: -53px; } .gray_box { overflow: hidden; background: #f3f3f3; margin: 15px 0px; padding: 20px 0px; } .gray_box h3 { color: #2ad09d; font-size: 1.5em; margin-bottom: 20px; } .gray_box h2 { line-height: normal; } span.underline { border-bottom: 1px solid #2ad09d; padding-bottom: 16px; display: block; line-height: normal; text-align: center; font-size: 1.5em; } span.underline > b:first-child { color: #2ad09d; } span.underline > b:nth-child(2) { color: #2ad09d; } span.underline i { color: #2ad09d; font-weight: bold; } span.underline i.fas { background: -webkit-linear-gradient(#ff5130, #dd2476); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-left: 5px; font-size: 2.25em; } .green_box { background: #2ad09d; color: #fff; font-weight: 700px; padding: 3px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; margin: 4px 0px; display: block; } #numbers_block { text-align: center; } #numbers_block .wrap { width: 90%; } #numbers_block .block_body { padding: 15px; } #numbers_block b.number { font-size: 2.25em; display: block; line-height: 2em; color: #2ad09d; } #numbers_block .inner_block_wrap { width: 80%; margin: 0 auto; } #numbers_block .green_line { padding: 8px 15px; font-weight: bold; color: #fff; display: block; background: #2ad09d; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; font-size: 1.125em; margin-bottom: 5px; } #numbers_block .green_line.small { font-size: 0.875em; } #numbers_block .link { font-size: 0.875em; } #numbers_block .link a { text-decoration: none; color: #2ad09d; } #numbers_block .link a:hover { text-decoration: underline; } #numbers_block p { margin: 0 auto; margin-top: 10px; } #numbers_block p > b:nth-child(2) { color: #2ad09d; } #numbers_block p a { color: #000; font-weight: bold; text-decoration: none; border-bottom: 3px solid #2ad09d; padding-bottom: 3px; } #numbers_block p a:hover { color: #2ad09d; } #how_its_work { margin-bottom: 20px; } #how_its_work h3 { font-size: 1.5em; text-align: center; display: block; line-height: normal; padding-bottom: 6px; margin-bottom: 15px; border-bottom: 1px solid #2ad09d; } #how_its_work h3 b { font-weight: 900; } #how_its_work ol { font-size: 1.125em; display: block; } #how_its_work ol li { display: block; margin-bottom: 3px; } #how_its_work ol li a { color: #2ad09d; text-decoration: none; } #how_its_work ol li a:hover { text-decoration: underline; } #how_its_work ol li b { background: #2ad09d; display: inline-block; margin-left: 8px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; color: #fff; font-weight: bold; font-size: 0.825em; padding: 1px 8px; } #how_its_work img { margin: 15px -5px; } #how_its_work p { text-align: center; font-size: 1.125em; color: #2ad09d; } .videoWrapper { position: relative; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .stream_area { overflow: hidden; margin: 10px 0px 0px 0px; } .stream_area .li { margin-bottom: 10px; } .stream_box_title { margin-top: 25px; width: 100%; background: #f2f2f2; font-weight: 700; font-size: 1.2em; margin-bottom: 10px; padding-right: 10px; line-height: 36px; overflow: hidden; color: #2ad09d; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .ans { padding-bottom: 5px; } .ans > * { display: inline; } .gallery_box { float: right; width: 37%; margin-left: 3%; } .video_box { float: right; width: 60%; position: relative; } .video_box .videoWrapper { height: 223px; } #videoWrapper { position: relative; width: 100%; height: 300px; margin-top: 15px; } #videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .fancybox-inner .fancybox-caption { font-size: 1.125em; font-weight: 700; direction: rtl; } .stream_box ul { list-style: none; margin: 0; } .gallery_box ul li { float: right; width: 48%; margin-left: 4%; display: block; margin-bottom: 10px; } .gallery_box ul li:nth-child(2n) { margin-left: 0; } .gallery_box ul li a { border: 1px solid #adabab; display: block; overflow: hidden; position: relative; } .gallery_box ul li:hover a:before { background: rgba(0, 0, 0, 0.6); width: 100%; height: 100%; position: absolute; top: 0; right: 0; content: ""; z-index: 1; } .gallery_box ul li:hover a:after { content: "\f00e"; color: #2ad09d; font-family: "Font Awesome 5 Free"; display: block; position: absolute; top: 50%; margin-top: -23px; right: 0; width: 100%; height: 100%; z-index: 2; font-size: 2.125em; text-align: center; } .gallery_box ul li img { width: 100%; height: 104px; display: block; } .qa_box .stream_box_title { font-size: 1.125em; } .qa_box .orange_header_box.green, .orange_header_box.green { float: left; margin-left: 3%; font-size: 1.113em; color: #2ad09d; } .tariff_box li { overflow: hidden; padding: 13px 6px; border-bottom: 1px solid #3b3a45; color: #3b3a45; } .tariff_box li:hover { background: #f2f2f2; } .tariff_box li b { font-size: 1.125em; } .tariff_box li p { color: #6f6f6f; } .tariff_box li span { float: left; font-size: 1.225em; width: 33%; text-align: left; } .tariff_box li .inner > div { float: right; width: 65%; } .qa_box li p { display: block; margin: 0 0 10px 0; } .qa_box li p b { color: #2ad09d; } .dialog { background: rgba(0, 0, 0, 0.6); width: 100%; height: 100%; position: fixed; display: none; right: 0; top: 0; z-index: 9999992; } .dialog .dialog_wrap { width: 100%; max-width: 550px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: auto; } .dialog .dialog_header { background: #2ad09d; width: 100%; line-height: 50px; color: #000; padding-right: 3%; padding-left: 20px; font-weight: bold; font-size: 1.25em; position: relative; border-radius: 12px 12px 0px 0px; } .dialog .dialog_body { background: #fff; padding: 3%; width: 100%; border-radius: 0px 0px 12px 12px; } .dialog .close_dialog { position: absolute; top: 0px; left: 17px; display: block; color: #000; cursor: pointer; font-size: 1.125em; } .dialog_body .note_text { padding: 8px; font-size: 0.8875em; text-align: center; margin-top: 25px; display: block; } .dialog_body .note_text a { color: #000; } .dialog_body .note_text a:hover { color: #2ad09d; } .dialog_body .myform { width: 84%; margin: 0 auto; } .calc_area .tabs_options > a { display: block; text-decoration: none; float: right; margin-left: 2%; position: relative; overflow: hidden; font-weight: normal; color: #000; text-align: center; } .calc_area .tabs_options > a p { height: 84px; position: relative; display: block; background: #f2f2f2; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; padding: 0 2%; margin-bottom: 5px; } .calc_area .tabs_options > a:hover, .calc_area .tabs_options > a.current { color: #2ad09d; } .calc_area .tabs_options > a:hover p, .calc_area .tabs_options > a.current p { background: #dcdcdc; } .calc_area .tabs_options > a img { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: table; } .calc_area .tabs_options > a:last-child { margin-left: 0; } .calc_area .tabs_body { overflow: hidden; margin-top: 15px; } .calc_area .hidden_tabs { display: none; } .calc_area .tabs_footer { margin: 10px 0; } .calc_area .total_price { text-align: left; font-size: 1.5em; float: left; } .calc_area .tabs_body .tab { background: #f2f2f2; padding: 10px; overflow: hidden; } .calc_area .tabs_body .tab table { table-layout: fixed; width: 100%; } .calc_area .tabs_body .tab table td { border-left: 1px solid #2ad09d; width: 23%; padding-right: 1.2%; background: #fff; position: relative; padding-bottom: 10px; } .calc_area .tabs_body .tab table td:nth-child(2) { width: 54%; } .calc_area .tabs_body .tab table td:last-child { border-left: 0; } .calc_area .tabs_body .tab table td:first-child b { font-size: 1.5em; display: block; text-align: center; } .calc_area .tabs_body .tab table td:first-child label { display: block; font-size: 1.125em; text-align: center; } .calc_area .tabs_body .tab table td label input[type="text"], .calc_area .tabs_body .tab table td label input[type="number"] { display: inline-block; width: 55px; height: 35px; text-align: center; background: #f2f2f2; border: 1px solid #2ad09d; font-size: 1.125em; font-weight: bold; color: #2ad09d; margin: 0 3px; } .calc_area .tabs_body .tab table td label input[type="text"]::-webkit-input-placeholder { color: #2ad09d; } .calc_area .tabs_body .tab table td label input[type="text"]:-moz-placeholder { color: #2ad09d; } .calc_area .tabs_body .tab table td label input[type="text"]::-moz-placeholder { color: #2ad09d; } .calc_area .tabs_body .tab table td label input[type="text"]:-ms-input-placeholder { color: #2ad09d; } .calc_area .tabs_body .tab table td label input[type="number"]::-webkit-input-placeholder { color: #2ad09d; } .calc_area .tabs_body .tab table td label input[type="number"]:-moz-placeholder { color: #2ad09d; } .calc_area .tabs_body .tab table td label input[type="number"]::-moz-placeholder { color: #2ad09d; } .calc_area .tabs_body .tab table td label input[type="number"]:-ms-input-placeholder { color: #2ad09d; } .calc_area .tabs_body .tab table td:first-child a, .calc_area .tabs_body .tab table td .hide_tab { color: #3d3d3d; font-weight: bold; font-size: 0.65em; text-decoration: none; text-align: center; display: block; margin: 5px 0px; } .calc_area .tabs_body .tab table td .hide_advanced { font-size: 0.85em !important; } .calc_area .tabs_body .tab table td:first-child a.advanced { font-size: 0.9em !important; width: 91%; float: none; padding: 7px 2px; margin: 5px auto; color: #000; } .calc_area .tabs_body .tab table td:first-child a.advanced:hover { color: #fff; } .calc_area .tabs_body .tab table td .hide_tab { margin: 0; position: absolute; top: 3px; left: 9px; } .calc_area .tabs_body .tab table td .hide_tab:hover, .calc_area .tabs_body .tab table td:first-child a:hover { color: #2ad09d; } .calc_area .tabs_body .tab table td .hide_tab i { color: #2ad09d; margin-left: 2px; } .calc_area .tabs_body .tab table td.price { text-align: center; font-size: 1.5em; vertical-align: middle; } .calc_area .tabs_body .tab table td .custom_checkbox { display: inline-block; margin-left: 10px; } .calc_area .tabs_body .tab table td .custom_checkbox:nth-child(4n) { margin-left: 0; } .calc_area .tabs_body .tab table .advanced_area { display: none; } .calc_area .tabs_body .tab table .advanced_area td:first-child { padding-top: 10px; } .calc_area .tabs_body .tab table .advanced_area td:first-child b { font-size: 1.125em; } .mybutton.printButton { text-decoration: none !important; float: right; line-height: 2.3em; color: #fff; font-size: 1em; } .mybutton.printButton:hover { color: #fff; } .custom_checkbox input[type="checkbox"] { display: none; } .custom_checkbox input[type="checkbox"] + label { line-height: 28px; display: block; margin-top: 10px; cursor: pointer; } .custom_checkbox input[type="checkbox"] + label:before { display: inline-block; width: 28px; height: 28px; background: #f2f2f2; content: ""; font-weight: 900; font-size: 1.438em; color: #2ad09d; vertical-align: bottom; text-align: center; font-family: "Font Awesome 5 Free"; margin-left: 7px; } .custom_checkbox input[type="checkbox"]:checked + label:before { content: "\f00c"; } .fastContact { width: 80%; margin: 0 auto; } .fastContact .fastContact_inner { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; width: 100%; background: #f2f2f2; padding: 25px 15px; margin: 10px 0px; padding-right: 35px; margin-bottom: 0; position: relative; } .fastContact .fastContact_inner:after { display: block; position: absolute; bottom: -8px; right: 17%; width: 0; height: 0; content: ""; border-style: solid; border-width: 8px 6px 0 6px; border-color: #e4eff2 transparent transparent transparent; z-index: 1; } .fastContact .fastContact_inner a { text-decoration: none; } .fastContact .form { margin-right: auto; width: 60%; } .fastContact .form .myform { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; padding-bottom: 0; } .fastContact .myform fieldset div.inputArea input[type="text"], .fastContact .myform fieldset div.inputArea input[type="tel"], .fastContact .myform fieldset div.inputArea input[type="password"], .fastContact .myform fieldset div.inputArea textarea, .fastContact .myform fieldset div.inputArea select { background: transparent; border-bottom: 1px solid #2ad09d; color: #000; } .fastContact .myform fieldset div.inputArea input::-webkit-input-placeholder, .fastContact .myform fieldset div.inputArea textarea::-webkit-input-placeholder { color: #000; } .fastContact .myform fieldset div.inputArea input:-moz-placeholder, .fastContact .myform fieldset div.inputArea textarea:-moz-placeholder { color: #000; } .fastContact .myform fieldset div.inputArea input::-moz-placeholder, .fastContact .myform fieldset div.inputArea textarea::-moz-placeholder { color: #000; } .fastContact .myform fieldset div.inputArea input:-ms-input-placeholder, .fastContact .myform fieldset div.inputArea textarea:-ms-input-placeholder { color: #000; } .fastContact .form .myform > div { width: 72%; } .fastContact .myform fieldset div.inputArea { padding: 3px; } .fastContact .myform fieldset div.inputArea:before { color: #2ad09d; } .fastContact .myform fieldset:last-of-type { margin-bottom: 0; } .fastContact .form .myform input.mybutton { margin-right: 2%; white-space: normal; line-height: normal; font-size: 1.35em; padding: 0; text-align: center; margin-top: 0; flex: 1; } .fastContact .note_text { background: #2ad09d; font-size: 0.7em; font-weight: bold; color: #fff; padding: 10px 0; text-align: center; display: block; line-height: normal; } .fastContact .note_text input { margin-left: 5px; margin-right: 5px; } .fastContact .note_text a { color: #fff; } .fastContact .note_text a:hover { color: #fff; } .ig { margin: 50px auto; margin-top: 60px; position: relative; } .ig > img { width: 100%; max-width: 702px; } .ig > p { position: absolute; text-align: center; font-weight: 800; } .ig > p b { color: #000; display: block; } .ig > p span { color: #2ad09d; font-size: 1.125em; } .ig > p:nth-of-type(1) { top: -60px; right: 0; left: 0; margin: 0 auto; } .ig > p:nth-of-type(2) { bottom: -51px; right: 0; } .ig > p:nth-of-type(3) { bottom: -51px; left: 0; } .toc { margin: 10px 0px 13px 0px; background: #f8f8f8; border: 1px solid #e7e7e7; padding: 10px 8px; font-size: 0.875em; } .toc .toc_header { line-height: 1em; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; cursor: pointer; } .toc .toc_header i#menuBar { color: #2ad09d; font-size: 1.5em; margin-left: 10px; } .toc .toc_header i.fa-bars { color: #2ad09d; font-size: 1.5em; margin-left: 10px; } .toc .toc_header i.fa-plus { color: #2ad09d; font-size: 1.3em; margin-right: auto; } .toc.open .toc_header i.fa-plus:before { content: "\f068"; } .toc .toc_body { display: none; } .toc .toc_body ul li a { color: #000; text-decoration: none; padding: 8px 0px; display: block; border-bottom: 1px solid #e6e4e4; } .toc .toc_body ul li:first-child a { padding-top: 6px; } .toc .toc_body ul li:last-child a { border-bottom: 0; } .toc .toc_body ul li a:hover { color: #2ad09d; } .dialog .dialog_header { font-size: 1em; line-height: 2em; } .dialog .dialog_body { padding: 3% 0; } .dialog_body .myform { width: 94%; } #arrow_up { background: rgba(57, 57, 57, 0.75); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 3px 10px; position: fixed; bottom: 6%; right: 20px; cursor: pointer; font-size: 1.2em; color: #fff; line-height: normal; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; display: none; z-index: 999999; } #arrow_up:hover { background: rgba(57, 57, 57, 0.85); } #mobile_buttons { display: none; } #pop_list .gray_box_list { padding: 2px; } #pop_list aside { padding-top: 0; } #pop_list aside ul { display: flex; flex-wrap: wrap; justify-content: space-between; } #pop_list aside ul li { width: 33%; background: #fff; margin-bottom: 2px; border: 1px solid transparent; } #pop_list aside ul li:hover { border-color: #168ef6; } #pop_list section:first-child, #pop_list a:first-child { margin: 0; } #pop_list li a { padding: 17px; display: block; text-align: center; } #pop_list li:hover a { color: #168ef6; } #pop_list li a i { height: 25px; margin-bottom: 3px; } #pop_list li a img { max-height: 21px; } .internal-links-grid { direction: rtl; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 10px 0 20px; } .internal-links-grid a.card-link { position: relative; display: flex; align-items: center; justify-content: center; min-height: 92px; padding: 14px 12px; background: #fff; border: 1px solid #d9dde3; border-radius: 10px; text-decoration: none; color: #111; font-weight: 600; line-height: 1.2; text-align: center; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; will-change: transform; overflow: hidden; } .internal-links-grid a.card-link:hover, .internal-links-grid a.card-link:focus-visible { border-color: #111; box-shadow: 0 10px 0 rgba(0, 170, 120, 0.25); transform: translateY(-2px); outline: none; } .internal-links-grid .card-title { font-size: 18px; } /* תגית קטנה שמופיעה רק במעבר עכבר (כמו בתמונה) */ .internal-links-grid .card-badge { position: absolute; bottom: 10px; right: 50%; transform: translateX(50%); background: #fff; border: 1px solid #d9dde3; border-radius: 6px; padding: 4px 8px; font-size: 12px; font-weight: 500; color: #444; opacity: 0; transition: opacity 160ms ease; white-space: nowrap; } .internal-links-grid a.card-link:hover .card-badge, .internal-links-grid a.card-link:focus-visible .card-badge { opacity: 1; } /* רספונסיבי */ @media (max-width: 980px) { .internal-links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .internal-links-grid { grid-template-columns: 1fr; } } .textArea .buttons_table a.mybutton.orange { display: flex; padding: 7px 0px; margin: 8px 2px; align-items: center; justify-content: center; font-size: 0.9em !important; width: 100%; } .textArea .buttons_table { list-style: none; display: flex; flex-wrap: wrap; margin: 0; padding: 0; } .textArea .buttons_table li { width: 50%; display: flex; } #video_watch { display: flex; font-size: 1.125em; margin-top: 15px; text-align: center; flex: 1; justify-content: center; align-items: center; flex-direction: column; font-weight: bold; } #links ul { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } #links ul li { width: 22%; border: 1px solid #adadad; background: #ffffff; margin-top: 10px; } #links ul li:hover { border-color: #2ad09d; } #links ul li a { display: flex; padding: 10px; align-items: center; color: #2ad09d; font-size: 1.2em; text-decoration: none; } #links ul li a i { background: #2ad09d; width: 30%; display: flex; align-items: center; justify-content: center; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; margin-left: 5%; } #links ul li a i:after { content: ""; display: block; padding-bottom: 100%; } #links ul li a i img { max-width: 80%; } #mainSections { margin: 50px auto; } #mainSections .sections { display: inline-grid; grid-template-columns: 1fr 1fr 1fr 1fr; align-items: center; justify-content: center; width: 100%; margin-bottom: 22px; } #mainSections .sections .img { top: -10px; position: relative; } #mainSections .sections.boxes { box-shadow: 0px 33px 29px 0px rgba(0, 94, 142, 0.13); } #mainSections .sections section { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0 -1px -1px 0; padding-top: 10px; } #mainSections .sections section .img { height: 50px; width: 100%; } #mainSections .sections section .box { border: 1px solid #e9e9e9; width: 100%; padding: 15px; height: 170px; position: relative; } #mainSections .sections section .box .triangle { background: url("https://www.gemel.net/img/triangle.png"); width: 46px; height: 23px; display: block; position: absolute; right: 0; top: -10px; left: 0; bottom: 0; margin: 0 auto; } #mainSections .sections section .box .box_title { font-size: 2.25em; } #mainSections .sections section:first-child .box { -webkit-border-top-right-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; } #mainSections .sections section:last-child .box { -webkit-border-top-left-radius: 8px; -webkit-border-bottom-left-radius: 8px; -moz-border-radius-topleft: 8px; -moz-border-radius-bottomleft: 8px; border-top-left-radius: 8px; border-bottom-left-radius: 8px; } #mainSections .buttons { display: grid; gap: 15px; justify-content: center; grid-template-columns: 1fr 1fr; width: 50%; margin: 15px auto; } .custom_slider { direction: ltr; position: relative; } #customer_service { box-shadow: 0px 33px 32px 0px rgba(2, 48, 153, 0.17); padding: 30px; width: 70%; margin: 20px auto; margin-bottom: 35px; } #customer_service .gridContainer { align-items: center; justify-content: center; } #customer_service .gridContainer .column:first-child { display: flex; flex-direction: column; gap: 10px; } #centerContact { background: url("https://www.gemel.net/img/center-contact-bg.png") right; width: 100%; min-height: 653px; display: flex; background-size: contain; background-repeat: no-repeat; } .share-buttons-links { display: flex; flex-direction: column; gap: 10px; align-items: center; } #centerContact .wrap { width: 48%; max-width: 600px; padding-top: 160px; } #centerContact .wrap > b { font-size: 2.25em; color: #fff; text-align: center; display: block; margin-bottom: 15px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.45); } #centerContact .note { background: rgba(255, 255, 255, 0.5); padding: 10px; margin-top: 10px; display: block; border-radius: 10px; text-align: center; } #centerContact .note a { color: #2ad09d; } #centerContact .note a:hover { color: #000; } #centerContact .myform fieldset div.inputArea input[type="text"], #centerContact .myform fieldset div.inputArea input[type="tel"], #centerContact .myform fieldset div.inputArea input[type="password"], #centerContact .myform fieldset div.inputArea textarea, #centerContact .myform fieldset div.inputArea select { border-radius: 10px; border: 0 !important; font-weight: bold; padding-right: 10px; } #centerContact .inputArea:before { content: ""; } .spacing { margin-bottom: 30px; } #centerPurchase { background: url("https://www.gemel.net/img/pur-bg.png") right; width: 100%; min-height: 619px; display: flex; background-size: contain; background-repeat: no-repeat; align-items: center; } #centerPurchase .wrap > span { display: block; font-size: 3em; font-weight: bold; line-height: 1.325em; } #centerPurchase .wrap > span b { font-size: 1.125em; } #centerPurchase .wrap .redButton { display: inline-block; font-size: 1.5em; margin-top: 35px; box-shadow: 0px 9px 30px 0px rgb(13 90 169 / 30%); background: #fff; padding: 10px 30px; } #centerPurchase .wrap .redButton span { position: relative; } #centerPurchase .wrap .redButton span i { position: absolute; top: 5px; left: -3px; color: #fe2922; } #centerPurchase .wrap .redButton:hover span i { color: #fff; } #centerPurchase .wrap .redButton:hover { background: #172c96; } .bottom_blocks { margin: 20px 0px; } .block .block_header b { font-size: 2.2em; display: block; font-weight: normal; margin-bottom: 10px; } .block .block_body { background: #fff; -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px; padding: 15px; box-shadow: 0px 33px 29px 0px rgba(0, 248, 164, 0.08); } .block .block_body .list { display: grid; gap: 15px; justify-content: space-between; padding: 20px; grid-template-columns: 1fr 1fr 1fr; } .block .block_body .list a:hover { color: #2ad09d; } #recs { background: #fafafa; padding: 20px 0; padding-bottom: 45px; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; direction: ltr; text-align: left; } #recs .slick-track { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: column; } .slick-slide { margin: 0 20px; } .slick-list { margin: 0 -20px; } #recs .items .item { padding-top: 48px; } #recs .items .item-grid { background: #ffffff; box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.05); border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; display: flex; align-items: center; justify-content: flex-start; padding: 15px; gap: 15px; position: relative; flex-direction: column; padding-top: 60px; height: 100%; } #recs .items .item img { position: absolute; top: -30px; right: 0; left: 0; margin: 0 auto; width: 60px !important; height: 60px !important; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; object-fit: cover; } #recs .items .item span { font-weight: 600; font-size: 1.25em; text-align: center; color: #595959; } #recs .items .item p { font-weight: 200; font-size: 1.125em; text-align: center; color: #595959; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; direction: rtl; } .prices_list { margin: 20px 0px; } .prices_list .discount { color: red; display: block; border: 1px dashed red; padding: 3px; border-radius: 5px; font-weight: bold; font-size: 0.65em; direction: rtl; } .textArea .prices_list_text ul { margin-top: 0; padding-top: 0; margin-bottom: 0; padding-bottom: 0; } .prices_list section { text-align: center; font-weight: bold; font-size: 1.125em; } .prices_list section img { max-height: 150px; width: auto !important; margin: 0 auto; } .prices_list_text { font-size: 1em; padding: 20px; border: 1px solid #000; border-radius: 10px; margin: 15px 0px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* מוסיף צל קל */ } .prices_list_text h2 { font-size: 1.5em; font-weight: bold; margin-bottom: 10px; } .prices_list_text p { font-size: 1em; color: #333; } .percent_format { display: inline-block; direction: ltr; } /* Prevent body scroll when mobile menu is open */ body.mobile-menu-no-scroll { overflow: hidden !important; } #left_links { position: fixed; bottom: 3%; left: 10px; display: flex; flex-direction: column; gap: 15px; z-index: 4; } #left_links a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-decoration: none; color: #000; max-width: 105px; text-align: center; } #left_links a .icon { text-decoration: none; background: #11a964; color: #fff; height: 50px; display: flex; align-items: center; justify-content: center; flex-direction: column; border-radius: 11px; font-size: 1.7em; padding: 8px 19px; width: 60%; } #left_links a .text { font-weight: bold; } #header header img#mobile-goodbit { display: none; } /* ================================================================= CONSOLIDATED MEDIA QUERIES ================================================================= */ /* Print Styles */ @media print { .printButton { display: none !important; } } /* Large Desktop and Tablet Styles - 1200px and below */ @media (max-width: 1200px) { .pageTitle, h1, h2, h3 { font-size: 1.8em; } h1, h2 { text-align: center; } .spacing { margin-bottom: 15px; } .myform fieldset div.inputArea input[type="text"], .myform fieldset div.inputArea input[type="tel"], .myform fieldset div.inputArea input[type="password"], .myform fieldset div.inputArea textarea, .myform fieldset div.inputArea select { font-size: 1em; } .myform button, .mybutton { font-size: 1em; } /* Show hamburger menu */ i#menuBar { display: block !important; z-index: 1001; position: relative; padding: 10px; border-radius: 5px; transition: background-color 0.3s ease; } /* Hide desktop navigation */ nav#menuArea { display: none; } /* Mobile menu overlay */ nav#menuArea.mobile-menu-open { display: block; position: fixed; top: 0; right: -100%; width: 84%; height: 100vh; background: #fff; z-index: 1000; transition: right 0.3s ease; overflow-y: auto; box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3); padding: 80px 0 20px 0; } nav#menuArea.mobile-menu-open.slide-in { right: 0; } /* Primary button inside mobile menu */ nav#menuArea.mobile-menu-open .mobile-menu-primary-button { position: absolute; top: 10px; left: 10px; z-index: 1002; font-size: 0.9em; padding: 8px 12px; white-space: nowrap; display: block; } /* Mobile menu backdrop */ .mobile-menu-backdrop { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.5); z-index: 999; transition: opacity 0.3s ease; } .mobile-menu-backdrop.show { display: block; } #searchButton { width: 30px; height: 30px; font-size: 1em; order: 2; } /* Mobile navigation styles */ ul#navigator { display: block; padding: 0; margin: 0; } ul#navigator > li { display: block; border-bottom: 1px solid #eee; } ul#navigator > li > div, ul#navigator > li > a { display: block; padding: 15px 20px; color: #000; text-decoration: none; font-size: 1em; border: none; background: none; position: relative; } ul#navigator > li > div > a, ul#navigator > li > div > span.text { display: inline; padding: 0; font-size: 1em; } /* Mobile dropdown arrow */ ul#navigator > li.plus > div > span.icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); transition: transform 0.3s ease; color: #666; font-size: 1.6em; cursor: pointer; padding: 0 10px; } ul#navigator > li.minus > div > span.icon { transform: translateY(-50%) rotate(180deg); } /* Mobile dropdown menu */ ul#navigator > li > ul.drop { display: none; position: static; width: 100%; background: #f8f9fa; border: none; box-shadow: none; border-radius: 0; padding: 0; margin: 0; overflow: hidden; transition: max-height 0.3s ease-out; } ul#navigator > li.mobile-dropdown-open > ul.drop { max-height: 800px !important; } ul#navigator > li > ul.drop li { width: 100%; float: none; margin: 0; border-bottom: 1px solid #e0e0e0; } ul#navigator > li > ul.drop li:last-child { border-bottom: none; } ul#navigator > li > ul.drop li > a { display: block; padding: 12px 40px; width: 100%; float: none; margin: 0; border: none; color: #555; font-size: 1em; } ul#navigator > li > ul.drop li > a:hover { color: #2ad09d; background: #f0f0f0; } /* Mobile menu close button */ .mobile-menu-close { display: none; /* Hide the separate close button */ } /* Header adjustments for mobile */ #header header { padding: 15px 0; flex-wrap: wrap; } #header header #logoWrap { order: 2; flex: 1; align-items: center; } #header header a#logo { background-position: center center; } #goodbit-sub { display: none; } #header header .gn-contact-btn { order: 4; padding: 8px 11px; gap: 0; } #header header .gn-contact-btn span { display: none; } #header header .gn-contact-btn svg { width: 18px; height: 18px; } #header header a#searchButton { order: 3; } #header header i#menuBar { order: 1; margin-left: 0; margin-right: 0; } #header header .primaryButton { display: none; /* Hide primaryButton from header in mobile */ } #header header img#goodbit { display: none; } #header header img#mobile-goodbit { display: block; position: absolute; bottom: 10px; left: 10px; } /* Ensure proper stacking */ .mobile-menu-backdrop, nav#menuArea.mobile-menu-open { position: fixed !important; } .flexWrap { flex-direction: column; gap: 30px; display: flex; } .flexWrap .leftBlocks, .flexWrap .rightBlocks { width: 100%; margin: 0; } /* #topArea Styles */ .innerWrap { width: 95%; padding: 0 10px; } #topArea { text-align: center; padding: 0; } #topArea .topArea_title { font-size: 1.2em; line-height: 1.3; margin-bottom: 15px; padding: 0 10px; } #topArea .topArea_activities { flex-direction: column; gap: 25px; align-items: center; } #activities { width: 100%; order: 2; } #activities ul { grid-template-columns: 1fr 1fr; margin: 0 auto; } #activities li a { height: 80px; padding: 12px; gap: 12px; flex-direction: row; } #activities li a i { height: 50px; width: 50px; margin-bottom: 0; flex-shrink: 0; } #activities li a span { text-align: right; flex: 1; font-size: 1em; } .topImg { display: none; } /* #main_calculator Styles */ #main_calculator { padding: 25px 15px; margin: 20px 0; } #main_calculator .calcs { grid-template-columns: 1fr; gap: 20px; width: 100%; } #main_calculator .calcs .calc_title { font-size: 1.6em; line-height: 1.2; margin-bottom: 10px; } #main_calculator .calcs sub { font-size: 1em; line-height: 1.4; display: block; margin-bottom: 15px; } #main_calculator .slider-container { width: 100%; margin-top: 40px; } .slider-container .bubble { font-size: 1em; padding: 2px 8px; top: -35px; } .slider-container .slider-labels { font-size: 0.8em; margin-top: 10px; } #main_calculator .secondaryButton { margin-top: 30px; padding: 10px 12px; font-size: 0.9em; line-height: 1.3; width: 95%; max-width: 400px; text-align: center; white-space: normal; word-wrap: break-word; } /* Additional slider container responsiveness */ .slider-container { margin-top: 60px; } footer .blocks { flex-direction: column; gap: 20px; text-align: center; font-size: 0.875em; } footer h3 { margin-bottom: 5px; } footer .footer_note { width: 100%; } /* Search Overlay Responsive Styles */ #searchOverlay .search-container { width: 95%; max-width: 500px; padding: 0 15px; } #searchOverlay .search-title { font-size: 2em; margin-bottom: 20px; } #searchOverlay .search-input { padding: 16px 16px 16px 50px; font-size: 1.3em; border-radius: 25px; } #searchOverlay .search-input-container .search-input-icon { left: 20px; font-size: 1.3em; } #searchOverlay .search-suggestions { font-size: 1em; margin-top: 15px; } #searchOverlay .search-suggestions span { margin: 4px 8px; padding: 6px 12px; font-size: 0.95em; border-radius: 15px; } } .cookie-consent { position: fixed; right: calc(env(safe-area-inset-right, 0) + 16px); bottom: calc(env(safe-area-inset-bottom, 0) + 16px); max-width: 300px; width: min(300px, calc(100vw - 32px)); background: #fff; border: 1px solid #e6e6e6; box-shadow: 0 6px 24px rgba(0,0,0,0.12); border-radius: 10px; padding: 16px; display: none; z-index: 2147483647; font-family: inherit; line-height: 1.5; direction: rtl; } .cookie-consent__text { font-size: 15px; color: #222; margin-bottom: 10px; } .cookie-consent__link { color: #000; text-decoration: underline; } .cookie-consent__actions { display: flex; gap: 8px; } .cookie-consent__btn { appearance: none; border: 0; padding: 10px 16px; border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 700; } .cookie-consent__btn--ok { background: #17a34a; color: #fff; } .cookie-consent__btn--ok:focus { outline: 2px solid #222; outline-offset: 2px; } /* Mobile - top with small gap and light transparency, one row with button on the left and smaller text */ /* מרווח עליון דינמי למובייל - אפשר לכוון בקלות */ @media (max-width: 480px) { :root { --cookie-bottom-gap: 64px; } /* שנה את 64 לפי גובה הכפתורים שלך */ .cookie-consent { position: fixed; right: calc(env(safe-area-inset-right, 0) + 12px); left: calc(env(safe-area-inset-left, 0) + 12px); bottom: calc(env(safe-area-inset-bottom, 0) + var(--cookie-bottom-gap)); top: auto; width: auto; max-width: none; padding: 12px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.08); background: rgba(255,255,255,0.96); box-shadow: 0 10px 24px rgba(0,0,0,0.10); display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; z-index: 2147483647; } /* טקסט בצד ימין קטן יותר */ .cookie-consent__text { order: 1; text-align: right; margin: 0; font-size: 13px; line-height: 1.4; } /* כפתור בצד שמאל */ .cookie-consent__actions { order: 2; margin-left: 8px; } .cookie-consent__btn { padding: 8px 14px; font-size: 13px; border-radius: 9px; } } /* Compare calculator contact form */ .compare_contact_form_wrap { direction: rtl; margin: 48px 0 38px; overflow: visible; } .compare_contact_form_inner { position: relative; overflow: visible; display: grid; grid-template-columns: minmax(210px, 0.8fr) minmax(0, 1.4fr); gap: 18px; align-items: center; min-height: 138px; background: #FFF4D8; border: 2px solid #F2B705; border-radius: 16px; padding: 22px 220px 22px 22px; box-shadow: 0 8px 18px rgba(242, 183, 5, 0.18); } .compare_contact_form_image { position: absolute; right: 18px; bottom: 1px; width: 140px; height: 180px; pointer-events: none; z-index: 2; display: flex; align-items: flex-end; justify-content: center; } .compare_contact_form_image img { display: block; width: auto; height: 100%; max-width: none; } .compare_contact_form_text { position: relative; z-index: 3; } .compare_contact_form_text strong { display: block; font-size: 1.55em; line-height: 1.2; color: #000; margin-bottom: 4px; } .compare_contact_form_text span { display: block; font-size: 1em; line-height: 1.45; color: #000; } .compare_contact_form.myform { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: center; padding-bottom: 0; } .compare_contact_form.myform fieldset { margin-bottom: 0; } .compare_contact_form.myform fieldset div.inputArea { float: none; width: 100%; } .compare_contact_form.myform fieldset div.inputArea input[type="text"], .compare_contact_form.myform fieldset div.inputArea input[type="tel"] { line-height: 46px; font-size: 1em; border-radius: 12px; border: 2px solid #000; padding-right: 48px; background: #fff; } .compare_contact_form.myform .inputArea:before { top: 10px; color: #F2B705; } .compare_contact_form.myform button.primaryButton { width: auto; min-width: 120px; height: 50px; padding: 0 22px; font-size: 1.1em; border-radius: 12px; box-shadow: 0px 7px 8px 0px rgba(242, 183, 5, 0.28); } @media (max-width: 1050px) { .compare_contact_form_wrap { margin: 58px 0 34px; } .compare_contact_form_inner { grid-template-columns: 1fr; padding: 155px 18px 18px; text-align: center; } .compare_contact_form_image { right: 50%; bottom: auto; top: -42px; transform: translateX(50%); width: 140px; height: 180px; } .compare_contact_form.myform { grid-template-columns: 1fr; } .compare_contact_form.myform button.primaryButton { width: 100%; } } /* gmc: unified styling for the bottom calculators/related block (2026-06) */ .bottom_blocks .block_header b{font-size:1.6em;color:#222;font-weight:600} .bottom_blocks .block_body{box-shadow:none;border:1px solid #e6e6e6} .bottom_blocks .block_body .list{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;padding:14px} .bottom_blocks .block_body .list a{display:block;background:#f5fbf8;border:1px solid #cfeee2;border-radius:10px;padding:14px 16px;color:#0f6e56;text-decoration:none;font-weight:600;text-align:center;transition:.15s} .bottom_blocks .block_body .list a:hover{background:#2ad09d;color:#fff;border-color:#cfeee2} /* --- mobile activity icons: consistent size + clean alignment (2026-06) --- */ @media (max-width: 1200px) { #activities ul { gap: 10px; } #activities li a { height: auto; min-height: 76px; padding: 10px 14px; gap: 12px; align-items: center; justify-content: flex-start; } #activities li a img { max-width: 46px; max-height: 46px; width: auto; height: auto; margin: 0; flex-shrink: 0; } #activities li a i { border: none; height: 46px; width: 46px; margin: 0; flex-shrink: 0; } #activities li a span { text-align: right; flex: 1; font-size: 0.95em; line-height: 1.3; } } /* 2026-11-03: the accessibility widget (/ac/ac.js, w2a) adds its own floating button when the page prints no #openAccess opener (ac/Accessbility.class.php::printBox() now returns ''); keep it above the WhatsApp agents bubble (#left_links: bottom 3% + 106px) instead of on top of it */ body .w2a-fab { bottom: 150px; } .nbs-flexisel-container { position:relative; max-width:100%; } .nbs-flexisel-ul { position:relative; width:99999px; margin:0px; padding:0px; list-style-type:none; text-align:center; overflow: auto; } .nbs-flexisel-inner { position: relative; overflow: hidden; float:left; width:100%; background:#fcfcfc; background: #fcfcfc -moz-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* FF3.6+ */ background: #fcfcfc -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfcfc), color-stop(100%,#eee)); /* Chrome,Safari4+ */ background: #fcfcfc -webkit-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* Chrome10+,Safari5.1+ */ background: #fcfcfc -o-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* Opera11.10+ */ background: #fcfcfc -ms-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* IE10+ */ background: #fcfcfc linear-gradient(top, #fcfcfc 0%, #eee 100%); /* W3C */ border:1px solid #ccc; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } .nbs-flexisel-item { float:left; margin:0px; padding:0px; cursor:pointer; position:relative; line-height:0px; } .nbs-flexisel-item img { max-width: 100%; cursor: pointer; position: relative; margin-top: 10px; margin-bottom: 10px; } /*** Navigation ***/ .nbs-flexisel-nav-left, .nbs-flexisel-nav-right { padding:5px 10px; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; position: absolute; cursor: pointer; z-index: 4; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); color: #fff; } .nbs-flexisel-nav-left { left: 10px; } .nbs-flexisel-nav-left:before { content: "<" } .nbs-flexisel-nav-left.disabled { opacity: 0.4; } .nbs-flexisel-nav-right { right: 5px; } .nbs-flexisel-nav-right:before { content: ">" } .nbs-flexisel-nav-right.disabled { opacity: 0.4; } .nbs-flexisel-container { display: flex; padding: 0 45px; align-items: center; } .nbs-flexisel-container .nbs-flexisel-inner { background: none; border: 0; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; position: relative; overflow: hidden; float: left; width: 100%; } .nbs-flexisel-container .control_left, .nbs-flexisel-container .control_right { position: absolute; cursor: pointer; color: #000; font-size: 1.6em; } .nbs-flexisel-container .control_left.disabled, .nbs-flexisel-container .control_right.disabled { pointer-events: none; cursor: not-allowed; opacity: 0.4; } .nbs-flexisel-container .control_left { left: 0; } .nbs-flexisel-container .control_right { right: 0; } .nbs-flexisel-container .control_left:hover, .nbs-flexisel-container .control_right:hover { color: #023099; } .nbs-flexisel-container .nbs-flexisel-item { line-height: normal; cursor: auto; } .nbs-flexisel-ul { overflow: hidden; float: left; text-align: right; } #ribit_calculator { font-size: 1rem; } /* Pension Calculator Styles */ .calculator-container { display: flex; flex-direction: column; gap: 20px; background: #000000; border-radius: 20px; padding: 30px; } .calculator-content { display: flex; gap: 20px; } .calculator-left { flex: 0.4; display: flex; flex-direction: column; gap: 25px; } .calculator-right { flex: 0.6; display: flex; flex-direction: column; color: #fff; border-right: 1px solid #595959; } .calculator-section { background: #4f4f4f; border-radius: 15px; padding: 25px; } .calc-title { font-size: 1.875em; font-weight: 600; margin-bottom: 8px; line-height: 1em; color: #ffffff; } .calc-subtitle { color: #ffffff; font-size: 1.125em; line-height: 1em; margin-bottom: 20px; } /* Time Periods Radio Style */ .calculator-container .time-periods.custom_radio { display: flex; flex-direction: column; margin: 0; flex-wrap: wrap; gap: 10px; } .calculator-container .time-periods.custom_radio div { display: flex; gap: 15px; flex-wrap: wrap; padding: 10px; border-radius: 10px; color: #ccc; font-size: 1.125em; background: #4f4f4f; } .calculator-container .time-periods.custom_radio div b { color: #fff; } .calculator-container .time-periods.custom_radio input[type="radio"]:checked + span { font-weight: normal; color: #fff; } .calculator-container .calc-results-header { margin-bottom: 30px; display: flex; align-items: center; gap: 15px; padding-right: 15px; } .calculator-container .calc-results-header h3 { font-size: 3em; margin: 0; line-height: 1em; } .calculator-container .calc-results-header .calc-icon { height: 40px; width: auto; } .calculator-container .calc-result-row { display: flex; align-items: center; padding: 20px 0; border-bottom: 1px solid #595959; } .calculator-container .calc-result-row:last-child { border-bottom: none; } .calculator-container .calc-result-row .result-img { width: 65px; align-items: center; display: flex; justify-content: center; } .calculator-container .calc-result-row .result-label { font-size: 1.125em; margin-left: auto; } .calculator-container .calc-result-row .result-value { font-size: 1.5em; } .calculator-container .calc-result-row.highlight .result-value { color: #2ad09d; font-weight: bold; } /* Disclaimer */ .calculator-container .disclaimer { border-radius: 10px; padding: 15px; margin: 20px 0; color: #2ad09d; text-align: center; font-weight: 500; } .calculator-container .slider-container { margin-top: 65px; } .calculator-container .slider-container .slider-labels { color: #2ad09d; } .calculator-container .slider-container input[type="range"]::-webkit-slider-runnable-track { background: #2ad09d; } .calculator-container .goform { border: 1px solid #595959; border-radius: 10px; padding: 15px 40px; margin: 0 auto; width: 90%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; } .calculator-container .goform fieldset { flex-basis: calc(50% - 5px); margin-bottom: 0; } .calculator-container .goform .mybutton { padding: 15px 20px; } /* Responsive Design */ @media (max-width: 1200px) { .calculator-container { padding: 20px 10px; gap: 20px; } .calculator-content { flex-direction: column; gap: 20px; } .calculator-container .time-periods.custom_radio div { justify-content: center; gap: 8px; } .calculator-container .calc-results-header h3 { font-size: 1.5em; } .calculator-container .calc-result-row .result-label { font-size: 1em; } .calculator-container .calc-result-row .result-value { font-size: 1.2em; } .calculator-container .calc-result-row.highlight .result-value { font-size: 1.4em; } .calculator-container .goform { flex-direction: column; gap: 10px; width: 94%; padding: 10px; } .calculator-container .goform fieldset { flex-basis: 100%; width: 100%; } .calc-title { font-size: 1.5em; text-align: center; } .calc-subtitle { font-size: 1em; text-align: center; } } #compare_calculator { font-size: 1rem; } .compare_container { position: relative; background: #f1f1f1; padding: 20px; border-radius: 10px; } #compare_calculator.thin .compare_container { background: transparent; padding: 0; } .compare_container .tabs { display: flex; gap: 10px; justify-content: space-between; margin-bottom: 10px; } .compare_container .tabs button { padding: 15px 30px; font-size: 1.375em; color: #6b6b6b; background: #fff; border: 1px solid #e6e6e6; border-radius: 8px; cursor: pointer; } .compare_container .tabs button.active, .compare_container .tabs button:hover { background: #00c99f; color: white; border-color: #000; } .compare_container .tabs button.active { font-weight: bold; } .custom_radio { display: flex; flex-direction: column; margin: 15px 0; flex-wrap: wrap; gap: 10px; } .custom_radio div { display: flex; gap: 15px; flex-wrap: wrap; border: 1px solid #000; padding: 10px; border-radius: 10px; color: #6b6b6b; font-size: 1.125em; } .custom_radio div b { color: #000; } .custom_radio label { display: flex; align-items: center; gap: 4px; } .custom_radio label span { display: flex; align-items: center; } .custom_radio label span::before { content: ""; display: inline-block; width: 15px; height: 15px; border: 1px solid #000; border-radius: 50%; background-color: #fff; margin-left: 8px; vertical-align: middle; } .custom_radio label input[type="radio"] { display: none; } .custom_radio label input[type="radio"]:checked + span::before { background-color: #2ad09d; border-color: #000; } .custom_radio input[type="radio"]:checked + span { font-weight: bold; color: #000; } .compare_container .left-card { max-width: 226px; background: #e7e7e7; padding: 15px; border-radius: 10px; text-align: center; float: left; display: flex; gap: 25px; flex-direction: column; align-items: center; } .compare_container .left-card img { max-height: 54px; width: auto; } .compare_container .left-card .primaryButton { padding: 9px 18px; } .compare_container .left-card .title { font-size: 1.5em; display: flex; gap: 7px; align-items: center; justify-content: center; margin-bottom: 30px; } .compare_container .left-card .total_box { background: #e7e7e7; border: 1px solid #000; padding: 15px 25px; display: flex; flex-direction: column; border-radius: 10px; line-height: normal; box-shadow: 0px 0px 43px 0px rgba(42, 208, 157, 1); } .compare_container .left-card .total_box .value { font-weight: bold; font-size: 1.875em; } .compare_container .left-card .total_box span { font-size: 1.125em; color: #969696; } .compare_container .left-card .company_name { font-size: 1.5em; font-weight: bold; } .compare_container .chart-container { display: flex; gap: 20px; } #chart_div { height: 100%; } .compare_container .chart-area { min-height: 520px; flex: 1; position: relative; } .compare_container .chart-area .yLabel { position: absolute; left: 10px; top: 0; font-size: 1.125em; color: #000; font-weight: bold; z-index: 1; } .compare_container #logoLabels { position: absolute; bottom: 0; left: 0; display: flex; justify-content: space-between; padding: 0 50px; font-size: 1.125em; flex-direction: row-reverse; } .compare_container #logoLabels .logoLabel { display: flex; flex-direction: column; align-items: center; text-align: center; } .compare_container #logoLabels img { height: 20px; width: auto; } #compare_button_area { transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease; overflow: hidden; background-image: linear-gradient(rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.5) 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; backdrop-filter: blur(7.5px); -webkit-backdrop-filter: blur(7.5px); position: fixed; bottom: 0; right: 0; width: 100%; padding: 30px 0px; z-index: 1000; font-size: 1rem; transform: translateY(100%); opacity: 0; visibility: hidden; } #compare_button_area.show { transform: translateY(0%); opacity: 1; visibility: visible; } #compare_button_area .primaryButton { padding: 5px 60px; } /* Fund Comparison Table Styles */ /* ===================================================== Homepage track comparison tables ===================================================== */ .homepage_track_section { overflow: hidden; } .homepage_track_tables { display: flex; gap: 10px; align-items: flex-start; } .homepage_track_table_wrap { flex: 1; min-width: 0; } /* Footer row with "מעבר לרשימה המלאה" button */ .extend_container .fund_comparison_table .table_footer_row { display: flex; justify-content: center; padding: 15px; background: #f1f1f1; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; } /* Simple table has no col_compare / col_ytd / col_action — columns are redistributed to fit the narrower 3-column layout */ .extend_container .fund_comparison_table.homepage_simple_table { font-size: 0.775em; } /* Allow header text to wrap in the simple table so cells don't overflow */ .extend_container .homepage_simple_table .table_header { white-space: normal; } /* col_name gets 2 flex units (~33%), yield columns get 1 each (~16.7%) */ .extend_container .homepage_simple_table .col_name { flex: 2 1 0%; min-width: 0; overflow: hidden; padding-left: 2px; padding-right: 6px; } /* Override base table_row rule which sets flex-direction:row and justify-content:flex-start */ .extend_container .homepage_simple_table .table_row .col_name { flex-direction: column; justify-content: center; align-items: flex-start; } .extend_container .homepage_simple_table .col_month, .extend_container .homepage_simple_table .col_1y, .extend_container .homepage_simple_table .col_3y, .extend_container .homepage_simple_table .col_5y { flex: 1 1 0%; padding-left: 2px; padding-right: 2px; } /* Override sortable padding so header cells stay the same width as data cells */ .extend_container .homepage_simple_table .table_header .sortable { padding-left: 2px; padding-right: 2px; } .extend_container .homepage_simple_table .col_name .fund_name { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; width: 100%; line-height: 1.4; } .extend_container .homepage_simple_table .table_header, .extend_container .homepage_simple_table .table_row { min-height: unset; } .extend_container .homepage_simple_table .table_row .col_name, .extend_container .homepage_simple_table .table_header .col_name, .extend_container .homepage_simple_table .col_month, .extend_container .homepage_simple_table .col_1y, .extend_container .homepage_simple_table .col_3y, .extend_container .homepage_simple_table .col_5y, .extend_container .homepage_simple_table .table_header .sortable { padding-top: 8px; padding-bottom: 8px; } .extend_container .homepage_simple_table .table_header .sortable { padding: 8px 2px !important; } /* ===================================================== */ .extend_container { font-size: 1rem; } .extend_container .fund_comparison_table { background: #f8f9fa; font-size: 1.125em; border: 1px solid #000; border-radius: 12px; } .extend_container .table_header, .extend_container .table_row { display: flex; align-items: center; border-bottom: 1px solid #000000; min-height: 60px; padding: 0; } .extend_container .table_row:last-child { border-bottom: 0; } .extend_container .table_header { background: #e7e7e7; border-top-left-radius: 12px; border-top-right-radius: 12px; white-space: nowrap; } /* Sortable header styling */ .extend_container .table_header .sortable { cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center; user-select: none; padding: 15px 10px; gap: 5px; } .extend_container .table_header .sortable:hover { background: rgba(0, 0, 0, 0.05); } .extend_container .table_header .sortable .header_text { flex: 1; text-align: center; } .extend_container .table_header .sortable .sort_arrows { display: flex; flex-direction: column; font-size: 0.7em; line-height: 0.8; margin-left: 3px; width: 8px; } .extend_container .table_header .sortable .arrow_up, .extend_container .table_header .sortable .arrow_down { color: #ccc; transition: color 0.2s ease; cursor: pointer; } .extend_container .table_header .sortable .arrow_up:hover, .extend_container .table_header .sortable .arrow_down:hover { color: #666; } .extend_container .table_header .sortable.sort_asc .arrow_up { color: #00c99f; } .extend_container .table_header .sortable.sort_desc .arrow_down { color: #00c99f; } .extend_container .table_row { background: #f1f1f1; transition: background-color 0.2s ease; font-weight: bold; } .extend_container .table_row:hover, .extend_container .table_row.highlighted { background: #80e5c3; } .extend_container .table_row:last-child { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; } /* Column widths and styling */ .extend_container .col_compare { flex: 0 0 12%; padding: 15px 10px; text-align: center; display: flex; align-items: center; justify-content: center; } .extend_container .table_header .col_compare { border-top-right-radius: 12px; } .extend_container .col_name { flex: 1; min-width: 25%; padding: 15px 20px; text-align: right; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; } .extend_container .col_name .search-input-wrapper { position: relative; width: 100%; display: flex; align-items: center; } .extend_container .col_name .fund-search-input { width: 100%; padding: 0 38px 0 12px; /* Added right padding for icon */ border: none; border-bottom: 1px solid #8d8c8c; background: transparent; } .extend_container .col_name .search-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #8d8c8c; pointer-events: none; } .extend_container .col_name .fund-search-input:focus { outline: none; border-color: #000; } .extend_container .col_name .fund-search-input:focus + .search-icon { color: #000; } .extend_container .col_name .fund-search-input::placeholder { color: #000; } .extend_container .table_row .col_name { justify-content: flex-start; flex-direction: row; } .extend_container .col_5y, .extend_container .col_3y, .extend_container .col_1y, .extend_container .col_ytd, .extend_container .col_month { flex: 0 0 10%; white-space: nowrap; padding: 15px 10px; text-align: center; display: flex; align-items: center; justify-content: center; } .extend_container .col_action { flex: 0 0 12%; padding: 15px 10px; text-align: center; display: flex; align-items: center; justify-content: center; } /* Override padding for sortable headers since they already have padding */ .extend_container .table_header .sortable.col_5y, .extend_container .table_header .sortable.col_3y, .extend_container .table_header .sortable.col_1y, .extend_container .table_header .sortable.col_ytd, .extend_container .table_header .sortable.col_month { padding: 15px 10px; } /* Simple table: sortable header cells must match data cell padding exactly */ .extend_container .homepage_simple_table .table_header .sortable.col_5y, .extend_container .homepage_simple_table .table_header .sortable.col_3y, .extend_container .homepage_simple_table .table_header .sortable.col_1y, .extend_container .homepage_simple_table .table_header .sortable.col_month { padding-left: 2px; padding-right: 2px; } /* Add Preference Button */ .extend_container .add_preference { background: #80e5c3; border: none; color: #000; text-decoration: none; border-radius: 5px; padding: 0.2rem 0.75rem; font-size: 0.875em; cursor: pointer; font-weight: bold; transition: all 0.2s ease; } .extend_container .add_preference.selected, .extend_container .add_preference:hover, .extend_container .table_row:hover .add_preference { background: #000; color: white; text-decoration: none; } /* Fund Name */ .extend_container .fund_name { color: #3529b5; font-weight: bold; cursor: pointer; text-decoration: none; } .extend_container .fund_name:hover { color: #3529b5; text-decoration: underline; } /* Custom Checkbox */ .extend_container .checkbox_container { display: inline-flex; align-items: center; cursor: pointer; position: relative; user-select: none; font-size: 0.875em; gap: 7px; } .extend_container .checkbox_container input[type="checkbox"] { opacity: 0; position: absolute; width: 27px; height: 24px; cursor: pointer; z-index: 5; margin: 0; } .extend_container .checkmark { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 24px; background: #f8f9fa; border: 1px solid #000; border-radius: 2px; font-weight: bold; color: #6c757d; transition: all 0.2s ease; box-shadow: 0px 5px 5px 0px rgba(128, 229, 195, 0.75); } .extend_container .checkmark:after { content: "✓"; opacity: 0; transition: opacity 0.2s ease; } .extend_container .checkbox_container input[type="checkbox"]:checked + .checkmark:after { opacity: 1; } .comparison-popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999991; } .comparison-popup-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); cursor: pointer; } .comparison-popup-content { position: relative; width: 100%; min-height: 100vh; max-height: 100vh; background-color: white; z-index: 10001; overflow-y: auto; } .comparison-popup-header { position: sticky; position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; top: 0; right: 0; padding: 10px 30px 0 30px; z-index: 10002; background: #fff; display: flex; } .comparison-popup-close { display: inline-flex; align-items: center; color: #000; gap: 8px; text-decoration: none; font-weight: 500; transition: all 0.3s ease; } .comparison-popup-close:hover { color: #80e5c3; } .comparison-popup-body { padding: 10px 30px 30px; min-height: calc(100vh - 100px); } .comparison-popup-body h2 { text-align: center; margin-bottom: 40px; font-size: 28px; } .comparison-content { max-width: 1200px; margin: 0 auto; box-shadow: 0 4px 12px rgba(128, 128, 128, 0.15); background: #fff; } /* Prevent body scrolling when popup is open */ body.popup-open { overflow: hidden; } /* Loading spinner styles */ .comparison-popup-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 30px; text-align: center; } .loading-spinner { width: 50px; height: 50px; border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 20px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .error-message { text-align: center; padding: 20px; color: #e74c3c; } /* Comparison table styles */ .comparison-table { margin-top: 20px; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .comparison-table-header, .comparison-table-row { display: grid; grid-template-columns: 2fr 1.5fr 1fr 1fr 1fr 1fr; gap: 10px; padding: 15px 20px; align-items: center; } .comparison-table-header { background-color: #f8f9fa; font-weight: bold; border-bottom: 2px solid #dee2e6; } .comparison-table-row { background-color: white; border-bottom: 1px solid #e9ecef; transition: background-color 0.2s ease; } .comparison-table-row:hover { background-color: #f8f9fa; } .comparison-table-row:last-child { border-bottom: none; } .fund-info strong { font-size: 16px; } .company-info { display: flex; align-items: center; gap: 10px; } .company-logo { width: 30px; height: 30px; object-fit: contain; border-radius: 4px; } .col-month, .col-ytd, .col-3y, .col-5y { font-weight: 600; text-align: center; } .no-selection-message { text-align: center; padding: 40px 20px; color: #666; } .no-selection-message p { margin: 10px 0; font-size: 16px; } .no-selection-message p:first-child { font-weight: bold; font-size: 1.125em; } /* Comparison Table Layout - Grid Based for Perfect Alignment */ .comparison-popup .comparison-cards-container { display: grid; grid-template-columns: repeat(4, 25%); grid-auto-columns: 25%; grid-template-rows: minmax(120px, auto) repeat(8, minmax(50px, auto)); border-radius: 0; overflow-x: auto; background: #fff; width: 100%; position: relative; } /* Scroll arrows for horizontal navigation */ .comparison-popup .scroll-arrows { position: absolute; top: 50%; transform: translateY(-50%); z-index: 200; background: #80e5c3; border: 1px solid #000; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; font-weight: bold; color: #333; transition: all 0.2s ease; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .comparison-popup .scroll-arrows:hover { background: #000; color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .comparison-popup .scroll-arrows.disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; } .comparison-popup .scroll-arrow-left { left: 10px; } .comparison-popup .scroll-arrow-right { right: 10px; } /* Labels column */ .comparison-popup .comparison-labels { grid-column: 1; grid-row: 1 / -1; border-right: 1px solid #cfcee5; position: sticky; position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; inset-inline-start: 0; display: table-cell; background: #fff; z-index: 11; } .comparison-popup .comparison-labels-header { grid-column: 1; grid-row: 1; padding: 1rem; text-align: center; border-bottom: 1px solid #e4e1fc; background: #ececec; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 25px; } .comparison-popup .comparison-labels-header .share_buttons { display: flex; gap: 12px; flex-direction: column; width: 100%; } .comparison-popup .comparison-labels-header img { max-width: 100%; max-height: 4rem; object-fit: contain; } .comparison-popup .comparison-labels-body { display: contents; } .comparison-popup .label-item { grid-column: 1; padding: 1rem; border-bottom: 1px solid #cfcee5; font-size: 1.125em; font-weight: bold; display: flex; align-items: center; word-break: break-word; hyphens: auto; } .comparison-popup .label-item:nth-child(1) { grid-row: 2; } .comparison-popup .label-item:nth-child(2) { grid-row: 3; } .comparison-popup .label-item:nth-child(3) { grid-row: 4; } .comparison-popup .label-item:nth-child(4) { grid-row: 5; } .comparison-popup .label-item:nth-child(5) { grid-row: 6; } .comparison-popup .label-item:nth-child(6) { grid-row: 7; } .comparison-popup .label-item:nth-child(7) { grid-row: 8; } .comparison-popup .label-item:nth-child(8) { grid-row: 9; } .comparison-popup .label-item:last-child { border-bottom: none; } /* Fund columns */ .comparison-popup .comparison-card { display: contents; border-right: 1px solid #cfcee5; background: #fff; min-width: 0; /* Prevent grid overflow */ } .comparison-popup .comparison-card:last-child { border-right: none; } /* Fund header with logo and title */ .comparison-popup .comparison-card-header { grid-row: 1; padding: 2.25rem; text-align: center; border-bottom: 1px solid #e4e1fc; border-right: 1px solid #e4e1fc; background: #fff; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; } /* X close button for each fund */ .comparison-popup .fund-remove-btn { position: absolute; top: 0.5rem; left: 0.5rem; font-size: 1.5em; color: #000; cursor: pointer; width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; border: none; background: transparent; font-weight: bold; border-radius: 3px; z-index: 10; } .comparison-popup .fund-remove-btn:hover { color: #dc3545; } /* Hide remove button when there's only one fund */ .comparison-popup .comparison-cards-container[data-fund-count="1"] .fund-remove-btn { display: none !important; } /* Adjust grid layout for single fund comparison */ .comparison-popup .comparison-cards-container[data-fund-count="1"] { grid-template-columns: minmax(120px, 400px) 1fr; } /* Animation for removing fund columns */ .comparison-popup .comparison-card-header.removing, .comparison-popup .performance-item.removing { animation: slideOutAndShrink 0.4s ease-in-out forwards; } @keyframes slideOutAndShrink { 0% { opacity: 1; transform: scale(1) translateX(0); } 50% { opacity: 0.3; transform: scale(0.98) translateX(5px); } 100% { opacity: 0; transform: scale(0.95) translateX(10px); visibility: hidden; } } /* Company logo */ .comparison-popup .company-logo-wrapper { margin-bottom: 0.25rem; max-width: 100%; } .comparison-popup .company-logo-large { max-width: 100%; height: 3.5rem; object-fit: contain; display: block; } /* Fund details */ .comparison-popup .fund-details { text-align: center; margin-bottom: auto; width: 100%; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.6; } .comparison-popup .fund-details .fund-name { font-size: 1.125em; margin-bottom: 0.25rem; line-height: 1.2; word-break: break-word; hyphens: auto; } .comparison-popup .fund-details .fund-name a { color: #3529b5; text-decoration: none; } .comparison-popup .company-name { color: #666; word-break: break-word; } .comparison-popup .fund-more-info { background: #80e5c3; border: none; border-radius: 5px; padding: 0.4rem 0.6rem; cursor: pointer; white-space: nowrap; font-weight: bold; transition: all 0.2s ease; font-size: 1em; color: #000; text-decoration: none; } .comparison-popup .fund-more-info:hover { background: #000; color: white; } /* Performance data rows */ .comparison-popup .comparison-card-body { display: contents; } .comparison-popup .performance-grid { display: contents; } .comparison-popup .performance-item { display: flex; justify-content: center; align-items: center; font-size: 1.125em; padding: 1rem; border-bottom: 1px solid #cfcee5; border-right: 1px solid #cfcee5; transition: background-color 0.2s ease; } .comparison-popup .performance-item:nth-child(1) { grid-row: 2; } .comparison-popup .performance-item:nth-child(2) { grid-row: 3; } .comparison-popup .performance-item:nth-child(3) { grid-row: 4; } .comparison-popup .performance-item:nth-child(4) { grid-row: 5; } .comparison-popup .performance-item:nth-child(5) { grid-row: 6; } .comparison-popup .performance-item:nth-child(6) { grid-row: 7; } .comparison-popup .performance-item:nth-child(7) { grid-row: 8; } .comparison-popup .performance-item:nth-child(8) { grid-row: 9; } /* Remove bottom border from last row items */ .comparison-popup .comparison-card-header:last-child, .comparison-popup .label-item:nth-child(8), .comparison-popup .performance-item:nth-child(8) { border-bottom: none; } .comparison-popup .performance-item:hover { background: #f8f9fa; } .comparison-popup .performance-item:last-child { border-bottom: none; } /* Hide labels in this layout */ .comparison-popup .performance-label { display: none; } .comparison-popup .performance-value { font-size: 1.125em; text-align: center; } /* Color coding for positive/negative values */ .comparison-popup .performance-value:contains("+"), .comparison-popup .performance-value[data-positive="true"] { color: #28a745; } .comparison-popup .performance-value:contains("-"), .comparison-popup .performance-value[data-negative="true"] { color: #dc3545; } #fund-page-info { display: flex; } #fund-page-info .textArea { margin-left: auto; flex: 0.9; } #fund-page-info .share_buttons { display: flex; flex-direction: column; gap: 10px; align-items: center; } .fund-lines-list { display: flex; flex-direction: column; font-size: 1.5em; position: relative; } .fund-lines-list .fund-graph-image { position: absolute; left: 6%; bottom: -30px; } .fund-lines-list .line { padding: 0.5rem 0; border-bottom: 1px solid #cbcbcb; } .fund-lines-list .line span { color: #2ad09d; } .fund-lines-list .line a { color: #3529b5; text-decoration: none; } .fund-lines-list .line a:hover { text-decoration: underline; } #funds_dashboard { padding: 20px; border-radius: 10px; background: #f1f1f1; display: grid; gap: 40px; width: 100%; grid-template-columns: 1.5fr 1fr 1fr; } #funds_dashboard .section-block { display: flex; flex-direction: column; align-items: center; flex: 1; border-left: 1px solid #ddd; padding: 0 10px; } #funds_dashboard .section-block:last-child { border-left: none; } #funds_dashboard .section-title { font-size: 1.125em; font-weight: bold; margin-bottom: 20px; text-align: center; } #funds_dashboard .section { display: flex; gap: 30px; align-items: center; justify-content: center; flex-wrap: nowrap; padding-bottom: 10px; width: 100%; } #funds_dashboard .section > div { flex: 1; } #funds_dashboard .section .circle { width: 100%; height: 100%; position: relative; display: flex; justify-content: center; align-items: center; } #funds_dashboard .section .circle svg { width: 100%; height: 100%; transform: rotate(-90deg); } #funds_dashboard .section .circle circle { fill: none; stroke-width: 14; cx: 50%; cy: 50%; } #funds_dashboard .section .circle .background { stroke: #e6e6e6; } #funds_dashboard .section .circle span { position: absolute; font-size: 1.25em; font-weight: bold; } #funds_dashboard .section .label { margin-top: 10px; text-align: center; font-size: 1em; height: 55px; } /* Responsive Styles for Compare Calculator */ @media (max-width: 1200px) { /* Make compare container relative for filter icon positioning */ .compare_container { position: relative; padding: 10px; } /* Homepage track tables: stack vertically on narrow screens */ .homepage_track_tables { flex-direction: column; } /* Simple table has no col_compare, so col_name must not be offset */ .extend_container .homepage_simple_table .col_name { position: relative; right: 0; border-left: none; flex: 2 1 0%; min-width: 0; } /* Prevent homepage simple table from getting horizontal scroll */ .extend_container .fund_comparison_table.homepage_simple_table { overflow-x: visible; } /* Override min-width: 120px that the base mobile rule adds to yield columns */ .extend_container .homepage_simple_table .col_month, .extend_container .homepage_simple_table .col_1y, .extend_container .homepage_simple_table .col_3y, .extend_container .homepage_simple_table .col_5y { flex: 1 1 0%; min-width: 0; padding: 10px 2px; } .compare_container .tabs { white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #ccc #f1f1f1; } .extend_container .checkmark { width: 20px; height: 20px; } .compare_container .tabs::-webkit-scrollbar { height: 8px; } .compare_container .tabs::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; } .compare_container .tabs::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; } .compare_container .tabs::-webkit-scrollbar-thumb:hover { background: #999; } .compare_container .tabs button { font-size: 1em; padding: 8px 20px; } .custom_radio { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #ccc #f1f1f1; } .custom_radio::-webkit-scrollbar { height: 8px; } .custom_radio::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; } .custom_radio::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; } .custom_radio::-webkit-scrollbar-thumb:hover { background: #999; } .custom_radio div { white-space: nowrap; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #ccc #f1f1f1; font-size: 1em; } .custom_radio div::-webkit-scrollbar { height: 8px; } .custom_radio div::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; } .custom_radio div::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; } .custom_radio div::-webkit-scrollbar-thumb:hover { background: #999; } .calculator-container .time-periods.custom_radio div { font-size: 1em; } /* Chart container adjustments */ .compare_container .chart-container { flex-direction: column; gap: 15px; } /* Left card adjustments */ .compare_container .left-card { max-width: none; float: none; order: 2; justify-content: space-between; align-items: center; gap: 10px; padding: 15px; } .compare_container .left-card .title { font-size: 1.2em; margin-bottom: 0; gap: 5px; } .compare_container .left-card .company_name { font-size: 1.2em; text-align: left; flex: 1; } .compare_container .left-card img { max-height: 40px; width: auto; } .compare_container .left-card .total_box { margin: 0; padding: 10px 15px; min-width: 80px; } .compare_container .left-card .total_box .value { font-size: 1.5em; } .compare_container .left-card .total_box span { font-size: 1em; } .compare_container .left-card .primaryButton { padding: 8px 16px; font-size: 0.9em; white-space: nowrap; } /* Chart area adjustments */ .compare_container .chart-area { order: 1; min-height: auto; } /* Logo labels adjustments */ .compare_container #logoLabels { font-size: 1em; bottom: 0; } .compare_container #logoLabels img { height: 16px; } .compare_container #logoLabels .logoLabel span { transform: rotate(-50deg); white-space: nowrap; font-size: 0.875em; display: block; height: 100%; } .extend_container .col_name .fund-search-input { padding: 6px 30px 6px 8px; /* Adjusted padding for mobile icon */ } .extend_container .col_name .search-icon { font-size: 12px; right: 8px; } /* Fund Comparison Table Mobile Styles */ .extend_container .fund_comparison_table { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #ccc #f1f1f1; position: relative; font-size: 0.875em; } .homepage_track_table_wrap { width: 100%; } .extend_container .fund_comparison_table::-webkit-scrollbar { height: 8px; } .extend_container .fund_comparison_table::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; } .extend_container .fund_comparison_table::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; } .extend_container .fund_comparison_table::-webkit-scrollbar-thumb:hover { background: #999; } /* Make table rows non-wrapping and maintain flex structure */ .extend_container .table_header, .extend_container .table_row { flex-wrap: nowrap; } /* Sticky first two columns (checkbox and name) */ .extend_container .col_compare { position: sticky; position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; right: 0; z-index: 3; background: inherit; flex: 0 0 70px; min-width: 70px; } /* Ensure checkbox container is clickable on mobile */ .extend_container .col_compare .checkbox_container { position: relative; z-index: 4; } .extend_container .col_name { position: sticky; position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; right: 70px; /* Exactly matches col_compare width */ z-index: 2; flex: 0 0 150px; min-width: auto; padding: 10px 10px; text-align: center; } .extend_container .safari-mobile .col_compare, .extend_container .safari-mobile .col_name { position: relative; right: auto; } /* Ensure header sticky columns have same background */ .extend_container .table_header .col_compare, .extend_container .table_header .col_name { background: #e7e7e7; } /* Ensure row sticky columns have same background */ .extend_container .table_row .col_compare, .extend_container .table_row .col_name { background: #f1f1f1; } .extend_container .table_row:hover .col_compare, .extend_container .table_row:hover .col_name, .extend_container .table_row.highlighted .col_compare, .extend_container .table_row.highlighted .col_name { background: #80e5c3; } /* Ensure scrollable columns have minimum widths */ .extend_container .col_5y, .extend_container .col_3y, .extend_container .col_1y, .extend_container .col_ytd, .extend_container .col_month { flex: 0 0 120px; min-width: 120px; padding: 10px 3px; } .extend_container .col_action { flex: 0 0 120px; min-width: 120px; } /* Improve text handling in headers */ .extend_container .table_header .sortable { padding: 15px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .extend_container .table_header .sortable .header_text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Add border-left to sticky columns for visual separation */ .extend_container .col_name { border-left: 2px solid #000000; } #fund-page-info { flex-direction: column; gap: 20px; } #fund-page-info .share_buttons { flex-direction: row; justify-content: center; } .comparison-popup .comparison-labels-header .share_buttons a { white-space: normal; font-size: 1em; line-height: normal; } /* Comparison Popup Mobile Layout - Limit to 2 columns */ .comparison-popup .comparison-cards-container { grid-template-columns: repeat(2, 50%); grid-auto-columns: 50%; } .comparison-popup-body { font-size: 0.875em; padding: 10px 15px 15px; } .comparison-popup .label-item, .comparison-popup .performance-value { font-size: 1em; } .fund-lines-list .fund-graph-image { display: none; } /* Responsive scroll arrows */ .comparison-popup .scroll-arrows { width: 35px; height: 35px; font-size: 20px; display: flex; align-items: center; justify-content: center; } } /* Homepage simple table - give more room to product name */ .extend_container .fund_comparison_table.homepage_simple_table { font-size: 0.72em; } .extend_container .homepage_simple_table .col_name { flex: 3.2 1 0% !important; padding-right: 4px !important; padding-left: 2px !important; } .extend_container .homepage_simple_table .col_month, .extend_container .homepage_simple_table .col_1y, .extend_container .homepage_simple_table .col_3y, .extend_container .homepage_simple_table .col_5y { flex: 1.05 1 0% !important; padding-right: 1px !important; padding-left: 1px !important; letter-spacing: -0.3px; } .extend_container .homepage_simple_table .table_header .sortable.col_month, .extend_container .homepage_simple_table .table_header .sortable.col_1y, .extend_container .homepage_simple_table .table_header .sortable.col_3y, .extend_container .homepage_simple_table .table_header .sortable.col_5y { padding-right: 1px !important; padding-left: 1px !important; } .extend_container .homepage_simple_table .col_name .fund_name { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* =================================================================== Homepage comparison tables - readable redesign (2026-06) Scoped to .homepage_track_section so other comparison tables are untouched. =================================================================== */ .homepage_track_section .fund_comparison_table.homepage_simple_table{ background:#fff; border:1px solid #e3e8ee; border-radius:14px; overflow:hidden; font-size:0.8em; counter-reset:rankc; } .homepage_track_section .homepage_simple_table .table_header{ background:#f4f7fa; border-bottom:1px solid #eef1f5; border-radius:0; color:#5f6b7a; } .homepage_track_section .homepage_simple_table .table_header .col_name, .homepage_track_section .homepage_simple_table .table_header .header_text{ color:#5f6b7a; font-weight:500; } .homepage_track_section .homepage_simple_table .table_header, .homepage_track_section .homepage_simple_table .table_row{ border-bottom:1px solid #eef1f5; } .homepage_track_section .homepage_simple_table .table_row{ background:#fff; font-weight:400; counter-increment:rankc; } .homepage_track_section .homepage_simple_table .table_row:nth-of-type(odd){ background:#fff; } .homepage_track_section .homepage_simple_table .table_row:nth-of-type(even){ background:#f9fbfd; } .homepage_track_section .homepage_simple_table .table_row:nth-of-type(2){ background:#f9fcfb; } .homepage_track_section .homepage_simple_table .table_row:hover{ background:#eafaf3; } .homepage_track_section .homepage_simple_table .table_row:last-child{ border-bottom:0; } .homepage_track_section .homepage_simple_table .table_row .col_name{ flex-direction:row; align-items:center; } .homepage_track_section .homepage_simple_table .table_row .col_name .fund_name{ color:#16324f; font-weight:400; } .homepage_track_section .homepage_simple_table .table_row:nth-of-type(2) .fund_name, .homepage_track_section .homepage_simple_table .table_row:nth-of-type(3) .fund_name, .homepage_track_section .homepage_simple_table .table_row:nth-of-type(4) .fund_name{ font-weight:500; } .homepage_track_section .homepage_simple_table .rank_badge{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:20px; height:20px; border-radius:50%; background:#eef1f5; color:#5f6b7a; font-size:11px; font-weight:500; margin-left:7px; } .homepage_track_section .homepage_simple_table .rank_badge::before{ content:counter(rankc); } .homepage_track_section .homepage_simple_table .table_row:nth-of-type(2) .rank_badge{ background:#f4c542; color:#3a2e00; } .homepage_track_section .homepage_simple_table .table_row:nth-of-type(3) .rank_badge{ background:#c9ccd1; color:#3a2e00; } .homepage_track_section .homepage_simple_table .table_row:nth-of-type(4) .rank_badge{ background:#e0a05a; color:#3a2e00; } .homepage_track_section .homepage_simple_table .percent_format{ color:#1a2233; font-variant-numeric:tabular-nums; } .homepage_track_section .homepage_simple_table .percent_format.best_value{ color:#0a7a52; font-weight:500; background:#eafaf3; border-radius:6px; padding:2px 6px; } .homepage_track_section .homepage_simple_table .table_avg_row{ display:flex; align-items:center; background:#fff8e6; border-top:2px solid #f1dca8; } .homepage_track_section .homepage_simple_table .table_avg_row .col_name{ flex:1 1 0%; padding:9px 3px; font-weight:500; color:#7a5500; } .homepage_track_section .homepage_simple_table .table_avg_row .col_month, .homepage_track_section .homepage_simple_table .table_avg_row .col_1y, .homepage_track_section .homepage_simple_table .table_avg_row .col_3y, .homepage_track_section .homepage_simple_table .table_avg_row .col_5y{ flex:0 0 58px; padding:9px 1px; text-align:center; } .homepage_track_section .homepage_simple_table .table_avg_row .percent_format{ color:#7a5500; font-weight:500; } .homepage_track_section .fund_comparison_table .table_footer_row{ background:#fff; border-top:1px solid #eef1f5; border-radius:0 0 14px 14px; padding:13px; } .homepage_track_section .table_footer_row .fourthButton{ background:#0a7a52; color:#fff; border:0; border-radius:9px; padding:9px 20px; font-weight:500; text-decoration:none; } .homepage_track_section .table_footer_row .fourthButton:hover{ background:#0c9163; } .homepage_track_section .homepage_track_table_wrap h3.subTitle{ color:#16324f; font-weight:500; } /* --- fix: give fund names maximum room; numeric cols fixed to the min that fits the widest value (a "107.99%" green pill = 58px) --- */ .homepage_track_section .homepage_simple_table .col_name{ flex:1 1 0% !important; padding-right:2px !important; padding-left:1px !important; } .homepage_track_section .homepage_simple_table .col_month, .homepage_track_section .homepage_simple_table .col_1y, .homepage_track_section .homepage_simple_table .col_3y, .homepage_track_section .homepage_simple_table .col_5y{ flex:0 0 58px !important; padding-left:1px !important; padding-right:1px !important; } .homepage_track_section .homepage_simple_table .table_header .sortable{ gap:1px; padding-left:1px !important; padding-right:1px !important; } .homepage_track_section .homepage_simple_table .table_header .sortable .sort_arrows{ margin-left:1px; width:7px; } .homepage_track_section .homepage_simple_table .rank_badge{ margin-left:2px; width:17px; height:17px; } .homepage_track_section .homepage_simple_table .percent_format.best_value{ padding:1px 2px; } .homepage_track_section .homepage_simple_table .table_row .col_name .fund_name{ line-height:1.35; } /* desktop: product names on one line, clean truncation (mygemel-style); company on the right always shows */ .homepage_track_section .homepage_simple_table .table_row .col_name .fund_name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .homepage_track_section .homepage_simple_table .table_row .col_name{ align-items:center; } /* --- mobile: tables stack full-width - show full names (wrap) + comfortable sizing --- */ @media (max-width:768px){ .homepage_track_section .homepage_simple_table{ font-size:0.95em; } .homepage_track_section .homepage_simple_table .col_name{ flex:2.6 1 0% !important; } .homepage_track_section .homepage_simple_table .table_row .col_name .fund_name{ white-space:normal; overflow:visible; text-overflow:clip; } .homepage_track_section .homepage_simple_table .table_row, .homepage_track_section .homepage_simple_table .table_header{ min-height:44px; } .homepage_track_section .homepage_simple_table .col_month, .homepage_track_section .homepage_simple_table .col_1y, .homepage_track_section .homepage_simple_table .col_3y, .homepage_track_section .homepage_simple_table .col_5y{ padding-top:9px !important; padding-bottom:9px !important; } .homepage_track_section .homepage_track_tables{ gap:16px; } .homepage_track_section .homepage_track_table_wrap h3.subTitle{ font-size:1.05em; } } /* ===== product landing page: many track tables, 3 per row, wrapping to new rows ===== */ .product_track_tables{ flex-wrap:wrap; row-gap:26px; } .product_track_section .homepage_track_table_wrap{ flex:0 0 calc((100% - 20px)/3); min-width:0; } .product_track_section > h2.pageTitle{ margin-bottom:4px; } @media (max-width:768px){ .product_track_section .homepage_track_table_wrap{ flex:0 0 100%; } } #mainArticles .items { display: grid; grid-template-columns: repeat(3, 1fr); } #mainArticles .items .item_box .inner_box { margin: 10px 10px; max-width: 400px; height: 100%; background: #fff; border: 1px solid #000; border-radius: 15px; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; } #mainArticles .items .item_box .inner_box > img { width: 70%; max-width: 300px; height: auto; border-bottom: 1px solid #000; padding-top: 10px; } #mainArticles .items .item_box .inner_box .item_text { font-weight: bold; direction: rtl; width: 90%; margin: 15px auto; text-align: center; } #mainArticles .items .item_box .inner_box .item_text a { color: #000; text-decoration: none; } #mainArticles .items .item_box .inner_box .item_text a:hover { color: #7fe4c3; } #mainArticles .items .item_box .inner_box .item_text .title { font-size: 1.5em; text-align: center; margin: 0 auto; } #mainArticles .items .item_box .inner_box .item_text .textArea { color: #6d6d6d; font-weight: normal; } #mainArticles .items .item_box .inner_box .foot { margin-top: auto; display: flex; width: 100%; padding: 15px; align-items: center; justify-content: center; } #mainArticles .items .item_box .inner_box .foot .readMore { color: #000; font-weight: bold; display: flex; gap: 10px; text-decoration: none; align-items: center; } #mainArticles .items .item_box .inner_box .foot .readMore:hover { color: #2ad09d; } #mainArticles .items .item_box .inner_box .foot .readMore i { color: #2ad09d; } #articlesBoxes .items { display: grid; grid-template-columns: repeat(3, 1fr); align-items: flex-start; justify-content: center; gap: 30px; padding-bottom: 20px; } #articlesBoxes .items .item_box { width: 100%; margin-bottom: 20px; margin-top: 20px; overflow: hidden; display: flex; align-items: center; justify-content: flex-start; flex-direction: column; gap: 10px; height: 100%; background: #fafafa; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 10px; } #articlesBoxes .items .item_box > img { width: 100%; overflow: hidden; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; position: relative; object-fit: cover; height: 200px !important; } #articlesBoxes .linkButton { font-size: 1.125em; padding: 0px 12px; width: auto; display: table; margin-right: auto; margin-top: auto; } #articlesBoxes .items .item_box .item_text .title a { font-size: 1.4em; font-weight: bold; color: #7fe4c3; text-decoration: none; margin-bottom: 3px; overflow: hidden; display: block; -webkit-transition: color 0.2s ease-in-out; -moz-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; } #articlesBoxes .items .item_box .item_text .title a:hover { color: #000; } #articlesBoxes .items .item_box time { display: block; margin-bottom: 5px; color: #595959; } #writerBox { background: #fafafa; margin-top: 20px; padding: 20px; width: 100%; display: flex; align-items: center; } #writerBox .info { display: flex; margin-left: auto; gap: 15px; align-items: center; } #writerBox .info img { width: 85px; height: 85px !important; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } #writerBox .info .texts { display: flex; flex-direction: column; } #writerBox .info .texts b { font-size: 1.4em; } #writerBox .info .texts span { font-size: 1.125em; } #writerBox .social { display: flex; flex-direction: column; } #writerBox .social span { font-size: 1.125em; } #writerBox .social .links { display: flex; gap: 5px; } #writerBox .social .links a { text-decoration: none; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; width: 38px; height: 38px; align-items: center; color: #fff; font-size: 1.5em; justify-content: center; display: flex; } #writerBox .social .links a.whatsapp { background: #4cea58; } #writerBox .social .links a.whatsapp:hover { background: #48d153; } #writerBox .social .links a.twitter { background: #5ba9eb; } #writerBox .social .links a.twitter:hover { background: #4e91ca; } #writerBox .social .links a.facebook { background: #405698; } #writerBox .social .links a.facebook:hover { background: #35477d; } .categories { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-bottom: 35px; } @media (max-width: 1200px) { #articlesBoxes .items, #mainArticles .items { grid-template-columns: 1fr; } #articlesBoxes .items .item_box, #mainArticles .items .item_box { margin-bottom: 10px; } #articlesBoxes .mybutton, #mainArticles .mybutton { padding: 0; width: 100%; margin: 0; } #writerBox { flex-direction: column; gap: 5px; } #writerBox .info .texts b { font-size: 1.125em; } #writerBox .info .texts span { font-size: 1em; } #writerBox .info img { width: 65px; height: 65px !important; } #writerBox .social { align-items: center; } #writerBox .social span { font-size: 1em; } #writerBox .social .links a { width: 32px; height: 32px; font-size: 1.2em; } #mainArticles .items .item_box .inner_box .item_text { font-size: 0.875em; } #articlesBoxes .items .item_box > img { object-fit: contain; max-height: 150px; height: auto !important; } .categories { margin-bottom: 15px; } .categories a { font-size: 1em; } #articlesBoxes .items .item_box .item_text .title a { font-size: 1.125em; } #articlesBoxes .items .item_box time { font-size: 0.875em; } } /* gemel-faq accordion (the קרנות-pages FAQ module, mirrored from page.css) */ .gemel-faq{margin:24px 0} .gemel-faq details{border:1px solid #d9f7e8;border-radius:10px;margin:0 0 16px 0;background:#fff;overflow:hidden} .gemel-faq details:last-child{margin-bottom:0} .gemel-faq details[open]{box-shadow:0 4px 16px rgba(42,208,157,.15)} .gemel-faq summary{list-style:none;cursor:pointer;padding:18px 20px;margin:0;font-size:1.05em;font-weight:700;color:#000;display:flex;justify-content:space-between;align-items:center;gap:12px} .gemel-faq summary:hover{color:#2ad09d} .gemel-faq summary::-webkit-details-marker{display:none} .gemel-faq summary::after{content:"+";font-size:26px;line-height:1;color:#2ad09d;font-weight:400;flex:0 0 auto} .gemel-faq details[open] summary::after{content:"\2212"} .gemel-faq details[open] summary{border-bottom:1px solid #d9f7e8} .gemel-faq .faq-a{padding:14px 20px 20px;margin:0;color:#333;line-height:1.9}