/* ########################################## 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;
font-size: 1rem;
padding: .375rem .75rem;
}
select.form-control:not([size]):not([multiple]) {
height: calc(2.25rem + 2px);
font-size: 1rem;
padding: .375rem .75rem;
}
.form-control.input-lg {
font-size: 1.25rem;
padding: .5rem 1rem;
line-height: 1.5;
}
.btn {
font-size: 1rem;
padding: .375rem .75rem;
line-height: 1.5;
}
.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: #00adb5; --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: 36px; --home_text_size_2_px: 82px; --slogan_text_size_px: 22px; --home_text_size: 36; --home_text_size_2: 82; --slogan_text_size: 22; --home_text_size_px_media: 36px; --home_text_size_2_px_media: 82px; --slogan_text_size_px_media: 22px; --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: 75%; --homepage_layout_height_vh: 75vh; --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: 17%; --layout_bottom_spacing: 0px; --window-height: 100vh; --window-width: 100vw; --menu_font_size: 14px; --menu_pages_space: 1px; --menu_pages_side_padding: 15px; --menu_pages_letter_spacing: 0.5px; --menu_pages_word_spacing: 0px; --menu_thin_border: #303841; --mobileMenuTextAlign: center; --menu_text_color: #ffffff; --menu_color: #303841; --modules_color_text: #000000; --modules_color_text_second: #000000; --inside_modules_color_text: #000000; --sectionsPadding: 100px; --home_text_top_space_1: 0px; --home_text_bottom_space_1: 16px; --home_text_top_space_2: 0px; --home_text_bottom_space_2: 10px; --home_text_top_space_3: 0px; --home_text_bottom_space_3: 31px; --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: #ebebeb; --modules_color: #f7f9f8; --footer_back: #333333; --home_background_color: #222;}
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: #222;
background: linear-gradient(90deg, #0052D4, #4364F7, #6FB1FC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ https://uigradients.com/#GradeGrey */
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: #222 !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 ########################################## */
#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,173,181,0.7);
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,173,181,0.7);
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: 'Open Sans',Arial,sans-serif;
color: #ffffff;
line-height: 1;
margin-bottom: 16px;
}
/* Small Devices, Wide Screens */
@media only screen and (max-width : 1169px) {
.magic_homepage .boxBorder h1 {
}
}
/* 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(16 * (100vh / 768));
}
}
.magic_homepage .boxBorder h2 {
max-width: 100%;
white-space: pre-line;
word-wrap: break-word;
overflow-wrap: break-word;
font-family: '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: 'Open Sans',Arial,sans-serif;
font-size: 22px;
color: #ffffff;
letter-spacing: 1px;
line-height: 1.5;
margin-bottom: 31px;
}
/* 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(31 * (100vh / 768));
}
}
/* 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(36 * (100vw / 1170) + 8px);
font-size: calc(var(--home_text_size) * (100vw / 1170) + 8px);
}
#top-section #home_siteSlogan_2 {
font-size: calc(82 * (100vw / 1170) + 8px);
font-size: calc(var(--home_text_size_2) * (100vw / 1170) + 8px);
}
#top-section #home_SecondSiteSlogan {
font-size: calc(22 * (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(36 * (100vw / 1170) + 8px);
font-size: calc(var(--home_text_size) * (100vw / 1170) + 8px);
}
#top-section #home_siteSlogan_2 {
font-size: calc(82 * (100vw / 1170) + 8px);
font-size: calc(var(--home_text_size_2) * (100vw / 1170) + 8px);
}
#top-section #home_SecondSiteSlogan {
font-size: calc(22 * (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(36 * (100vw / 1170));
font-size: calc(var(--home_text_size) * (100vw / 1170));
}
#top-section #home_siteSlogan_2 {
font-size: calc(82 * (100vw / 1170));
font-size: calc(var(--home_text_size_2) * (100vw / 1170));
}
#top-section #home_SecondSiteSlogan {
font-size: calc(22 * (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(36 * (100vw / 1170));
font-size: calc(var(--home_text_size) * (100vw / 1170));
}
#top-section #home_siteSlogan_2 {
font-size: calc(82 * (100vw / 1170));
font-size: calc(var(--home_text_size_2) * (100vw / 1170));
}
#top-section #home_SecondSiteSlogan {
font-size: calc(22 * (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: 36px;
font-size: var(--home_text_size_px);
}
#top-section #home_siteSlogan_2 {
font-size: 82px;
font-size: var(--home_text_size_2_px);
}
#top-section #home_SecondSiteSlogan {
font-size: 22px;
font-size: var(--slogan_text_size_px);
}
}
#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%;
}
#top-section .title {
padding: 120px 50px 0 50px;
}
/* Navbar
----------------------------------*/
#mainNav {
height: 80px;
}
:root {
--mainNavHeight: 80px;
}
#mainNav.affix {
height: 60px;
}
.inside_page_header_design #mainNav {
position: absolute;
margin: 0;
border-bottom: 1px solid #303841;
}
/**
* 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: #f7f9f8;
}
.inside_page_header_design .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: #f7f9f8;
}
.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: #f7f9f8;
}
.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: #303841;
}
.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: #ffffff;
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: 14px;
font-size: var(--menu_font_size);
font-weight: 700;
color: #ffffff;
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: #00adb5;
}
.navbar-default .nav > li.active > a,
.navbar-default .nav > li.active > a:focus {
color: #00adb5;
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-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 {
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: #00adb5;
}
.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: #00adb5;
}
.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: #ffffff !important;
}
.home_page_design .navbar-default.affix .btn-primary-action-button-4 .svg-m {
background-color: #ffffff !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: #303841;
background-color: #303841;
border-bottom: 1px solid #303841;
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: #ffffff;
}
.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: #ffffff;
line-height: 1.5;
padding-top: 7px;
padding-bottom: 7px;
border-radius: 0;
}
.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: #ffffff;
}
.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 {
color: #00adb5;
background-color: transparent;
opacity: 1;
}
.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: #00adb5;
}
.navbar-default.affix .action-button-wrapper .btn-primary-transparent {
color: #ffffff;
}
.navbar-default.affix .action-button-wrapper .btn-primary-transparent .svg-m {
background-color: #ffffff;
}
.navbar-default.affix .navActions > li > a:hover {
color: #ffffff;
}
/* breadcrumb */
.breadcrumb {
margin-bottom: 0;
}
.navbar-default.affix .navPages > li.active > a:after,
.navbar-default.affix .navPages > li > a:not(.navbar-brand):after,
.inside_page_header_design .navbar-default .navPages > li.active > a:after,
.inside_page_header_design .navbar-default .navPages > li > a:not(.navbar-brand):after {
}
.navbar-default.affix .navPages > li.active > a:focus:after,
.navbar-default.affix .navPages > li > a:not(.navbar-brand):hover:after,
.navbar-default.affix .navPages > li > a:not(.navbar-brand):focus:hover:after,
.inside_page_header_design .navbar-default .navPages > li.active > a:after,
.inside_page_header_design .navbar-default .navPages > li.active > a:focus:after,
.inside_page_header_design .navbar-default .navPages > li > a:not(.navbar-brand):hover:after,
.inside_page_header_design .navbar-default .navPages > li > a:not(.navbar-brand):focus:hover:after {
} #top-menu .moduleMenu > a,
#popupFloatDivMenu .navPagesPopup a {
font-weight: 500 !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: #303841;
border-bottom: 1px solid #303841;
}
.inside_page_header_design .navbar-default {
background-color: #303841;
border-bottom: 1px solid #303841;
}
.home_page_design .navbar-default .navbar-header .navbar-brand,.inside_page_header_design .navbar-default .navbar-header .navbar-brand {
color: #ffffff;
}
/* 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 .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: #ffffff;
line-height: 1.5;
padding-top: 7px;
padding-bottom: 7px;
border-radius: 0;
}
.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 .btn-primary-action-button-4 {
color: #ffffff !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 {
color: #00adb5;
background-color: transparent;
opacity: 1;
}
.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: #00adb5;
}
.home_page_design .navbar-default .navPages > li > a:after,
.home_page_design .navbar-default .navPages > li > a:focus:after,
.inside_page_header_design .navbar-default .navPages > li > a:after,
.inside_page_header_design .navbar-default .navPages > li > a:focus:after {
}
.home_page_design .navbar-default .navPages > li.active > a:focus:after,
.home_page_design .navbar-default .navPages > li > a:not(.navbar-brand):hover:after,
.home_page_design .navbar-default .navPages > li > a:not(.navbar-brand):focus:hover:after,
.inside_page_header_design .navbar-default .navPages > li.active > a:after,
.inside_page_header_design .navbar-default .navPages > li.active > a:focus:after,
.inside_page_header_design .navbar-default .navPages > li > a:not(.navbar-brand):hover:after,
.inside_page_header_design .navbar-default .navPages > li > a:not(.navbar-brand):focus:hover: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: 'Open Sans',Arial,sans-serif;
webkit-tap-highlight-color: #222;
color: #000000;
background-color: #f7f9f8;
/* 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: #000000;
}
html[dir="rtl"] body {
direction: rtl;
}
@media (min-width: 768px) {
html[dir="rtl"] .navbar-right {
float: left!important;
}
}
a {
color: #00adb5;
transition: opacity .35s;
}
a .svg-m {
background-color: #00adb5;
}
.mainWebsiteColor {
color: #00adb5;
}
/**
* 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: #00adb5;
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: #00adb5;
border-width: 3px;
}
hr.light {
border-color: #00adb5;
}
.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: #00adb5;
}
.inside_page .bg-primary .primary-color .box-primary .svg-m {
background-color: #00adb5;
}
.background-primary-color {
background-color: #00adb5 !important;
}
.background-primary-color-before:before {
background-color: #00adb5;
}
.background-primary-color.border-left-before::before {
border-left-color: #00adb5;
}
.background-primary-color.border-right-before::before {
border-right-color: #00adb5;
}
html[dir="rtl"] .background-primary-color.border-left-before::before {
border-right-color: #00adb5;
}
html[dir="rtl"] .background-primary-color.border-right-before::before {
border-left-color: #00adb5;
}
@media(max-width:900px) {
.background-primary-color.border-left-before::before {
border-right-color: #00adb5;
border-left-color: transparent;
}
html[dir="rtl"] .background-primary-color.border-left-before::before {
border-right-color: transparent;
border-left-color: #00adb5;
}
}
.loading-primary {
color: #00adb5;
}
.loading-primary .svg-m {
background-color: #00adb5;
}
.btn-primary-text-color {
color: #ffffff !important;
}
/* main page - shadow color */
.bg-primary .s123-module-shadows.shadow-before {
background: linear-gradient(to right, #f7f9f8 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%, #f7f9f8 100%) !important;
}
/* secondary page - shadow color */
.s123-module-shadows.shadow-before {
background: linear-gradient(to right, #ebebeb 0%, rgba(255,255,255,0) 100%) !important;
}
.s123-module-shadows.shadow-after {
background: linear-gradient(to right, rgba(255,255,255,0) 0%, #ebebeb 100%) !important;
}
/* inside page - shadow color */
.inside_page .s123-module-shadows.shadow-before {
background: linear-gradient(to right, #f7f9f8 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%, #f7f9f8 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 #00adb5;
color: #ffffff;
background-color: #00adb5;
transition: background-color .35s, opacity .35s;
}
.btn-primary .svg-m {
background-color: #ffffff;
}
.btn-primary-transparent {
border: 1px solid;
background-color: transparent;
}
.btn-primary-transparent-main {
border: 1px solid #00adb5;
color: #00adb5;
background-color: transparent;
}
.btn-primary-transparent-main .svg-m {
background-color: #00adb5;
}
.btn-primary-simplelink {
color: #00adb5 !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 {
background-color: #00adb5;
}
.btn-primary-simplelink:hover .svg-m,
.btn-primary-simplelink:focus .svg-m {
background-color: #00adb5 !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 {
background-color: #ffffff;
}
.btn-primary-simplelink-text-color:hover .svg-m,
.btn-primary-simplelink-text-color: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: #00adb5;
color: #ffffff;
background-color: #00adb5;
opacity: 0.9;
}
.btn-primary:hover .svg-m,
.btn-primary:focus .svg-m {
background-color: #ffffff;
}
.btn-primary-transparent:hover,.btn-primary-transparent:focus {
opacity: 1;
}
.btn-primary .badge {
color: #f7f9f8;
background-color: #fff;
}
.btn-sm {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
.btn-xl {
padding: 15px 30px;
}
.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: #00adb5;
background-color: #00adb5;
}/*
######################################
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: #000000;
opacity: 0.7;
padding: 2px 8px;
font-size: 1.3em;
}
.inside_page .share-buttons.square li a {
color: #000000;
}
.inside_page .share-buttons.square li a .svg-m {
background-color: #000000;
}
.share-buttons.square li a:hover {
opacity: 1;
}
.s123-card {
margin: 0 0 30px;
position: relative;
border: 1px solid ;
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 ;
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: 'Open Sans',Arial,sans-serif;
}
#mainNav {
font-family: 'Open Sans',Arial,sans-serif;
z-index: 3000;
}
/* 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: '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: 'Open Sans',Arial,sans-serif;
line-height: 1.5;
}
/* Modules Colors & Settings
----------------------------------*/
.home_page .modulesTitle {
padding-bottom:10px;
}
.s123-content-area .modulesTitle {
padding-top:20px;
padding-bottom:10px;
}
.s123-module {
color: #000000;
background-color: #ebebeb;
}
/* 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: #000000;
}
.s123-module a .svg-m {
background-color: #00adb5;
}
.s123-module .btn-primary .svg-m {
background-color: #ffffff;
}
.home_page .s123-module {
border-bottom: 0px solid transparent;
}
.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: #000000;
background-color: #f7f9f8;
}
.bg-primary .svg-m {
background-color: #000000;
}
.bg-primary .btn-link .svg-m {
background-color: #337ab7;
}
.bg-primary .btn-primary .svg-m {
background-color: #ffffff;
}
.inside_page .bg-primary {
color: #000000;
background-color: #f7f9f8;
}
.bg-primary .text-primary {
color: #000000;
}
.inside_page .bg-primary .text-primary {
color: #000000;
}
.bg-primary .text-inverse {
color: #00adb5;
}
.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: #00adb5;
}
.text-inverse {
color: #000000;
}
.inside_page .text-inverse {
color: #000000;
}
.border-primary {
border-color: #00adb5;
}
.border-top-primary {
border-top-color: #00adb5;
}
.border-right-primary {
border-right-color: #00adb5;
}
.border-left-primary {
border-left-color: #00adb5;
}
.border-bottom-primary {
border-bottom-color: #00adb5;
}
.site123-box-border {
box-shadow: none;
border: 0px solid transparent !important;
border-radius: 0px !important;
}
/* Box inside Modules - Colors & Settings
----------------------------------*/
.bg-primary .box-primary {
background-color: #ebebeb !important;
}
.inside_page .bg-primary .box-primary {
background-color: #ebebeb !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: #000000 !important;
}
.bg-primary .box-primary .price {
color: #000000 !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: #000000 !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: #000000 !important;
}
.inside_page .bg-primary .box-primary .svg-m,
.inside_page .bg-primary .box-primary.box-text-primary .svg-m {
background-color: #000000;
}
.inside_page .bg-primary .box-primary .price {
color: #000000 !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: #000000 !important;
}
.bg-primary .box-primary.border-left-before::before {
border-left-color: #ebebeb;
}
html[dir="rtl"] .bg-primary .box-primary.border-left-before::before {
border-right-color: #ebebeb;
}
.bg-primary .box-primary.border-right-before::before {
border-right-color: #ebebeb;
}
html[dir="rtl"] .bg-primary .box-primary.border-right-before::before {
border-left-color: #ebebeb;
}
.inside_page .bg-primary .box-primary.border-right-before::before {
border-right-color: #ebebeb}
html[dir="rtl"] .inside_page .bg-primary .box-primary.border-right-before::before {
border-left-color: #ebebeb}
@media(max-width:900px) {
.bg-primary .box-primary.border-left-before::before {
border-right-color: #ebebeb;
border-left-color: transparent;
}
html[dir="rtl"] .bg-primary .box-primary.border-left-before::before {
border-right-color: transparent;
border-left-color: #ebebeb;
}
.inside_page .bg-primary .box-primary.border-left-before::before {
border-right-color: #ebebeb;
border-left-color: transparent;
}
html[dir="rtl"] .inside_page .bg-primary .box-primary.border-left-before::before {
border-right-color: transparent;
border-left-color: #ebebeb;
}
}
/* Secondery */
.box-primary {
background-color: #ffffff !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: #000000 !important;
}
.box-primary .svg-m,
.box-primary.box-text-primary .svg-m,
.box-primary .box-text-primary .svg-m {
background-color: #000000;
}
.box-primary.border-left-before::before {
border-left-color: #ffffff;
}
html[dir="rtl"] .box-primary.border-left-before::before {
border-right-color: #ffffff;
}
.box-primary.border-right-before::before {
border-right-color: #ffffff;
}
html[dir="rtl"] .box-primary.border-right-before::before {
border-left-color: #ffffff;
}
@media(max-width:900px) {
.box-primary.border-left-before::before {
border-right-color: #ffffff;
border-left-color: transparent;
}
html[dir="rtl"] .box-primary.border-left-before::before {
border-right-color: transparent;
border-left-color: #ffffff;
}
}
/* 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;
}
.box-primary .price {
color: #000000 !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: #000000 !important;
}
/* `box-text-primary` can't display custom text color for Froala editor that using BR as line breaks */
.box-primary .fr-view {
color: #000000 !important;
}
/* svg icons - colors in different combinations */
.primary-color .svg-m,
.primary-color.svg-m {
background-color: #00adb5;
}
.primary-color .box-primary .svg-m {
background-color: #00adb5;
}
.bg-primary .primary-color .svg-m {
background-color: #00adb5;
}
.btn-primary-text-color .svg-m {
background-color: #ffffff;
}
/* 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: #00adb5;
}
.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 #00adb5;
}
.s123-box-top-primary-big {
border: 0;
border-radius: 0.3rem;
border-top:6px solid #00adb5;
}
/*
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 #00adb5;
}
html[dir="rtl"] .s123-box-right-primary-border {
border-right: 1px solid #e0e0e0;
border-left:3px solid #00adb5;
}
.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 #00adb5;
}
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 #00adb5;
}
.s123-box-left-primary-border {
border: 1px solid #e0e0e0;
border-radius: 0.3rem;
border-left:3px solid #00adb5;
}
html[dir="rtl"] .s123-box-left-primary-border {
border-left:1px solid #e0e0e0;
border-right:3px solid #00adb5;
}
.s123-box-bottom-primary-border {
border: 1px solid #e0e0e0;
border-radius: 0.3rem;
border-bottom:3px solid #00adb5;
}
.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 #00adb5;
}
.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;
}
/* Pagination
----------------------------------*/
.pagination > li > a,
.pagination > li > span {
color: #00adb5;
background-color: #ebebeb;
border: 1px solid #00adb5;
}
.inside_page .pagination > li > a {
background-color: #ebebeb;
}
.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: #00adb5;
border-color: #00adb5;
}
.inside_page .pagination > .active > a {
background-color: #00adb5;
}
.pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover {
color: #fff;
background-color: #00adb5;
border-color: #00adb5;
}
/* 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: #00adb5;
}
/* 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 #00adb5;
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 #00adb5;
color: #ffffff;
background-color: #00adb5;
}
/* 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 #ebebeb;
left: 15px;
}
.s123-categories .m-r-s:last-child {
box-shadow: inset -8px 0px 5px -5px #ebebeb;
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 #f7f9f8;
left: 15px;
}
.bg-primary .s123-categories .m-r-s:last-child {
box-shadow: inset -8px 0px 5px -5px #f7f9f8;
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 #f7f9f8;
left: 15px;
}
.inside_page .s123-categories .m-r-s:last-child {
box-shadow: inset -8px 0px 5px -5px #f7f9f8;
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 #303841;
}
/* footer_2 */
footer.footer_2 .part1 {
color: #ffffff;
padding: 30px 0;
background-color: #333333;
text-align: center;
padding-bottom: 100px; /* To have place to SITE123 banner */
font-size: 0.8rem;
}
@media(max-width:767px) {
}
footer.footer_2 .part1 .navbar-nav {
float: none;
display: inline-block;
margin-bottom: 15px;
}
footer.footer_2 .part1 .navbar-nav > li {
display: inline-block;
}
footer.footer_2 .footer_name {
font-size: 1.2rem;
}
footer.footer_2 .part1 .navbar-nav > li > a {
padding: 0;
margin: 0px 8px;
color: #ffffff;
text-transform: capitalize;
white-space: nowrap;
font-size: 0.8rem;
}
footer.footer_2 .part1 .navbar-nav > li > a .svg-m {
background-color: #ffffff;
}
footer.footer_2 .part1 .nav > li > a:focus,
footer.footer_2 .part1 .nav > li > a:hover {
color: #00adb5;
background-color: transparent;
}
footer.footer_2 .part1 .nav > li > a:focus .svg-m,
footer.footer_2 .part1 .nav > li > a:hover .svg-m {
background-color: #00adb5;
}
footer.footer_2 .part2 {
color: rgba(255,255,255,0.5);
padding: 20px 0;
}
footer.footer_2 .part2 a {
color: rgba(255,255,255,0.7);
}
footer.footer_2 #widget_subscribe_form {
width: 350px;
max-width: 90%;
text-align: center;
margin: 0 auto;
}
@media(max-width:767px) {
footer.footer_2 .part1 .nav {
display:none;
}
}
/* Footer Dropdown menu */
footer .nav>li>a {
color: #ffffff;
}
footer .nav>li>a:hover {
color: #00adb5;
}
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: #333333;
}
footer .nav .site-dropdown-menu li a {
color: #ffffff;
background-color: transparent;
}
footer .nav .site-dropdown-menu li a .svg-m {
background-color: #ffffff;
}
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: #00adb5;
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: #000000;
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: #000000;
background-color: #ebebeb;
}
/* 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
----------------------------*/
/* 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;
}
@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: #303841;
}
.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: 14px;
font-weight: 400;
background-color: #303841;
border:1px solid transparent;
line-height: 1.5;
color: #ffffff;
margin-top: 0;
padding: 7px 15px !important;
white-space: nowrap;
}
.site-dropdown-menu > li > a .svg-m {
background-color: #ffffff;
}
.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: #303841;
color: #00adb5;
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: #00adb5;
}
/* 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: #303841;
border-width: 0;
min-height: var(--mainNavMobileHeight);
border-bottom: 1px solid #303841;
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:#ffffff;
border-color:#ffffff;
cursor:pointer;
background-color:transparent;
font-size:20px;
}
#mainNavMobile .navPagesLeft a .svg-m {
background-color: #ffffff;
}
#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: #ffffff;
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: #ffffff;
}
/*
#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:#ffffff !important;
}
#mainNavMobile .navPagesRight .navActions a .svg-m,
#mainNavMobile .navPagesRight .navActions button .svg-m {
background-color:#ffffff !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 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: 2px;
word-spacing: 0px;
}
.s123-w-l-s .website-name {
font-size: 27px;
}
.s123-w-l-s div {
font-size: 27px;
}
.s123-w-l-s .logoLayout_text,
.s123-w-l-s .img-responsive,
.s123-w-l-s div:not(.logoLayout):not(.svg-m) {
margin-right: 0px;
}
html[dir="rtl"] .s123-w-l-s .logoLayout_text,
html[dir="rtl"] .s123-w-l-s div div:not(.logoLayout):not(.svg-m),
html[dir="rtl"] .s123-w-l-s .img-responsive {
margin-right: 0;
margin-left: 0px;
}
.s123-w-l-s .website-name {
font-weight: 700;
}
/* 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: #ffffff;
}
/* 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 {
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: 14px;
border-color: #00adb5;
background-color: #00adb5;
font-weight:bold;
color: #ffffff;
}
/* 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;
}
.btn-primary-action-button-1:hover {
opacity: 1;
}
.btn-primary-action-button-2 {
font-size: 14px;
border-color: #ffffff;
background-color: #ffffff;
font-weight:bold;
color: #00adb5;
}
.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: #00adb5;
}
#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;
}
.btn-primary-action-button-3 {
font-size: 14px;
border-color: #00adb5;
background-color: #00adb5;
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: 14px;
border-bottom:0;
border: 1px solid;
background-color: transparent;
color: #ffffff;
position: relative;
}
.btn-primary-action-button-4:hover,
.btn-primary-action-button-4:focus {
border: 1px solid;
background-color: transparent;
color: #ffffff;
}
.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: #ffffff;
}
.btn-primary-action-button-5 {
font-size: 14px;
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 {
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: 14px;
border-bottom:0;
border: 1px solid #00adb5;
background-color: transparent;
color: #00adb5;
position: relative;
}
.btn-primary-action-button-6 .svg-m {
background-color: #00adb5 !important;
}
.btn-primary-action-button-6:hover,
.btn-primary-action-button-6:focus {
border: 1px solid #00adb5;
background-color: transparent !important;
color: #00adb5;
}
/* 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 #00adb5;
border-radius: 50%;
font-size: 18px;
color: #fff;
background-color: #00adb5;
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: #fff;
}
.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 .home-image-bg {
display: table-cell;
vertical-align: middle;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
/*patterns design*/
#top-section .home-image-bg.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-widgets-module.parallax-on,
html.parallax-active .s123-widgets-module .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: #ffffff;
}
.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: #ffffff;}.header-cart-wrapper a:hover,.header-wish-list a:hover {border:0;}.header-cart-wrapper i,.header-wish-list i {position:relative;}#websiteHeader .header-cart-wrapper,#websiteHeader .header-wish-list,#mainNavMobile .header-cart-wrapper,#mainNavMobile .header-wish-list {display:none;}#header .header-cart-wrapper .s-c-w {position:relative;display:inline-block;}#websiteHeader .header-client-zone-wrapper, #mainNavMobile .header-client-zone-wrapper {display:block;}.header-client-zone-wrapper a[data-letters] i,.header-client-zone-wrapper a[data-image] i {display:none;}.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:#00adb5;vertical-align:middle;color:white;}.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 {width:12px;height:12px;line-height:12px;border-radius:50%;font-size:8px;color:white;font-weight:bold;background-color:#00adb5;display:none;justify-content:center;align-content:center;align-items:center;position:absolute;z-index:1;top:0;left:20px;}@media(min-width:768px) {.header-cart-wrapper .count,.header-wish-list .count {width:16px;height:16px;line-height:16px;font-size:11px;top:-10px;left:20px;}#header .header-cart-wrapper .count,#header .header-wish-list .count{top:-5px;}}.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;}#popupFloatDivMenuLanguages .languagesList a:hover {color:#00adb5;}#popupFloatDivMenu .navPagesPopup a {text-align:center;}#popupFloatDivMenu .moduleMenu.separate {text-align:center;}@media only screen and (min-width :480px) {#popupFloatDivSearch .popover_phone_icons a:hover,#popupFloatDivSearch .popover_phone_icons a:focus,#popupFloatDivSearch .popover_email_icons a:hover,#popupFloatDivSearch .popover_email_icons a:focus {color:#00adb5;}}#popupFloatDivMenu .navPagesPopup li.active > a {color:#00adb5;}#popupFloatDivMenu .navPagesPopup li.active > a .svg-m {background-color:#00adb5;}#popupFloatDivMenu .navPagesPopup a:hover,#popupFloatDivMenu .navPagesPopup a:focus {color:#00adb5;}#popupFloatDivMenu .navPagesPopup a:hover .svg-m,#popupFloatDivMenu .navPagesPopup a:focus .svg-m {background-color:#00adb5;}#popupFloatDivMenu .navPagesPopup .site-dropdown-menu a:hover {color:#00adb5;}#popupFloatDivMenu .navPagesPopupActionButtons {border-top:1px solid rgba(48,56,65,0.2);}#popupFloatDivMenu .navPagesPopupActionButtons_part3 a{color:#00adb5 !important;}#popupFloatDivMenu.is-mobile .navPagesPopup a {font-size:20px !important;margin-bottom:5px;}#popupFloatDivMenu .navPagesPopupActionButtons_part1 a {color:#00adb5 !important;}#popupFloatDivMenu.m-w .navPagesPopup a:hover,#popupFloatDivMenu.m-w .navPagesPopup a:focus {color:#00adb5 !important;}#popupFloatDivMenu.m-w .navPagesPopupActionButtons_part1 a {background-color:#00adb5 !important;}#popupFloatDivMenu.m-m-t-w .cover {background-color:#00adb5 !important;}#popupFloatDivMenu.m-m-t-w .navPagesPopupActionButtons_part1 a {color:#00adb5 !important;}#popupFloatDivMenu.m-m-t-b .cover {background-color:#00adb5 !important;}#popupFloatDivMenu.m-m-t-b .navPagesPopupActionButtons_part1 a {color:#00adb5 !important;}#popupFloatDivSearch .popover_address_icons a:hover,#popupFloatDivSearch .popover_address_icons a:focus {color:#00adb5;}#popupFloatDivSearch .searchCard h4 {color:#00adb5;}#popupFloatDivSearch .social-icons a:hover, a.iconsCircle:hover {color:#00adb5;border-color:#00adb5;}.quickPopupWin .content {box-shadow:inset 3px 0px 0px 1px #303841;}html[dir="rtl"] .quickPopupWin .content {box-shadow:inset -3px 0px 0px 1px #303841;}.onlyContent123 .s123-content-area, .onlyContent123 #s123ModulesContainer, .onlyContent123 .s123-page-container {padding-top:0 !important;}html.onlyContent123 body {background-color:#f7f9f8;background-image:none;}.onlyContent123 .body {width:100%;border:0;}.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; }}.bg-primary .fr-view[dir="rtl"] blockquote {border-color:#000000 !important;}.bg-primary .fr-view[dir="rtl"] blockquote blockquote {border-color:#000000 !important;}.bg-primary .fr-view[dir="rtl"] blockquote blockquote blockquote {border-color:#000000 !important;}.bg-primary .fr-view blockquote {border-color:#000000 !important;color:#000000 !important;}.fr-view[dir="rtl"] blockquote {border-color:#000000 !important;}.fr-view[dir="rtl"] blockquote blockquote {border-color:#000000 !important;}.fr-view[dir="rtl"] blockquote blockquote blockquote {border-color:#000000 !important;}.fr-view blockquote {border-color:#000000 !important;color:#000000 !important;}.inside_page .bg-primary .fr-view[dir="rtl"] blockquote {border-color:#000000 !important;}.inside_page .bg-primary .fr-view[dir="rtl"] blockquote blockquote {border-color:#000000 !important;}.inside_page .bg-primary .fr-view[dir="rtl"] blockquote blockquote blockquote {border-color:#000000 !important;}.inside_page .bg-primary .fr-view blockquote {border-color:#000000 !important;color:#000000 !important;}.fr-view hr {max-width:100% !important;border-width:1px !important;}.fr-view section {position:static;min-height:0;}html[dir="rtl"] .input-group-addon:first-child {border:1px solid #ccc;border-left:0;}.captcha-security {margin-bottom:20px;display:none;align-items:center;align-content:center;justify-content:center;}.captcha-security.active {display:flex;}.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:#00adb5;}.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:#00adb5 \9;}.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,173,181,0.2);}.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,173,181,0.2) \9;color:#252525;}.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 .bar {background:#00adb5;}.s123-calendar-handler .modal-footer .confirm-selection,.s123-calendar-handler .datepicker-days .day.active:not(.today) {background-color:#00adb5 !important;}.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 #00adb5 !important;}input[type=date]::-webkit-inner-spin-button {-webkit-appearance:none;display:none;}_:-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:;}}_:-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;}@supports (-ms-ime-align:auto) { .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;}}.magic_homepage .promoButtons #home_buttonText,.magic_homepage .promoButtons #home_buttonText_1 {max-width:100%;margin-top:30px; }html[dir="ltr"] .magic_homepage .promoButtons #home_buttonText {margin-left:60px !important; }html[dir="ltr"] .magic_homepage .promoButtons #home_buttonText_1 {margin-left:30px;}html[dir="rtl"] .magic_homepage .promoButtons #home_buttonText {margin-right:60px !important; }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; margin-left:30px !important; }html[dir="rtl"] .magic_homepage .promoButtons #home_buttonText,html[dir="rtl"] .magic_homepage .promoButtons #home_buttonText_1 {margin-right:30px !important; margin-left:0px !important; }}.e-commerce-product-box .stractureDefault .imagePart .ribbonsLabels .product-ribbon-banner {color:#ffffff;}.header-phone-wrapper img,#popupFloatDivMenu [data-toggle="phone_menuCallActionIcons"] img {height:1.5em; width:auto;}#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;}#popupFloatDivSearch ~ .s123-calendar-handler {z-index:99001;}#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;}@media(max-width:767px) {section.s123-module.h-s-f-hm {display:none !important;}}.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;}}img.lz-opacity {transition:opacity 0.2s ease-in-out;}img.lz-opacity:not([src]) {opacity:0;}img.lz-opacity.loaded {opacity:1;}.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 .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;}