/* ########################################## css.php ########################################## */ html, body { font-size: 14px !important; } h1 { font-size: 1.602em; } h2 { font-size: 1.424em; } h3 { font-size: 1.266em; } h4 { font-size: 1.125em; } h5 { font-size: 0.889em; } h6 { font-size: 0.79em; } .display-1 { font-size: 3.906em; } .display-2 { font-size: 3.125em; } .display-3 { font-size: 2.5em; } .display-4 { font-size: 2em; } @media (min-width: 48em) { h1 { font-size: 2.441em; } h2 { font-size: 1.953em; } h3 { font-size: 1.563em; } h4 { font-size: 1.25em; } .display-1 { font-size: 6em; } .display-2 { font-size: 5.5em; } .display-3 { font-size: 4.5em; } .display-4 { font-size: 3.5em; } } /* Large devices (desktops, 62em and up) */ @media (min-width: 62em) { html, body { font-size: 16px !important; } } /* Extra large devices (large desktops, 75em and up) */ @media (min-width: 75em) { html, body { font-size: 16.5px !important; } } /* Fix bootstrap CSS to support RM and REM */ .input-group { display: flex; align-items: stretch; justify-content: center; align-content: center; } .input-group .form-control, .input-group-addon, .input-group-btn { display: flex; } .input-group-addon { font-size: 1rem; padding: .375rem .75rem; align-items: center; line-height: 1.5; width: auto; } .input-group-btn { width: auto; } .form-control { height: auto; padding: 0.75rem 1.10rem; font-size: 1rem; border-color: #d4d7e5; } .form-control:focus { border-color: var(--global_main_color); } select.form-control:not([size]):not([multiple]) { font-size: 1rem; padding: 0.75rem 1.10rem; } .form-control.input-lg { font-size: 1.25rem; padding: .5rem 1rem; line-height: 1.5; } .btn { font-size: 1rem; line-height: 1.5; } .btn:not(.btn-link):not(.btn-sm):not(.btn-xl):not(.btn-xxl) { padding: 0.75rem 1.10rem; } .btn-lg { font-size: 1.25rem; padding: .5rem 1rem; line-height: 1.5; } /* Text font sizes */ .text-110 { font-size: 1.1rem; } .text-120 { font-size: 1.2rem; } .text-125 { font-size: 1.25rem; } .text-130 { font-size: 1.3rem; } .text-150 { font-size: 1.5rem; } .text-180 { font-size: 1.8rem; } /* Titles font sizes */ .header-300 { font-size: 3em; } .header-320 { font-size: 3.2em; } .header-360 { font-size: 3.6em; } :root { --global_main_color: #0088cc; --global_main_color_btn_text_color: #ffffff; --home_text_color: #ffffff; --home_third_background_color: #000000; --home_custom_image_size: px; --home_custom_image_width: px; --home_text_size_px: 71px; --home_text_size_2_px: 40px; --slogan_text_size_px: 32px; --home_text_size: 71; --home_text_size_2: 40; --slogan_text_size: 32; --home_text_size_px_media: 71px; --home_text_size_2_px_media: 40px; --slogan_text_size_px_media: 32px; --layout_text_align: center; --layout_text_align_rtl: center; --layout_text_box_width: 100%; --layout_left_side_width: 50%; --layout_left_side_width_vh: 50vh; --homepage_layout_height: 77%; --homepage_layout_height_vh: 77vh; --homepage_layout_height_menu_space: 0px; --mainNavMobileHeight: 0px; --homepage_layout_height_opacity_space_top: 0px; --homepage_layout_height_opacity_space_bottom: 0px; --mobileMenuFontSize: 20px; --mobileMenuPagesSpace: 5px; --homepageShapeDividerList_Size: 20%; --layout_bottom_spacing: 0px; --window-height: 100vh; --window-width: 100vw; --menu_font_size: 12px; --menu_pages_space: 3px; --menu_pages_side_padding: 15px; --menu_pages_letter_spacing: 0.5px; --menu_pages_word_spacing: 0px; --menu_thin_border: #ebebeb; --mobileMenuTextAlign: center; --menu_text_color: #252525; --menu_text_hover_color: #0088cc; --menu_color: #ffffff; --modules_color_text: #252525; --modules_color_text_second: #252525; --inside_modules_color_text: #252525; --sectionsPadding: 100px; --home_text_top_space_1: 0px; --home_text_bottom_space_1: 10px; --home_text_top_space_2: 0px; --home_text_bottom_space_2: 10px; --home_text_top_space_3: 0px; --home_text_bottom_space_3: 20px; --homepage_padding_top: px; --homepage_padding_bottom: px; --homepage_main_goal_margin_top: 0px; --homepage_main_goal_margin_bottom: 0px; --homepage_second_goal_margin_top: 0px; --homepage_second_goal_margin_bottom: 0px; --modules_color_second: #fafafa; --modules_color: #ffffff; --footer_back: #ffffff; --footer_text_hover: #0088cc; --footer_links_color: #0088cc; --footer_text: #252525; --home_background_color: #000000; --inside_modules_color_box: #fafafa; --inside_modules_color_text_box: #252525; --module_separate_border_color: #ebebeb; --modules_color_box: #fafafa; --modules_color_second_box: #ffffff; --modules_color_text_second_box: #252525; --inside_modules_color: #ffffff; --modules_color_text_box: #252525; --font_logo: Open Sans; --font_menu: Open Sans; --global_font: Open Sans; --font_slogan: Open Sans; --font_slogan_2: Open Sans; --font_second_slogan: Open Sans; --font_modules_header: Open Sans; --sticky_menu: 1; --scrollHeaderSize: 0px;} textarea { resize: none; } /* PC ----------------------------------*/ @media(min-width:768px) { #top-section .title { margin-right: auto; margin-left: auto; max-width: 1000px; padding: 60px 50px; } #top-section .title p { margin-right: auto; margin-left: auto; max-width: 80%; } } /* Mobile & Tablet ----------------------------------*/ @media(max-width:767px) { #top-section .title { margin-right: auto; margin-left: auto; padding: 40px 20px; } } /* ########################################## cssHomeSection.php ########################################## */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.delay-1s { -webkit-animation-delay: 1s; animation-delay: 1s; } .animated.delay-2s { -webkit-animation-delay: 2s; animation-delay: 2s; } .animated.delay-3s { -webkit-animation-delay: 3s; animation-delay: 3s; } .animated.delay-4s { -webkit-animation-delay: 4s; animation-delay: 4s; } .animated.delay-5s { -webkit-animation-delay: 5s; animation-delay: 5s; } .animated.fast { -webkit-animation-duration: 800ms; animation-duration: 800ms; } .animated.faster { -webkit-animation-duration: 500ms; animation-duration: 500ms; } .animated.slow { -webkit-animation-duration: 2s; animation-duration: 2s; } .animated.slower { -webkit-animation-duration: 3s; animation-duration: 3s; } @media (print), (prefers-reduced-motion) { .animated { -webkit-animation: unset !important; animation: unset !important; -webkit-transition: none !important; transition: none !important; } }#top-section { padding:0; position: relative; width: 100%; height:auto; text-align: center; background-color: transparent; display: flex; justify-content: center; flex-direction: column; } #top-section .home_background_wrapper { background-color: #000000; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } /* The background color was not changed in the preview without reload, so we fix it by this line */ #parallax_home_opacity { background-color: #000000 !important; } #top-section .home-image-bg, #top-section .carousel, #top-section #video-bg { position: absolute; left: 0; top: 0; width:100%; height:100%; opacity: 0.5; } #top-section .homepage-layout-24 .btn-primary-transparent { color: #ffffff; } #top-section .homepage-layout-24 .btn-primary-transparent .svg-m { background-color: #ffffff; } #top-section .homepage-layout-24 .btn-primary-transparent:hover, #top-section .homepage-layout-24 .btn-primary-transparent:focus { color: #ffffff; } #top-section .homepage-layout-24 .btn-primary-transparent:hover .svg-m { background-color: #ffffff; } #top-section .homepage-layout-24 .btn-primary-white { background-color: #ffffff; color: #000000; border-color:transparent; } #top-section .homepage-layout-24 .btn-primary-white .svg-m { background-color: #000000; } #top-section .homepage-layout-24 .btn-primary-white:hover, #top-section .homepage-layout-24 .btn-primary-white:focus { opacity:0.9; } #top-section .homepage-layout-24 .btn-primary-black { background-color: #000000; color: #ffffff; border-color:transparent; } #top-section .homepage-layout-24 .btn-primary-black .svg-m { background-color: #ffffff; } #top-section .homepage-layout-24 .btn-primary-grey { background-color: #ebedf0; color: #444950; border-color:transparent; } #top-section .homepage-layout-24 .btn-primary-grey .svg-m { background-color: #444950; } #top-section .homepage-layout-24 .btn-primary-grey:hover, #top-section .homepage-layout-24 .btn-primary-grey:focus { color: #444950; background-color: #e2e5e9; } #top-section .homepage-layout-24 .btn-primary-black:hover, #top-section .homepage-layout-24 .btn-primary-black:focus { opacity:0.9; } /* FIX - only for IE 11 */ _:-ms-fullscreen, :root .homepage-search-field { width:400px; } /* ########################################## cssHomepageText.php ########################################## */ :root { --global_main_color_rgba_07: rgba(0,136,204,0.7) } #top-section .weight400 { font-weight: normal; } #top-section .weight700 { font-weight: bold; } /* Italic style */ #top-section .italic { font-style: italic; } #top-section .spacingSmall { letter-spacing: 1px; word-spacing: 1px; } #top-section .spacingBig { letter-spacing: 3px; word-spacing: 3px; } #top-section .spacingLarge { letter-spacing: 5px; word-spacing: 5px; } #top-section .bottomSpaceSmall { margin-bottom: 10px; } #top-section .bottomSpaceBig { margin-bottom: 30px; } #top-section .bottomSpaceLarge { margin-bottom: 50px; } #top-section .bottomSpaceHuge { margin-bottom: 70px; } #top-section .background1 { border: 1px solid; padding: 5px 25px; } #top-section h1.background1 { border: calc(var(--home_text_size_px_media) / 15) solid; } #top-section h2.background1 { border: calc(var(--home_text_size_2_px_media) / 15) solid; } #top-section p.background1 { border: calc(var(--slogan_text_size_px_media) / 15) solid; } /* Mobile & Tablet ----------------------------------*/ @media(max-width:767px) { #top-section .background1 { padding: 0 5px; } } #top-section .background2 { border: 0; border-top: 1px solid; border-bottom: 1px solid; padding: 5px 25px; } #top-section h1.background2 { border-top: calc(var(--home_text_size_px_media) / 15) solid; border-bottom: calc(var(--home_text_size_px_media) / 15) solid; } #top-section h2.background2 { border-top: calc(var(--home_text_size_2_px_media) / 15) solid; border-bottom: calc(var(--home_text_size_2_px_media) / 15) solid; } #top-section p.background2 { border-top: calc(var(--slogan_text_size_px_media) / 15) solid; border-bottom: calc(var(--slogan_text_size_px_media) / 15) solid; } /* Mobile & Tablet ----------------------------------*/ @media(max-width:767px) { #top-section .background2 { padding: 0 5px; } } #top-section .background3 { border: 0; padding: 5px 25px; background-color: var(--global_main_color); color:white !important; } /* Mobile & Tablet ----------------------------------*/ @media(max-width:767px) { #top-section .background3 { padding: 0 5px; } } #top-section .background4 { border: 0; padding: 5px 25px; background-color: rgba(0,136,204,0.7); background-color: var(--global_main_color_rgba_07); color:white !important; } /* Mobile & Tablet ----------------------------------*/ @media(max-width:767px) { #top-section .background4 { padding: 0 5px; } } #top-section .background5 { border: 0; padding: 5px 25px; background-color: #000; color:#fff !important; } /* Mobile & Tablet ----------------------------------*/ @media(max-width:767px) { #top-section .background5 { padding: 0 5px; } } #top-section .background6 { border: 0; padding: 5px 25px; background-color: #fff; color:#000 !important; } /* Mobile & Tablet ----------------------------------*/ @media(max-width:767px) { #top-section .background6 { padding: 0 5px; } } #top-section .background7 { border: 0; padding: 5px 25px; background-color: #fff; color:#000 !important; box-shadow: 3px 3px 2px 2px #000; } /* Mobile & Tablet ----------------------------------*/ @media(max-width:767px) { #top-section .background7 { padding: 0 5px; } } #top-section .background8 { color: var(--global_main_color) !important; } #top-section .background9 { opacity: 0.7 !important; } #top-section .background10:after { content: ''; display: block; border-top: 6px solid var(--global_main_color); width: 100px; margin: 15px auto; } #top-section .ele_align_right .background10:after { margin-left: auto; margin-right: 0; } #top-section .ele_align_left .background10:after { margin-left: 0; margin-right: auto; } html[dir="rtl"] #top-section .ele_align_right .background10:after { margin-left: 0; margin-right: auto; } html[dir="rtl"] #top-section .ele_align_left .background10:after { margin-left: auto; margin-right: 0; } #top-section h1.background10:after { border-top: calc(var(--home_text_size_px_media) / 15) solid var(--global_main_color); } #top-section h2.background10:after { border-top: calc(var(--home_text_size_2_px_media) / 15) solid var(--global_main_color); } #top-section p.background10:after { border-top: calc(var(--slogan_text_size_px_media) / 15) solid var(--global_main_color); } #top-section .background11:before { content: ''; display: block; border-top: 6px solid var(--global_main_color); border-top: calc(var(--home_text_size_px_media) / 15) solid var(--global_main_color); width: 100px; margin: 15px auto; } #top-section .ele_align_right .background11:before { margin-left: auto; margin-right: 0; } #top-section .ele_align_left .background11:before { margin-left: 0; margin-right: auto; } html[dir="rtl"] #top-section .ele_align_right .background11:before { margin-left: 0; margin-right: auto; } html[dir="rtl"] #top-section .ele_align_left .background11:before { margin-left: auto; margin-right: 0; } #top-section h1.background11:before { border-top: calc(var(--home_text_size_px_media) / 15) solid var(--global_main_color); } #top-section h2.background11:before { border-top: calc(var(--home_text_size_2_px_media) / 15) solid var(--global_main_color); } #top-section p.background11:before { border-top: calc(var(--slogan_text_size_px_media) / 15) solid var(--global_main_color); } #top-section .background12 { border: 0; padding: 5px 25px; background-color: rgba(0,136,204,0.7); background-color: var(--global_main_color_rgba_07); color:white !important; position: relative; } #top-section .background12:after { content: " "; /* background: #000; */ position: absolute; } #top-section h1.background12:after { border: calc(var(--home_text_size_px_media) / 15) solid; width: calc(100% + var(--home_text_size_px_media) / 6 * 2); height: calc(100% + var(--home_text_size_px_media) / 6 * 2); left: calc(var(--home_text_size_px_media) / 6 * -1); top: calc(var(--home_text_size_px_media) / 6 * -1); /* the user was unable to edit those headers at the wizard so we move the after below its parent */ z-index: -1; /* Source: https://stackoverflow.com/a/10822168/469161 */ } #top-section h2.background12:after { border: calc(var(--home_text_size_2_px_media) / 15) solid; width: calc(100% + var(--home_text_size_2_px_media) / 6 * 2); height: calc(100% + var(--home_text_size_2_px_media) / 6 * 2); left: calc(var(--home_text_size_2_px_media) / 6 * -1); top: calc(var(--home_text_size_2_px_media) / 6 * -1); /* the user was unable to edit those headers at the wizard so we move the after below its parent */ z-index: -1; /* Source: https://stackoverflow.com/a/10822168/469161 */ } #top-section p.background12:after { border: calc(var(--slogan_text_size_px_media) / 15) solid; width: calc(100% + var(--slogan_text_size_px_media) / 6 * 2); height: calc(100% + var(--slogan_text_size_px_media) / 6 * 2); left: calc(var(--slogan_text_size_px_media) / 6 * -1); top: calc(var(--slogan_text_size_px_media) / 6 * -1); } /* Mobile & Tablet ----------------------------------*/ @media(max-width:767px) { #top-section .background12 { padding: 0 5px; } } /* boxStyle_1 */ .magic_homepage .boxStyle_1 { background-color: #000; padding: 20px; border-radius: 0; border-top: 5px solid var(--global_main_color); } .magic_homepage .boxStyle_1 h1, .magic_homepage .boxStyle_2 h1, .magic_homepage .boxStyle_1 p { color:#fff !important; text-shadow: none !important; } /* boxStyle_2 */ .magic_homepage .boxStyle_2 { background-color: #fff; padding: 20px; border-radius: 0; border-top: 5px solid var(--global_main_color); } .magic_homepage .boxStyle_2 h1, .magic_homepage .boxStyle_2 h2, .magic_homepage .boxStyle_2 p { color:#000 !important; text-shadow: none !important; } /* boxStyle_3 */ .magic_homepage .boxStyle_3 { background-color: #fff; padding: 20px; border-radius: 0; border: 5px solid var(--global_main_color); } .magic_homepage .boxStyle_3 h1, .magic_homepage .boxStyle_3 h2, .magic_homepage .boxStyle_3 p { color:#000 !important; text-shadow: none !important; } /* boxStyle_4 */ .magic_homepage .boxStyle_4 { padding: 20px; border-radius: 0; position: relative; margin-right: 25px; } .magic_homepage .boxStyle_4 .boxBorder, .magic_homepage .boxStyle_4 .homepage_goal { z-index: 1; } .magic_homepage .boxStyle_4:before { content: " "; position: absolute; left: 25px; top: 25px; background-color: var(--global_main_color); width: 100%; height: 100%; } .magic_homepage .boxStyle_4:after { content: " "; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #fff; } .magic_homepage .boxStyle_4 h1, .magic_homepage .boxStyle_4 h2, .magic_homepage .boxStyle_4 p { color:#000 !important; text-shadow: none !important; } /* boxStyle_5 */ .magic_homepage .boxStyle_5 { padding: 20px; border-radius: 0; position: relative; margin-left: 25px; } .magic_homepage .boxStyle_5 .boxBorder, .magic_homepage .boxStyle_5 .homepage_goal { z-index: 1; } .magic_homepage .boxStyle_5:before { content: " "; position: absolute; left: -25px; top: -25px; background-color: var(--global_main_color); width: 100%; height: 100%; } .magic_homepage .boxStyle_5:after { content: " "; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #fff; } .magic_homepage .boxStyle_5 h1, .magic_homepage .boxStyle_5 h2, .magic_homepage .boxStyle_5 p { color:#000 !important; text-shadow: none !important; } /* boxStyle_6 */ .magic_homepage .boxStyle_6 { padding: 20px; border-radius: 0; position: relative; margin-right: 75px; } .magic_homepage .boxStyle_6 .boxBorder, .magic_homepage .boxStyle_6 .homepage_goal { z-index: 1; } .magic_homepage .boxStyle_6:before { content: " "; position: absolute; left: calc(100% - 75px); top: calc(100% - 75px); background-color: var(--global_main_color); width: 150px; height: 150px; border-radius: 50%; } .magic_homepage .boxStyle_6:after { content: " "; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #fff; } .magic_homepage .boxStyle_6 h1, .magic_homepage .boxStyle_6 h2, .magic_homepage .boxStyle_6 p { color:#000 !important; text-shadow: none !important; } /* boxStyle_7 */ .magic_homepage .boxStyle_7 { padding: 20px; border-radius: 0; position: relative; margin-right: 200px; margin-bottom: 200px; } .magic_homepage .boxStyle_7 .boxBorder, .magic_homepage .boxStyle_7 .homepage_goal { z-index: 1; } .magic_homepage .boxStyle_7:before { content: " "; position: absolute; left: calc(100% - 200px); top: calc(100% - 200px); width: 400px; height: 400px; background-image: url("data:image/svg+xml;utf8,"); } /* Mobile & Tablet ----------------------------------*/ @media(max-width:767px) { .magic_homepage .boxStyle_7:before { left: calc(100% - 250px); top: calc(100% - 100px); width: 200px; height: 200px; background-image: url("data:image/svg+xml;utf8,"); } } .magic_homepage .boxStyle_7:after { content: " "; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #fff; } .magic_homepage .boxStyle_7 h1, .magic_homepage .boxStyle_7 h2, .magic_homepage .boxStyle_7 p { color:#000 !important; text-shadow: none !important; } .magic_homepage .boxBorder h1 { max-width: 100%; white-space: pre-line; word-wrap: break-word; overflow-wrap: break-word; font-family: var(--font_slogan),'Open Sans',Arial,sans-serif; color: #ffffff; letter-spacing: 4px; word-spacing: 4px; line-height: 1.5; margin-bottom: 10px; } /* Small Devices, Wide Screens */ @media only screen and (max-width : 1169px) { .magic_homepage .boxBorder h1 { letter-spacing: calc(4 * (100vw / 1170)); word-spacing: calc(4 * (100vw / 1170)); } } /* Small Devices, Wide Screens */ @media only screen and (max-height : 767px) { /* We reduce the margin-bottom between user homepage text only if the height of the screen become really small. We choose 768 height because that the most use screen 1366X768 */ .magic_homepage .boxBorder h1 { margin-bottom: calc(10 * (100vh / 768)); } } .magic_homepage .boxBorder h2 { max-width: 100%; white-space: pre-line; word-wrap: break-word; overflow-wrap: break-word; font-family: var(--font_slogan_2),'Open Sans',Arial,sans-serif; color: #ffffff; line-height: 1.2; margin-bottom: 10px; } /* Small Devices, Wide Screens */ @media only screen and (max-width : 1169px) { .magic_homepage .boxBorder h2 { } } /* Small Devices, Wide Screens */ @media only screen and (max-height : 767px) { /* We reduce the margin-bottom between user homepage text only if the height of the screen become really small. We choose 768 height because that the most use screen 1366X768 */ .magic_homepage .boxBorder h2 { margin-bottom: calc(10 * (100vh / 768)); } } .magic_homepage .boxBorder p { max-width: 100%; white-space: pre-line; word-wrap: break-word; overflow-wrap: break-word; font-family: var(--font_second_slogan),'Open Sans',Arial,sans-serif; font-size: 32px; color: #ffffff; letter-spacing: -1px; line-height: 0.7; margin-bottom: 20px; } /* Small Devices, Wide Screens */ @media only screen and (max-width : 1169px) { .magic_homepage .boxBorder p { letter-spacing: calc(-1 * (100vw / 1170)); } } /* Small Devices, Wide Screens */ @media only screen and (max-height : 767px) { /* We reduce the margin-bottom between user homepage text only if the height of the screen become really small. We choose 768 height because that the most use screen 1366X768 */ .magic_homepage .boxBorder h2 { margin-bottom: calc(20 * (100vh / 768)); } } @-webkit-keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } /* Homepage animation */ @keyframes port { 0%{ opacity: 0.0; } 100%{ opacity: 1.0; } } @-webkit-keyframes port { 0%{ opacity: 0.0; } 100%{ opacity: 1.0; } } /* Fix the text of the homepage for different screens */ /* https://scotch.io/bar-talk/bootstrap-3-tips-and-tricks-you-might-not-know#media-query-break-points */ /* Custom, iPhone Retina */ @media only screen and (min-width : 1px) { /* 8 is the minimum font size. Base on this trick: https://stackoverflow.com/questions/23560087/is-there-such-a-thing-as-min-font-size-and-max-font-size; */ :root { --home_text_size_px_media: calc(var(--home_text_size) * (100vw / 1170) + 8px); --home_text_size_2_px_media: calc(var(--home_text_size_2) * (100vw / 1170) + 8px); --slogan_text_size_px_media: calc(var(--slogan_text_size) * (100vw / 1170) + 8px); } #top-section #home_siteSlogan { font-size: calc(71 * (100vw / 1170) + 8px); font-size: calc(var(--home_text_size) * (100vw / 1170) + 8px); } #top-section #home_siteSlogan_2 { font-size: calc(40 * (100vw / 1170) + 8px); font-size: calc(var(--home_text_size_2) * (100vw / 1170) + 8px); } #top-section #home_SecondSiteSlogan { font-size: calc(32 * (100vw / 1170) + 8px); font-size: calc(var(--slogan_text_size) * (100vw / 1170) + 8px); } } /* Extra Small Devices, Phones */ @media only screen and (min-width : 480px) { /* 8 is the minimum font size. Base on this trick: https://stackoverflow.com/questions/23560087/is-there-such-a-thing-as-min-font-size-and-max-font-size; */ :root { --home_text_size_px_media: calc(var(--home_text_size) * (100vw / 1170) + 8px); --home_text_size_2_px_media: calc(var(--home_text_size_2) * (100vw / 1170) + 8px); --slogan_text_size_px_media: calc(var(--slogan_text_size) * (100vw / 1170) + 8px); } #top-section #home_siteSlogan { font-size: calc(71 * (100vw / 1170) + 8px); font-size: calc(var(--home_text_size) * (100vw / 1170) + 8px); } #top-section #home_siteSlogan_2 { font-size: calc(40 * (100vw / 1170) + 8px); font-size: calc(var(--home_text_size_2) * (100vw / 1170) + 8px); } #top-section #home_SecondSiteSlogan { font-size: calc(32 * (100vw / 1170) + 8px); font-size: calc(var(--slogan_text_size) * (100vw / 1170) + 8px); } } /* Small Devices, Tablets */ @media only screen and (min-width : 768px) { :root { --home_text_size_px_media: calc(var(--home_text_size) * (100vw / 1170)); --home_text_size_2_px_media: calc(var(--home_text_size_2) * (100vw / 1170)); --slogan_text_size_px_media: calc(var(--slogan_text_size) * (100vw / 1170)); } #top-section #home_siteSlogan { font-size: calc(71 * (100vw / 1170)); font-size: calc(var(--home_text_size) * (100vw / 1170)); } #top-section #home_siteSlogan_2 { font-size: calc(40 * (100vw / 1170)); font-size: calc(var(--home_text_size_2) * (100vw / 1170)); } #top-section #home_SecondSiteSlogan { font-size: calc(32 * (100vw / 1170)); font-size: calc(var(--slogan_text_size) * (100vw / 1170)); } } /* Medium Devices, Desktops */ @media only screen and (min-width : 992px) { :root { --home_text_size_px_media: calc(var(--home_text_size) * (100vw / 1170)); --home_text_size_2_px_media: calc(var(--home_text_size_2) * (100vw / 1170)); --slogan_text_size_px_media: calc(var(--slogan_text_size) * (100vw / 1170)); } #top-section #home_siteSlogan { font-size: calc(71 * (100vw / 1170)); font-size: calc(var(--home_text_size) * (100vw / 1170)); } #top-section #home_siteSlogan_2 { font-size: calc(40 * (100vw / 1170)); font-size: calc(var(--home_text_size_2) * (100vw / 1170)); } #top-section #home_SecondSiteSlogan { font-size: calc(32 * (100vw / 1170)); font-size: calc(var(--slogan_text_size) * (100vw / 1170)); } } /* Large Devices, Wide Screens */ @media only screen and (min-width : 1200px) { :root { --home_text_size_px_media: var(--home_text_size_px); --home_text_size_2_px_media: var(--home_text_size_2_px); --slogan_text_size_px_media: var(--slogan_text_size_px); } #top-section #home_siteSlogan { font-size: 71px; font-size: var(--home_text_size_px); } #top-section #home_siteSlogan_2 { font-size: 40px; font-size: var(--home_text_size_2_px); } #top-section #home_SecondSiteSlogan { font-size: 32px; font-size: var(--slogan_text_size_px); } } #homepageShapeDesign { fill: #ffffff; } /* We added 5px because the shape start from -5px */ #homepageShapeDesign.shapeBottom, #homepageShapeDesign.shapeTop { height: calc(var(--homepageShapeDividerList_Size) + 5px) !important; } #homepageShapeDesign.shapeLeft, #homepageShapeDesign.shapeRight { width: var(--homepageShapeDividerList_Size) !important; } #top-section .homepage-layout-24 .social-style-2 { border: 1px solid var(--global_main_color) !important; background: none !important; color: var(--global_main_color) !important; } #top-section .homepage-layout-24 .social-style-3 { border-radius: 0px !important; background: var(--global_main_color) !important; } #top-section .homepage-layout-24 .social-style-4 { border: none !important; background: none !important; color: var(--global_main_color) !important; font-size: 2.5rem !important; } #top-section .homepage-layout-24 .social-size-big:not(.social-style-4) { width: 65px !important; height: 65px !important; font-size: 2rem !important; } #top-section .homepage-layout-24 .social-size-large:not(.social-style-4) { font-size: 2.3rem !important; width: 75px !important; height: 75px !important; } /* Bug Fix - The action buttons container was covering the titles because of other style it has `margin-top: -30px` to drop button with long text to new line ---------------------------*/ #top-section .magic_homepage .boxBorder h1, #top-section .magic_homepage .boxBorder h2, #top-section .magic_homepage .boxBorder p { z-index: 1; } /* New Main Homepage Goal Spacing Infrastructure ----------------------------------*/ #top-section .magic_homepage .home_main_wrapper .homepage_goal.mainGoal { margin-top: 0px; margin-top: var(--homepage_main_goal_margin_top); margin-bottom: 0px; margin-bottom: var(--homepage_main_goal_margin_bottom); } /* New Second Homepage Goal Spacing Infrastructure ----------------------------------*/ #top-section .magic_homepage .home_main_wrapper .homepage_goal.secondGoal { margin-top: 0px; margin-top: var(--homepage_second_goal_margin_top); margin-bottom: 0px; margin-bottom: var(--homepage_second_goal_margin_bottom); } /* Homepage Inline Video -------------------------*/ .homepage_goal[data-type="video"] .inline-video { position: relative; max-width: 100%; } .homepage_goal[data-type="video"] .inline-video.old-customer { max-width: 360px; width: 100%; } /* ########################################## site_layout1.php ########################################## */ .home_page_design #mainNav:not(.affix) { position: fixed; top: 0; left: 0; margin:0; } /* Typography (based on Bootstrap Typography) ----------------------------------*/ html, body { width: 100%; height: 100%; } .body { height:100%; } :root { --home_text_color_rgba_01: rgba(255,255,255,0.1)} #top-section .title { padding: 120px 50px 0 50px; } /* Navbar ----------------------------------*/ #mainNav { height: 80px; } :root { --mainNavHeight: 80px; --scrollHeaderSize: 60px; } #mainNav.affix { height: 60px; } .inside_page_header_design #mainNav { position: absolute; margin: 0; border-bottom: 1px solid #ebebeb; border-bottom: 1px solid var(--menu_thin_border); } /** * Menus Place Holder - The top menu has an absolute/fixed position so we * use a placeholder to push the website down related to the menu height */ .inside_page_header_design #s123ModulesContainer:before, .inside_page_header_design .s123-page-container:before, .s123-content-area:before { content: ''; width: 100%; height: 80px; display: block; /* when the user scroll up there is an transition effect and he can see the background color, so we handle it by adding background color related to the first seen element */ background-color: #ffffff; background-color: var(--inside_modules_color); } .inside_page_header_design:not(.onlyContent123) .s123-page-container:before { /* when the user scroll up there is an transition effect and he can see the background color, so we handle it by adding background color related to the first seen element */ background-color: #ffffff; background-color: var(--modules_color); } .inside_page_header_design .s123-page-container.s123-page-404-error:before { /* 404 pages doesn't has header so we overwrite the `page_header_style` in case its exist */ background-color: #ffffff; background-color: var(--modules_color); } .inside_page_header_design #mainNav.affix { position: fixed; margin: 0; } #mainNav .container-fluid,#mainNav .site_container { display: flex !important; justify-content: space-between; align-content: center; align-items: center; height: 100%; } #mainNav .navbar-header { order:1; display: flex; justify-content: flex-start; align-content: center; align-items: center; flex-basis: auto; height: 100%; white-space: nowrap; } #mainNav #top-menu { order:2; display: flex !important; justify-content: flex-end; align-content: center; align-items: center; flex-basis: auto; flex-grow: 1; } #mainNav #top-menu .navPages, #top-menu .navActions { display: flex; justify-content: center; align-content: center; align-items: center; } .navbar-default { background-color: #ffffff; background-color: var(--menu_color); } .navbar-default, #mainNav .logo_name, #mainNav .s123-site-logo { transition: height 0.35s, background-color 0.35s, font-size 0.35s; } .navbar-default .navbar-brand { font-weight: 700; color: #252525; color: var(--menu_text_color); height:auto; margin: 0; display: flex; justify-content: center; align-content: center; align-items: center; } .navbar-default .nav > li { margin: 0 1px; } /* website menu space between pages */ .navbar-default .nav.navPages > li { margin-right: var(--menu_pages_space); margin-left: 1px; } html[dir="rtl"] .navbar-default .nav.navPages > li { margin-right: 1px; margin-left: var(--menu_pages_space); } .navbar-default .nav > li > a:not(.navbar-brand), .navbar-default .nav > li > a:not(.navbar-brand):focus { font-size: 12px; font-size: var(--menu_font_size); font-weight: 700; color: #252525; color: var(--menu_text_color); letter-spacing: 0.5px; text-transform: uppercase; padding-top: 0px; padding-bottom: 0px; white-space: nowrap; } /* website menu page size */ .navbar-default .nav.navPages li a { padding-right: var(--menu_pages_side_padding); padding-left: var(--menu_pages_side_padding); } /* letter spacing + word spacing */ .navbar-default .nav.navPages li a .txt-container { letter-spacing: var(--menu_pages_letter_spacing); word-spacing: var(--menu_pages_word_spacing); } .navbar-default .nav > li > a:hover, .navbar-default .nav > li > a:focus:hover { color: #0088cc; color: var(--menu_text_hover_color); } .navbar-default .nav > li.active > a, .navbar-default .nav > li.active > a:focus { color: #0088cc; color: var(--menu_text_hover_color); background-color: transparent; } .navbar-default .nav > li.active > a:hover, .navbar-default .nav > li.active> a :focus:hover { background-color: transparent; } /* Before user scroll ----------------------------------*/ /* logo */ .navbar-default .navbar-brand { float: none; padding: 0; text-shadow: 1px 1px 1px rgba(0,0,0,.1); line-height: normal; } .navbar-default .navbar-brand .website-name-preview-helper.weight400, .navbar-default .navbar-brand.weight400 { font-weight: normal; } .navbar-default .navbar-brand .website-name-preview-helper.weight700, .navbar-default .navbar-brand.weight700 { font-weight: bold; } /* Italic style */ .navbar-default .navbar-brand .website-name-preview-helper.italic, .navbar-default .navbar-brand.italic { font-style: italic; } .home_page_design .navbar-default { border-color: rgba(255,255,255,0.1); border-color: var(--home_text_color_rgba_01); border-style: solid; background-color: transparent; } .home_page_design .navbar-default .navbar-brand, .inside_page_header_design .navbar-default .navbar-brand { color: #ffffff; height: 80px; display: flex; align-items: center; } /* svg logo support */ .home_page_design .navbar-default .navbar-brand .svg-m, .inside_page_header_design .navbar-default .navbar-brand .svg-m { background-color: #ffffff; } .home_page_design .navbar-default.affix .navbar-brand { height: 60px; } .home_page_design.s_layout1 .opacity-full.affix-top .navbar-brand:hover, .home_page_design.s_layout1 .opacity-full.affix-top .navbar-brand:focus { color: #ffffff; } .home_page_design .navbar-default .nav > li > a, .home_page_design .navbar-default .nav > li > a:focus, .inside_page_header_design .navbar-default .nav > li > a, .inside_page_header_design .navbar-default .nav > li > a:focus { border:1px solid transparent; color: #ffffff; } .home_page_design .navbar-default .nav > li > a > .svg-m, .home_page_design .navbar-default .nav > li > a:focus > .svg-m, .inside_page_header_design .navbar-default .nav > li > a > .svg-m, .inside_page_header_design .navbar-default .nav > li > a:focus > .svg-m { background-color: #ffffff; } .home_page_design .navbar-default .nav > li > a:not(.navbar-brand):hover, .home_page_design .navbar-default .nav > li > a:not(.navbar-brand):focus:hover, .inside_page_header_design .navbar-default .nav > li > a:not(.navbar-brand):hover, .inside_page_header_design .navbar-default .nav > li > a:not(.navbar-brand):focus:hover { color: #0088cc; color: var(--menu_text_hover_color); } .home_page_design .navbar-default .nav > li > a:not(.navbar-brand):hover .svg-m, .home_page_design .navbar-default .nav > li > a:not(.navbar-brand):focus:hover .svg-m, .inside_page_header_design .navbar-default .nav > li > a:not(.navbar-brand):hover .svg-m, .inside_page_header_design .navbar-default .nav > li > a:not(.navbar-brand):focus:hover .svg-m { background-color: #0088cc; background-color: var(--menu_text_hover_color); } .home_page_design .navbar-default .action-button-wrapper .btn-primary-transparent { color: #ffffff; } .home_page_design .navbar-default .action-button-wrapper .btn-primary-transparent .svg-m { background-color: #ffffff; } .home_page_design .btn-primary-action-button-4 { color: #ffffff !important; } /* After user scroll ----------------------------------*/ .home_page_design .navbar-default.affix .btn-primary-action-button-4 { color: #252525 !important; color: var(--menu_text_color) !important; } .home_page_design .navbar-default.affix .btn-primary-action-button-4 .svg-m { background-color: #252525 !important; background-color: var(--menu_text_color) !important; } /* logo - image ----------------------------------*/ .navbar-default.affix .s123-site-logo img, .inside_page_header_design .navbar-default .s123-site-logo img { max-height: 60px; } /* logo */ .navbar-default.affix .navbar-brand { line-height: 60px; height: 60px; } .home_page_design .navbar-default.affix, .inside_page_header_design .navbar-default { border-color: #ebebeb; border-color: var(--menu_thin_border); background-color: #ffffff; background-color: var(--menu_color); border-bottom: 1px solid #ebebeb; border-bottom: 1px solid var(--menu_thin_border); box-shadow: rgb(0 0 0 / 35%) 0px 2px 12px 2px; } .navbar-default.affix .navbar-brand, .inside_page_header_design .navbar-default .navbar-brand { color: #252525; color: var(--menu_text_color); } .navbar-default.affix .nav > li > a, .navbar-default.affix .nav > li > a:focus, .inside_page_header_design .navbar-default .nav > li > a, .inside_page_header_design .navbar-default .nav > li > a:focus { margin-top:0; padding-top: 0; padding-bottom: 0; color: #252525; color: var(--menu_text_color); line-height: 1; padding-top: 6px; padding-bottom: 6px; border-radius: 0; border-bottom: 1px solid transparent; } .navbar-default.affix .nav > li > a .svg-m, .navbar-default.affix .nav > li > a:focus .svg-m, .inside_page_header_design .navbar-default .nav > li > a .svg-m, .inside_page_header_design .navbar-default .nav > li > a:focus .svg-m { background-color: #252525; background-color: var(--menu_text_color); } .navbar-default.affix .navPages > li.active > a, .navbar-default.affix .navPages > li.active > a:focus, .navbar-default.affix .navPages > li > a:not(.navbar-brand):hover, .navbar-default.affix .navPages > li > a:not(.navbar-brand):focus:hover, .inside_page_header_design .navbar-default .navPages > li.active > a, .inside_page_header_design .navbar-default .navPages > li.active > a:focus, .inside_page_header_design .navbar-default .navPages > li > a:not(.navbar-brand):hover, .inside_page_header_design .navbar-default .navPages > li > a:not(.navbar-brand):focus:hover { } .navbar-default.affix .navPages > li.active > a > span, .navbar-default.affix .navPages > li.active > a:focus > span, .navbar-default.affix .navPages > li > a:not(.navbar-brand):hover > span, .navbar-default.affix .navPages > li > a:not(.navbar-brand):focus:hover > span, .inside_page_header_design .navbar-default .navPages > li.active > a > span, .inside_page_header_design .navbar-default .navPages > li.active > a:focus > span, .inside_page_header_design .navbar-default .navPages > li > a:not(.navbar-brand):hover > span, .inside_page_header_design .navbar-default .navPages > li > a:not(.navbar-brand):focus:hover > span { color: #252525; color: var(--menu_text_color); background-color: transparent; border-color: transparent; border-bottom: 1px solid #0088cc; border-bottom: 1px solid var(--menu_text_hover_color); border-radius: 0; opacity: 1; padding-bottom: 3px; } .navbar-default.affix .navPages > li.active > a .svg-m, .navbar-default.affix .navPages > li.active > a:focus .svg-m, .navbar-default.affix .navPages > li > a:not(.navbar-brand):hover .svg-m, .navbar-default.affix .navPages > li > a:not(.navbar-brand):focus:hover .svg-m, .inside_page_header_design .navbar-default .navPages > li.active > a .svg-m, .inside_page_header_design .navbar-default .navPages > li.active > a:focus .svg-m, .inside_page_header_design .navbar-default .navPages > li > a:not(.navbar-brand):hover .svg-m, .inside_page_header_design .navbar-default .navPages > li > a:not(.navbar-brand):focus:hover .svg-m { background-color: #252525; background-color: var(--menu_text_color); } .navbar-default.affix .action-button-wrapper .btn-primary-transparent { color: #252525; color: var(--menu_text_color); } .navbar-default.affix .action-button-wrapper .btn-primary-transparent .svg-m { background-color: #252525; background-color: var(--menu_text_color); } .navbar-default.affix .navActions > li > a:hover { color: #252525; color: var(--menu_text_color); } /* breadcrumb */ .breadcrumb { margin-bottom: 0; } .navbar-default.affix .navPages > li.active > a > span:after, .navbar-default.affix .navPages > li > a:not(.navbar-brand) > span:after, .inside_page_header_design .navbar-default .navPages > li.active > a > span:after, .inside_page_header_design .navbar-default .navPages > li > a:not(.navbar-brand) > span:after { } .navbar-default.affix .navPages > li.active > a:focus > span:after, .navbar-default.affix .navPages > li > a:not(.navbar-brand):hover > span:after, .navbar-default.affix .navPages > li > a:not(.navbar-brand):focus:hover > span:after, .inside_page_header_design .navbar-default .navPages > li.active > a > span:after, .inside_page_header_design .navbar-default .navPages > li.active > a:focus > span:after, .inside_page_header_design .navbar-default .navPages > li > a:not(.navbar-brand):hover > span:after, .inside_page_header_design .navbar-default .navPages > li > a:not(.navbar-brand):focus:hover > span:after { } #top-menu .moduleMenu > a, #popupFloatDivMenu .navPagesPopup a { font-weight: 700 !important; text-transform: uppercase !important; } .site_container { display: flex !important; justify-content: space-between; align-content: center; align-items: center; height: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } /* ########################################## opacity.php ########################################## */ .home_page_design body { padding-top: 80px; } #top-section { min-height:calc(100vh - 81px); } :root { --homepage_layout_height_menu_space: 80px; } .home_page_design .navbar-default { background-color: #ffffff; background-color: var(--menu_color); border-bottom: 1px solid #ebebeb; border-bottom: 1px solid var(--menu_thin_border); } .inside_page_header_design .navbar-default { background-color: #ffffff; background-color: var(--menu_color); border-bottom: 1px solid #ebebeb; border-bottom: 1px solid var(--menu_thin_border); } .home_page_design .navbar-default .navbar-header .navbar-brand,.inside_page_header_design .navbar-default .navbar-header .navbar-brand { color: #252525; color: var(--menu_text_color); } /* svg logo support */ .home_page_design .navbar-default .navbar-brand .svg-m , .inside_page_header_design .navbar-default .navbar-brand .svg-m { background-color: #252525; background-color: var(--menu_text_color); } .home_page_design .navbar-default .nav > li > a, .home_page_design .navbar-default .nav > li > a:focus, .inside_page_header_design .navbar-default .nav > li > a, .inside_page_header_design .navbar-default .nav > li > a:focus { margin-top:0; padding-top: 0; padding-bottom: 0; color: #252525; color: var(--menu_text_color); line-height: 1; padding-top: 6px; padding-bottom: 6px; border-radius: 0; border-bottom: 1px solid transparent; } .home_page_design .navbar-default .nav > li > a > .svg-m, .home_page_design .navbar-default .nav > li > a:focus > .svg-m, .inside_page_header_design .navbar-default .nav > li > a > .svg-m, .inside_page_header_design .navbar-default .nav > li > a:focus > .svg-m { background-color: #252525; background-color: var(--menu_text_color); } .home_page_design .btn-primary-action-button-4 { color: #252525 !important; color: var(--menu_text_color) !important; } .home_page_design .navbar-default .navPages > li.active > a, .home_page_design .navbar-default .navPages > li.active > a:focus, .home_page_design .navbar-default .navPages > li > a:not(.navbar-brand):hover, .home_page_design .navbar-default .navPages > li > a:not(.navbar-brand):focus:hover, .inside_page_header_design .navbar-default .navPages > li.active > a, .inside_page_header_design .navbar-default .navPages > li.active > a:focus, .inside_page_header_design .navbar-default .navPages > li > a:not(.navbar-brand):hover, .inside_page_header_design .navbar-default .navPages > li > a:not(.navbar-brand):focus:hover { } .home_page_design .navbar-default .navPages > li.active > a > span, .home_page_design .navbar-default .navPages > li.active > a:focus > span, .home_page_design .navbar-default .navPages > li > a:not(.navbar-brand):hover > span, .home_page_design .navbar-default .navPages > li > a:not(.navbar-brand):focus:hover > span, .inside_page_header_design .navbar-default .navPages > li.active > a > span, .inside_page_header_design .navbar-default .navPages > li.active > a:focus > span, .inside_page_header_design .navbar-default .navPages > li > a:not(.navbar-brand):hover > span, .inside_page_header_design .navbar-default .navPages > li > a:not(.navbar-brand):focus:hover > span { color: #252525; color: var(--menu_text_color); background-color: transparent; border-color: transparent; border-bottom: 1px solid #0088cc; border-bottom: 1px solid var(--menu_text_hover_color); border-radius: 0; opacity: 1; padding-bottom: 3px; } .home_page_design .navbar-default .navPages > li.active > a .svg-m, .home_page_design .navbar-default .navPages > li.active > a:focus .svg-m, .inside_page_header_design .navbar-default .navPages > li.active > a .svg-m, .inside_page_header_design .navbar-default .navPages > li.active > a:focus .svg-m, .home_page_design .navbar-default .navPages > li > a:not(.navbar-brand):hover .svg-m, .home_page_design .navbar-default .navPages > li > a:not(.navbar-brand):focus:hover .svg-m, .inside_page_header_design .navbar-default .navPages > li > a:not(.navbar-brand):hover .svg-m, .inside_page_header_design .navbar-default .navPages > li > a:not(.navbar-brand):focus:hover .svg-m { background-color: #252525; background-color: var(--menu_text_color); } .home_page_design .navbar-default .navPages > li > a > span:after, .home_page_design .navbar-default .navPages > li > a:focus > span:after, .inside_page_header_design .navbar-default .navPages > li > a > span:after, .inside_page_header_design .navbar-default .navPages > li > a > span:after { } .home_page_design .navbar-default .navPages > li.active > a:focus > span:after, .home_page_design .navbar-default .navPages > li > a:not(.navbar-brand):hover > span:after, .home_page_design .navbar-default .navPages > li > a:not(.navbar-brand):focus:hover > span:after, .inside_page_header_design .navbar-default .navPages > li.active > a > span:after, .inside_page_header_design .navbar-default .navPages > li.active > a:focus > span:after, .inside_page_header_design .navbar-default .navPages > li > a:not(.navbar-brand):hover > span:after, .inside_page_header_design .navbar-default .navPages > li > a:not(.navbar-brand):focus:hover > span:after { } :root { --homepage_padding_top: 50px; } :root { --homepage_padding_bottom: calc(50px + var(--homepage_layout_height_opacity_space_top) + var(--homepage_layout_height_opacity_space_bottom)); } /** * Checkbox Design * Source: https://codepen.io/BrahmaUI/pen/WgOGQz */ .checkbox-label { font-weight: normal; padding-left: 18px; margin-bottom: 10px; display: inline-flex; align-items: center; position: relative; cursor: pointer; clear: both; } html[dir="rtl"] .checkbox-label { padding-left: 0; padding-right: 18px; } .checkbox-label input { position: absolute; opacity: 0; cursor: pointer; } .checkbox-label .checkbox-custom { position: absolute; top: calc(50% - 9px); left: 0; height: 18px; width: 18px; background-color: transparent; border-radius: 2px; box-shadow: inset 0 0 0 1px #cccccc; transition: box-shadow .2s ease,-webkit-box-shadow .2s ease; } html[dir="rtl"] .checkbox-label .checkbox-custom { left: auto; right: 0; } .checkbox-label:hover .checkbox-custom { box-shadow:inset 0 0 0 1px #aaaaaa; } .checkbox-label input:checked ~ .checkbox-custom { background-color: transparent; border-radius: 2px; -webkit-transform: rotate(0deg) scale(1); -ms-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1); opacity:1; } .checkbox-label .checkbox-custom::after { position: absolute; content: ""; left: 9px; top: 9px; height: 0; width: 0; border-radius: 2px; border: solid #555555; border-width: 0 3px 3px 0; -webkit-transform: rotate(0deg) scale(0); -ms-transform: rotate(0deg) scale(0); transform: rotate(0deg) scale(0); opacity:1; } .checkbox-label input:checked ~ .checkbox-custom::after { -webkit-transform: rotate(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); opacity:1; left: 7px; top: 3px; width: 5px; height: 9px; border: solid #555555; border-width: 0 2px 2px 0; background-color: transparent; border-radius: 0; } .checkbox-label .input-title { padding-left: 10px; display: inline-block; } html[dir="rtl"] .checkbox-label .input-title { padding-left: 0; padding-right: 10px; } /* Black Popup Handler - Fix the color to support the system black popup */ #popupFloatDivSearch .checkbox-label .checkbox-custom::after, #popupFloatDivSearch .checkbox-label input:checked ~ .checkbox-custom::after { border-color: #FFFFFF; } /** * Radio Design */ .radio-label { font-weight: normal; } /* IntTelInput ---------------------------------*/ .intl-tel-input .country-list { color: #555; /* Related to Boostrap inputs text colors*/ } /* Global layouts settings ----------------------------------*/ /** * Internet Explorer Scrollbar - Convert the IE Scrollbar into a standard scrollbar * because its go over to page content. * http://answers.microsoft.com/en-us/ie/forum/ie11-windows_7/disappearing-scroll-bar-on-websites/c3b883c6-7c46-4749-97af-02ae4b2cef85?auth=1 */ @-ms-viewport{ width:auto !important } body { font-family: var(--global_font),'Open Sans',Arial,sans-serif; webkit-tap-highlight-color: #222; color: #252525; color: var(--modules_color_text); background-color: #ffffff; background-color: var(--modules_color); /* my full smoothing solution: https://jsfiddle.net/4mn64n2q/ */ -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; text-shadow: 1px 1px 1px rgba(0,0,0,0.004); -webkit-text-stroke: 1px transparent; } .inside_page body { color: #252525; color: var(--inside_modules_color_text); } html[dir="rtl"] body { direction: rtl; } @media (min-width: 768px) { html[dir="rtl"] .navbar-right { float: left!important; } } a { color: #0088cc; color: var(--global_main_color); transition: opacity .35s; } a .svg-m { background-color: #0088cc; background-color: var(--global_main_color); } .mainWebsiteColor { color: #0088cc; color: var(--global_main_color); } /** * Padding Helpers Classes */ .pl-0 { padding-left: 0; } .pr-0 { padding-right: 0; } /** * We use this class to fake a focus on fields * that we are unable to use focus on. */ .fake-input-focus { border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); } /** * Force LTR - Some inputs (e.g. email) need to be LTR even at RTL websites, * but we like the placeholder to be RTL so we use this solution: */ html[dir="rtl"] input.s123-force-ltr:not(:placeholder-shown), html[dir="rtl"] input.s123-force-ltr:focus, html[dir="rtl"] input[type="email"]:not(:placeholder-shown), html[dir="rtl"] input[type="email"]:focus { direction: ltr !important; } html[dir="rtl"] input.s123-force-ltr:placeholder-shown, html[dir="rtl"] input[type="email"]:placeholder-shown { direction: rtl; } html[dir="rtl"] input.s123-force-ltr:focus::-moz-placeholder, html[dir="rtl"] input[type="email"]:focus::-moz-placeholder { color: transparent !important; } html[dir="rtl"] input.s123-force-ltr:focus:-ms-input-placeholder, html[dir="rtl"] input[type="email"]:focus:-ms-input-placeholder { color: transparent !important; } html[dir="rtl"] input.s123-force-ltr:focus::-webkit-input-placeholder, html[dir="rtl"] input[type="email"]:focus::-webkit-input-placeholder { color: transparent !important; } /** * Transition Page Load Handler - We need to added the transition only * after the page loaded, otherwise the transition is apply when the * page is render and there are bugs. e.g. we we select menu links style * as "Transparent Buttons" the links border will highlight on page render. * Source: https://css-tricks.com/transitions-only-after-page-load/ */ html.page-loaded .moduleMenu a { transition: color,background-color,border .35s; } .moduleMenu.separate { border:0; color:rgb(173, 173, 173); text-align: center; } a:hover, a:focus { color: #0088cc; color: var(--global_main_color); opacity: 0.9; outline: none; } h1, h2, h3, h4, h5, h6 { color: inherit; } /* FIX different parts the H1,H2... headers so it will fit the way the product is working */ /* h1, h2, h3, h4, h5, h6 { line-height: 1.5; font-weight: 400; } */ /* FIX different parts the H1,H2... headers so it will fit the way the product is working */ p { margin-bottom: 20px; line-height: 1.5; } hr { max-width: 50px; border-color: #0088cc; border-color: var(--global_main_color); border-width: 3px; } hr.light { border-color: #0088cc; border-color: var(--global_main_color); } .bg-primary hr.light { border-color: #fff; } ::selection, ::-moz-selection { text-shadow: none; color: #fff; background: #222; } img::selection { color: #fff; background: 0 0; } img::-moz-selection { color: #fff; background: 0 0; } .primary-color { color: #0088cc; color: var(--global_main_color); } .inside_page .bg-primary .primary-color .box-primary .svg-m { background-color: #0088cc; background-color: var(--global_main_color); } .background-primary-color { background-color: #0088cc !important; background-color: var(--global_main_color) !important; } .background-primary-color-before:before { background-color: #0088cc; background-color: var(--global_main_color); } .background-primary-color.border-left-before::before { border-left-color: #0088cc; border-left-color: var(--global_main_color); } .background-primary-color.border-right-before::before { border-right-color: #0088cc; border-right-color: var(--global_main_color); } html[dir="rtl"] .background-primary-color.border-left-before::before { border-right-color: #0088cc; border-right-color: var(--global_main_color); } html[dir="rtl"] .background-primary-color.border-right-before::before { border-left-color: #0088cc; border-left-color: var(--global_main_color); } @media(max-width:900px) { .background-primary-color.border-left-before::before { border-right-color: #0088cc; border-right-color: var(--global_main_color); border-left-color: transparent; } html[dir="rtl"] .background-primary-color.border-left-before::before { border-right-color: transparent; border-left-color: #0088cc; border-left-color: var(--global_main_color); } } .loading-primary { color: #0088cc; color: var(--global_main_color); } .loading-primary .svg-m { background-color: #0088cc; background-color: var(--global_main_color); } .btn-primary-text-color { color: #ffffff !important; color: var(--global_main_color_btn_text_color) !important; } /* main page - shadow color */ .bg-primary .s123-module-shadows.shadow-before { background: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0) 100%) !important; } .bg-primary .s123-module-shadows.shadow-after { background: linear-gradient(to right, rgba(255,255,255,0) 0%, #ffffff 100%) !important; } /* secondary page - shadow color */ .s123-module-shadows.shadow-before { background: linear-gradient(to right, #fafafa 0%, rgba(255,255,255,0) 100%) !important; } .s123-module-shadows.shadow-after { background: linear-gradient(to right, rgba(255,255,255,0) 0%, #fafafa 100%) !important; } /* inside page - shadow color */ .inside_page .s123-module-shadows.shadow-before { background: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0) 100%) !important; } .inside_page .s123-module-shadows.shadow-after { background: linear-gradient(to right, rgba(255,255,255,0) 0%, #ffffff 100%) !important; } /** * Fancy Scrollbar - Design the scroll bar. */ .fancy-scrollbar::-webkit-scrollbar { height: 9px !important; width: 9px !important; } .fancy-scrollbar::-webkit-scrollbar-track-piece { background:#4f5050; } .fancy-scrollbar::-webkit-scrollbar-track-piece:vertical:start { border-radius:0px !important; } .fancy-scrollbar::-webkit-scrollbar-track-piece:vertical:end { border-radius:0px !important; } .fancy-scrollbar::-webkit-scrollbar-track-piece:horizontal:start { border-radius:0px !important; } .fancy-scrollbar::-webkit-scrollbar-track-piece:horizontal:end { border-radius:0px !important; } .fancy-scrollbar::-webkit-scrollbar-thumb:horizontal,.fancy-scrollbar::-webkit-scrollbar-thumb:vertical { background:#C4C9CC !important; border-radius:0px !important; display:block !important; height:50px !important; } /* ########################################## cssButtons.php ########################################## */ /* Buttons ----------------------------------*/ .btn { border: 0; border-radius: 0; text-transform: uppercase; font-weight: 400; } .btn:focus { outline: none; } .btn-link { border:0 !important; } .btn-link::before { border:0 !important; } .btn-primary { border: 1px solid #0088cc; border: 1px solid var(--global_main_color); color: #ffffff; color: var(--global_main_color_btn_text_color); background-color: #0088cc; background-color: var(--global_main_color); transition: background-color .35s, opacity .35s; } .btn-primary .svg-m { background-color: #ffffff; background-color: var(--global_main_color_btn_text_color); } .btn-primary-transparent { border: 1px solid; background-color: transparent; } .btn-primary-transparent-main { border: 1px solid #0088cc; border: 1px solid var(--global_main_color); color: #0088cc; color: var(--global_main_color); background-color: transparent; } .btn-primary-transparent-main .svg-m, .s123-module .btn-primary-transparent-main.btn-primary .svg-m { background-color: #0088cc; background-color: var(--global_main_color); } .s123-module .btn-primary-transparent-main.btn-primary:hover .svg-m, .s123-module .btn-primary-transparent-main.btn-primary:focus .svg-m { background-color: #ffffff; background-color: var(--global_main_color_btn_text_color); } .btn-primary-simplelink { color: #0088cc !important; color: var(--global_main_color) !important; background: transparent; border: none !important; outline: none; box-shadow: none!important; padding: 0 !important; align-self: center; font-size: 1.1rem; } .btn-primary-simplelink:hover, .btn-primary-simplelink:focus { color: #444950; background: transparent !important; } .btn-primary-simplelink .svg-m, .s123-module .btn-primary-simplelink.btn-primary .svg-m { background-color: #0088cc; background-color: var(--global_main_color); } .btn-primary-simplelink:hover .svg-m, .s123-module .btn-primary-simplelink.btn-primary:hover .svg-m, .btn-primary-simplelink:focus .svg-m, .s123-module .btn-primary-simplelink.btn-primary:focus .svg-m { background-color: #0088cc !important; background-color: var(--global_main_color) !important; } .btn-primary-simplelink-text-color { color: #ffffff !important; background: transparent; border: none !important; outline: none; box-shadow: none!important; padding: 0 !important; align-self: center; font-size: 1.1rem; } .btn-primary-simplelink-text-color:hover, .btn-primary-simplelink-text-color:focus { color: #444950; background: transparent !important; } .btn-primary-simplelink-text-color .svg-m, .s123-module .btn-primary-simplelink-text-color.btn-primary .svg-m { background-color: #ffffff; } .btn-primary-simplelink-text-color:hover .svg-m, .s123-module .btn-primary-simplelink-text-color.btn-primary:hover .svg-m, .btn-primary-simplelink-text-color:focus .svg-m, .s123-module .btn-primary-simplelink-text-color.btn-primary:focus .svg-m { background-color: #ffffff !important; } .btn-primary-white { background-color: #ffffff; color: #000000; border-color:transparent; } .btn-primary-white .svg-m { background-color: #000000; } .btn-primary-white:hover, .btn-primary-white:focus { opacity:0.9; } .btn-primary:hover, .btn-primary:focus { border-color: #0088cc; border-color: var(--global_main_color); color: #ffffff; color: var(--global_main_color_btn_text_color); background-color: #0088cc; background-color: var(--global_main_color); opacity: 0.9; } .btn-primary:hover .svg-m, .btn-primary:focus .svg-m { background-color: #ffffff; background-color: var(--global_main_color_btn_text_color); } .btn-primary-transparent:hover, .btn-primary-transparent:focus { opacity: 1; color: #ffffff !important; } .btn-primary-transparent:hover .svg-m, .btn-primary-transparent:focus .svg-m { background-color: #ffffff !important; background-color: var(--global_main_color_btn_text_color) !important; } .btn-primary .badge { color: #ffffff; color: var(--modules_color); background-color: #fff; } .btn-sm { padding: 6px 12px; font-size: 12px; line-height: 1.5; border-radius: 3px; } .btn-xl { padding: 0.9rem 1.85rem; } .btn-xxl { padding: 18px 34px; /* make it bigger in approximately 3 pixels then it's current font size */ font-size: 1.15rem; } .btn-primary-simplelink.btn-xxl, .btn-primary-simplelink-text-color.btn-xxl { /* make it bigger in approximately 3 pixels then it's current font size */ font-size: 1.28rem; } .btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary, .btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled.focus, .btn-primary[disabled].focus, fieldset[disabled] .btn-primary.focus, .btn-primary.disabled:active, .btn-primary[disabled]:active, fieldset[disabled] .btn-primary:active, .btn-primary.disabled.active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary.active { border-color: #0088cc; border-color: var(--global_main_color); background-color: #0088cc; background-color: var(--global_main_color); }/* ###################################### Global Stuff ###################################### */ .padding-2 { padding:2%; padding-top:0; } .padding-bottom-2 { padding-bottom: 20px; } .padding-5px { padding: 5px; } .padding-10px { padding: 10px; } .row-flex { display: flex; flex-direction: row; flex-wrap: wrap; } .items-equal-height { } .full-image-width { position: relative; height: 200px; background-position: center center; background-repeat: no-repeat; background-size: cover; display: block; } .label-date { position: absolute; top: 10px; left: 10px; background-color: rgba(0, 0, 0, 0.7); text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px; color: rgb(255, 255, 255); width: 60px; height: 64px; text-align: center; padding-top: 7px; font-size: 26px; line-height: 1; z-index: 1; text-decoration: none; } .label-date span { display: block; font-size: 15px; margin-top: 5px; } .share-buttons { list-style: none; padding: 0; display: flex; align-items: center; } .share-buttons.square li a { color: #252525; color: var(--modules_color_text); opacity: 0.7; padding: 2px 8px; font-size: 1.3em; } .inside_page .share-buttons.square li a { color: #252525; color: var(--inside_modules_color_text); } .inside_page .share-buttons.square li a .svg-m { background-color: #252525; background-color: var(--inside_modules_color_text); } .share-buttons.square li a:hover { opacity: 1; } .s123-card { margin: 0 0 30px; position: relative; border: 1px solid #ebebeb; border: 1px solid var(--module_separate_border_color); border-radius: 3px; display: flex; } .s123-card .module-title h3 { padding: 0; font-size: 0.8rem; line-height: 1.2; font-weight: normal; letter-spacing: 1px; margin: 0; text-transform: uppercase; } .s123-card .module-bg { background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative; width: 100px; height: 100px; float: left; } .s123-card .module-details { overflow: hidden; padding: 5px; position: relative; float: left; } .s123-card .module-meta { list-style: none; padding: 0; margin-bottom: -5px; } .s123-card .module-meta li { font-size: 0.5rem; } .v1-card { margin: 0 0 30px; position: relative; border: 1px solid #ebebeb; border: 1px solid var(--module_separate_border_color); border-radius: 3px; display: flex; } .v1-card.v1-top { flex-direction: column; } .v1-card .v1-image { background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative; width: 100%; height: 150px; } .v1-card .v1-body { padding:10px; } .v1-card .v1-body .v1-title { margin: 0; font-size: 1.5em; text-align: initial; margin-bottom: 10px; } /* ###################################### box_1 ###################################### */ .lm.box { padding: 0; position: relative; } .lm.box .product-details-container { padding: 10px; } .lm.box .buttons-container { padding: 10px; } .lm.box .product-sale-banner { position: absolute; left: 10px; top: 10px; opacity: 1; z-index: 1; } .lm.box .label-date { position: absolute; top: 10px; left: 10px; background-color: rgba(0, 0, 0, 0.7); text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px; color: rgb(255, 255, 255); width: 60px; height: 64px; text-align: center; padding-top: 7px; font-size: 26px; line-height: 1; z-index: 1; text-decoration: none; } .lm.box .label-date span { display: block; font-size: 15px; margin-top: 5px; } .lm.box .product-sale-banner:hover { opacity: 1; } .lm.box .product-sale-banner { position: absolute; left: 10px; top: 10px; opacity: 1; z-index: 1; } .lm.box .product-sale-banner:hover { opacity: 1; } .lm.box .product-image { width: 100%; padding-bottom: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; font-size: 0; display: block; height: 200px; padding: 0; } .lm.box.box_1 .buttons { text-align: center; margin:20px 0 5px 0; } .lm.box .product-details-container { overflow: hidden; } .lm.box .product-details-container h4 { margin: 0.75em 0; } .lm.box .product-details-container p.short { margin-bottom: 0.75em; height: 106px; overflow: hidden; display: block; /* Fallback for non-webkit */ display: -webkit-box; max-width: 100%; height: 63px; /* Fallback for non-webkit */ font-size: 15px; line-height: 1.4; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .lm.box .list-price { opacity: 0.4; text-decoration: line-through; } .lm.box.box-no-border .product-details-container { padding: 0 10px; } .lm.box.box-no-border .product-details-container H4 { margin-top:0; } /* ###################################### box_1 Style 2 ###################################### */ .lm.box.box_2 { display: flex; flex-direction: row; height: 250px; } .lm.box.box_2 .product-image { width: 20%; height: 100%; padding: 0; } .lm.box.box_2.noImages .product-image { width: 100px; } .lm.box.box_2 .product-details-container { width: 80%; flex-grow: 1; display: flex; flex-direction: column; } .lm.box.box_2.noImages .product-details-container { width: 100%; } .lm.box.box_2 .buttons { display:flex; flex-grow: 1; align-items: flex-end; align-content: center; justify-content: flex-start; } /* ###################################### box_3 ###################################### */ .lm.box.box_3 { width: 90%; float: none; margin: 0 auto; border: 1px solid #e5e5e5; margin-bottom: 20px; overflow: hidden; display: block; text-align: center; } @media (min-width: 992px) { .lm.box.box_3 { width: 50%; } } .lm.box.box_3 .blog-m-meta { margin: 10px !important; margin-bottom: 5px !important; display: inline-block; list-style: none; } .lm.box.box_3 .news-blog-module { margin: 0 0 30px; position: relative; border: 1px solid #ddd; border-radius: 3px; } .lm.box.box_3 .blog-container { clear: both; } @media ( min-width: 768px ) { .lm.box.box_3 .blog-container { clear: none; } .lm.box.box_3 .blog-container:nth-child(odd) { clear: both; } } .lm.box.box_3 .news-blog-module-frame { border: 1px solid #e5e5e5; padding: 6px; margin-bottom: 15px; } .lm.box.box_3 .news-blog-module-bg { background-position: center center; background-repeat: no-repeat; background-size: cover; height: 250px; position: relative; width: 100%; } .lm.box.box_3 .news-blog-module-details { overflow: hidden; padding: 20px; position: relative; } .lm.box.box_3 .news-blog-module-title h2 { padding-bottom: 20px; font-size: 20px; font-weight: 600; letter-spacing: 1px; margin: 0; text-transform: uppercase; } .lm.box.box_3 .news-blog-module-meta { list-style: none; padding: 0; margin-bottom: -5px; } .lm.box.box_3 .news-blog-module-meta li { float: left; font-size: 14px; font-style: italic; line-height: 14px; margin: 0 10px 10px 0; } html[dir=rtl] .lm.box.box_3 .news-blog-module-meta li { float: right; } html[dir=rtl] .lm.box.box_3 .news-blog-module-meta li:before { margin-left: 10px; margin-right: 0; } .lm.box.box_3 .news-blog-module-meta li i { margin-right: 3px; margin-bottom: 15px; position: relative; top: 1px; } html[dir=rtl] .lm.box.box_3 .news-blog-module-meta li i { margin-left: 3px; margin-right: 0; } .lm.box.box_3 .news-blog-module-content a { float: right; } html[dir=rtl] .lm.box.box_3 .news-blog-module-content a { float: left; } html[dir=rtl] .lm.box.box_3 .fa-angle-right:before { content: "\f104"; } /* Top Menu ----------------------------------*/ .website-name, .logo_name { font-family: var(--font_logo),'Open Sans',Arial,sans-serif; } #mainNav { font-family: var(--font_menu),'Open Sans',Arial,sans-serif; z-index: 3000; } .logo_hidden { visibility: hidden; position: fixed; height: auto !important; } /* Modules ----------------------------------*/ .s123-modules-container { position: relative; } .s123-modules-container section { position: relative; } .s123-page-container section { position: relative; } .s123-page-container section { position: relative; } .s123-content-area { min-height: 80vh; } .s123-content-area section { min-height: 80vh; } .inside_page .s123-module, .home_page .s123-module { padding: 100px 0; padding: var(--sectionsPadding) 0; } @media(max-width:767px) { .inside_page .s123-module, .home_page .s123-module { padding: 50px 0; padding: calc( var(--sectionsPadding) / 2 ) 0; } } .inside_page .s123-module.s123-page-data { padding: 20px 0; } @media(max-width:767px) { .inside_page .s123-module.s123-page-data { padding: 20px 0; } } .modulesTitle H1, .modulesTitle H2 { font-family: var(--font_modules_header),'Open Sans',Arial,sans-serif; margin-top:0; text-shadow: 1px 1px 1px rgba(0,0,0,.1); letter-spacing: 0.5px; text-transform: uppercase; line-height: 1.5; } #s123ModulesContainer section#section-169 .header1, #s123ModulesContainer section#section-169 .header2, #s123ModulesContainer section[data-module-type-num="167"] .header1, #s123ModulesContainer section[data-module-type-num="167"] .header2 { font-family: var(--font_modules_header),'Open Sans',Arial,sans-serif; line-height: 1.3; } #s123ModulesContainer section#section-169 .header1.header-global-font, #s123ModulesContainer section#section-169 .header2.header-global-font, #s123ModulesContainer section[data-module-type-num="167"] .header1.header-global-font, #s123ModulesContainer section[data-module-type-num="167"] .header2.header-global-font { font-family: var(--global_font),'Open Sans',Arial,sans-serif; } /* Modules Colors & Settings ----------------------------------*/ .home_page .modulesTitle { padding-bottom:10px; } .s123-content-area .modulesTitle { padding-top:20px; padding-bottom:10px; } .s123-module { color: #252525; color: var(--modules_color_text_second); background-color: #fafafa; background-color: var(--modules_color_second); } /* on layout and data page remove the top padding of the titles because now the section has the padding */ .s123-content-area .s123-module .modulesTitle { padding-top: 0px; } .s123-module .svg-m { background-color: #252525; background-color: var(--modules_color_text_second); } .s123-module a .svg-m { background-color: #0088cc; background-color: var(--global_main_color); } .s123-module .btn-primary .svg-m { background-color: #ffffff; background-color: var(--global_main_color_btn_text_color); } .home_page .s123-module { border-bottom: 1px solid #ebebeb; border-bottom: 1px solid var(--module_separate_border_color); } .inside_page .s123-page-data.dataPageBreadcrumbs { padding-top: 0; } .inside_page .s123-page-data.dataPageBreadcrumbs .modulesTitle { padding-top:20px; padding-bottom:10px; } .bg-primary { color: #252525; color: var(--modules_color_text); background-color: #ffffff; background-color: var(--modules_color); } .bg-primary .svg-m { background-color: #252525; background-color: var(--inside_modules_color_text); } .bg-primary .btn-link .svg-m { background-color: #337ab7; } .bg-primary .btn-primary .svg-m { background-color: #ffffff; background-color: var(--global_main_color_btn_text_color); } .inside_page .bg-primary { color: #252525; color: var(--inside_modules_color_text); background-color: #ffffff; background-color: var(--inside_modules_color); } .bg-primary .text-primary { color: #252525; color: var(--modules_color_text); } .inside_page .bg-primary .text-primary { color: #252525; color: var(--inside_modules_color_text); } .bg-primary .text-inverse { color: #0088cc; color: var(--global_main_color); } .bg-primary-black { color: #fff; background-color: #000; } .bg-primary-gray { color: #444950; background-color: #ebedf0; } .bg-primary-white { color: #000; background-color: #fff; } .bg-primary-black.border-left-before::before { border-left-color: #000; } .bg-primary-black.border-right-before::before { border-right-color: #000; } html[dir="rtl"] .bg-primary-black.border-left-before::before { border-right-color: #000; } html[dir="rtl"] .bg-primary-black.border-right-before::before { border-left-color: #000; } .bg-primary-gray.border-left-before::before { border-left-color: #ebedf0; } .bg-primary-gray.border-right-before::before { border-right-color: #ebedf0; } html[dir="rtl"] .bg-primary-gray.border-left-before::before { border-right-color: #ebedf0; } html[dir="rtl"] .bg-primary-gray.border-right-before::before { border-left-color: #ebedf0; } .bg-primary-white.border-left-before::before { border-left-color: #fff; } .bg-primary-white.border-right-before::before { border-right-color: #fff; } html[dir="rtl"] .bg-primary-white.border-left-before::before { border-right-color: #fff; } html[dir="rtl"] .bg-primary-white.border-right-before::before { border-left-color: #fff; } @media(max-width:900px) { .bg-primary-black.border-left-before::before { border-right-color: #000; border-left-color: transparent; } html[dir="rtl"] .bg-primary-black.border-left-before::before { border-right-color: transparent; border-left-color: #000; } .bg-primary-gray.border-left-before::before { border-right-color: #ebedf0; border-left-color: transparent; } html[dir="rtl"] .bg-primary-gray.border-left-before::before { border-right-color: transparent; border-left-color: #ebedf0; } .bg-primary-white.border-left-before::before { border-right-color: #fff; border-left-color: transparent; } html[dir="rtl"] .bg-primary-whitek.border-left-before::before { border-right-color: transparent; border-left-color: #fff; } } .text-primary { color: #0088cc; color: var(--global_main_color); } .text-inverse { color: #252525; color: var(--modules_color_text); } .inside_page .text-inverse { color: #252525; color: var(--inside_modules_color_text); } .border-primary { border-color: #0088cc; border-color: var(--global_main_color); } .border-top-primary { border-top-color: #0088cc; border-top-color: var(--global_main_color); } .border-right-primary { border-right-color: #0088cc; border-right-color: var(--global_main_color); } .border-left-primary { border-left-color: #0088cc; border-left-color: var(--global_main_color); } .border-bottom-primary { border-bottom-color: #0088cc; border-bottom-color: var(--global_main_color); } .site123-box-border { box-shadow: none; border: 1px solid #ebebeb !important; border: 1px solid var(--module_separate_border_color) !important; border-radius: 0px !important; } /* Box inside Modules - Colors & Settings ----------------------------------*/ .bg-primary .box-primary { background-color: #fafafa !important; background-color: var(--modules_color_box) !important; } .inside_page .bg-primary .box-primary { background-color: #fafafa !important; background-color: var(--inside_modules_color_box) !important; } .bg-primary .box-primary p, .bg-primary .box-primary label, .bg-primary .box-primary h2, .bg-primary .box-primary h3, .bg-primary .box-primary h4, .bg-primary .box-primary h5, .bg-primary .box-primary h6, .bg-primary .box-primary li, .bg-primary .box-primary.box-text-primary, .bg-primary .box-primary.box-text-primary span, .bg-primary .box-primary.box-text-primary strong, .bg-primary .box-primary .box-text-primary, .bg-primary .box-primary .box-text-primary span, .bg-primary .box-primary .box-text-primary strong { color: #252525 !important; color: var(--modules_color_text_box) !important; } .bg-primary .box-primary .price { color: #252525 !important; color: var(--modules_color_text_box) !important; } /* Sometimes we don't want to use the main link color of the website for some links (like in songs player) so we add this class to the links */ .box-primary .box-primary a.moduleTextColor { color: #252525 !important; color: var(--modules_color_text_box) !important; } .inside_page .bg-primary .box-primary p, .inside_page .bg-primary .box-primary label, .inside_page .bg-primary .box-primary h2, .inside_page .bg-primary .box-primary h3, .inside_page .bg-primary .box-primary h4, .inside_page .bg-primary .box-primary h5, .inside_page .bg-primary .box-primary h6, .inside_page .bg-primary .box-primary li, .inside_page .bg-primary .box-primary.box-text-primary, .inside_page .bg-primary .box-primary.box-text-primary span, .inside_page .bg-primary .box-primary.box-text-primary strong, .inside_page .bg-primary .box-primary .box-text-primary, .inside_page .bg-primary .box-primary .box-text-primary span, .inside_page .bg-primary .box-primary .box-text-primary strong { color: #252525 !important; color: var(--inside_modules_color_text_box) !important; } .inside_page .bg-primary .box-primary .svg-m, .inside_page .bg-primary .box-primary.box-text-primary .svg-m { background-color: #252525; background-color: var(--inside_modules_color_text_box); } .inside_page .bg-primary .box-primary .price { color: #252525 !important; color: var(--inside_modules_color_text_box) !important; } /* Sometimes we don't want to use the main link color of the website for some links (like in songs player) so we add this class to the links */ .inside_page .box-primary .box-primary a.moduleTextColor { color: #252525 !important; color: var(--inside_modules_color_text_box) !important; } .bg-primary .box-primary.border-left-before::before { border-left-color: #fafafa; border-left-color: var(--modules_color_box); } html[dir="rtl"] .bg-primary .box-primary.border-left-before::before { border-right-color: #fafafa; border-right-color: var(--modules_color_box); } .bg-primary .box-primary.border-right-before::before { border-right-color: #fafafa; border-right-color: var(--modules_color_box); } html[dir="rtl"] .bg-primary .box-primary.border-right-before::before { border-left-color: #fafafa; border-left-color: var(--modules_color_box); } .inside_page .bg-primary .box-primary.border-right-before::before { border-right-color: #fafafa} html[dir="rtl"] .inside_page .bg-primary .box-primary.border-right-before::before { border-left-color: #fafafa} @media(max-width:900px) { .bg-primary .box-primary.border-left-before::before { border-right-color: #fafafa; border-right-color: var(--modules_color_box); border-left-color: transparent; } html[dir="rtl"] .bg-primary .box-primary.border-left-before::before { border-right-color: transparent; border-left-color: #fafafa; border-left-color: var(--modules_color_box); } .inside_page .bg-primary .box-primary.border-left-before::before { border-right-color: #fafafa; border-right-color: var(--inside_modules_color_box); border-left-color: transparent; } html[dir="rtl"] .inside_page .bg-primary .box-primary.border-left-before::before { border-right-color: transparent; border-left-color: #fafafa; border-left-color: var(--inside_modules_color_box); } } /* Secondery */ .box-primary { background-color: #ffffff !important; background-color: var(--modules_color_second_box) !important; } .box-primary p, .box-primary label, .box-primary h2, .box-primary h3, .box-primary h4, .box-primary h5, .box-primary h6, .box-primary li, .box-primary.box-text-primary, .box-primary.box-text-primary span:not(.a-b-container,.a-b-t), /* exclude action buttons text */ .box-primary.box-text-primary strong, .box-primary .box-text-primary, .box-primary .box-text-primary span:not(.a-b-container,.a-b-t), /* exclude action buttons text */ .box-primary .box-text-primary strong { color: #252525 !important; color: var(--modules_color_text_second_box) !important; } .box-primary .svg-m, .box-primary.box-text-primary .svg-m, .box-primary .box-text-primary .svg-m { background-color: #252525; background-color: var(--inside_modules_color_text_box); } .box-primary.border-left-before::before { border-left-color: #ffffff; border-left-color: var(--modules_color_second_box); } html[dir="rtl"] .box-primary.border-left-before::before { border-right-color: #ffffff; border-right-color: var(--modules_color_second_box); } .box-primary.border-right-before::before { border-right-color: #ffffff; border-right-color: var(--modules_color_second_box); } html[dir="rtl"] .box-primary.border-right-before::before { border-left-color: #ffffff; border-left-color: var(--modules_color_second_box); } @media(max-width:900px) { .box-primary.border-left-before::before { border-right-color: #ffffff; border-right-color: var(--modules_color_second_box); border-left-color: transparent; } html[dir="rtl"] .box-primary.border-left-before::before { border-right-color: transparent; border-left-color: #ffffff; border-left-color: var(--modules_color_second_box); } } /* SVG Icons Inside Of Buttons - Make sure the svg icons inside of buttons will keep their colors even when they are inside of other design combinations ---------------------*/ .inside_page .bg-primary .box-primary .btn-primary .svg-m, .box-primary .btn-primary .svg-m { background-color: #ffffff; background-color: var(--global_main_color_btn_text_color); } .box-primary .price { color: #252525 !important; color: var(--modules_color_text_second_box) !important; } /* Sometimes we don't want to use the main link color of the website for some links (like in songs player) so we add this class to the links */ .box-primary a.moduleTextColor { color: #252525 !important; color: var(--modules_color_text_second_box) !important; } /* `box-text-primary` can't display custom text color for Froala editor that using BR as line breaks */ .box-primary .fr-view { color: #252525 !important; color: var(--modules_color_text_second_box) !important; } /* svg icons - colors in different combinations */ .primary-color .svg-m, .primary-color.svg-m { background-color: #0088cc; background-color: var(--global_main_color); } .primary-color .box-primary .svg-m { background-color: #0088cc; background-color: var(--global_main_color); } .bg-primary .primary-color .svg-m { background-color: #0088cc; background-color: var(--global_main_color); } .btn-primary-text-color .svg-m { background-color: #ffffff; background-color: var(--global_main_color_btn_text_color); } /* SVG Icons Inside Of Links - Make sure the svg icons inside of links will keep their colors even when they are inside of other design combinations ---------------------*/ .box-primary a .svg-m, .box-primary.box-text-primary a .svg-m { background-color: #0088cc; background-color: var(--global_main_color); } .s123-box-padding { padding:2em; } .s123-box-padding-thin { padding:1em; } .s123-box-margin-bottom { margin-bottom:2em; } .s123-box-clean { border: 0; border-radius: 0; } .s123-box-border { border: 1px solid #e0e0e0; border-radius: 0.3rem; } .s123-box-shadow { border-radius: .25rem; box-shadow: 0 .3125rem .875rem 0 rgba(129,129,129,.2)!important; } .s123-box-top-primary-border { border: 1px solid #e0e0e0; border-radius: 0.3rem; border-top:3px solid #0088cc; border-top:3px solid var(--global_main_color); } .s123-box-top-primary-big { border: 0; border-radius: 0.3rem; border-top:6px solid #0088cc; border-top:6px solid var(--global_main_color); } /* SITE123 card box */ .s123-card { margin: 0 0 30px; position: relative; border: 1px solid #ebebeb; border-radius: 3px; display: flex; flex-direction: column; } .s123-card .image-container { width: 100%; height: 10em; overflow: hidden; } .s123-card .image-container .main-image { display: flex; height: 100%; width: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative; transition: transform 0.5s; } .s123-card:hover .image-container .main-image { transform: translate(0%,0%) scale(1.1); } .s123-card .image-container .square-date { position: absolute; top: 10px; left: 10px; background-color: rgba(0, 0, 0, 0.7); text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px; color: rgb(255, 255, 255); width: 60px; height: 64px; text-align: center; padding-top: 7px; font-size: 26px; line-height: 1; z-index: 1; text-decoration: none; } .s123-card .image-container .square-date span.s-d-month { color: rgb(255, 255, 255) !important; display: block; font-size: 15px; margin-top: 5px; } .s123-card .details { overflow: hidden; padding: 20px; position: relative; } .s123-card .details .title { height: 2.5em; } .s123-card .details .title > a { color: black; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .s123-card .details .title > a:hover { text-decoration: none; } .s123-box-right-primary-border { border: 1px solid #e0e0e0; border-radius: 0.3rem; border-right:3px solid #0088cc; border-right:3px solid var(--global_main_color); } html[dir="rtl"] .s123-box-right-primary-border { border-right: 1px solid #e0e0e0; border-left:3px solid #0088cc; border-left:3px solid var(--global_main_color); } .s123-box-right-primary-border-hover { border: 1px solid #e0e0e0; border-radius: 0.3rem; border-right:8px solid #e0e0e0; transition: border-color 0.5s ease; } .s123-box-right-primary-border-hover:hover { border-right:8px solid #0088cc; border-right:8px solid var(--global_main_color); } html[dir="rtl"] .s123-box-right-primary-border-hover { border-right: 1px solid #e0e0e0; border-left:8px solid #e0e0e0; } html[dir="rtl"] .s123-box-right-primary-border-hover:hover { border-right: 1px solid #e0e0e0; border-left:8px solid #0088cc; border-left:8px solid var(--global_main_color); } .s123-box-left-primary-border { border: 1px solid #e0e0e0; border-radius: 0.3rem; border-left:3px solid #0088cc; border-left:3px solid var(--global_main_color); } html[dir="rtl"] .s123-box-left-primary-border { border-left:1px solid #e0e0e0; border-right:3px solid #0088cc; border-right:3px solid var(--global_main_color); } .s123-box-bottom-primary-border { border: 1px solid #e0e0e0; border-radius: 0.3rem; border-bottom:3px solid #0088cc; border-bottom:3px solid var(--global_main_color); } .s123-box-bottom-primary-border-hover { border: 1px solid #e0e0e0; border-radius: 0.3rem; border-bottom:8px solid #e0e0e0; transition: border-color 0.5s ease; } .s123-box-bottom-primary-border-hover:hover { border-bottom:8px solid #0088cc; border-bottom:8px solid var(--global_main_color); } .s123-box-flying-up { transition: transform .6s ease-out; transform: translateY(0); } .s123-box-flying-up:hover { transition: transform .6s ease-out; transform: translateY(-4px); } .s123-btn-tag { border: none; color: rgba(0,0,0,.68); background: rgba(0,0,0,.05); font-size: 0.8em; letter-spacing: 0; text-decoration: none; border-radius: 3px; padding: 5px 10px; line-height: 2.5; } .s123-btn-tag:hover { background: rgba(0,0,0,.1); color: rgba(0,0,0,.68); text-decoration: none; } .s123-btn-tag.s123-btn-tag-btn-colors { color: #ffffff; color: var(--global_main_color_btn_text_color); background: #0088cc; background: var(--global_main_color); } .page-text-color { color: #252525 !important; color: var(--modules_color_text_second) !important; } .bg-primary .page-text-color { color: #252525 !important; color: var(--modules_color_text) !important; } .inside_page .bg-primary .page-text-color { color: #252525 !important; color: var(--inside_modules_color_text) !important; } /* Pagination ----------------------------------*/ .pagination > li > a, .pagination > li > span { color: #0088cc; color: var(--global_main_color); background-color: #fafafa; background-color: var(--modules_color_box); border: 1px solid #0088cc; border: 1px solid var(--global_main_color); } .inside_page .pagination > li > a { background-color: #fafafa; background-color: var(--inside_modules_color_box); } .pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover { color: #fff; background-color: #0088cc; background-color: var(--global_main_color); border-color: #0088cc; border-color: var(--global_main_color); } .inside_page .pagination > .active > a { background-color: #0088cc; background-color: var(--global_main_color); } .pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover { color: #fff; background-color: #0088cc; background-color: var(--global_main_color); border-color: #0088cc; border-color: var(--global_main_color); } /* Modal (Open window) CSS ----------------------------------*/ .modal { z-index: 3001; } .modal-content { border-radius: 0; -webkit-box-shadow: none; box-shadow: none; } .modal-header .close { font-size: 32px; } button.close { font-size: 32px; } /* Video Player Design ----------------------------------*/ .s123-video-cover { position: absolute; left:0; top:0; width:100%; height:100%; display: flex; align-items: center; align-content: center; justify-content: center; cursor: pointer; } .s123-video-cover .s123-video-play-icon { padding: 10px; background-color: #000; padding: 10px 26px; background-color: rgba(0, 0, 0, 0.57); color: white; border-radius: 15px; font-size: 22px; } .s123-video-cover .s123-video-play-icon.v-p-i-xs { padding: 5px 13px; border-radius: 10px; font-size: 16px; } .s123-video-cover .s123-video-play-icon .svg-m { background-color: white; } .s123-video-cover:hover .s123-video-play-icon { background-color: #0088cc; background-color: var(--global_main_color); } /* Categories Filter ---------------------*/ .s123-categories ul { list-style: none; padding: 0; margin: 0 0 2.142em 0; text-align: center; } .s123-categories li { display: inline-flex; margin: 0.1714em 0.1714em; } .s123-categories li:first-child:before { display: none; } .s123-categories li a { text-transform: none; font-weight: bold; padding: 0.457em 1.414em; border: 1px solid #0088cc; border: 1px solid var(--global_main_color); text-decoration: none; border-radius: 3px; transition: color,background-color .25s; font-size: 0.8em; } .s123-categories li a:hover, .s123-categories li.active a { font-weight: bold; text-decoration: none; border: 1px solid #0088cc; border: 1px solid var(--global_main_color); color: #ffffff; color: var(--global_main_color_btn_text_color); background-color: #0088cc; background-color: var(--global_main_color); } /* Mobile & Tablet - Add horizontal scrolling to the categories ----------------------------------*/ .s123-categories .m-r-s { display: none;; position: absolute; width: 10px; top: 0; bottom: 0; } /* categories shadow in mobile - secondary page design */ .s123-categories .m-r-s:first-child { box-shadow: inset 8px 0px 5px -5px #fafafa; box-shadow: inset 8px 0px 5px -5px var(--modules_color_second); left: 15px; } .s123-categories .m-r-s:last-child { box-shadow: inset -8px 0px 5px -5px #fafafa; box-shadow: inset -8px 0px 5px -5px var(--modules_color_second); right: 15px; } /* categories shadow in mobile - main page design */ .bg-primary .s123-categories .m-r-s:first-child { box-shadow: inset 8px 0px 5px -5px #ffffff; box-shadow: inset 8px 0px 5px -5px var(--modules_color); left: 15px; } .bg-primary .s123-categories .m-r-s:last-child { box-shadow: inset -8px 0px 5px -5px #ffffff; box-shadow: inset -8px 0px 5px -5px var(--modules_color); right: 15px; } /* categories shadow in mobile - inside page design */ .inside_page .s123-categories .m-r-s:first-child { box-shadow: inset 8px 0px 5px -5px #ffffff; box-shadow: inset 8px 0px 5px -5px var(--inside_modules_color); left: 15px; } .inside_page .s123-categories .m-r-s:last-child { box-shadow: inset -8px 0px 5px -5px #ffffff; box-shadow: inset -8px 0px 5px -5px var(--inside_modules_color); right: 15px; } /* show the shadows only on touch devices solution: https://stackoverflow.com/questions/11387805/media-query-to-detect-if-device-is-touchscreen/44197598#44197598 */ @media (pointer:coarse) { .s123-categories .m-r-s { display: block; } .s123-categories ul { overflow-x: auto; white-space: nowrap; } } /* ########################################## cssFooter.php ########################################## */ .inside_page footer { border-top: 1px solid #ebebeb; border-top: 1px solid var(--menu_thin_border); } /* footer default links behavior */ footer a { color: #0088cc; color: var(--footer_links_color); } footer a:hover, footer a:focus { color: #0088cc; color: var(--footer_text_hover); } /* footer_1 */ footer.footer_1 { color: #252525; color: var(--footer_text); padding: 40px 0; background-color: #ffffff; background-color: var(--footer_back); padding-bottom: 100px; /* To have place to SITE123 banner */ font-size: 0.8rem; } footer.footer_1 .side1 { } footer.footer_1 .side2 { text-align: right; } html[dir=rtl] footer.footer_1 .side2 { text-align: left; } footer.footer_1 .footer_name { font-size: 1.2rem; } footer.footer_1 .navbar-nav > li { display: inline-block; } footer.footer_1 .navbar-nav > li > a { padding: 0; margin: 0px 8px; color: #252525; color: var(--footer_text); text-transform: uppercase; white-space: nowrap; font-size: 0.8rem; } footer.footer_1 .navbar-nav > li > a .svg-m { background-color: #252525; background-color: var(--footer_text); } footer.footer_1 .nav>li>a:focus, footer.footer_1 .part1 .nav>li>a:hover { color: #0088cc; color: var(--global_main_color); background-color: transparent; } footer.footer_1 .navbar-nav { float: none; display: inline-block; text-align: right; margin-bottom: 15px; } html[dir=rtl] footer.footer_1 .navbar-nav { text-align: left; } footer.footer_1 #widget_subscribe_form { width: 350px; max-width: 90%; margin: 0 0 0 auto; } html[dir=rtl] footer.footer_1 #widget_subscribe_form { margin: 0 auto 0 0; } @media(max-width:767px) { footer.footer_1 .part1 { width: 100%; display: table; } footer.footer_1 .side1 { text-align: center; padding: 40px 0 0 0; } /* on RTL mobile the element don't got the text-align position because html tag (highest element in the hierarchy) was overwrite the text-align position, so until we'll update this to mobile first we need to add the html tag. */ html[dir=rtl] footer.footer_1 .side2, footer.footer_1 .side2 { text-align: center; padding: 20px 0 40px 0; } footer.footer_1 .part1 .nav { display:none; } footer.footer_1 .part1 .mailing .input-group { float:none; margin: 0 auto; } footer.footer_1 .part1 .mailing { margin: 10px auto; } /* on RTL mobile the element don't got the text-align position because html tag (highest element in the hierarchy) was overwrite the text-align position, so until we'll update this to mobile first we need to add the html tag. */ html[dir=rtl] footer.footer_1 #widget_subscribe_form, footer.footer_1 #widget_subscribe_form { width: 350px; max-width: 90%; text-align: center; margin: 0 auto; } } /* Footer Dropdown menu */ footer .nav>li>a { color: #252525; color: var(--footer_text); } footer .nav>li>a:hover { color: #0088cc; color: var(--footer_text_hover); } footer .nav>li>a:focus, footer .nav>li>a:hover, footer .nav>li.open>a, footer .nav>li.open>a:focus, footer .nav>li.open>a:hover, footer .nav>li.active>a, footer .nav>li.active>a:focus, footer .nav>li.active>a:hover { background-color: transparent !important; } footer .nav .site-dropdown-menu { background-color: #ffffff; background-color: var(--footer_back); } footer .nav .site-dropdown-menu li a { color: #252525; color: var(--footer_text); background-color: transparent; } footer .nav .site-dropdown-menu li a .svg-m { background-color: #252525; background-color: var(--footer_text); } footer .nav .site-dropdown-menu>li>a:focus, footer .nav .site-dropdown-menu>li>a:hover, footer .nav .site-dropdown-menu>li.active>a, footer .nav .site-dropdown-menu>li.active>a:focus, footer .nav .site-dropdown-menu>li.active>a:hover { color: #0088cc; color: var(--global_main_color) background-color: transparent; } /* homepage - contact us form */ #contactUsFormHome .help-block { font-size: 12px; } /* Go to top button on onepage websites ----------------------------------*/ #gotoTop { display: none; z-index: 1029; position: fixed; width: 40px; height: 40px; background-color: #333; background-color: rgba(0,0,0,.3); font-size: 20px; line-height: 36px; top: auto; left: auto; right: 30px; bottom: 30px; cursor: pointer; color: #FFF; border-radius: 2px; text-align: center; } #gotoTop .svg-m { background-color: #FFF; } html.isFreePackage #gotoTop { bottom: 60px; } html[dir="rtl"] #gotoTop { right:auto; left:30px; } /* breadcrumb design */ .rich_page .breadcrumb, .inside_page .breadcrumb { border-radius: 0; color: #252525; color: var(--inside_modules_color_text); background-color: transparent; margin-bottom:0; font-size: 0.8em; display:flex; flex-wrap: wrap; } .rich_page .breadcrumb > .active, .inside_page .breadcrumb > .active { color: #777; } @media(max-width:767px) { .inside_page .container-fluid > .breadcrumb-wrap > .breadcrumb { padding-right: 0px; padding-left: 0px; } } /* ########################################## websiteHeaderStylesCss.php ########################################## */ /* breadcrumb design */ .rich_page .r-c-f-c .mainColor .breadcrumb, .inside_page .s123-module .mainColor .breadcrumb { color: #fff !important; background-color: var(--global_main_color); } /* Multi sections breadcrumbs - the selector for the multi section is different so we handle it for here */ .inside_page .s123-module .mainColor .breadcrumb a { color: #fff; } .inside_page .s123-module .mainColor .breadcrumb > .active { color: #fff; font-weight: bold; } .rich_page section .page_header_style, .inside_page .page_header_style { margin-bottom: 20px; } /* Inside page - background box color */ .rich_page .r-c-f-c .boxColor, .inside_page .s123-module .boxColor { color: #252525; background-color: #fafafa; } /* Inside page - background main color */ .rich_page .r-c-f-c .mainColor, .inside_page .s123-module .mainColor { color: #fff; background-color: var(--global_main_color); } .rich_page .r-c-f-c .mainColor .modulesTitle hr, .inside_page .s123-module .mainColor .modulesTitle hr { border-color: #fff; } .rich_page .r-c-f-c .boxColor, .inside_page .s123-module .boxColor, .rich_page .r-c-f-c .mainColor, .inside_page .s123-module .mainColor { padding-top: var(--sectionsPadding); margin-top: calc(-1*var(--sectionsPadding)); } .inside_page .s123-page-data.s123-module:not(.dataPageBreadcrumbs) .mainColor, .inside_page .s123-page-data.s123-module:not(.dataPageBreadcrumbs) .boxColor { padding-top: 20px; margin-top: -20px; } /* Module header text transform ----------------------------*/ .home_page .modulesTitle .s123-page-header, .inside_page .s123-module:not(.s123-page-data) .modulesTitle .s123-page-header { text-transform: uppercase; } /* Header layouts with bold text ----------------------------*/ /* Header Layouts - Old Customers had custom font size ----------------------------*/ /* Home text color */ .home-text-color { color:#ffffff; } /* Home Secondary Background Color */ .home-secondary-background-color { background-color:#ffffff; } .home_third_background_color { background-color:#000000; } @media(max-height:500px) { /* on small screens we make the icon is smaller */ /* #websitePopupHomeVideo { font-size: 7px; } */ } /* ########################################## cssDropdownMenu.php ########################################## */ .site-dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; font-size: 14px; text-align: left; list-style: none; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0,0,0,.15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); box-shadow: 0 6px 12px rgba(0,0,0,.175); } html[dir=rtl] .site-dropdown-menu { right: 0; left: auto; float: right; text-align: right; } .dropdown-submenu.open > .site-dropdown-menu { display: block; opacity: 0; /* doesnt show the dropdown until I know where to position it */ margin: 0; } /* Nav Actions Drop Down - Sometimes the menu don't have enough space and because of that we add an icon of `hamburger` that will have a drop down to show all actions ----------------------*/ #top-menu .navActions { position: relative; } .header-menu-wrapper.replaceActionButtonsToIcon.dropdown-submenu { position: static; } .dropdown-submenu.open > .site-dropdown-menu[data-rel="navActions"] { left: auto; right: 0; } html[dir=rtl] .dropdown-submenu.open > .site-dropdown-menu[data-rel="navActions"] { left: 0; right: auto; } .dropdown-submenu.open > .site-dropdown-menu[data-rel="navActions"] { display: flex; align-items: center; justify-content: center; padding: 0; list-style: none; margin: 0; } .dropdown-submenu.open > .site-dropdown-menu[data-rel="navActions"] .action-button-wrapper { margin: 5px 0; } @media(min-width:768px) { #mainNav #top-menu .navPages, #mainNav #top-menu .navActions, #mainNav #top-menu .headerSocial, #header .header-row, .global_footer .nav { opacity: 0; } /* design 'more menu' in the menu */ .site-dropdown-menu, .website-languages-menu .site-dropdown-menu { background-color: #ffffff; background-color: var(--menu_color); } .navbar-default .navbar-nav>.open>a, #website-languages-menu .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover { background-color: transparent; } .dropdown-submenu{ position:relative; } .dropdown-submenu > .site-dropdown-menu { border-radius:0; padding: 0; } html[dir=rtl] .dropdown-submenu>.site-dropdown-menu { border-radius:0; } .dropdown-submenu>.site-dropdown-menu li { margin: 0; } .dropdown-submenu .site-dropdown-menu a { display: block; margin: 0; text-align: left; border:0; } html[dir=rtl] .dropdown-submenu .site-dropdown-menu a { text-align: right; } } /* Dropdown Menu Design for all layouts */ .site-dropdown-menu>li>a { font-size: 12px; font-weight: 400; background-color: #ffffff; background-color: var(--menu_color); border:1px solid transparent; line-height: 1.5; color: #252525; color: var(--menu_text_color); margin-top: 0; padding: 6px 15px !important; white-space: nowrap; } .site-dropdown-menu > li > a .svg-m { background-color: #252525; background-color: var(--menu_text_color); } .site-dropdown-menu > li > a:focus, .site-dropdown-menu > li > a:hover, .site-dropdown-menu > li.active > a, .site-dropdown-menu > li.active > a:focus, .site-dropdown-menu > li.active > a:hover { background-color: #ffffff; background-color: var(--menu_color); color: #0088cc; color: var(--menu_text_hover_color); line-height: 1.5; text-decoration: none; opacity:1; } .site-dropdown-menu > li > a:focus .svg-m, .site-dropdown-menu > li > a:hover .svg-m, .site-dropdown-menu > li.active > a .svg-m, .site-dropdown-menu > li.active > a:focus .svg-m, .site-dropdown-menu > li.active > a:hover .svg-m { background-color: #0088cc; background-color: var(--menu_text_hover_color); } /* Build a class that take care dropdown side menu opening */ html .site-dropdown-menu.dropdown-side-open-right { top: 0; left:100%; right:auto; } html .site-dropdown-menu.dropdown-side-open-left { top: 0; right:100%; left:auto; } html .site-dropdown-menu.dropdown-side-open-up { top: auto; bottom: 100%; }/* ########################################## cssMobileMenu.php ########################################## */ /* Mobile & Tablet ----------------------------------*/ /* Hide the menu (we show it only at mobile devices ) */ #mainNavMobile { display: none; } @media(max-width:767px) { :root { --mainNavMobileHeight: 60px; } #top-section { padding-top:0 !important; } .home_page_design body { padding-top: var(--mainNavMobileHeight) !important; } .home_page_design #top-section { padding-bottom: 0px !important; margin-top:0 !important; } .home_page_design .body { padding-top:0 !important; } /* Homepage image - decrase toolbar size */ #top-section { min-height:calc(100vh - var(--mainNavMobileHeight)) !important; } #mainNavMobile { position: fixed !important; top:0; left:0; display: flex; align-items: center; background-color: #ffffff; background-color: var(--menu_color); border-width: 0; min-height: var(--mainNavMobileHeight); border-bottom: 1px solid #ebebeb; border-bottom: 1px solid var(--menu_thin_border); opacity: 0; } /* FIX - only for IE 11 */ _:-ms-fullscreen, :root #mainNavMobile { height:60px; /* for IE11 fix */ } #mainNavMobile .navPagesLeft { order:1; flex-grow: 1; padding: 0 5px; width: 60px; display: flex; justify-content: center; } #mainNavMobile .navPagesLeft a { color:#252525; color:var(--menu_text_color); border-color:#252525; border-color:var(--menu_text_color); cursor:pointer; background-color:transparent; font-size:20px; } #mainNavMobile .navPagesLeft a .svg-m { background-color: #252525; background-color: var(--menu_text_color); } #mainNavMobile .navPagesLeft a:hover, #mainNavMobile .navPagesLeft a:focus { cursor:pointer; background-color:transparent; } #mainNavMobile .navbar-header { order:2; flex-grow: 1; display: flex; justify-content: center; width:100%; } #mainNavMobile .navbar-header a { font-weight: bold; color: #252525; color: var(--menu_text_color); font-size:14px !important; display: flex; justify-content: center; align-items: center; align-content: center; text-align: center; } /* in mobile we want to limit the logo name font size */ #mainNavMobile .navbar-header a .website-name { font-size: 14px !important; } /* svg logo support */ #mainNavMobile .navbar-header a .svg-m { background-color: #252525; background-color: var(--menu_text_color); } /* #mainNavMobile .navbar-header a span { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 160px; } */ #mainNavMobile .navbar-header a img { max-height: 35px !important; display: block !important; max-width: 100% !important; height: auto !important; width: auto !important; } /* Invisible SVG Images Bug Fix - Not all svg icons have the size attributes and as result when the layout have flex the image is losing it's size so here we decided that the icons will get size related to the `font-size` setting (just like svgs that are not colored) -----------------*/ #mainNavMobile .navbar-header a img.svg-img { width: 1.5em !important; height: 1.5em !important; } /* hide the website name by default */ #mainNavMobile .s123-site-logo > .website-name { display: none; } /* logo font weight normal */ #mainNavMobile .navbar-header .weight700 { font-weight: bold; } /* logo font weight bold */ #mainNavMobile .navbar-header .weight400 { font-weight: normal; } /* Italic style */ #mainNavMobile .navbar-header .italic { font-style: italic; } /* show the website name if the user choose to */ #mainNavMobile .s123-site-logo > .website-name.website-name-active { display: inline-block; padding-left: 4px; } html[dir="rtl"] #mainNavMobile .s123-site-logo > .website-name.website-name-active { padding-left: 0; padding-right: 4px; } #mainNavMobile .navPagesRight { order:3; flex-grow: 1; padding: 0 5px; width: 80px; display: flex; justify-content: center; } #mainNavMobile .navPagesRight .navActions { margin: 0; display: flex; align-items: center; align-content: center; justify-content: flex-end; padding: 0 5px; } #mainNavMobile .navPagesRight .navActions li { display: inline-block; } /* we had a bug so we decide to hide the button on mobile for now */ #mainNavMobile .header-client-zone-wrapper { display: none !important; } #mainNavMobile .header-cart-wrapper.show-static { display: none !important; } #mainNavMobile .navPagesRight .navActions a, #mainNavMobile .navPagesRight .navActions button { font-size: 15px !important; padding: 0 !important; color:#252525 !important; color:var(--menu_text_color) !important; } #mainNavMobile .navPagesRight .navActions a .svg-m, #mainNavMobile .navPagesRight .navActions button .svg-m { background-color:#252525 !important; background-color:var(--menu_text_color) !important; } #mainNavMobile .navPagesRight .navActions a { padding: 0 7px !important; } .rich_page #s123ModulesContainer, .s123-content-area { margin-top: var(--mainNavMobileHeight); } /* Remove all menus and margin of the desktop platform */ #websiteHeader { display:none !important; } body, .body { margin:0 !important; border:0; } .rich_page section.s123-module:first-child:before, .rich_page #s123ModulesContainer:before, .inside_page #s123ModulesContainer:before, .inside_page .s123-page-container:before, .s123-content-area:before { content: none; } /** * Mobil Navigation Grid Handler */ #mainNavMobile .navbar-header { position: absolute !important; z-index: 1; height: 100%; align-items: center; } #mainNavMobile .navbar-header > a { max-width: calc(100% - 100px); padding-top: 2px; padding-bottom: 2px; height: 100%; } #mainNavMobile .s123-site-logo > .website-name.website-name-active, #mainNavMobile .website-name { text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: 100%; } #mainNavMobile .navPagesLeft > .header-menu-wrapper { margin-right: auto; position: relative; z-index: 2; } html[dir="rtl"] #mainNavMobile .navPagesLeft > .header-menu-wrapper { margin-right: 0; margin-left: auto; } #mainNavMobile .navPagesRight > ul.navActions { margin-left: auto; position: relative; z-index: 2; } html[dir="rtl"] #mainNavMobile .navPagesRight > ul.navActions { margin-left: 0; margin-right: auto; } /* add padding to the buttons to make them bigger for mobile clicks */ #mainNavMobile .navPagesRight .navActions a, #mainNavMobile .navPagesLeft > .header-menu-wrapper a { padding: 7px !important; } } /* ########################################## css.siteLogo.php ########################################## */ /* Logo - Image ----------------------------------*/ #mainNav .s123-site-logo img { max-height: 79px; } #mainNav.affix .s123-site-logo img { max-height: 59px; margin: 0; } /* hide the website name by default */ #mainNav .s123-site-logo > .website-name { display: none; } /* show the website name if the user choose to */ #mainNav .s123-site-logo > .website-name.website-name-active { display: inline-block; padding-left: 4px; } html[dir="rtl"] #mainNav .s123-site-logo > .website-name.website-name-active { padding-left: 0; padding-right: 4px; } .navbar-default:not(.affix) .s123-site-logo img, .navbar-default.affix .s123-site-logo img { width: auto; height: 80%; max-height: 100%; } /* Logo Design */ .logo_name > div { display: inline-flex; width: 1.5em; height: 1.5em; text-align: center; align-items: center; justify-content: center; align-content: center; vertical-align: middle; margin-right: 4px; } html[dir="rtl"] .logo_name > div { margin-left: 7px; margin-right: 0; } .logo_name > div > i { text-align: center; } /* limit the width and height of the style so it will not overflow the container */ .logo_name .logoLayout { max-width: 100%; max-height: 100%; overflow: hidden; } .s123-w-l-s { letter-spacing: 0px; word-spacing: 0px; } .s123-w-l-s .website-name { font-size: 27px; } .s123-w-l-s div { font-size: 27px; } .s123-w-l-s .website-name { font-weight: normal; } /* svg logo support */ .home_page_design .navbar-default.affix .navbar-brand .svg-m, .inside_page_header_design .navbar-default .navbar-brand .svg-m { background-color: #252525; background-color: var(--menu_text_color); } /* https://stackoverflow.com/questions/25224969/fixed-positioned-header-jumps-in-google-chrome */ .affix { transform: translateZ(0px); } /* Show small ad for websites in free package */ #showSmallAdOnScroll { display: flex; align-items: center; align-content: center; justify-content: center; border: 0; position: fixed; transform: translateZ(0px); padding: 0; z-index: 1032; /* higher then preview helpers */ left: 0; bottom: -60px; height: 60px; width: 100%; margin: 0; -webkit-box-shadow: 0px -2px 12px rgba(0,0,0,.175); box-shadow: 0px -2px 12px rgba(0,0,0,.175); background-color: #000; text-align: center; padding: 15px 0 16px 0; font-family: Arial,sans-serif; transition: bottom 0.4s linear; } #showSmallAdOnScroll a { color:white; font-size:15px; letter-spacing: 0.5px; word-spacing: 1px; text-transform: uppercase; text-decoration: none; width: 100%; display: block; } #showSmallAdOnScroll .s123-b-b-s-1 { vertical-align: middle; } /* from some reason Arial font is not vertical centered related to the image at RTL so we fix it */ html[dir="rtl"] #showSmallAdOnScroll .s123-b-b-s-1 { display: inline-block; margin-left: 5px; margin-bottom: 1px; } #showSmallAdOnScroll a span.site123link { color: yellow; } #showSmallAdOnScroll a span.site123link:hover { color:#f39405 !important; } /* Mobile & Tablet ----------------------------------*/ @media(max-width:767px) { #showSmallAdOnScroll a { font-size:13px; } } #showSmallAdOnScroll.static { display: block; bottom: 0; } #showSmallAdOnScroll.style1 { background-color: #0597F2; box-shadow: 0px -2px 12px rgba(0, 0, 0, 0.4); border-top: 5px solid #0597F2; } #showSmallAdOnScroll.style1 a { color: #fff; } #showSmallAdOnScroll.style1 a span.site123link { border: 1px solid; color: #fff; padding: 7px; border-radius: 3px; font-size: 13px; } #showSmallAdOnScroll.style1 a span.site123link:hover { color:#fff !important; } #showSmallAdOnScroll.style2 { background-color: #fff; box-shadow: 0px -2px 12px rgba(0, 0, 0, 0.4); border-top: 5px solid #0583F2; } #showSmallAdOnScroll.style2 a { color: black; } #showSmallAdOnScroll.style2 a span.site123link { border: 1px solid; color: #0583F2; padding: 7px; border-radius: 3px; font-size: 13px; } #showSmallAdOnScroll.style2 a span.site123link:hover { color:#f39405 !important; } .externalAlert { font-family:arial; color:black; } .contactUsConfirm { font-family:arial; color:black; } /** * Website Footer >> Subscribe To Mailing List Popup Feature Bug Fix - Because * the phone field has different structure and it has no floating label `Phone` * (like in client zone address form or order step 1 from) we don't need the margin here. * * Note: In the future if we decide to change the current structure we can remove this fix. */ .bootbox.contactUsConfirm .intl-tel-input.allow-dropdown .selected-flag { margin-top: 0; } .bootbox-search-input-validation { font-family: arial; color: black; z-index: 99999; } .bootbox-jobs-form, .bootbox-branch-form { font-family: arial; color: black; z-index: 99999; } .bootbox-reservation-form { font-family: arial; color: black; z-index: 99999; } #popupJobs .jobsForm { width: 70%; color: white; text-align: left; } #popupRestaurantReservations .restaurantReservationsFormPopup, #popupRestaurantReservations .orderConfirmation { width: 70%; color: white; text-align: left; } html[dir=rtl] #popupJobs .jobsForm { text-align: right; } .modulesTitle H4 { white-space: pre-wrap; word-wrap: break-word; line-height:1.5; } /** * Email Contact Email */ .global-contact-email-container { width: 70%; color: #fff; text-align: left; } html[dir=rtl] .global-contact-email-container { text-align: right; } .global-contact-email-container .g-c-email-info-box a { color: #fff; } .g-c-email-message-sent-box { display: none; text-align: center; } .global-contact-email-container .g-c-email-message-content { margin-bottom: 30px; } ul.share-buttons{ list-style: none; padding: 0; } ul.share-buttons li{ display: inline; } .website-languages li > a { line-height: 30px !important; } #cboxOverlay { background: none; background-color:#000; } /* SVG Icons Support -------------------------------*/ @-webkit-keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } .input-group-addon .svg-m { background-color: #555555; } .svg-m.fa-spin { -webkit-animation: fa-spin 2s infinite linear; animation: fa-spin 2s infinite linear; } .svg-m { display: inline-block; width: 1em; height: 1em; } img.svg-img { background: transparent; width: 1.5em; height: 1.5em; } /* Because we have ` ` between the the caret icons of the website menus we change the position of the image so there won't be a lot of space between the caret and the page name Note: In the future if we decide to remove the ` ` from the website menu we can remove this logic -----------------------*/ /* edge 18 browser bug fix */ @supports (-ms-ime-align: auto) { .svg-m[data-icon-name^="caret-"] { mask-position: left !important; } html[dir="rtl"] .svg-m[data-icon-name^="caret-"] { mask-position: right !important; } } /* all browsers */ @supports not (-ms-ime-align: auto) { .svg-m[data-icon-name^="caret-"] { -webkit-mask-position-x: left !important; } html[dir="rtl"] .svg-m[data-icon-name^="caret-"] { -webkit-mask-position-x: right !important; } } /* IE 11 Handler - Hide the icons on IE11 because it doesn't support mask technology, the icons will be shown after the js object will replace them back to original icons -----------------*/ _:-ms-fullscreen, .svg-m { display: none !important; } .svg-m { font: normal normal normal 14px/1 FontAwesome; font-size: inherit; } .fa-stack { position: relative; display: inline-block; width: 2em; height: 2em; line-height: 2em; vertical-align: middle; } .fa-2x { font-size: 2em; } .fa-3x { font-size: 3em; } .fa-4x { font-size: 4em; } .fa-5x { font-size: 5em; } i.svg-m.fa-fw { width: 1.28571429em; } i.svg-m.blue { background-color: #0597F2; } i.svg-m.white { background-color: #fff; } i.svg-m.red { background-color: red; } i.svg-m.green { background-color: green; } /* edge 18 browser bug fix */ @supports (-ms-ime-align: auto) { .svg-m { mask-repeat: space !important; mask-position: center !important; mask-size: contain !important; } } /* all browsers */ @supports not (-ms-ime-align: auto) { .svg-m { -webkit-mask-position-x: center !important; -webkit-mask-position-y: center !important; -webkit-mask-size: contain !important; -webkit-mask-repeat: no-repeat !important; -webkit-mask-origin: initial !important; -webkit-mask-clip: initial !important; } } /* Menu Action Buttons ----------------------------------*/ .navActions a { border-bottom: 0 !important; } .navActions a, .dropdown-submenu.open > .site-dropdown-menu[data-rel="navActions"] a { padding: 0 7px !important; } /** * Languages Flag Fix - When the user upload a flag we show it instead * of our icon, the flag is not a font, its an image, so if the user * set a big font size to the menu, the icon we not vertical centered. * When I fix it I sow that its centered everything better, also on * mobile and other icons, so I add it to all of them. */ ul.navActions a { display: flex; justify-content: center; align-content: center; align-items: center; } .navActions li a:hover { background-color: transparent !important; } .action-button-wrapper a:hover { border-color: transparent !important; border-bottom: 0 !important; background-color: transparent !important; opacity: 1 !important; } .btn-primary-action-button-1 { font-size: 12px; border-color: #0088cc; border-color: var(--global_main_color); background-color: #0088cc; background-color: var(--global_main_color); font-weight:bold; color: #ffffff; color: var(--global_main_color_btn_text_color); } /* set icon color according to the button style and ignore the global menu icon color */ .btn-primary-action-button-1 .svg-m { background-color: #ffffff !important; background-color: var(--global_main_color_btn_text_color) !important; } .btn-primary-action-button-1:hover { opacity: 1; } .btn-primary-action-button-2 { font-size: 12px; border-color: #252525; border-color: var(--menu_text_color); background-color: #252525; background-color: var(--menu_text_color); font-weight:bold; color: #0088cc; color: var(--menu_text_hover_color); } .btn-primary-action-button-2:hover { opacity: 1; } /* set icon color according to the button style and ignore the global menu icon color */ #popupFloatDivMenu .btn-primary-action-button-2 .svg-m, #mainNav.navbar-default .nav > li > a .btn-primary-action-button-2 .svg-m, #header .header-nav .navActions .btn-primary-action-button-2 .svg-m { background-color: #0088cc; background-color: var(--menu_text_hover_color); } #popupFloatDivMenu .btn-primary-action-button-2:hover .svg-m, #mainNav.navbar-default .nav > li > a .btn-primary-action-button-2:hover .svg-m, #header .header-nav .navActions .btn-primary-action-button-2:hover .svg-m { background-color: #ffffff; background-color: var(--global_main_color_btn_text_color); } .btn-primary-action-button-3 { font-size: 12px; border-color: #0088cc; border-color: var(--menu_text_hover_color); background-color: #0088cc; background-color: var(--menu_text_hover_color); font-weight:bold; color: #ffffff; } .btn-primary-action-button-3:hover { opacity: 1; } /* set icon color according to the button style and ignore the global menu icon color */ .btn-primary-action-button-3 .svg-m { background-color: #ffffff !important; } .btn-primary-action-button-4 { font-size: 12px; border-bottom:0; border: 1px solid; background-color: transparent; color: #252525; color: var(--menu_text_color); position: relative; } .btn-primary-action-button-4:hover, .btn-primary-action-button-4:focus { border: 1px solid; background-color: transparent; color: #252525; color: var(--menu_text_color); } .btn-primary-action-button-4::before { border:0 !important; } .btn-primary-action-button-4 .svg-m, #header .header-column-menu-actions .navActions > li a:hover .svg-m { background-color: #252525; background-color: var(--menu_text_color); } .btn-primary-action-button-5 { font-size: 12px; border-bottom:0; border: 1px solid transparent !important; color: #444950 !important; background-color: #ebedf0 !important; position: relative; } .btn-primary-action-button-5:hover { color: #444950; background-color: #e2e5e9; } /* set icon color according to the button style and ignore the global menu icon color */ .btn-primary-action-button-5 .svg-m { background-color: #444950 !important; } .btn-primary-action-button-5:hover .svg-m { background-color: #444950 !important; } #mainNav #topAction_buttonText_1, #mainNav #topAction_buttonText_2 { padding: 6px 12px; display: flex; align-items: center; } /* colored svg - make sure that the width and height will be the same as icon tags */ #mainNav #topAction_buttonText_1 .s123-icon-converter, #mainNav #topAction_buttonText_2 .s123-icon-converter { width: 1em !important; height: 1em !important; } .btn-primary-action-button-6 { font-size: 12px; border-bottom:0; border: 1px solid #0088cc; border: 1px solid var(--global_main_color); background-color: transparent; color: #0088cc; color: var(--global_main_color); position: relative; } .btn-primary-action-button-6 .svg-m { background-color: #0088cc !important; background-color: var(--global_main_color) !important; } .btn-primary-action-button-6:hover, .btn-primary-action-button-6:focus { border: 1px solid #0088cc; border: 1px solid var(--global_main_color); background-color: transparent !important; color: #0088cc; color: var(--global_main_color); } /* Ads Manager */ .site123adExample { position: relative; } .inside_page .site123adExample img { margin: 25px 0; } .site123adExample .adExample { position: absolute; background-color: red; font-size:14px; color:white; padding: 4px; top: 0; right: 0; } .inside_page .site123adExample .adExample { top: 25px; } .site123AdsWarningHeader { font-size:20px; font-weight:bold; } .site123AdsWarning { font-size:16px; font-weight:normal; } .inside_page .AdsenseAd { text-align: center; margin: 20px; } .global_footer .social-icons .list-inline > li > a { border: 1px solid #0088cc; border: 1px solid var(--global_main_color); border-radius: 50%; font-size: 18px; color: #fff; background-color: #0088cc; background-color: var(--global_main_color); width: 37px; height: 37px; display: flex; align-items: center; justify-content: center; margin-bottom: 5px; text-decoration: none; } .global_footer .social-icons .list-inline > li > a .svg-m { background-color: #ffffff; background-color: var(--global_main_color_btn_text_color); } .global_footer .social-icons .list-inline > li > a:hover { opacity: 0.8; text-decoration: none; } /* Fix the big space around the Facebook svg ---------------------------------------------*/ .social-icons .svg-m[data-icon-name="facebook"] { width: 0.65em; } /* Set the image background of the homepage ----------------------------------*/ #top-section .item { } #top-section .item.itemImage1 { background-image: url('https://static1.s123-cdn-static-a.com/uploads/7414072/800_63d19da78e363.jpg'); height:100%; } #top-section .item.itemImage2 { background-image: url('https://static1.s123-cdn-static-a.com/uploads/7414072/800_63d19f3424665.png'); height:100%; } #top-section .item.itemImage3 { background-image: url('https://static1.s123-cdn-static-a.com/uploads/7414072/800_63d19f9bf1976.jpg'); height:100%; } #top-section .item.itemImage4 { background-image: url('https://static1.s123-cdn-static-a.com/uploads/7414072/800_63d19fb00b3e1.jpg'); height:100%; } #top-section .item.itemImage5 { background-image: url(''); height:100%; } @media(min-width:768px) { #top-section .item.itemImage1 { background-image: url('https://static1.s123-cdn-static-a.com/uploads/7414072/2000_63d19da78e363.jpg'); } #top-section .item.itemImage2 { background-image: url('https://static1.s123-cdn-static-a.com/uploads/7414072/2000_63d19f3424665.png'); } #top-section .item.itemImage3 { background-image: url('https://static1.s123-cdn-static-a.com/uploads/7414072/2000_63d19f9bf1976.jpg'); } #top-section .item.itemImage4 { background-image: url('https://static1.s123-cdn-static-a.com/uploads/7414072/2000_63d19fb00b3e1.jpg'); } #top-section .item.itemImage5 { background-image: url(''); } } /* Patterns Design */ #top-section .item.patterns { background-size: initial !important; background-attachment: fixed !important; background-repeat: repeat !important; } /** * Parallax Handler - We edit the `parallax.js` file and added a `parallax-active` * class when it active (its not active in android, mobiles, etc). When the Parallax * is active we need to remove the parents backgrounds properties, in this way * the background-color and opacity will works correctly. */ html.parallax-active #top-section.parallax-on, html.parallax-active .home_background_wrapper.parallax-on, html.parallax-active .s123-module-promo.parallax-on, html.parallax-active .s123-module-promo .parallax-on, html.parallax-active .s123-promo-module-v2.parallax-on, html.parallax-active .s123-promo-module-v2 .parallax-on, html.parallax-active .s123-module-headers.parallax-on, html.parallax-active .parallax-window { background: none !important; } /* Order System */ .orderPopupWin { z-index: 99999; } .orderPopupWin .modal-footer { display:none; } .website-languages-menu-link { cursor: pointer; } /* Homepage Image Goal ----------------------------------*/ /* old customers that are still working with ` max-height` flow */ #top-section .magic_homepage .home_custom_image { width:auto; height:auto; max-height: var(--home_custom_image_size); max-width: 100%; } #top-section .magic_homepage .home_custom_image.image_type_video { height: 100%; width: var(--home_custom_image_size); } @media (max-width: 767px) { #top-section .magic_homepage .home_custom_image { max-height: var(--home_custom_image_size); } } /* System Handlers ----------------------------------*/ /** * Responsive Tables- We wrap all the tables with a div and add * a class to it for converting them to be responsive. */ .s123-responsive-table { overflow-x: auto; } /** * Editor Videos- We hide all the editor videos using opacity because we * replace those tags using JavaScript to support our videos handlers system */ video.fr-draggable { opacity: 0; } /* froala svg- icons color */ .fr-toolbar .fr-command.fr-btn .svg-m, .fr-popup .fr-command.fr-btn .svg-m { background-color: #222222; } /** * Unbreakable Words Handler - Sometimes the users add very long words * and we don't like the browser to add a scroll to the website because * of that. To fix it we allows unbreakable words to be broken. */ .breakable { word-wrap: break-word; } /* New Line Break - Active textarea enter key to create a new line. */ .s123-new-line-break { white-space: pre-wrap; word-wrap: break-word; } /* Flex Center */ .s123-flex-center { display: flex; align-items: center; align-content: center; justify-content: center; } /* Columns Center - Used when we like the last row columns to be center */ @media(min-width:768px) { .s123-col-centered { display: inline-block; float: none; vertical-align: text-top; } } /* Image ratio design */ .s123-image-ratio-16-9 { padding-bottom: 56.25% !important; } .s123-image-ratio-3-2 { padding-bottom: 66.66667% !important; } .s123-image-ratio-4-3 { padding-bottom: 75% !important; } .s123-image-ratio-1-1 { padding-bottom: 100% !important; } .s123-image-ratio-9-16 { padding-bottom: 177.77778% !important; } .s123-image-ratio-2-3 { padding-bottom: 150% !important; } .s123-image-ratio-3-4 { padding-bottom: 133.33333% !important; } .localToolStyleNumber { position: absolute; top: 0; right: 0px; background: #fff; padding: 1px; font-size: 7px; color: black; } /** * Menu Cart Button */ .header-cart-wrapper a, .header-wish-list a { border:0; color: #252525; color: var(--menu_text_color); } .header-cart-wrapper a .svg-m, .header-wish-list a .svg-m { /* because the cart icon svg has spaces from the border we added some more size to the width & height so it will look like the font awesome */ width: 1.1em; height: 1.1em; background-color: #252525; background-color: var(--menu_text_color); } .header-cart-wrapper a:hover, .header-wish-list a:hover { border:0; } .header-cart-wrapper i, .header-wish-list i { position: relative; } /* Hide the cart and the client zone login icon */ #websiteHeader .header-cart-wrapper, #websiteHeader .header-wish-list, #mainNavMobile .header-cart-wrapper, #mainNavMobile .header-wish-list { display: none; } /* side menu cart icon wrapper */ #header .header-cart-wrapper .s-c-w { position: relative; display: inline-block; } /* If the client has module that using client zone then show the client zone icon */ #websiteHeader .header-client-zone-wrapper, #mainNavMobile .header-client-zone-wrapper { display: block; } /* if the client is logged in we hide the standard login icon and show the client details icon */ .header-client-zone-wrapper a[data-letters] i, .header-client-zone-wrapper a[data-image] i { display: none; } /* design a circle that display the user first letter name */ .header-client-zone-wrapper a.client-zone-link[data-letters]:before { width: 2.5em; height: 2.5em; border-radius: 50% !important; font-size: 1em; line-height: 2.5em; content: attr(data-letters); display: inline-block; text-align: center; background: #0088cc; background: var(--global_main_color); vertical-align: middle; color: white; } /* design a circle that display the user first letter name */ .header-client-zone-wrapper a.client-zone-link[data-image] { width: 2.5em; height: 2.5em; border-radius: 50% !important; background-position: center center; background-size: cover; } .header-cart-wrapper .count, .header-wish-list .count { /* circle - width and height can be anything, as long as they're equal */ width: 12px; height: 12px; line-height: 12px; border-radius: 50%; /* font & colors */ font-size: 8px; color: white; font-weight: bold; background-color: #0088cc; background-color: var(--menu_text_hover_color); /* centering */ display: none; justify-content: center; align-content: center; align-items: center; /* positions */ position: absolute; z-index: 1; top: 0; left: 20px; } @media(min-width:768px) { .header-cart-wrapper .count, .header-wish-list .count { /* circle - width and height can be anything, as long as they're equal */ width: 16px; height: 16px; line-height: 16px; /* font & colors */ font-size: 11px; /* positions */ top: -10px; left: 20px; } /* side menu counter position fix - because the cart svg file has spaces from the top and bottom border we fix here the position of the counter manually */ #header .header-cart-wrapper .count, #header .header-wish-list .count { top: -5px; } } /** * Wish-list Counter Disable - We decide to hide the wish-list counter * because we didn't decide yet if its good for our customers or not. */ .header-wish-list .count { display: none !important; } html[dir="rtl"] .header-cart-wrapper .count, html[dir="rtl"] .header-wish-list .count { right: 20px; left: auto; } .actionButton { cursor: pointer; } .onlyContent123 .s123-content-area, .onlyContent123 #s123ModulesContainer, .onlyContent123 .s123-page-container { padding-top:0 !important; } html.onlyContent123 body { background-color: #ffffff; background-color: var(--inside_modules_color); background-image: none; } .onlyContent123 .body { width: 100%; border:0; } /* Homepage random text */ .homepageRandomText, .homepageRandomTextStop { opacity: 0; } .elementToFadeIn { -webkit-animation: fadein 0.5s linear forwards; animation: fadein 0.5s linear forwards; opacity: 0; } @-webkit-@keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Fix Froala colors in there CSS */ .bg-primary .fr-view[dir="rtl"] blockquote { border-color: #252525 !important; border-color: var(--modules_color_text_second) !important; } .bg-primary .fr-view[dir="rtl"] blockquote blockquote { border-color: #252525 !important; border-color: var(--modules_color_text_second) !important; } .bg-primary .fr-view[dir="rtl"] blockquote blockquote blockquote { border-color: #252525 !important; border-color: var(--modules_color_text_second) !important; } .bg-primary .fr-view blockquote { border-color: #252525 !important; border-color: var(--modules_color_text_second) !important; color: #252525 !important; color: var(--modules_color_text_second) !important; } .fr-view[dir="rtl"] blockquote { border-color: #252525 !important; border-color: var(--modules_color_text) !important; } .fr-view[dir="rtl"] blockquote blockquote { border-color: #252525 !important; border-color: var(--modules_color_text) !important; } .fr-view[dir="rtl"] blockquote blockquote blockquote { border-color: #252525 !important; border-color: var(--modules_color_text) !important; } .fr-view blockquote { border-color: #252525 !important; border-color: var(--modules_color_text) !important; color: #252525 !important; color: var(--modules_color_text) !important; } /* Inside Page Fix Froala colors in there CSS */ .inside_page .bg-primary .fr-view[dir="rtl"] blockquote { border-color: #252525 !important; border-color: var(--inside_modules_color_text) !important; } .inside_page .bg-primary .fr-view[dir="rtl"] blockquote blockquote { border-color: #252525 !important; border-color: var(--inside_modules_color_text) !important; } .inside_page .bg-primary .fr-view[dir="rtl"] blockquote blockquote blockquote { border-color: #252525 !important; border-color: var(--inside_modules_color_text) !important; } .inside_page .bg-primary .fr-view blockquote { border-color: #252525 !important; border-color: var(--inside_modules_color_text) !important; color: #252525 !important; color: var(--inside_modules_color_text) !important; } .fr-view hr { max-width: 100% !important; border-width: 1px !important; } /** * Old Customers added `section` tags, and there design was braked because * the system added CSS to it, so we fix it by reset those settings. */ .fr-view section { position: static; min-height: 0; } /** * Bootstrap RTL Fix - The file `bootstrap-rtl.min.css` has an issue, it * is not fixing correctly the input groups addons so we handle it here. */ html[dir="rtl"] .input-group-addon:first-child { border: 1px solid #ccc; border-left: 0; } /* Google reCaptcha */ .captcha-security { margin-bottom: 20px; display: none; align-items: center; align-content: center; justify-content: center; } .captcha-security.active { display: flex; } :root { --global_main_color_rgba_02: rgba(0,136,204,0.2)} .datepicker thead { border-bottom: 1px solid #eaeaea; } .datepicker tfoot { border-top: 1px solid #eaeaea; } .datepicker td, .datepicker th { padding: 10px 10px !important; border-radius: 0 !important; } .datepicker table tr td { background-image: none !important; } .datepicker table tr td:hover { background-image: none !important; } html[dir="rtl"] .datepicker.datepicker-dropdown.dropdown-menu { right:auto; } } .datepicker table tr td.active:hover, .datepicker table tr td.active:hover:hover, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active.disabled:hover:hover, .datepicker table tr td.active:active, .datepicker table tr td.active:hover:active, .datepicker table tr td.active.disabled:active, .datepicker table tr td.active.disabled:hover:active, .datepicker table tr td.active.active, .datepicker table tr td.active:hover.active, .datepicker table tr td.active.disabled.active, .datepicker table tr td.active.disabled:hover.active, .datepicker table tr td.active.disabled, .datepicker table tr td.active:hover.disabled, .datepicker table tr td.active.disabled.disabled, .datepicker table tr td.active.disabled:hover.disabled, .datepicker table tr td.active[disabled], .datepicker table tr td.active:hover[disabled], .datepicker table tr td.active.disabled[disabled], .datepicker table tr td.active.disabled:hover[disabled] { background-color: #0088cc; background-color: var(--global_main_color); } .datepicker table tr td.active:active, .datepicker table tr td.active:hover:active, .datepicker table tr td.active.disabled:active, .datepicker table tr td.active.disabled:hover:active, .datepicker table tr td.active.active, .datepicker table tr td.active:hover.active, .datepicker table tr td.active.disabled.active, .datepicker table tr td.active.disabled:hover.active { background-color: #0088cc \9; background-color: var(--global_main_color); } .datepicker table tr td.today:hover, .datepicker table tr td.today:hover:hover, .datepicker table tr td.today.disabled:hover, .datepicker table tr td.today.disabled:hover:hover, .datepicker table tr td.today:active, .datepicker table tr td.today:hover:active, .datepicker table tr td.today.disabled:active, .datepicker table tr td.today.disabled:hover:active, .datepicker table tr td.today.active, .datepicker table tr td.today:hover.active, .datepicker table tr td.today.disabled.active, .datepicker table tr td.today.disabled:hover.active, .datepicker table tr td.today.disabled, .datepicker table tr td.today:hover.disabled, .datepicker table tr td.today.disabled.disabled, .datepicker table tr td.today.disabled:hover.disabled, .datepicker table tr td.today[disabled], .datepicker table tr td.today:hover[disabled], .datepicker table tr td.today.disabled[disabled], .datepicker table tr td.today.disabled:hover[disabled] { background-color: rgba(0,136,204,0.2); background-color: var(--global_main_color_rgba_02); } .datepicker table tr td.today:active, .datepicker table tr td.today:hover:active, .datepicker table tr td.today.disabled:active, .datepicker table tr td.today.disabled:hover:active, .datepicker table tr td.today.active, .datepicker table tr td.today:hover.active, .datepicker table tr td.today.disabled.active, .datepicker table tr td.today.disabled:hover.active { background-color: rgba(0,136,204,0.2) \9; background-color: var(--global_main_color_rgba_02); color: #252525; } /* Invisible items label design */ .s123-module [data-item-is-hidden="1"] a { text-decoration: none; opacity: 0.7; } .s123-module [data-item-is-hidden="1"] .hidden-item-label { display: flex !important; position: absolute; top: 0px; font-size: 40px; height: 100%; width: 100%; align-content: center; align-items: center; justify-content: center; } /** * NProgress - Slim Progress Bar * Documentations: https://github.com/rstacruz/nprogress/ */ #nprogress .bar { background: #0088cc; background: var(--global_main_color); } /** * S123 Calendar Handler Selected Day - Change the Selected date and confirm button to color to the main website color. * * Note: The original css file of the tool is `calendarHandler.css` but because it is not a php file we could * not know what is the website main color so we did it here. */ .s123-calendar-handler .modal-footer .confirm-selection, .s123-calendar-handler .datepicker-days .day.active:not(.today) { background-color: #0088cc !important; background-color: var(--global_main_color) !important; } /** * change the default calendar today box to be only main color border */ .s123-calendar-handler .datepicker-days .day.today, .s123-calendar-handler .datepicker-days .day.today.active, .s123-calendar-handler .datepicker-days .day.today.disabled { background-color: transparent !important; border: 2px solid #0088cc !important; border: 2px solid var(--global_main_color) !important; } /** * HTML5 Calendar Arrow Handler * Source: https://stackoverflow.com/a/17955112/469161 */ input[type=date]::-webkit-inner-spin-button { -webkit-appearance: none; display: none; } /* Fix homepage.layout.css for IE11 because it doesn't support CSS VARIABLES */ _:-ms-fullscreen, :root .magic_homepage .home_main_wrapper .box_container .boxBorder { text-align: center; } _:-ms-fullscreen, :root .magic_homepage .home_custom_image { max-height: ; } @media (max-width: 767px) { _:-ms-fullscreen, :root .magic_homepage .home_custom_image { max-height: ; } } /* Home popup video */ _:-ms-fullscreen, :root .magic_homepage .play-home-video-btn #websitePopupHomeVideo { color: #ffffff; border-color: #ffffff; } _:-ms-fullscreen, :root .magic_homepage .play-home-video-btn #websitePopupHomeVideo:hover { color: #ffffff; border-color: #ffffff; } _:-ms-fullscreen, :root .magic_homepage .form_style_2 h3 { color: #ffffff !important; } _:-ms-fullscreen, :root .magic_homepage .form_style_2 p { color: #ffffff !important; } _:-ms-fullscreen, :root .magic_homepage .form_style_2 label { color: #ffffff !important; } /* Fix EGDE issues with text-align and CSS variables */ @supports (-ms-ime-align:auto) { /* Detect EDGE browser */ .magic_homepage .home_main_wrapper .box_container .boxBorder { text-align: center !important; } html[dir="rtl"] .magic_homepage .home_main_wrapper .box_container .boxBorder { text-align: center !important; } } /* Homepage Buttons Position Design -----------------------------------*/ .magic_homepage .promoButtons #home_buttonText, .magic_homepage .promoButtons #home_buttonText_1 { max-width: 100%; margin-top: 30px; /* This is fix to a situation where there is two buttons that one need to go to the next row if his long: https://stackoverflow.com/questions/30887071/margin-top-only-when-the-flex-item-is-wrapped */ } html[dir="ltr"] .magic_homepage .promoButtons #home_buttonText { margin-left: 60px !important; /* This is fix to a situation where there is two buttons that one need to go to the next row if his long: https://stackoverflow.com/questions/30887071/margin-top-only-when-the-flex-item-is-wrapped */ } html[dir="ltr"] .magic_homepage .promoButtons #home_buttonText_1 { margin-left: 30px; } html[dir="rtl"] .magic_homepage .promoButtons #home_buttonText { margin-right: 60px !important; /* This is fix to a situation where there is two buttons that one need to go to the next row if his long: https://stackoverflow.com/questions/30887071/margin-top-only-when-the-flex-item-is-wrapped */ } html[dir="rtl"] .magic_homepage .promoButtons #home_buttonText_1 { margin-right: 30px; } @media (max-width: 767px) { html[dir="ltr"] .magic_homepage .promoButtons #home_buttonText, html[dir="ltr"] .magic_homepage .promoButtons #home_buttonText_1 { margin-right: 0px !important; /* This is fix to a situation where there is two buttons that one need to go to the next row if his long: https://stackoverflow.com/questions/30887071/margin-top-only-when-the-flex-item-is-wrapped */ margin-left: 30px !important; /* This is fix to a situation where there is two buttons that one need to go to the next row if his long: https://stackoverflow.com/questions/30887071/margin-top-only-when-the-flex-item-is-wrapped */ } html[dir="rtl"] .magic_homepage .promoButtons #home_buttonText, html[dir="rtl"] .magic_homepage .promoButtons #home_buttonText_1 { margin-right: 30px !important; /* This is fix to a situation where there is two buttons that one need to go to the next row if his long: https://stackoverflow.com/questions/30887071/margin-top-only-when-the-flex-item-is-wrapped */ margin-left: 0px !important; /* This is fix to a situation where there is two buttons that one need to go to the next row if his long: https://stackoverflow.com/questions/30887071/margin-top-only-when-the-flex-item-is-wrapped */ } } /** * E-commerce Ribbons Text Color Fix - We added the line here because * when the user is changing the color the preview need to be synced */ .e-commerce-product-box .stractureDefault .imagePart .ribbonsLabels .product-ribbon-banner { color: #ffffff; color: var(--global_main_color_btn_text_color); } /* Website menu social networks icons design --------------------*/ .header-phone-wrapper img, #popupFloatDivMenu [data-toggle="phone_menuCallActionIcons"] img { height: 1.5em; /* we calculate font size + line height */ width: auto; } /* Black popup window */ #popupFloatDivSearch .popover_phone_icons a { display: inline-flex; align-items: center; align-content: center; justify-content: center; white-space: nowrap; } #popupFloatDivSearch .popover_phone_icons a img { height: 1em; width: auto; margin-right: 0.2em; } html[dir=rtl] #popupFloatDivSearch .popover_phone_icons a img { margin-left: 0.2em; margin-right: auto; } /* Global Contact Form + Custom Form Date Input Style Fix - When the user has date input in the custom form the global contact black popup will be above the calendar handler popup so we fix it here */ #popupFloatDivSearch ~ .s123-calendar-handler { z-index: 99001; } /* social images need less padding */ #mainNav a[data-social-icon="whatsApp-icon"], #mainNav a[data-social-icon="telegram-icon"] { padding: 0 3.79px !important; } #mainNav a[data-social-icon="skype-icon"] { padding: 0 3.59px !important; } /* Hide Section From Mobile Devices -----------------------------*/ @media(max-width:767px) { section.s123-module.h-s-f-hm { display: none !important; } } /* Custom Form Steps ---------------------*/ .s123-custom-form-multi-steps .custom-form-step:not(:first-child), .s123-custom-form-multi-steps:not(.horizontal-custom-form) .custom-form-step .submit-single-step-btn, .s123-custom-form-multi-steps .custom-form-step:last-child .step-form-btn .next-form-btn, .s123-custom-form-multi-steps .custom-form-step:first-child .step-form-btn .submit-form-btn, .s123-custom-form-multi-steps .custom-form-step:first-child .step-form-btn .previous-form-btn , .s123-custom-form-multi-steps .custom-form-step:not(:first-child):not(:last-child) .step-form-btn .submit-form-btn { display: none; } .s123-custom-form-multi-steps a, .s123-custom-form-multi-steps button { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .s123-custom-form-multi-steps .step-form-btn button { margin: 0; } .s123-custom-form-multi-steps .step-form-btn .previous-form-btn, .s123-custom-form-multi-steps .step-form-btn .submit-form-btn { display: none; } .s123-custom-form-multi-steps .step-form-btn .previous-form-btn { padding-left: 0px; padding-right: 0px; padding-top: 0.375rem; padding-bottom: 0.375rem; text-align: left; text-decoration: none; } html[dir="rtl"] .s123-custom-form-multi-steps .step-form-btn .previous-form-btn { text-align: right; } .s123-custom-form-multi-steps .c-f-two-columns:not(.disableTwoColumns) { display: flex; flex-wrap: wrap; } .s123-custom-form-multi-steps .c-f-two-columns:not(.disableTwoColumns) .c-f-two-column { width: 50%; } .s123-custom-form-multi-steps .c-f-two-columns .c-f-two-column { padding-right: 15px; padding-left: 15px; } @media (min-width:768px) { .s123-custom-form-multi-steps.narrow-custom-form { width: 50%; display: block; margin: 0 auto; } } /** * Lazy Layout Handler - When the image is not loaded yet we don't want to show it * so we hide it with opacity `0` and when it is loaded the opacity will be 1 with * transition. */ img.lz-opacity { transition: opacity 0.2s ease-in-out; } img.lz-opacity:not([src]) { opacity: 0; } img.lz-opacity.loaded { opacity: 1; } /* Google reCapthca badge --------------------------*/ .grecaptcha-badge { z-index: 9999; } .grecaptcha-badge.hide { visibility: hidden; } .s123-btn-loading { position: relative; } .s123-btn-loading .s123-btn-loading-text { visibility: hidden; } .s123-btn-loading i[data-icon-name="spinner"], .s123-btn-loading i.fa-spinner { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; height: 17px; } /* Rating plugin css -------------------*/ .rating-plugin .star, .rating-plugin .star-o, .rating-plugin .star-half { font-size: 2em; } .rating-plugin .star-half.svg-m { mask: url('https://static1.s123-cdn-static-a.com/ready_uploads/svg/star-half.svg?v=2');-webkit-mask:url('https://static1.s123-cdn-static-a.com/ready_uploads/svg/star-half.svg?v=2');}.rating-plugin .star-o.svg-m {mask:url('https://static1.s123-cdn-static-a.com/ready_uploads/svg/star-o.svg?v=2');-webkit-mask:url('https://static1.s123-cdn-static-a.com/ready_uploads/svg/star-o.svg?v=2');}.rating-plugin .star.svg-m {mask:url('https://static1.s123-cdn-static-a.com/ready_uploads/svg/star.svg?v=2');-webkit-mask:url('https://static1.s123-cdn-static-a.com/ready_uploads/svg/star.svg?v=2');}.grecaptcha-badge-new-position {bottom:90px !important;}.shadow1 {text-shadow:1px 1px 3px #000;}.shadow2 {text-shadow:5px 5px 3px #000;}.shadow3 {text-shadow:3px 3px 3px #000;}.shadow4 {text-shadow:5px 5px 0px #000;}@-webkit-keyframes mfpFadeIn {0% {opacity:0;}100% {opacity:1;}}@-moz-keyframes mfpFadeIn {0% {opacity:0;}100% {opacity:1;}}@-o-keyframes mfpFadeIn {0% {opacity:0;}100% {opacity:1;}}@keyframes mfpFadeIn {0% {opacity:0;}100% {opacity:1;}}.mfp-open .mfp-figure {-webkit-animation-name:mfpFadeIn;-moz-animation-name:mfpFadeIn;-o-animation-name:mfpFadeIn;animation-name:mfpFadeIn;-webkit-animation-duration:.5s;-moz-animation-duration:.5s;-ms-animation-duration:.5s;-o-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;-moz-backface-visibility: hidden;-ms-backface-visibility:hidden;}