Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <main style="">
    <h1>Free Accessibility OpenSource code</h1>
    <p>if you want to upgrade this OSC project, please contact me at ben@benjo.co.il</p>
  <p> :) have a nice day</p>
  <p style="max-width: 550px; float: left; direction: rtl; text-align: right;">חברים לכבוד חוק הנגישות הכנתי לכם סקין לרכיב נגישות במתנה, אני יודע שלפעמים במהלך פרויקט אין הרבה זמן לבזבז על עבודת HTML CSS "שחורה" :) ו-עיצוב, אז לפעמים משקיעים יותר בתכנות JS ופחות בשאר, אני לא אומר שזה פאר היצירה אבל זה סקין פשוט שמאגד התחלה של אוסף של המנגונונים הבסיסיים כדי להתחיל לתכנת פונקציות ב-JS כדי לחבר אליו ולפרויקט, זה אמור לרצות בעיקר את הלקוח שלכם. העיצוב הוא נקי ובסיסי כדי גם להתאים לנגישות וגם כדי להישאר יחסית ניטרלי כי בכל זאת תוסף נגישות לרוב הוא תמיד "תוסף" תוספת של משהו שלא בטוח שתכננו להוסיף לפרויקט.
מקווה שיצא לכם להשתמש בו , בהמשך אני יכניס בו גם פונקציות פשוטות ב-JS כדי שיעבוד ומי שרוצה להצטרף שיעשה fork.</p>
    
    <div class="freeAcc-component">
        <button title="לפתיחת תפריט נגישות" class="freeAcc-openButton freeAcc-ButtonType-A freeAcc-RTL" aria-selected="true">
            <svg version="1.1" id="freeAccEyeSVG" aria-hidden="true" class="freeAcc-openButton-img" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
                <path d="M48.7,24.3C48.3,23.9,41,16.1,31,13.7L33,9c0.2-0.5,0-1.2-0.5-1.4c-0.5-0.2-1.2,0-1.4,0.6l-2.2,5.1C27.6,13.1,26.4,13,25,13 C12,13,1.7,23.9,1.3,24.3c-0.4,0.4-0.4,1.1,0,1.5C1.7,26.1,9,33.9,19,36.3L17,41c-0.2,0.5,0,1.2,0.5,1.4c0.1,0.1,0.3,0.1,0.4,0.1 c0.4,0,0.8-0.2,1-0.6l2.2-5.1c1.3,0.2,2.5,0.3,3.9,0.3c0.4,0,0.7,0,1.1,0l0,0l0,0c12.5-0.6,22.2-10.9,22.7-11.3 C49.1,25.3,49.1,24.7,48.7,24.3z M34.2,33l5.6-13.2c1,0.6,1.9,1.2,2.7,1.8l-3.9,9.2C37.2,31.7,35.8,32.4,34.2,33z M27.7,34.8 l7.4-17.4c1,0.4,1.9,0.9,2.8,1.4L31.5,34C30.3,34.3,29,34.6,27.7,34.8z M3.6,25c2.5-2.4,11.3-9.9,21.4-9.9c1,0,2,0.1,3,0.2l-0.8,1.9 c-0.7-0.2-1.4-0.3-2.2-0.3c-4.5,0-8.1,3.7-8.1,8.2c0,3,1.6,5.6,3.9,7l-1,2.3C12,32.5,5.7,27,3.6,25z M22,34.7l8.1-19.1 c1,0.2,2.1,0.6,3.1,0.9l-7.8,18.3c-0.1,0-0.2,0-0.4,0C24,34.9,23,34.9,22,34.7z M41.7,28.9l2.5-5.8c1,0.8,1.7,1.5,2.2,2 C45.6,25.8,43.9,27.3,41.7,28.9z"></path>
            </svg><span>נגישות</span></button>
        <div class="freeAcc-inner freeAccOpen" aria-expanded="true" aria-label="ברוכים הבאים לרכיב הנגישות" tabindex="0">
            <div class="freeAcc-header-container freeAcc-bg-color">
                <div class="freeAcc-welcomeYou">
                    <svg version="1.1" id="freeAccEyeSVG" aria-hidden="true" class="freeAcc-openButton-img" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
                        <path d="M48.7,24.3C48.3,23.9,41,16.1,31,13.7L33,9c0.2-0.5,0-1.2-0.5-1.4c-0.5-0.2-1.2,0-1.4,0.6l-2.2,5.1C27.6,13.1,26.4,13,25,13 C12,13,1.7,23.9,1.3,24.3c-0.4,0.4-0.4,1.1,0,1.5C1.7,26.1,9,33.9,19,36.3L17,41c-0.2,0.5,0,1.2,0.5,1.4c0.1,0.1,0.3,0.1,0.4,0.1 c0.4,0,0.8-0.2,1-0.6l2.2-5.1c1.3,0.2,2.5,0.3,3.9,0.3c0.4,0,0.7,0,1.1,0l0,0l0,0c12.5-0.6,22.2-10.9,22.7-11.3 C49.1,25.3,49.1,24.7,48.7,24.3z M34.2,33l5.6-13.2c1,0.6,1.9,1.2,2.7,1.8l-3.9,9.2C37.2,31.7,35.8,32.4,34.2,33z M27.7,34.8 l7.4-17.4c1,0.4,1.9,0.9,2.8,1.4L31.5,34C30.3,34.3,29,34.6,27.7,34.8z M3.6,25c2.5-2.4,11.3-9.9,21.4-9.9c1,0,2,0.1,3,0.2l-0.8,1.9 c-0.7-0.2-1.4-0.3-2.2-0.3c-4.5,0-8.1,3.7-8.1,8.2c0,3,1.6,5.6,3.9,7l-1,2.3C12,32.5,5.7,27,3.6,25z M22,34.7l8.1-19.1 c1,0.2,2.1,0.6,3.1,0.9l-7.8,18.3c-0.1,0-0.2,0-0.4,0C24,34.9,23,34.9,22,34.7z M41.7,28.9l2.5-5.8c1,0.8,1.7,1.5,2.2,2 C45.6,25.8,43.9,27.3,41.7,28.9z"></path>
                    </svg><span>נגישות אתרים</span></div>
                <button class="freeAcc-closeButton freeAcc-ButtonType-B freeAcc-RTL" title="סוגר תפריט נגישות"><span aria-hidden="true">×</span> סגור</button>
            </div>
            <div class="freeAcc-menu" role="navigation">
                <ul role="menu" aria-label="תפריט שינוי גודל גופן" class="freeAcc-menuTypeA">
                    <li role="menuitem">
                        <button class="freeAcc-bigText freeAcc-ButtonType-C" title="מגדיל את הטקסט בעמוד">
                            <svg version="1.1" id="freeAccBigTextSVG" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 34" enable-background="new 0 0 50 34" xml:space="preserve">
                                <g>
                                    <polygon points="42.4,0.8 34.7,6.8 37,8.6 40.2,6 40.2,13 44.5,13 44.5,6 47.8,8.6 50,6.8 "></polygon>
                                    <polygon points="42.4,33.2 50,27.3 47.8,25.6 44.5,28.1 44.5,21.2 40.2,21.2 40.2,28.1 37,25.6 34.7,27.3 "></polygon>
                                    <path d="M30.1,33.2H23L10.7,15.8c-1.9,1-3,3.1-3.4,6.2L6,33.2H0L1.3,22c0.6-5.2,2.7-8.7,6.3-10.5L0.1,1h7.1l10.3,14.4 c1.3-0.8,2.1-1.8,2.6-2.8s0.9-2.8,1.2-5.1L22.1,1h6l-0.7,6.6c-0.3,2.8-1,5.2-1.9,7c-1,1.8-2.6,3.5-5,4.9L30.1,33.2z"></path>
                                </g>
                            </svg><span class="freeAcc-spanType-A">הגדלת טקסט</span></button>
                    </li>
                    <li role="menuitem" class="freeAcc-borderStyle">
                        <button class="freeAcc-smallText freeAcc-ButtonType-C" title="מקטין את הטקסט בעמוד">
                            <svg version="1.1" id="freeAccSmallTextSVG" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 34" enable-background="new 0 0 50 34" xml:space="preserve">
                                <g>
                                    <polygon points="42.4,14.9 50,8.9 47.8,7.2 44.5,9.7 44.5,2.8 40.2,2.8 40.2,9.7 37,7.2 34.7,8.9 "></polygon>
                                    <polygon points="42.4,19.1 34.7,25 37,26.7 40.2,24.2 40.2,31.1 44.5,31.1 44.5,24.2 47.8,26.7 50,25 "></polygon>
                                    <path d="M30.1,33.1H23L10.7,15.7c-1.9,1-3,3.1-3.4,6.2L6,33.1H0L1.3,22c0.6-5.2,2.7-8.7,6.3-10.5L0.1,0.9h7.1l10.3,14.4 c1.3-0.8,2.1-1.8,2.6-2.8s0.9-2.8,1.2-5.1l0.8-6.5h6l-0.7,6.6c-0.3,2.8-1,5.2-1.9,7c-1,1.8-2.6,3.5-5,4.9L30.1,33.1z"></path>
                                </g>
                            </svg><span class="freeAcc-spanType-A">הקטנת טקסט</span></button>
                    </li>
                    <li role="menuitem">
                        <button class="freeAcc-disableText freeAcc-ButtonType-C" title="מאפס גודל טקסט לגודל המקורי">
                            <svg version="1.1" id="freeAccTextDefultSVG" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 34" enable-background="new 0 0 50 34" xml:space="preserve">
                                <g>
                                    <polygon points="42.4,19.9 50,13.9 47.8,12.2 44.5,14.7 44.5,7.8 40.2,7.8 40.2,14.7 37,12.2 34.7,13.9 "></polygon>
                                    <polygon points="42.4,14.1 34.7,20 37,21.7 40.2,19.2 40.2,26.1 44.5,26.1 44.5,19.2 47.8,21.7 50,20 "></polygon>
                                    <path d="M30.1,33.1H23L10.7,15.7c-1.9,1-3,3.1-3.4,6.2L6,33.1H0L1.3,22c0.6-5.2,2.7-8.7,6.3-10.5L0.1,0.9h7.1l10.3,14.4 c1.3-0.8,2.1-1.8,2.6-2.8s0.9-2.8,1.2-5.1l0.8-6.5h6l-0.7,6.6c-0.3,2.8-1,5.2-1.9,7c-1,1.8-2.6,3.5-5,4.9L30.1,33.1z"></path>
                                </g>
                            </svg><span class="freeAcc-spanType-A">איפוס טקסט</span></button>
                    </li>
                </ul>
                <ul role="menu" aria-label="תפריט שינוי צבע רקע" class="freeAcc-menuTypeA">
                    <li role="menuitem">
                        <button class="freeAcc-darkContrast freeAcc-ButtonType-C" title="משנה את צבעי הרקע והטקסט לצורך התאמה לניגודיות כהה">
                            <svg version="1.1" id="freeAccDarkColorSVG" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
                                <g id="_x31_4_3_">
                                    <path d="M49,24.6c-0.1-0.2-2.7-3.8-7-7.4c-2.5-2.2-5.1-3.9-7.6-5.1C31.2,10.5,28,9.7,25,9.7c-3.1,0-6.2,0.8-9.4,2.4 c-2.5,1.2-5.1,3-7.6,5.1c-4.2,3.7-6.9,7.3-7,7.4c-0.2,0.2-0.2,0.5,0,0.8c0.1,0.2,2.7,3.8,7,7.4c2.5,2.2,5.1,3.9,7.6,5.1 c3.2,1.6,6.4,2.4,9.4,2.4c3.1,0,6.2-0.8,9.4-2.4c2.5-1.2,5.1-3,7.6-5.1c4.2-3.7,6.9-7.3,7-7.4C49.1,25.2,49.1,24.8,49,24.6z M25,16 c4.9,0,9,4,9,9s-4,9-9,9s-9-4-9-9S20.1,16,25,16z"></path>
                                    <circle cx="25" cy="25" r="4"></circle>
                                </g>
                            </svg><span class="freeAcc-spanType-A">ניגודיות כהה</span></button>
                    </li>
                    <li role="menuitem" class="freeAcc-borderStyle">
                        <button class="freeAcc-brightContrast freeAcc-ButtonType-C" title="משנה את צבעי הרקע והטקסט לצורך התאמה לניגודיות בהירה">
                            <svg version="1.1" id="freeAccBrightColorSVG" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 34" enable-background="new 0 0 50 34" xml:space="preserve">
                                <g>
                                    <path d="M49.4,16.4c-0.1-0.2-2.7-3.9-7.1-7.6C40,6.8,37.4,5,34.6,3.6c-3.3-1.6-6.5-2.5-9.6-2.5c-3.2,0-6.3,0.8-9.6,2.5 C12.6,5,10,6.8,7.7,8.8c-1.7,1.5-4.3,4-6.9,7.3l-0.1,0.1c-0.4,0.4-0.4,0.9-0.1,1.4c0.1,0.2,2.8,3.9,7.1,7.6c2.4,2.2,5,3.9,7.7,5.2 c3.3,1.6,6.5,2.5,9.6,2.5c3.2,0,6.3-0.8,9.6-2.4c2.4-1.2,5-2.9,7.7-5.2c1.7-1.5,4.3-4,6.9-7.3l0.2-0.2 C49.6,17.3,49.6,16.7,49.4,16.4z M48.6,17.1c0,0-0.1,0.1-0.1,0.1c-2.6,3.2-5.1,5.7-6.8,7.2c-2.6,2.2-5.2,3.9-7.5,5 C31,31,28,31.8,25,31.8c-3,0-6.1-0.8-9.2-2.4c-2.6-1.2-5.1-2.9-7.5-5c-4.1-3.4-6.7-6.9-6.9-7.3C1.4,17,1.3,17,1.4,17 c0,0,0.1-0.1,0.2-0.2c2.6-3.2,5.1-5.7,6.8-7.2c2.3-2,4.8-3.7,7.5-5.1C19,2.9,22,2.1,25,2.1c3,0,6.1,0.8,9.2,2.3 c2.7,1.4,5.2,3.1,7.5,5.1c4.1,3.4,6.6,6.8,6.9,7.2C48.6,16.9,48.6,17.1,48.6,17.1z"></path>
                                    <path d="M25,7.5c-5.2,0-9.5,4.3-9.5,9.5s4.3,9.5,9.5,9.5s9.5-4.3,9.5-9.5S30.2,7.5,25,7.5z M25,25.5c-4.7,0-8.5-3.8-8.5-8.5 c0-4.7,3.8-8.5,8.5-8.5c4.7,0,8.5,3.8,8.5,8.5C33.5,21.7,29.7,25.5,25,25.5z"></path>
                                    <path d="M25,12.5c-2.5,0-4.5,2-4.5,4.5s2,4.5,4.5,4.5s4.5-2,4.5-4.5S27.5,12.5,25,12.5z M25,20.5c-1.9,0-3.5-1.6-3.5-3.5 s1.6-3.5,3.5-3.5s3.5,1.6,3.5,3.5S26.9,20.5,25,20.5z"></path>
                                </g>
                            </svg><span class="freeAcc-spanType-A">ניגודיות בהירה</span></button>
                    </li>
                    <li role="menuitem">
                        <button class="freeAcc-bigText freeAcc-ButtonType-C" title="משנה את צבעי הרקע והטקסט לצבעי ברירת המחדל">
                            <svg version="1.1" id="freeAccDefultColorSVG" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
                                <path d="M49.9,24.6c-0.1-0.2-2.8-3.9-7.2-7.7c-1.4-1.2-2.9-2.3-4.3-3.3l6.5-6.5l-2-2l-7,7c-0.4-0.2-0.7-0.4-1.1-0.6 c-3.3-1.6-6.6-2.4-9.8-2.4s-6.5,0.8-9.8,2.4c-2.6,1.3-5.3,3.1-7.9,5.3c-4.4,3.8-7.1,7.6-7.2,7.7c-0.2,0.2-0.2,0.6,0,0.8 c0.1,0.2,2.8,3.9,7.2,7.7c1.4,1.2,2.9,2.3,4.3,3.3l-6.5,6.5l2,2l7-7c0.4,0.2,0.7,0.4,1.1,0.6c3.3,1.6,6.6,2.4,9.8,2.4 s6.5-0.8,9.8-2.4c2.6-1.3,5.3-3.1,7.9-5.3c4.4-3.8,7.1-7.6,7.2-7.7C50,25.2,50,24.8,49.9,24.6z M15.7,25c0-5.1,4.2-9.3,9.3-9.3 c2.1,0,4,0.7,5.5,1.8l-3.8,3.8c-0.5-0.3-1.1-0.4-1.8-0.4c-2.3,0-4.1,1.8-4.1,4.1c0,0.6,0.2,1.2,0.4,1.8l-3.8,3.8 C16.4,29,15.7,27.1,15.7,25z M25,34.3c-2.1,0-4-0.7-5.5-1.8l3.8-3.8c0.5,0.3,1.1,0.4,1.8,0.4c2.3,0,4.1-1.8,4.1-4.1 c0-0.6-0.2-1.2-0.4-1.8l3.8-3.8c1.1,1.5,1.8,3.5,1.8,5.5C34.3,30.1,30.1,34.3,25,34.3z"></path>
                            </svg><span class="freeAcc-spanType-A">איפוס ניגודיות</span></button>
                    </li>
                </ul>
                <ul role="menu" aria-label="תפריט שינויים נוספים" class="freeAcc-menuTypeB">
                    <li role="menuitem">
                        <button class="freeAcc-boldHeadline freeAcc-ButtonType-D">הדגשת כותרות</button>
                    </li>
                    <li role="menuitem">
                        <button class="freeAcc-boldLinks freeAcc-ButtonType-D">הדגשת קישורים</button>
                    </li>
                    <li role="menuitem">
                        <button class="freeAcc-bigText freeAcc-ButtonType-D">שנה לגופן נגיש/קריא</button>
                    </li>
                </ul>
                <div class="freeAccCredit-container">
                    <ul role="menu" aria-label="תפריט משוב והצהרת נגישות" class="freeAcc-menuTypeC">
                        <li role="menuitem">
                            <button class="freeAcc-DisableAll freeAcc-ButtonType-F">בטל/אפס נגישות</button>
                        </li>
                        <li role="menuitem">
                            <button class="freeAcc-goToAccPage freeAcc-ButtonType-E">הצהרת נגישות<span class="freeAcc-iconFloat" aria-hidden="true">»</span></button>
                        </li>
                        <li role="menuitem">
                            <button class="freeAcc-reportProblem freeAcc-ButtonType-E">דווח על בעיית נגישות<span class="freeAcc-iconFloat" aria-hidden="true">»</span></button>
                        </li>
                    </ul><a href="https://codepen.io/benjokoren/pen/QqyYaR" class="freeAcc-credit">Accessibility OpenSource</a></div>
            </div>
        </div>
    </div>
    <main>
            
          
!
            
              /* start of component style RTL */
main {
  direction: rtl;
}
h1, p {
  text-align: left;
  font-family: arial;
}

.freeAcc-component a, .freeAcc-component button, .freeAcc-component a:hover, .freeAcc-component button:hover, .freeAcc-component a:focus, .freeAcc-component button:focus, button[class^="freeAcc"], button[class^="freeAcc"]:hover, button[class^="freeAcc"]:focus, span.freeAccBtnName, .freeAcc-component span, .freeAcc-component svg {
    transition: all .3s ease-in;
}

.freeAcc-component button {
    cursor: pointer;
    border: none;
    background-color: transparent;
    margin: 0px;
    padding: 0px;   
    font-family: Arial,Helvetica Neue,Helvetica,sans-serif; 
}

button.freeAcc-ButtonType-A {
    background-color: #000;
}

.freeAcc-bg-color {
    background-color: #000;
}

button.freeAcc-openButton {
    font-size: 24px;
    color: #fff;
    padding: 3px 15px;
    line-height: 100%;
    position: fixed;
    z-index: 2147483645;
    right: 0;
    top: 0;
}

button.freeAcc-openButton:focus {
    outline: 2px solid red;
}

button.freeAcc-openButton svg {
    width: 26px;
    fill: #fff;
    margin-left: 6px;
}

button.freeAcc-openButton:hover > span, button.freeAcc-openButton:hover > svg, button.freeAcc-openButton:focus > span, button.freeAcc-openButton:focus > svg {
    color: #fff900;
    fill: #fff900;
}


button.freeAcc-ButtonType-D {
    background-color: #dedede;
    font-size: 20px;
    width: 100%;
    padding: 5px;
    margin: 0px 0px 5px 0px;
    border: 1px solid #cecece;
    border-radius: 3px;
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.65);
}

button.freeAcc-closeButton {
    color: #ffffff;
    font-size: 18px;
    padding: 1px 10px;
    line-height: 27px;
    float: left;
}

button.freeAcc-closeButton span {
    font-size: 26px;
    position: relative;
    top: 4px;
}

.freeAcc-header-container {
    width: 300px;
    position: absolute;
    left: 0px;
    top: 0px;
    min-height: 33px;
}

.freeAcc-menu {
    width: 300px;
}

button.freeAcc-openButton span {
    position: relative;
    top: -5px;
}

img.freeAcc-openButton-img {
    width: 30px;
}

.freeAcc-welcomeYou {
    color: #ffffff;
    font-size: 18px;
    padding: 1px 10px;
    line-height: 27px;
    float: right;
}

.freeAcc-welcomeYou svg {
    width: 26px;
    fill: #fff;
    position: relative;
    margin-left: 5px;
    top: 3px;
}

.freeAcc-welcomeYou span {
    display: inline-block;
    position: relative;
    top: -4px;
}

.freeAcc-welcomeYou img {
    position: relative;
    top: -1px;
}

.freeAcc-inner {
    width: 0px;
    height: 100%;
    padding: 45px 0px;
    background-color: #f9f9f9;
    border: 2px solid #000000;
    text-align: center;
    position: fixed;
    right: 0;
    top: 0;
    box-sizing: border-box;
    box-shadow: 5px 0px 15px 0px rgba(0,0,0,0.75);
    z-index: 2147483647;
    overflow: hidden;
    opacity: 0;
    transition: all 0.5s ease;
}

.freeAccOpen {
    width: 300px;
    opacity: 1;
}

.freeAcc-component {
    font-family: arial;
}

ul.freeAcc-menuTypeA {
    margin: 0px;
    padding: 0px 0px 5px 0px;
    list-style: none;
    display: inline-block;
    border-bottom: 1px solid #c0c0c0;
    width: 90%;
}
ul.freeAcc-menuTypeB {
    margin: 0px;
    padding: 0px 0px 5px 0px;
    list-style: none;
    display: inline-block;
    width: 90%;
}

ul.freeAcc-menuTypeA li {
    padding: 5px 0px;
    margin: 4px;
    float: right;
}

button.freeAcc-ButtonType-C {
    padding: 5px;
}

.freeAcc-ButtonType-C svg {
    width: 50px;
    height: 40px;
}

li.freeAcc-borderStyle {
    border-right: 1px solid #c0c0c0;
    border-left: 1px solid #c0c0c0;
}

img.freeAcc-img {
    width: 40px;
}

span.freeAcc-spanType-A {
    font-size: 12px;
    display: block;
}

span.freeAcc-spanType-A {
    font-size: 13px;
    display: block;
}

.freeAcc-RTL {
    text-align: right;
    direction: rtl;
}

.freeAccCredit-container {
    position: absolute;
    bottom: 0;
    width: 300px;
    padding: 0px;
}

ul.freeAcc-menuTypeC {
    margin: 0px;
    padding: 0px;
    list-style: none;
    display: inline-block;
    width: 100%;
}

button.freeAcc-DisableAll {
    width: 100%;
    background-color: #ff3737;
    color: #fff;
    font-size: 20px;
    padding: 10px;
    position: relative;
    z-index: 1;
}

button.freeAcc-DisableAll:hover, button.freeAcc-DisableAll:focus {
    outline: 3px solid #000;
    background-color: #ba0000;
}

button.freeAcc-ButtonType-E {
    text-align: right;
    width: 100%;
    padding: 10px 15px;
    border-bottom: 2px solid #000;
    font-size: 16px;
    background-color: #fff;
    position: relative;
}

button.freeAcc-ButtonType-E:hover, button.freeAcc-ButtonType-E:focus {
    background-color: #353535;
    color: #fff;
    outline: 3px solid #000;
}

span.freeAcc-iconFloat {
    position: absolute;
    left: 10px;
    top: 9px;
    background-color: #000;
    color: #fff;
    width: 26px;
    height: 26px;
    text-align: center;
    border-radius: 50px;
    font-size: 24px;
    line-height: 22px;
}

a.freeAcc-credit {
    display: block;
    width: 100%;
    background-color: #000;
    margin: 0px;
    color: #ffffff;
    padding: 5px 10px;
    font-size: 14px;
}

a.freeAcc-credit:hover {
    text-decoration: underline;
    color: #fff900;
}

button.freeAcc-ButtonType-B:hover {
    color: #fff900;
}

button.freeAcc-ButtonType-B:focus {
    outline: 3px dotted #fff;
    color: #fff900;
}

button.freeAcc-ButtonType-C:hover {
    background-color: #eeeeee;
    outline: 1px solid #cccccc;
}

button.freeAcc-ButtonType-C:focus {
    outline: 3px dotted #000;
    background-color: #eeeeee;
}

button.freeAcc-ButtonType-D:hover {
    background-color: #fff;
}

button.freeAcc-ButtonType-D:focus {
    outline: 3px solid #000;
    background-color: #fff;
}


/* end of component style RTL */

/* start of costume elments add to site */

span.freeAccBtnName {
    overflow: hidden;
    width: 0px;
    height: 20px;
    display: block;
    position: absolute;
    padding: 0;
    top: 6px;
    left: 29px;
    background-color: #000;
    z-index: 0;
    text-align: right;
    font-size: 14px;
    font-weight: 100;
    line-height: 14px;
    border-radius: 0px 10px 10px 0px;
    opacity: 0;
}

span.freeAccBtnName.freeAccShow {
    padding: 3px 10px;
    width: 100px;
    opacity: 1;
}

svg#freeAccShowSVG, svg#freeAccHideSVG {
    width: 23px;
}

svg#freeAccStopSVG {
    width: 12px;
}

svg#freeAccPlaySVG {
    width: 12px;
    left: 3px;
}

button.freeAccBtnStyle:hover > svg.freeAccSVG, button.freeAccBtnStyle:focus > svg.freeAccSVG{
    fill: #fff900;
}

button.freeAccBtnStyle {
    position: absolute;
    z-index: 1;
    background-color: #000;
    border: 0px;
    width: 32px;
    height: 32px;
    border-radius: 50px;
    text-align: center;
    color: #ffffff;
    font-size: 16px;
    line-height: 20px;
    padding: 0px;
    margin: 0px;
}

button.freeAccBtnStyle:hover, button.freeAccBtnStyle:focus {
    color: #fff900;
}

button.freeAccVideo {
    left: 15px;
    bottom: 15px;
}

button.freeAccSlider {
    left: 15px;
    top: 0px;
}

button.freeAccLogoSlider {
    left: 15px;
    top: -75px;
}

button.freeAccTeamSlider {
    left: 15px;
    top: -76px;
}

svg.freeAccSVG {
    fill: #fff;
    transition: all 0.5s ease-in-out;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}


/* this website spasific costum changes after acc mode */

ul.freeAccSliderReplace1, ul.freeAccLogoSliderReplace {
    list-style: none;
    padding: 0px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    max-width: 1120px;
    margin: 0px auto;
}

ul.freeAccTeamSliderReplace {
    list-style: none;
    padding: 0px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 1120px;
    margin: 0px auto;
    
}


ul.freeAccSliderReplace1 li, ul.freeAccLogoSliderReplace li {
    max-width: 280px;
    padding: 0px 15px 15px 0px;
}

ul.freeAccSliderReplace1 li img {
    width: 100%;
}

ul.freeAccSliderReplace1 li h3 {
    margin: 5px 0px 0px 0px;
    padding: 0px;
    line-height: 30px;
    color: #000;
    font-size: 22px;
    font-family: Arial,Helvetica Neue,Helvetica,sans-serif; 
}

ul.freeAccSliderReplace1 li p {
    font-size: 14px;
    line-height: 18px;
    color: #000000;
    font-family: Arial,Helvetica Neue,Helvetica,sans-serif; 
}

ul.freeAccTeamSliderReplace > li > .member h3, ul.freeAccTeamSliderReplace > li > .member > .bottomember, ul.freeAccTeamSliderReplace > li > .member h4 {
    opacity: 1;
    font-family: Arial,Helvetica Neue,Helvetica,sans-serif; 
}

ul.freeAccTeamSliderReplace > li > .member h3 {
    font-size: 18px;
}

ul.freeAccTeamSliderReplace > li > .member h4 {
    font-size: 16px;
}


@media screen and (max-width: 670px) {
    button.freeAccVideo {
        display: none;
    }
    
    ul.freeAccSliderReplace1 {
        width: 300px;
    }
    
    button.freeAccSlider {
        left: 45px;
        top: -50px;
        z-index: 2;
        
    }
    
    button.freeAccLogoSlider {
        left: -15px;
    }
}
            
          
!
            
              $(document).on('click', ".freeAcc-openButton", function() {
    $(".freeAcc-inner").toggleClass("freeAccOpen").attr('aria-expanded', 'true').attr('tabindex', '0');;
    $(this).attr('aria-selected', 'true');
});

$(document).on('click', ".freeAcc-closeButton", function() {
    $(".freeAcc-inner").toggleClass("freeAccOpen").attr('aria-expanded', 'false').attr('tabindex', '-1');
    $(".freeAcc-openButton").attr('aria-selected', 'false');
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console