Top
Home / Web accessibility – WCAG standard
Web accessibility – WCAG standard
Web accessibility – WCAG standard
FEW WORDS ABOUT WEB ACCESSIBILITY
Web accessibility aims at enabling all users to have equal access to information and functionalities on the web. More specifically, web accessibility means that people with all abilities and disabilities can perceive, understand, navigate and interact with the Web.
Accessibility of digital information is a technically and legally ensured right in national and international level.
Web accessibility benefits people without disabilities too (the elderly, injured etc). The main principle of web accessibility is the design of flexible software, in order to satisfy a great variety of needs, preferences and user behaviors.
It is important to cover all forms of disabilities that may affect the navigation:
Visual: font size adjustment & color combinations, alternative text for images, text to speech conversion
Acoustic: Alternative text for audio files and video.
Physical: Navigation using only the keyboard or only the mouse.
Cognitive – mental: Plain & simplified content layout.
Using international technical standards, the accessibility bar “Eucleides” offers the above possibilities, providing new navigation possibilities for people with disabilities, covering some of their needs.
*
a) OHE: Convention on Rights for people with disability
b) Ε.Ε.: 1083/2006/ΕΚ
c) Greece: Ν.4074/2012, N. 3979/2011
d) W3C: WCAG 2.0.
WEB ACCESSIBILITY BAR USER GUIDE
The accessibility bar “Eucleides” is activated or deactivated by clicking the realative icon or by pressing the “0” button. Hovering the mouse for 2 seconds above each icon, will display details for the corresponding functionality. The bar consists of four (4) menu:
Information
User guide
The user guide describes all the functionality and choices of the accessibility bar. It is enabled and disabled by clicking the corresponding icon or the Shift + “5” button.
Information
A quick view for the web accessibility.
Send feedback
Send us your comments from your experience of using the accessibility bar.
Page shortcuts
Navigate through TAB
Use the tab button to highlight and navigate through the variant spots of intrest of the webpage (links, buttons, input fields etc). Choose them by pressing the “Enter” button as an alternative for the left click. The first navigation elements are those of the accessibility bar.
Keyboard shortcuts
Enable or disable some of the bar functionality through sortcuts from the keyboard. Navigate to the webpages of the site through shortcuts from the keyboard.
Website structure
All the main parts of the webpage (header, menu, section, form, footer) are automatically listed here. You can navigate to them by clicking the corresponding underlined element. All the headers of the webpage (h1, h2, h3, h4, h5, h6) are automatically listed here. You can navigate to them by clicking the corresponding underlined element.
Links
All website links are automatically listed here. They are grouped into two categories: Internal and external. External links deliberately open in the same tab, not in a new one.
Ανάγνωση σελίδας
Text to speech
Click the “play” icon and then click the text you want to hear. Click the “Stop” icon or the “Escape” button to stop. The text that is about to be read cannot exceed 2000 characters.
Change contrast
The webpage can be displayed in high contrast mode (white letters, yellow headers and white underlined links on black background) or decolorized, in shades of gray. The high contrast functionality is enabled by clicking the icon or by pressing the Shift + “3” button. It is disabled from the reset icon or by pressing the Shift + “4” button. The grayscale functionality it is enabled from the icon or the keyboard button Shift + “3” (shortcut). It is disabled by clicking the reset icon or the keyboard shortcut Shift + “3.
Font size
Increase the font size of every element of the webpage by 2 pixels by clicking the icon or the keyboard button Shift + “2” button.
Highlight text
Highlight the text you are reading by passing your mouse through each word. This text will appear on yellow background; If high contrast is enabled, text will appear on blue background. Stop highlighting process by clicking the highlight button again. Remove all highlight background by clicking the reset button.
Settings
When the icons are highlighted with yellow color, it means that the corresponding functionality that is enabled, stored and is executed every time the page loads.
Settings information
Read some more information about your preferences on the accessibility bar.
Reset settings
The page is reloaded, all of your preferences are removed and the accessibility bar is restored to default.
Top
/* content animation */
.taptap-content-animation-active {
-webkit-transform:scale(0.9) ;
transform:scale(0.9) ;
opacity:;
/* blur effect (unless hidden on non-mobile devices) */
-webkit-filter:blur(px);
filter:blur(px);
}
/* if push down site */
/* hide taptap between resolutions */
@media ( min-width:px) and (max-width:px) {
.taptap-menu-button-wrapper,
.taptap-logo-wrapper,
.taptap-header,
.taptap-header-bg-image,
.taptap-background-color,
.taptap-background-image,
.taptap-background-overlay,
.taptap-main-wrapper,
.taptap-woo-button-wrapper,
.taptap-search-wrapper,
.taptap-search-button-wrapper,
.taptap-woo-cart-wrapper,
.taptap-search-background,
.taptap-search-overlay { display:none; }
html { margin-top:0 !important; }
}
/* hide theme menu */
/**************************************************************
*** CUSTOM COLORS + SETTINGS
**************************************************************/
/* show hovers on non-touch devices only */
/* menu label */
.taptap-menu-button-wrapper:hover .taptap-menu-button-label { color:inherit; }
/* logo hover */
.taptap-logo a:hover { color:; }
/* search label hover */
.taptap-search-button-wrapper:hover .taptap-search-button-label { color:; }
/* search button hover*/
.taptap-search-button-wrapper:hover .taptap-search-button { border-color:#ddd; }
.taptap-search-button-wrapper:hover .taptap-search-button::after { background-color:#ddd; }
/* search close button hover */
.taptap-search-close-wrapper:hover .taptap-search-close-inner::before,
.taptap-search-close-wrapper:hover .taptap-search-close-inner::after { background-color:#ddd; }
/* search clear field button hover */
.taptap-search-clear-wrapper:hover .taptap-search-clear { background-color:#666; }
/* current menu item hover */
.taptap-by-bonfire ul li.current-menu-item.full-item-arrow-hover > a,
.taptap-by-bonfire ul li.current-menu-item > a:hover { color:; }
/* current submenu item hover */
.taptap-by-bonfire .sub-menu .current-menu-item.full-item-arrow-hover > a,
.taptap-by-bonfire .sub-menu .current-menu-item > a:hover { color:; }
/* menu item icon hover */
.taptap-by-bonfire ul li a:hover i,
.taptap-by-bonfire ul li.full-item-arrow-hover a i { color:; }
/* submenu item icon hover */
.taptap-by-bonfire .sub-menu a:hover i,
.taptap-by-bonfire .sub-menu .full-item-arrow-hover a i { color:; }
/* menu item hovers */
.taptap-by-bonfire ul li.full-item-arrow-hover > a,
.taptap-by-bonfire ul li a:hover { color:#E4D7D7; }
.taptap-by-bonfire ul.sub-menu li.full-item-arrow-hover > a,
.taptap-by-bonfire ul.sub-menu li a:hover { color:#77787C; }
/* submenu arrow hover */
.full-item-arrow-hover > .taptap-sub-arrow .taptap-sub-arrow-inner::before,
.full-item-arrow-hover > .taptap-sub-arrow .taptap-sub-arrow-inner::after,
.taptap-sub-arrow:hover .taptap-sub-arrow-inner::before,
.taptap-sub-arrow:hover .taptap-sub-arrow-inner::after { background-color:#fff; }
/* menu button hover */
.taptap-menu-button-wrapper:hover .taptap-main-menu-button:before,
.taptap-menu-button-wrapper:hover .taptap-main-menu-button div.taptap-main-menu-button-middle:before,
.taptap-menu-button-wrapper:hover .taptap-main-menu-button:after,
.taptap-menu-button-wrapper:hover .taptap-main-menu-button-two:before,
.taptap-menu-button-wrapper:hover .taptap-main-menu-button-two div.taptap-main-menu-button-two-middle:before,
.taptap-menu-button-wrapper:hover .taptap-main-menu-button-two:after,
.taptap-menu-button-wrapper:hover .taptap-main-menu-button-three:before,
.taptap-menu-button-wrapper:hover .taptap-main-menu-button-three div.taptap-main-menu-button-three-middle:before,
.taptap-menu-button-wrapper:hover .taptap-main-menu-button-three:after,
.taptap-menu-button-wrapper:hover .taptap-main-menu-button-four:before,
.taptap-menu-button-wrapper:hover .taptap-main-menu-button-four div.taptap-main-menu-button-four-middle:before,
.taptap-menu-button-wrapper:hover .taptap-main-menu-button-four:after,
.taptap-menu-button-wrapper:hover .taptap-main-menu-button-five:before,
.taptap-menu-button-wrapper:hover .taptap-main-menu-button-five div.taptap-main-menu-button-five-middle:before,
.taptap-menu-button-wrapper:hover .taptap-main-menu-button-five:after,
.taptap-menu-button-wrapper:hover .taptap-main-menu-button-six:before,
.taptap-menu-button-wrapper:hover .taptap-main-menu-button-six:after {
background-color:#ddd;
}
/* menu bars hover (if menu opened) */
.taptap-menu-active:hover .taptap-main-menu-button:before,
.taptap-menu-active:hover .taptap-main-menu-button div.taptap-main-menu-button-middle:before,
.taptap-menu-active:hover .taptap-main-menu-button:after,
.taptap-menu-active:hover .taptap-main-menu-button-two:before,
.taptap-menu-active:hover .taptap-main-menu-button-two div.taptap-main-menu-button-two-middle:before,
.taptap-menu-active:hover .taptap-main-menu-button-two:after,
.taptap-menu-active:hover .taptap-main-menu-button-three:before,
.taptap-menu-active:hover .taptap-main-menu-button-three div.taptap-main-menu-button-three-middle:before,
.taptap-menu-active:hover .taptap-main-menu-button-three:after,
.taptap-menu-active:hover .taptap-main-menu-button-four:before,
.taptap-menu-active:hover .taptap-main-menu-button-four div.taptap-main-menu-button-four-middle:before,
.taptap-menu-active:hover .taptap-main-menu-button-four:after,
.taptap-menu-active:hover .taptap-main-menu-button-five:before,
.taptap-menu-active:hover .taptap-main-menu-button-five div.taptap-main-menu-button-five-middle:before,
.taptap-menu-active:hover .taptap-main-menu-button-five:after,
.taptap-menu-active:hover .taptap-main-menu-button-six:before,
.taptap-menu-active:hover .taptap-main-menu-button-six:after {
background-color:;
}
/* MENU BUTTON */
/* menu button opacity */
.taptap-menu-button-wrapper { opacity:; }
/* menu button */
.taptap-main-menu-button:before,
.taptap-main-menu-button div.taptap-main-menu-button-middle:before,
.taptap-main-menu-button:after,
.taptap-main-menu-button-two:before,
.taptap-main-menu-button-two div.taptap-main-menu-button-two-middle:before,
.taptap-main-menu-button-two:after,
.taptap-main-menu-button-three:before,
.taptap-main-menu-button-three div.taptap-main-menu-button-three-middle:before,
.taptap-main-menu-button-three:after,
.taptap-main-menu-button-four:before,
.taptap-main-menu-button-four div.taptap-main-menu-button-four-middle:before,
.taptap-main-menu-button-four:after,
.taptap-main-menu-button-five:before,
.taptap-main-menu-button-five div.taptap-main-menu-button-five-middle:before,
.taptap-main-menu-button-five:after,
.taptap-main-menu-button-six:before,
.taptap-main-menu-button-six:after {
background-color:;
}
/* menu button (if menu opened) */
.taptap-menu-active .taptap-main-menu-button:before,
.taptap-menu-active .taptap-main-menu-button div.taptap-main-menu-button-middle:before,
.taptap-menu-active .taptap-main-menu-button:after,
.taptap-menu-active .taptap-main-menu-button-two:before,
.taptap-menu-active .taptap-main-menu-button-two div.taptap-main-menu-button-two-middle:before,
.taptap-menu-active .taptap-main-menu-button-two:after,
.taptap-menu-active .taptap-main-menu-button-three:before,
.taptap-menu-active .taptap-main-menu-button-three div.taptap-main-menu-button-three-middle:before,
.taptap-menu-active .taptap-main-menu-button-three:after,
.taptap-menu-active .taptap-main-menu-button-four:before,
.taptap-menu-active .taptap-main-menu-button-four div.taptap-main-menu-button-four-middle:before,
.taptap-menu-active .taptap-main-menu-button-four:after,
.taptap-menu-active .taptap-main-menu-button-five:before,
.taptap-menu-active .taptap-main-menu-button-five div.taptap-main-menu-button-five-middle:before,
.taptap-menu-active .taptap-main-menu-button-five:after,
.taptap-menu-active .taptap-main-menu-button-six:before,
.taptap-menu-active .taptap-main-menu-button-six:after { background-color:; }
/* menu button animations (-/X) */
/* menu button animation speed + logo/search hover speeds */
.taptap-menu-button-label::before,
.taptap-menu-button-label::after,
.taptap-search-button-label,
.taptap-search-button,
.taptap-search-button::after,
.taptap-logo a,
.taptap-search-close-inner::before,
.taptap-search-close-inner::after,
.taptap-search-clear,
.taptap-main-menu-button:before,
.taptap-main-menu-button div.taptap-main-menu-button-middle:before,
.taptap-main-menu-button:after,
.taptap-main-menu-button-two:before,
.taptap-main-menu-button-two div.taptap-main-menu-button-two-middle:before,
.taptap-main-menu-button-two:after,
.taptap-main-menu-button-three:before,
.taptap-main-menu-button-three div.taptap-main-menu-button-three-middle:before,
.taptap-main-menu-button-three:after,
.taptap-main-menu-button-four:before,
.taptap-main-menu-button-four div.taptap-main-menu-button-four-middle:before,
.taptap-main-menu-button-four:after,
.taptap-main-menu-button-five:before,
.taptap-main-menu-button-five div.taptap-main-menu-button-five-middle:before,
.taptap-main-menu-button-five:after,
.taptap-main-menu-button-six:before,
.taptap-main-menu-button-six:after {
-webkit-transition:all s ease !important;
transition:all s ease !important;
}
/* menu button top, side distances + right position */
.taptap-menu-button-wrapper { top:px; }
/* if menu button hidden, remove button height and set default label position to 0 */
/* menu button label customization */
.taptap-menu-button-label {
left:px;
top:px;
color:;
font-size:px;
letter-spacing:px;
}
/* menu button label font + theme font */
.taptap-menu-button-label {
font-family:'Roboto Condensed';
font-weight:400;
}
/* menu button labels */
.taptap-menu-button-label::before { content:''; }
/* LOGO */
/* logo font size + letter spacing */
.taptap-logo a {
color:;
font-size:px;
letter-spacing:px;
}
/* logo font + theme font */
.taptap-logo a {
font-family:'Roboto Condensed';
font-weight:400;
}
/* logo image size + top/side distances + right positioning */
.taptap-logo-image img { max-height:px; }
.taptap-logo-wrapper { top:px; }
/* WOO BUTTON */
/* woocommerce icon select */
/* woocommerce icon colors */
.taptap-shopping-icon {
background-color:;
}
a.taptap-cart-count:hover .taptap-shopping-icon {
background-color:;
}
.taptap-cart-count > span {
color:;
background-color:;
}
/* woo button top, side distances + right position */
.taptap-woo-button-wrapper { top:px; }
/* SEARCH */
/* search button */
.taptap-search-button {
border-color:;
}
.taptap-search-button::after {
background-color:;
}
/* search button top, side distances + right position */
.taptap-search-button-wrapper { top:px; }
/* if search button hidden, remove button height and set default label position to 0 */
.taptap-search-button-wrapper { height:auto; }
.taptap-search-button-label { top:0; left:0; }
/* search button label customization */
.taptap-search-button-label {
left:px;
top:px;
color:;
font-size:px;
letter-spacing:px;
}
/* search button label font + theme font */
/* search form background + background color + animation speed */
.taptap-search-wrapper,
.taptap-search-background {
height:px;
-webkit-transition:-webkit-transform s ease 0s, top 0s ease s;
transition:transform s ease 0s, top 0s ease s;
}
.taptap-search-background {
opacity:;
background-color:;
}
.taptap-search-wrapper-active {
-webkit-transition:-webkit-transform s ease 0s, top 0s ease 0s !important;
transition:transform s ease 0s, top 0s ease 0s !important;
}
.taptap-search-overlay {
background-color:;
-webkit-transition:opacity s ease 0s, top 0s ease s;
transition:opacity s ease 0s, top 0s ease s;
}
.taptap-search-overlay-active {
opacity:;
-webkit-transition:opacity s ease 0s, top 0s ease 0s;
transition:opacity s ease 0s, top 0s ease 0s;
}
/* search form placeholder */
#searchform input::-webkit-input-placeholder { font-size:px; color: !important; }
#searchform input:-moz-placeholder { font-size:px; color: !important; }
#searchform input::-moz-placeholder { font-size:px; color: !important; }
#searchform input:-ms-input-placeholder { font-size:px; color: !important; }
/* search form text color + align + padding if clear field hidden */
.taptap-search-wrapper #searchform input {
color:;
font-size:px;
letter-spacing:px;
}
/* search field font */
/* search form close button */
.taptap-search-close-inner::before,
.taptap-search-close-inner::after { background-color:; }
/* search clear field button */
.taptap-search-clear { background-color:; }
/* make search field X the same color as search field background */
.taptap-search-clear::before,
.taptap-search-clear::after { background-color:; }
/* HEADER */
/* header height + background image + background color */
.taptap-header-bg-image {
height:px;
opacity:;
background-image:url();
}
.taptap-header {
height:px;
background-color:;
opacity:;
}
/* show header shadow */
/* MENU CONTAINER */
/* background color */
.taptap-background-color {
opacity:;
background-color:;
}
/* pulsating background colors + speed */
/* background image opacity + horizontal/vertical alignment */
.taptap-background-image {
opacity:;
background-position: ;
background-size:;
}
/* background pattern */
/* menu container top/bottom padding */
.taptap-main-inner-inner {
padding-top:px;
padding-bottom:px;
padding-left:px;
padding-right:px;
}
/* max content width */
.taptap-contents-wrapper {
max-width:px;
}
/* menu container appearance speed */
.taptap-main-wrapper {
-webkit-transition:-webkit-transform s ease, top 0s ease s, opacity s ease 0s;
transition:transform s ease, top 0s ease s, opacity s ease 0s;
}
.taptap-main-wrapper-active {
-webkit-transition:-webkit-transform s ease, top 0s ease 0s, opacity s ease 0s;
transition:transform s ease, top 0s ease 0s, opacity s ease 0s;
}
.taptap-background-color,
.taptap-background-image {
-webkit-transition:-webkit-transform s ease, top 0s ease s;
transition:transform s ease, top 0s ease s;
}
.taptap-background-color-active,
.taptap-background-image-active {
-webkit-transition:-webkit-transform s ease, top 0s ease 0s;
transition:transform s ease, top 0s ease 0s;
}
/* menu corner roundness */
.taptap-background-color,
.taptap-background-image,
.taptap-main-wrapper {
border-radius:px;
}
/* distance from edges */
/* menu contents horizontal alignment */
/* menu contents vertical alignment */
/* menu animations (top/left/right/bottom/fade) */
.taptap-main-wrapper {
-webkit-transform:translateY(-125%) scale(0.75);
transform:translateY(-125%) scale(0.75);
}
.taptap-main-wrapper-active {
-webkit-transform:translateY(0) scale(1);
transform:translateY(0) scale(1);
}
/* BACKGROUND OVERLAY */
/* background overlay opacity + color + animation speed */
.taptap-background-overlay {
background-color:;
-webkit-transition:opacity s ease, top 0s ease s;
transition:opacity s ease, top 0s ease s;
}
.taptap-background-overlay-active {
opacity:;
-webkit-transition:opacity s ease, top 0s ease 0s;
transition:opacity s ease, top 0s ease 0s;
}
/* ALTERNATE CLOSE BUTTON */
.taptap-alternate-close-button {
top:px;
right:px;
}
.taptap-alternate-close-button::before,
.taptap-alternate-close-button::after {
background-color:;
height:px;
}
.taptap-alternate-close-button:hover::before,
.taptap-alternate-close-button:hover::after {
background-color:;
}
/* HEADING + SUBHEADING */
/* headings */
.taptap-heading,
.taptap-heading a,
.taptap-heading a:hover { color:; }
.taptap-subheading,
.taptap-subheading a,
.taptap-subheading a:hover { color:; }
/* heading */
.taptap-heading,
.taptap-heading a {
font-size:30px;
letter-spacing:px;
line-height:px;
}
/* subheading */
.taptap-subheading {
margin-top:px;
}
.taptap-subheading,
.taptap-subheading a {
font-size:px;
letter-spacing:px;
line-height:px;
}
/* heading font */
.taptap-heading,
.taptap-heading a {
font-family:'Roboto Condensed';
font-weight:400;
}
/* subheading font */
.taptap-subheading,
.taptap-subheading a {
font-family:'Roboto Condensed';
font-weight:400;
}
/* HEADING IMAGE */
.taptap-image {
margin-top:px;
margin-bottom:px;
}
.taptap-image img {
max-width:px;
}
/* MENUS */
/* menu */
.taptap-by-bonfire ul li a {
color:;
font-size:px;
line-height:px;
letter-spacing:px;
margin-top:px;
}
.taptap-by-bonfire > .menu > li.menu-item-has-children > span { margin-top:px; }
/* submenu */
.taptap-by-bonfire .sub-menu a {
color:;
font-size:px;
letter-spacing:px;
margin-bottom:px;
}
/* drop-down arrow position (top-level) */
.taptap-by-bonfire > .menu > li.menu-item-has-children > span { top:px; }
/* drop-down arrow position (sub-level) */
.taptap-by-bonfire .sub-menu li.menu-item-has-children span { top:px; }
/* submenu arrow */
.taptap-sub-arrow .taptap-sub-arrow-inner::before,
.taptap-sub-arrow .taptap-sub-arrow-inner::after { background-color:; }
.taptap-by-bonfire .menu li span { border-color:; }
/* current menu items */
.taptap-by-bonfire ul li.current-menu-item > a { color:; }
.taptap-by-bonfire .sub-menu .current-menu-item > a { color:; }
/* menu font */
/* MENU ITEM DESCRIPTIONS */
.taptap-menu-item-description {
color:;
font-size:px;
padding-top:px;
padding-bottom:px;
line-height:px;
letter-spacing:px;
}
/* menu item description font */
/* MENU ITEM ICONS */
/* menu icons */
.taptap-by-bonfire ul li a i {
color:;
font-size:px;
margin-top:px;
}
/* submenu icons */
.taptap-by-bonfire .sub-menu a i {
color:;
font-size:px;
margin-top:px;
}
/* HORIZONTAL MENU */
/* horizontal menu section titles */
.taptap-by-bonfire-horizontal .taptap-title a {
font-size:px;
color:;
}
.taptap-by-bonfire-horizontal .taptap-title i {
font-size:px;
color:;
}
.taptap-by-bonfire-horizontal .taptap-title-line::before {
background-color:;
}
/* horizontal menu items */
.taptap-by-bonfire-horizontal ul li a {
font-size:px;
color:;
}
/* horizontal menu item icons */
.taptap-by-bonfire-horizontal .menu-item:not(.taptap-title) i {
font-size:px;
color:;
}
/* sub-menu arrow icon */
.taptap-horizontal-sub-arrow::before,
.taptap-horizontal-sub-arrow::after {
background-color:;
}
/* horizontal menu back button */
.taptap-horizontal-back {
font-size:px !important;
color: !important;
border-color:;
}
.taptap-horizontal-back::before,
.taptap-horizontal-back::after {
background-color:;
}
/* show horizontal menu hovers on non-touch devices only */
.taptap-by-bonfire-horizontal ul li:not(.taptap-title) a:hover {
color:;
}
.taptap-by-bonfire-horizontal ul li:not(.taptap-title):hover > a i {
color:;
}
.taptap-by-bonfire-horizontal .menu-item:hover .taptap-horizontal-sub-arrow::before,
.taptap-by-bonfire-horizontal .menu-item:hover .taptap-horizontal-sub-arrow::after {
background-color:;
}
.taptap-horizontal-close-submenu:hover .taptap-horizontal-back {
color: !important;
}
.taptap-horizontal-close-submenu:hover .taptap-horizontal-back::before,
.taptap-horizontal-close-submenu:hover .taptap-horizontal-back::after {
background-color: !important;
}
/* IMAGE-BASED MENU */
/* image-based menu item colors */
.taptap-image-grid-item > a { color:; }
.taptap-by-bonfire-image .sub-menu li a { color:; }
.taptap-by-bonfire-image .sub-menu li a:hover { color:; }
/* image-based drop-down indicator colors */
.taptap-by-bonfire-image .taptap-image-sub-arrow-inner::before,
.taptap-by-bonfire-image .taptap-image-sub-arrow-inner::after { background-color:; }
.taptap-by-bonfire-image .taptap-image-sub-arrow { background:; }
/* image-based sub-menu drop-down indicator colors */
.taptap-by-bonfire-image .sub-menu .taptap-image-sub-arrow-inner::before,
.taptap-by-bonfire-image .sub-menu .taptap-image-sub-arrow-inner::after { background-color:; }
.taptap-by-bonfire-image .sub-menu .taptap-image-sub-arrow { background:; }
.taptap-by-bonfire-image .sub-menu span.taptap-submenu-active { border-color:; }
/* image-based scrollbar color */
.taptap-image-grid-item > .scroll-element .scroll-bar { background-color:; }
/* image-based background color */
.taptap-image-grid-item { background:; }
.taptap-image-grid-item > ul::before {
background:;
background:linear-gradient(180deg, rgba(30,30,30,0) 25%, 100%, 100%);
}
/* image-based menu animation origin */
.taptap-by-bonfire-image > ul > li {
opacity:0;
-webkit-transform:translateY(125px);
transform:translateY(125px);
}
/* image-based menu corner roundness */
.taptap-image-grid-item,
.taptap-image-grid-item > a:before {
border-radius:px;
}
/* image-based menu item gap */
.taptap-by-bonfire-image > ul {
grid-gap:px;
}
/* image-based menu images */
.taptap-by-bonfire-image > ul > li:first-child .taptap-image-grid-item > a:before {
background-image:url();
}
.taptap-by-bonfire-image > ul > li:nth-child(2) .taptap-image-grid-item > a:before {
background-image:url();
}
.taptap-by-bonfire-image > ul > li:nth-child(3) .taptap-image-grid-item > a:before {
background-image:url();
}
.taptap-by-bonfire-image > ul > li:nth-child(4) .taptap-image-grid-item > a:before {
background-image:url();
}
.taptap-by-bonfire-image > ul > li:nth-child(5) .taptap-image-grid-item > a:before {
background-image:url();
}
.taptap-by-bonfire-image > ul > li:nth-child(6) .taptap-image-grid-item > a:before {
background-image:url();
}
.taptap-by-bonfire-image > ul > li:nth-child(7) .taptap-image-grid-item > a:before {
background-image:url();
}
.taptap-by-bonfire-image > ul > li:nth-child(8) .taptap-image-grid-item > a:before {
background-image:url();
}
.taptap-by-bonfire-image > ul > li:nth-child(9) .taptap-image-grid-item > a:before {
background-image:url();
}
/* WIDGETS */
/* widget top distance */
.taptap-widgets-wrapper { margin-top:px; }
/* widget titles */
.taptap-widgets-wrapper .widget .widgettitle {
color:;
font-size:px;
letter-spacing:px;
line-height:px;
}
/* widget title font */
/* widgets */
.taptap-widgets-wrapper .widget,
.taptap-widgets-wrapper .widget a {
color:;
font-size:px;
letter-spacing:px;
line-height:px;
}
.taptap-widgets-wrapper .widget a {
color:;
}
.taptap-widgets-wrapper .widget a:hover {
color:;
}
/* widget font */
.taptap-widgets-wrapper .widget,
.taptap-widgets-wrapper .widget a {
font-family:'Roboto Condensed';
font-weight:400;
}
/* STYLED SCROLLBAR */
/* show scrollbar styling, if scrollbar enabled */
/* MENU ITEMS APPEARACE ANIMATION */
/* MISC */
/* show header + search when menu open */
/* push down site by height of menu */
/* if submenu arrow divider is hidden */