/* cyrillic-ext */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWtE6FxZCJgvAQ.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWvU6FxZCJgvAQ.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWtU6FxZCJgvAQ.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWuk6FxZCJgvAQ.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* hebrew */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWu06FxZCJgvAQ.woff2) format('woff2');
unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* vietnamese */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWtk6FxZCJgvAQ.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWt06FxZCJgvAQ.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWuU6FxZCJgg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWtE6FxZCJgvAQ.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWvU6FxZCJgvAQ.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWtU6FxZCJgvAQ.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWuk6FxZCJgvAQ.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* hebrew */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWu06FxZCJgvAQ.woff2) format('woff2');
unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* vietnamese */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWtk6FxZCJgvAQ.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWt06FxZCJgvAQ.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWuU6FxZCJgg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu0SC55K5gw.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu0SC55K5gw.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu0SC55K5gw.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu0SC55K5gw.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* hebrew */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu0SC55K5gw.woff2) format('woff2');
unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* vietnamese */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu0SC55K5gw.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu0SC55K5gw.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-mu0SC55I.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu0SC55K5gw.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu0SC55K5gw.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu0SC55K5gw.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu0SC55K5gw.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* hebrew */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu0SC55K5gw.woff2) format('woff2');
unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* vietnamese */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu0SC55K5gw.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu0SC55K5gw.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-mu0SC55I.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Rubik';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/rubik/v26/iJWEBXyIfDnIV7nEnXO61E_c5IhGzg.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Rubik';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/rubik/v26/iJWEBXyIfDnIV7nEnXq61E_c5IhGzg.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* hebrew */
@font-face {
font-family: 'Rubik';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/rubik/v26/iJWEBXyIfDnIV7nEnXy61E_c5IhGzg.woff2) format('woff2');
unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin-ext */
@font-face {
font-family: 'Rubik';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/rubik/v26/iJWEBXyIfDnIV7nEnXC61E_c5IhGzg.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Rubik';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/rubik/v26/iJWEBXyIfDnIV7nEnX661E_c5Ig.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Rubik';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/rubik/v26/iJWEBXyIfDnIV7nEnXO61E_c5IhGzg.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Rubik';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/rubik/v26/iJWEBXyIfDnIV7nEnXq61E_c5IhGzg.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* hebrew */
@font-face {
font-family: 'Rubik';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/rubik/v26/iJWEBXyIfDnIV7nEnXy61E_c5IhGzg.woff2) format('woff2');
unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin-ext */
@font-face {
font-family: 'Rubik';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/rubik/v26/iJWEBXyIfDnIV7nEnXC61E_c5IhGzg.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Rubik';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/rubik/v26/iJWEBXyIfDnIV7nEnX661E_c5Ig.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/rubik/v26/iJWKBXyIfDnIV7nMrXyw023e1Ik.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/rubik/v26/iJWKBXyIfDnIV7nFrXyw023e1Ik.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* hebrew */
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/rubik/v26/iJWKBXyIfDnIV7nDrXyw023e1Ik.woff2) format('woff2');
unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin-ext */
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/rubik/v26/iJWKBXyIfDnIV7nPrXyw023e1Ik.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/rubik/v26/iJWKBXyIfDnIV7nBrXyw023e.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/rubik/v26/iJWKBXyIfDnIV7nMrXyw023e1Ik.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/rubik/v26/iJWKBXyIfDnIV7nFrXyw023e1Ik.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* hebrew */
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/rubik/v26/iJWKBXyIfDnIV7nDrXyw023e1Ik.woff2) format('woff2');
unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin-ext */
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/rubik/v26/iJWKBXyIfDnIV7nPrXyw023e1Ik.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/rubik/v26/iJWKBXyIfDnIV7nBrXyw023e.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Ubuntu';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCu6KVjbNBYlgoKej75l0miFYxnu4w.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Ubuntu';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCu6KVjbNBYlgoKej7wl0miFYxnu4w.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Ubuntu';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCu6KVjbNBYlgoKej74l0miFYxnu4w.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Ubuntu';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCu6KVjbNBYlgoKej73l0miFYxnu4w.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* latin-ext */
@font-face {
font-family: 'Ubuntu';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCu6KVjbNBYlgoKej76l0miFYxnu4w.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Ubuntu';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCu6KVjbNBYlgoKej70l0miFYxn.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Ubuntu';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCp6KVjbNBYlgoKejZPslyCN4FNgYUJ31U.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Ubuntu';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCp6KVjbNBYlgoKejZPslyLN4FNgYUJ31U.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Ubuntu';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCp6KVjbNBYlgoKejZPslyDN4FNgYUJ31U.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Ubuntu';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCp6KVjbNBYlgoKejZPslyMN4FNgYUJ31U.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* latin-ext */
@font-face {
font-family: 'Ubuntu';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCp6KVjbNBYlgoKejZPslyBN4FNgYUJ31U.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Ubuntu';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCp6KVjbNBYlgoKejZPslyPN4FNgYUJ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKcg72nU6AF7xm.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKew72nU6AF7xm.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKcw72nU6AF7xm.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKfA72nU6AF7xm.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* latin-ext */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKcQ72nU6AF7xm.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKfw72nU6AFw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjvWyNPYZvg7UI.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjtGyNPYZvg7UI.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjvGyNPYZvg7UI.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjs2yNPYZvg7UI.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* latin-ext */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjvmyNPYZvg7UI.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoCxCvjsGyNPYZvgw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ########################################## css.php ########################################## */
html,
body {
font-size: 14px !important;
}
h1 {
font-size: 1.602em;
}
h2 {
font-size: 1.424em;
}
h3 {
font-size: 1.266em;
}
h4 {
font-size: 1.125em;
}
h5 {
font-size: 0.889em;
}
h6 {
font-size: 0.79em;
}
.display-1 {
font-size: 3.906em;
}
.display-2 {
font-size: 3.125em;
}
.display-3 {
font-size: 2.5em;
}
.display-4 {
font-size: 2em;
}
@media (min-width: 48em) {
h1 {
font-size: 2.441em;
}
h2 {
font-size: 1.953em;
}
h3 {
font-size: 1.563em;
}
h4 {
font-size: 1.25em;
}
.display-1 {
font-size: 6em;
}
.display-2 {
font-size: 5.5em;
}
.display-3 {
font-size: 4.5em;
}
.display-4 {
font-size: 3.5em;
}
}
/* Large devices (desktops, 62em and up) */
@media (min-width: 62em) {
html,
body {
font-size: 16px !important;
}
}
/* Extra large devices (large desktops, 75em and up) */
@media (min-width: 75em) {
html,
body {
font-size: 16.5px !important;
}
}
/* Fix bootstrap CSS to support RM and REM */
.input-group {
display: flex;
align-items: stretch;
justify-content: center;
align-content: center;
}
.input-group .form-control,
.input-group-addon,
.input-group-btn {
display: flex;
}
.input-group-addon {
font-size: 1rem;
padding: .375rem .75rem;
align-items: center;
line-height: 1.5;
width: auto;
}
.input-group-btn {
width: auto;
}
.form-control {
height: auto;
padding: 0.75rem 1.10rem;
font-size: 1rem;
border-color: #d4d7e5;
}
.form-control:focus {
border-color: var(--global_main_color);
}
select.form-control:not([size]):not([multiple]) {
font-size: 1rem;
padding: 0.75rem 1.10rem;
}
.form-control.input-lg {
font-size: 1.25rem;
padding: .5rem 1rem;
line-height: 1.5;
}
.btn {
font-size: 1rem;
line-height: 1.5;
}
.btn:not(.btn-link):not(.btn-sm):not(.btn-xl):not(.btn-xxl) {
padding: 0.75rem 1.10rem;
}
.btn-lg {
font-size: 1.25rem;
padding: .5rem 1rem;
line-height: 1.5;
}
/* Text font sizes */
.text-110 {
font-size: 1.1rem;
}
.text-120 {
font-size: 1.2rem;
}
.text-125 {
font-size: 1.25rem;
}
.text-130 {
font-size: 1.3rem;
}
.text-150 {
font-size: 1.5rem;
}
.text-180 {
font-size: 1.8rem;
}
/* Titles font sizes */
.header-300 {
font-size: 3em;
}
.header-320 {
font-size: 3.2em;
}
.header-360 {
font-size: 3.6em;
}
:root {
--global_main_color: #00a1cd;
--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: 96px;
--home_text_size_2_px: 96px;
--slogan_text_size_px: 32px;
--home_text_size: 96;
--home_text_size_2: 96;
--slogan_text_size: 32;
--home_text_size_px_media: 96px;
--home_text_size_2_px_media: 96px;
--slogan_text_size_px_media: 32px;
--layout_text_align: center;
--layout_text_align_rtl: center;
--layout_text_box_width: 100%;
--layout_left_side_width: 50%;
--layout_left_side_width_vh: 50vh;
--homepage_layout_height: 95%;
/* carousel */
--homepage_layout_height_vh: 95vh;
/* carousel */
--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: 30%;
--layout_bottom_spacing: 0px;
--window-height: 100vh;
--window-width: 100vw;
--menu_font_size: 14px;
--menu_pages_space: 3px;
--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_text_hover_color: #00a1cd;
--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: 16px;
--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: 45px;
--homepage_main_goal_margin_bottom: 0px;
--homepage_second_goal_margin_top: 20px;
--homepage_second_goal_margin_bottom: 20px;
--modules_color_second: #ebebeb;
--modules_color: #f7f9f8;
--footer_back: #333333;
--footer_text_hover: #00a1cd;
--footer_links_color: #00a1cd;
--footer_text: #ffffff;
--home_background_color: #000000;
--inside_modules_color_box: #ebebeb;
--inside_modules_color_text_box: #000000;
--module_separate_border_color: ;
--modules_color_box: #ebebeb;
--modules_color_second_box: #ffffff;
--modules_color_text_second_box: #000000;
--inside_modules_color: #f7f9f8;
--modules_color_text_box: #000000;
--font_logo: Open Sans;
--font_menu: Open Sans;
--global_font: Open Sans;
--font_slogan: Ubuntu;
--font_slogan_2: Rubik;
--font_second_slogan: Open Sans;
--font_modules_header: Open Sans;
--sticky_menu: 1;
--scrollHeaderSize: 0px;
}
textarea {
resize: none;
}
/* PC
----------------------------------*/
@media(min-width:768px) {
#top-section .title {
margin-right: auto;
margin-left: auto;
max-width: 1000px;
padding: 60px 50px;
}
#top-section .title p {
margin-right: auto;
margin-left: auto;
max-width: 80%;
}
}
/* Mobile & Tablet
----------------------------------*/
@media(max-width:767px) {
#top-section .title {
margin-right: auto;
margin-left: auto;
padding: 40px 20px;
}
}
/* ########################################## cssHomeSection.php ########################################## */
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.delay-1s {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.animated.delay-2s {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.animated.delay-3s {
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.animated.delay-4s {
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.animated.delay-5s {
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
.animated.fast {
-webkit-animation-duration: 800ms;
animation-duration: 800ms;
}
.animated.faster {
-webkit-animation-duration: 500ms;
animation-duration: 500ms;
}
.animated.slow {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.animated.slower {
-webkit-animation-duration: 3s;
animation-duration: 3s;
}
@media (print),
(prefers-reduced-motion) {
.animated {
-webkit-animation: unset !important;
animation: unset !important;
-webkit-transition: none !important;
transition: none !important;
}
}
#top-section {
padding: 0;
position: relative;
width: 100%;
height: auto;
text-align: center;
background-color: transparent;
display: flex;
justify-content: center;
flex-direction: column;
}
#top-section .home_background_wrapper {
background-color: #000000;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
/* The background color was not changed in the preview without reload, so we fix it by this line */
#parallax_home_opacity {
background-color: #000000 !important;
}
#top-section .home-image-bg,
#top-section .carousel,
#top-section #video-bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.7;
}
#top-section .homepage-layout-24 .btn-primary-transparent {
color: #ffffff;
}
#top-section .homepage-layout-24 .btn-primary-transparent .svg-m {
background-color: #ffffff;
}
#top-section .homepage-layout-24 .btn-primary-transparent:hover,
#top-section .homepage-layout-24 .btn-primary-transparent:focus {
color: #ffffff;
}
#top-section .homepage-layout-24 .btn-primary-transparent:hover .svg-m {
background-color: #ffffff;
}
#top-section .homepage-layout-24 .btn-primary-white {
background-color: #ffffff;
color: #000000;
border-color: transparent;
}
#top-section .homepage-layout-24 .btn-primary-white .svg-m {
background-color: #000000;
}
#top-section .homepage-layout-24 .btn-primary-white:hover,
#top-section .homepage-layout-24 .btn-primary-white:focus {
opacity: 0.9;
}
#top-section .homepage-layout-24 .btn-primary-black {
background-color: #000000;
color: #ffffff;
border-color: transparent;
}
#top-section .homepage-layout-24 .btn-primary-black .svg-m {
background-color: #ffffff;
}
#top-section .homepage-layout-24 .btn-primary-grey {
background-color: #ebedf0;
color: #444950;
border-color: transparent;
}
#top-section .homepage-layout-24 .btn-primary-grey .svg-m {
background-color: #444950;
}
#top-section .homepage-layout-24 .btn-primary-grey:hover,
#top-section .homepage-layout-24 .btn-primary-grey:focus {
color: #444950;
background-color: #e2e5e9;
}
#top-section .homepage-layout-24 .btn-primary-black:hover,
#top-section .homepage-layout-24 .btn-primary-black:focus {
opacity: 0.9;
}
/* FIX - only for IE 11 */
_:-ms-fullscreen,
:root .homepage-search-field {
width: 400px;
}
/* ########################################## cssHomepageText.php ########################################## */
:root {
--global_main_color_rgba_07: rgba(0, 173, 181, 0.7)
}
#top-section .weight400 {
font-weight: normal;
}
#top-section .weight700 {
font-weight: bold;
}
/* Italic style */
#top-section .italic {
font-style: italic;
}
#top-section .spacingSmall {
letter-spacing: 1px;
word-spacing: 1px;
}
#top-section .spacingBig {
letter-spacing: 3px;
word-spacing: 3px;
}
#top-section .spacingLarge {
letter-spacing: 5px;
word-spacing: 5px;
}
#top-section .bottomSpaceSmall {
margin-bottom: 10px;
}
#top-section .bottomSpaceBig {
margin-bottom: 30px;
}
#top-section .bottomSpaceLarge {
margin-bottom: 50px;
}
#top-section .bottomSpaceHuge {
margin-bottom: 70px;
}
#top-section .background1 {
border: 1px solid;
padding: 5px 25px;
}
#top-section h1.background1 {
border: calc(var(--home_text_size_px_media) / 15) solid;
}
#top-section h2.background1 {
border: calc(var(--home_text_size_2_px_media) / 15) solid;
}
#top-section p.background1 {
border: calc(var(--slogan_text_size_px_media) / 15) solid;
}
/* Mobile & Tablet
----------------------------------*/
@media(max-width:767px) {
#top-section .background1 {
padding: 0 5px;
}
}
#top-section .background2 {
border: 0;
border-top: 1px solid;
border-bottom: 1px solid;
padding: 5px 25px;
}
#top-section h1.background2 {
border-top: calc(var(--home_text_size_px_media) / 15) solid;
border-bottom: calc(var(--home_text_size_px_media) / 15) solid;
}
#top-section h2.background2 {
border-top: calc(var(--home_text_size_2_px_media) / 15) solid;
border-bottom: calc(var(--home_text_size_2_px_media) / 15) solid;
}
#top-section p.background2 {
border-top: calc(var(--slogan_text_size_px_media) / 15) solid;
border-bottom: calc(var(--slogan_text_size_px_media) / 15) solid;
}
/* Mobile & Tablet
----------------------------------*/
@media(max-width:767px) {
#top-section .background2 {
padding: 0 5px;
}
}
#top-section .background3 {
border: 0;
padding: 5px 25px;
background-color: var(--global_main_color);
color: white !important;
}
/* Mobile & Tablet
----------------------------------*/
@media(max-width:767px) {
#top-section .background3 {
padding: 0 5px;
}
}
#top-section .background4 {
border: 0;
padding: 5px 25px;
background-color: rgba(0, 173, 181, 0.7);
background-color: var(--global_main_color_rgba_07);
color: white !important;
}
/* Mobile & Tablet
----------------------------------*/
@media(max-width:767px) {
#top-section .background4 {
padding: 0 5px;
}
}
#top-section .background5 {
border: 0;
padding: 5px 25px;
background-color: #000;
color: #fff !important;
}
/* Mobile & Tablet
----------------------------------*/
@media(max-width:767px) {
#top-section .background5 {
padding: 0 5px;
}
}
#top-section .background6 {
border: 0;
padding: 5px 25px;
background-color: #fff;
color: #000 !important;
}
/* Mobile & Tablet
----------------------------------*/
@media(max-width:767px) {
#top-section .background6 {
padding: 0 5px;
}
}
#top-section .background7 {
border: 0;
padding: 5px 25px;
background-color: #fff;
color: #000 !important;
box-shadow: 3px 3px 2px 2px #000;
}
/* Mobile & Tablet
----------------------------------*/
@media(max-width:767px) {
#top-section .background7 {
padding: 0 5px;
}
}
#top-section .background8 {
color: var(--global_main_color) !important;
}
#top-section .background9 {
opacity: 0.7 !important;
}
#top-section .background10:after {
content: '';
display: block;
border-top: 6px solid var(--global_main_color);
width: 100px;
margin: 15px auto;
}
#top-section .ele_align_right .background10:after {
margin-left: auto;
margin-right: 0;
}
#top-section .ele_align_left .background10:after {
margin-left: 0;
margin-right: auto;
}
html[dir="rtl"] #top-section .ele_align_right .background10:after {
margin-left: 0;
margin-right: auto;
}
html[dir="rtl"] #top-section .ele_align_left .background10:after {
margin-left: auto;
margin-right: 0;
}
#top-section h1.background10:after {
border-top: calc(var(--home_text_size_px_media) / 15) solid var(--global_main_color);
}
#top-section h2.background10:after {
border-top: calc(var(--home_text_size_2_px_media) / 15) solid var(--global_main_color);
}
#top-section p.background10:after {
border-top: calc(var(--slogan_text_size_px_media) / 15) solid var(--global_main_color);
}
#top-section .background11:before {
content: '';
display: block;
border-top: 6px solid var(--global_main_color);
border-top: calc(var(--home_text_size_px_media) / 15) solid var(--global_main_color);
width: 100px;
margin: 15px auto;
}
#top-section .ele_align_right .background11:before {
margin-left: auto;
margin-right: 0;
}
#top-section .ele_align_left .background11:before {
margin-left: 0;
margin-right: auto;
}
html[dir="rtl"] #top-section .ele_align_right .background11:before {
margin-left: 0;
margin-right: auto;
}
html[dir="rtl"] #top-section .ele_align_left .background11:before {
margin-left: auto;
margin-right: 0;
}
#top-section h1.background11:before {
border-top: calc(var(--home_text_size_px_media) / 15) solid var(--global_main_color);
}
#top-section h2.background11:before {
border-top: calc(var(--home_text_size_2_px_media) / 15) solid var(--global_main_color);
}
#top-section p.background11:before {
border-top: calc(var(--slogan_text_size_px_media) / 15) solid var(--global_main_color);
}
#top-section .background12 {
border: 0;
padding: 5px 25px;
background-color: rgba(0, 173, 181, 0.7);
background-color: var(--global_main_color_rgba_07);
color: white !important;
position: relative;
}
#top-section .background12:after {
content: " ";
/* background: #000; */
position: absolute;
}
#top-section h1.background12:after {
border: calc(var(--home_text_size_px_media) / 15) solid;
width: calc(100% + var(--home_text_size_px_media) / 6 * 2);
height: calc(100% + var(--home_text_size_px_media) / 6 * 2);
left: calc(var(--home_text_size_px_media) / 6 * -1);
top: calc(var(--home_text_size_px_media) / 6 * -1);
/* the user was unable to edit those headers at the wizard so we move the after below its parent */
z-index: -1;
/* Source: https://stackoverflow.com/a/10822168/469161 */
}
#top-section h2.background12:after {
border: calc(var(--home_text_size_2_px_media) / 15) solid;
width: calc(100% + var(--home_text_size_2_px_media) / 6 * 2);
height: calc(100% + var(--home_text_size_2_px_media) / 6 * 2);
left: calc(var(--home_text_size_2_px_media) / 6 * -1);
top: calc(var(--home_text_size_2_px_media) / 6 * -1);
/* the user was unable to edit those headers at the wizard so we move the after below its parent */
z-index: -1;
/* Source: https://stackoverflow.com/a/10822168/469161 */
}
#top-section p.background12:after {
border: calc(var(--slogan_text_size_px_media) / 15) solid;
width: calc(100% + var(--slogan_text_size_px_media) / 6 * 2);
height: calc(100% + var(--slogan_text_size_px_media) / 6 * 2);
left: calc(var(--slogan_text_size_px_media) / 6 * -1);
top: calc(var(--slogan_text_size_px_media) / 6 * -1);
}
/* Mobile & Tablet
----------------------------------*/
@media(max-width:767px) {
#top-section .background12 {
padding: 0 5px;
}
}
/* boxStyle_1 */
.magic_homepage .boxStyle_1 {
background-color: #000;
padding: 20px;
border-radius: 0;
border-top: 5px solid var(--global_main_color);
}
.magic_homepage .boxStyle_1 h1,
.magic_homepage .boxStyle_2 h1,
.magic_homepage .boxStyle_1 p {
color: #fff !important;
text-shadow: none !important;
}
/* boxStyle_2 */
.magic_homepage .boxStyle_2 {
background-color: #fff;
padding: 20px;
border-radius: 0;
border-top: 5px solid var(--global_main_color);
}
.magic_homepage .boxStyle_2 h1,
.magic_homepage .boxStyle_2 h2,
.magic_homepage .boxStyle_2 p {
color: #000 !important;
text-shadow: none !important;
}
/* boxStyle_3 */
.magic_homepage .boxStyle_3 {
background-color: #fff;
padding: 20px;
border-radius: 0;
border: 5px solid var(--global_main_color);
}
.magic_homepage .boxStyle_3 h1,
.magic_homepage .boxStyle_3 h2,
.magic_homepage .boxStyle_3 p {
color: #000 !important;
text-shadow: none !important;
}
/* boxStyle_4 */
.magic_homepage .boxStyle_4 {
padding: 20px;
border-radius: 0;
position: relative;
margin-right: 25px;
}
.magic_homepage .boxStyle_4 .boxBorder,
.magic_homepage .boxStyle_4 .homepage_goal {
z-index: 1;
}
.magic_homepage .boxStyle_4:before {
content: " ";
position: absolute;
left: 25px;
top: 25px;
background-color: var(--global_main_color);
width: 100%;
height: 100%;
}
.magic_homepage .boxStyle_4:after {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #fff;
}
.magic_homepage .boxStyle_4 h1,
.magic_homepage .boxStyle_4 h2,
.magic_homepage .boxStyle_4 p {
color: #000 !important;
text-shadow: none !important;
}
/* boxStyle_5 */
.magic_homepage .boxStyle_5 {
padding: 20px;
border-radius: 0;
position: relative;
margin-left: 25px;
}
.magic_homepage .boxStyle_5 .boxBorder,
.magic_homepage .boxStyle_5 .homepage_goal {
z-index: 1;
}
.magic_homepage .boxStyle_5:before {
content: " ";
position: absolute;
left: -25px;
top: -25px;
background-color: var(--global_main_color);
width: 100%;
height: 100%;
}
.magic_homepage .boxStyle_5:after {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #fff;
}
.magic_homepage .boxStyle_5 h1,
.magic_homepage .boxStyle_5 h2,
.magic_homepage .boxStyle_5 p {
color: #000 !important;
text-shadow: none !important;
}
/* boxStyle_6 */
.magic_homepage .boxStyle_6 {
padding: 20px;
border-radius: 0;
position: relative;
margin-right: 75px;
}
.magic_homepage .boxStyle_6 .boxBorder,
.magic_homepage .boxStyle_6 .homepage_goal {
z-index: 1;
}
.magic_homepage .boxStyle_6:before {
content: " ";
position: absolute;
left: calc(100% - 75px);
top: calc(100% - 75px);
background-color: var(--global_main_color);
width: 150px;
height: 150px;
border-radius: 50%;
}
.magic_homepage .boxStyle_6:after {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #fff;
}
.magic_homepage .boxStyle_6 h1,
.magic_homepage .boxStyle_6 h2,
.magic_homepage .boxStyle_6 p {
color: #000 !important;
text-shadow: none !important;
}
/* boxStyle_7 */
.magic_homepage .boxStyle_7 {
padding: 20px;
border-radius: 0;
position: relative;
margin-right: 200px;
margin-bottom: 200px;
}
.magic_homepage .boxStyle_7 .boxBorder,
.magic_homepage .boxStyle_7 .homepage_goal {
z-index: 1;
}
.magic_homepage .boxStyle_7:before {
content: " ";
position: absolute;
left: calc(100% - 200px);
top: calc(100% - 200px);
width: 400px;
height: 400px;
background-image: url("data:image/svg+xml;utf8,");
}
/* Mobile & Tablet
----------------------------------*/
@media(max-width:767px) {
.magic_homepage .boxStyle_7:before {
left: calc(100% - 250px);
top: calc(100% - 100px);
width: 200px;
height: 200px;
background-image: url("data:image/svg+xml;utf8,");
}
}
.magic_homepage .boxStyle_7:after {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #fff;
}
.magic_homepage .boxStyle_7 h1,
.magic_homepage .boxStyle_7 h2,
.magic_homepage .boxStyle_7 p {
color: #000 !important;
text-shadow: none !important;
}
.magic_homepage .boxBorder h1 {
max-width: 100%;
white-space: pre-line;
word-wrap: break-word;
overflow-wrap: break-word;
font-family: var(--font_slogan), 'Ubuntu', Arial, sans-serif;
color: #ffffff;
letter-spacing: 1px;
word-spacing: 10px;
line-height: 1;
margin-bottom: 16px;
}
/* Small Devices, Wide Screens */
@media only screen and (max-width : 1169px) {
.magic_homepage .boxBorder h1 {
letter-spacing: calc(1 * (100vw / 1170));
word-spacing: calc(10 * (100vw / 1170));
}
}
/* Small Devices, Wide Screens */
@media only screen and (max-height : 767px) {
/*
We reduce the margin-bottom between user homepage text only if the height of the screen become really small.
We choose 768 height because that the most use screen 1366X768
*/
.magic_homepage .boxBorder h1 {
margin-bottom: calc(16 * (100vh / 768));
}
}
.magic_homepage .boxBorder h2 {
max-width: 100%;
white-space: pre-line;
word-wrap: break-word;
overflow-wrap: break-word;
font-family: var(--font_slogan_2), 'Rubik', Arial, sans-serif;
color: #ffffff;
letter-spacing: -1px;
word-spacing: 8px;
line-height: 0.9;
margin-bottom: 16px;
}
/* Small Devices, Wide Screens */
@media only screen and (max-width : 1169px) {
.magic_homepage .boxBorder h2 {
letter-spacing: calc(-1 * (100vw / 1170));
word-spacing: calc(8 * (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(16 * (100vh / 768));
}
}
.magic_homepage .boxBorder p {
max-width: 100%;
white-space: pre-line;
word-wrap: break-word;
overflow-wrap: break-word;
font-family: var(--font_second_slogan), 'Open Sans', Arial, sans-serif;
font-size: 32px;
color: #ffffff;
letter-spacing: 1px;
word-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));
word-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));
}
}
@-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
/* 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(96 * (100vw / 1170) + 8px);
font-size: calc(var(--home_text_size) * (100vw / 1170) + 8px);
}
#top-section #home_siteSlogan_2 {
font-size: calc(96 * (100vw / 1170) + 8px);
font-size: calc(var(--home_text_size_2) * (100vw / 1170) + 8px);
}
#top-section #home_SecondSiteSlogan {
font-size: calc(32 * (100vw / 1170) + 8px);
font-size: calc(var(--slogan_text_size) * (100vw / 1170) + 8px);
}
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
/*
8 is the minimum font size. Base on this trick: https://stackoverflow.com/questions/23560087/is-there-such-a-thing-as-min-font-size-and-max-font-size;
*/
:root {
--home_text_size_px_media: calc(var(--home_text_size) * (100vw / 1170) + 8px);
--home_text_size_2_px_media: calc(var(--home_text_size_2) * (100vw / 1170) + 8px);
--slogan_text_size_px_media: calc(var(--slogan_text_size) * (100vw / 1170) + 8px);
}
#top-section #home_siteSlogan {
font-size: calc(96 * (100vw / 1170) + 8px);
font-size: calc(var(--home_text_size) * (100vw / 1170) + 8px);
}
#top-section #home_siteSlogan_2 {
font-size: calc(96 * (100vw / 1170) + 8px);
font-size: calc(var(--home_text_size_2) * (100vw / 1170) + 8px);
}
#top-section #home_SecondSiteSlogan {
font-size: calc(32 * (100vw / 1170) + 8px);
font-size: calc(var(--slogan_text_size) * (100vw / 1170) + 8px);
}
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
:root {
--home_text_size_px_media: calc(var(--home_text_size) * (100vw / 1170));
--home_text_size_2_px_media: calc(var(--home_text_size_2) * (100vw / 1170));
--slogan_text_size_px_media: calc(var(--slogan_text_size) * (100vw / 1170));
}
#top-section #home_siteSlogan {
font-size: calc(96 * (100vw / 1170));
font-size: calc(var(--home_text_size) * (100vw / 1170));
}
#top-section #home_siteSlogan_2 {
font-size: calc(96 * (100vw / 1170));
font-size: calc(var(--home_text_size_2) * (100vw / 1170));
}
#top-section #home_SecondSiteSlogan {
font-size: calc(32 * (100vw / 1170));
font-size: calc(var(--slogan_text_size) * (100vw / 1170));
}
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
:root {
--home_text_size_px_media: calc(var(--home_text_size) * (100vw / 1170));
--home_text_size_2_px_media: calc(var(--home_text_size_2) * (100vw / 1170));
--slogan_text_size_px_media: calc(var(--slogan_text_size) * (100vw / 1170));
}
#top-section #home_siteSlogan {
font-size: calc(96 * (100vw / 1170));
font-size: calc(var(--home_text_size) * (100vw / 1170));
}
#top-section #home_siteSlogan_2 {
font-size: calc(96 * (100vw / 1170));
font-size: calc(var(--home_text_size_2) * (100vw / 1170));
}
#top-section #home_SecondSiteSlogan {
font-size: calc(32 * (100vw / 1170));
font-size: calc(var(--slogan_text_size) * (100vw / 1170));
}
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
:root {
--home_text_size_px_media: var(--home_text_size_px);
--home_text_size_2_px_media: var(--home_text_size_2_px);
--slogan_text_size_px_media: var(--slogan_text_size_px);
}
#top-section #home_siteSlogan {
font-size: 96px;
font-size: var(--home_text_size_px);
}
#top-section #home_siteSlogan_2 {
font-size: 96px;
font-size: var(--home_text_size_2_px);
}
#top-section #home_SecondSiteSlogan {
font-size: 32px;
font-size: var(--slogan_text_size_px);
}
}
#homepageShapeDesign {
fill: #f7f9f8;
}
/* We added 5px because the shape start from -5px */
#homepageShapeDesign.shapeBottom,
#homepageShapeDesign.shapeTop {
height: calc(var(--homepageShapeDividerList_Size) + 5px) !important;
}
#homepageShapeDesign.shapeLeft,
#homepageShapeDesign.shapeRight {
width: var(--homepageShapeDividerList_Size) !important;
}
#top-section .homepage-layout-24 .social-style-2 {
border: 1px solid var(--global_main_color) !important;
background: none !important;
color: var(--global_main_color) !important;
}
#top-section .homepage-layout-24 .social-style-3 {
border-radius: 0px !important;
background: var(--global_main_color) !important;
}
#top-section .homepage-layout-24 .social-style-4 {
border: none !important;
background: none !important;
color: var(--global_main_color) !important;
font-size: 2.5rem !important;
}
#top-section .homepage-layout-24 .social-size-big:not(.social-style-4) {
width: 65px !important;
height: 65px !important;
font-size: 2rem !important;
}
#top-section .homepage-layout-24 .social-size-large:not(.social-style-4) {
font-size: 2.3rem !important;
width: 75px !important;
height: 75px !important;
}
/* Bug Fix - The action buttons container was covering the
titles because of other style it has `margin-top: -30px` to drop button
with long text to new line
---------------------------*/
#top-section .magic_homepage .boxBorder h1,
#top-section .magic_homepage .boxBorder h2,
#top-section .magic_homepage .boxBorder p {
z-index: 1;
}
/* New Main Homepage Goal Spacing Infrastructure
----------------------------------*/
#top-section .magic_homepage .home_main_wrapper .homepage_goal.mainGoal {
margin-top: 45px;
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: 20px;
margin-top: var(--homepage_second_goal_margin_top);
margin-bottom: 20px;
margin-bottom: var(--homepage_second_goal_margin_bottom);
}
/* Homepage Inline Video
-------------------------*/
.homepage_goal[data-type="video"] .inline-video {
position: relative;
max-width: 100%;
}
.homepage_goal[data-type="video"] .inline-video.old-customer {
max-width: 360px;
width: 100%;
}
/* ########################################## site_layout1.php ########################################## */
.home_page_design #mainNav:not(.affix) {
position: fixed;
top: 0;
left: 0;
margin: 0;
}
/* Typography (based on Bootstrap Typography)
----------------------------------*/
html,
body {
width: 100%;
height: 100%;
}
.body {
height: 100%;
}
:root {
--home_text_color_rgba_01: rgba(255, 255, 255, 0.1)
}
#top-section .title {
padding: 120px 50px 0 50px;
}
/* Navbar
----------------------------------*/
#mainNav {
height: 100px;
}
:root {
--mainNavHeight: 100px;
--scrollHeaderSize: 80px;
}
#mainNav.affix {
height: 80px;
}
.inside_page_header_design #mainNav {
position: absolute;
margin: 0;
border-bottom: 1px solid #303841;
border-bottom: 1px solid var(--menu_thin_border);
}
/**
* Menus Place Holder - The top menu has an absolute/fixed position so we
* use a placeholder to push the website down related to the menu height
*/
.inside_page_header_design #s123ModulesContainer:before,
.inside_page_header_design .s123-page-container:before,
.s123-content-area:before {
content: '';
width: 100%;
height: 100px;
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;
background-color: var(--inside_modules_color);
}
.inside_page_header_design:not(.onlyContent123) .s123-page-container:before {
/* when the user scroll up there is an transition effect and he can see the background
color, so we handle it by adding background color related to the first seen element */
background-color: #f7f9f8;
background-color: var(--modules_color);
}
.inside_page_header_design .s123-page-container.s123-page-404-error:before {
/* 404 pages doesn't has header so we overwrite the `page_header_style` in case its exist */
background-color: #f7f9f8;
background-color: var(--modules_color);
}
.inside_page_header_design #mainNav.affix {
position: fixed;
margin: 0;
}
#mainNav .container-fluid,
#mainNav .site_container {
display: flex !important;
justify-content: space-between;
align-content: center;
align-items: center;
height: 100%;
}
#mainNav .navbar-header {
order: 1;
display: flex;
justify-content: flex-start;
align-content: center;
align-items: center;
flex-basis: auto;
height: 100%;
white-space: nowrap;
}
#mainNav #top-menu {
order: 2;
display: flex !important;
justify-content: flex-end;
align-content: center;
align-items: center;
flex-basis: auto;
flex-grow: 1;
}
#mainNav #top-menu .navPages,
#top-menu .navActions {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.navbar-default {
background-color: #303841;
background-color: var(--menu_color);
}
.navbar-default,
#mainNav .logo_name,
#mainNav .s123-site-logo {
transition: height 0.35s, background-color 0.35s, font-size 0.35s;
}
.navbar-default .navbar-brand {
font-weight: 700;
color: #ffffff;
color: var(--menu_text_color);
height: auto;
margin: 0;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.navbar-default .nav>li {
margin: 0 1px;
}
/* website menu space between pages */
.navbar-default .nav.navPages>li {
margin-right: var(--menu_pages_space);
margin-left: 1px;
}
html[dir="rtl"] .navbar-default .nav.navPages>li {
margin-right: 1px;
margin-left: var(--menu_pages_space);
}
.navbar-default .nav>li>a:not(.navbar-brand),
.navbar-default .nav>li>a:not(.navbar-brand):focus {
font-size: 14px;
font-size: var(--menu_font_size);
font-weight: 700;
color: #ffffff;
color: var(--menu_text_color);
letter-spacing: 0.5px;
text-transform: uppercase;
padding-top: 0px;
padding-bottom: 0px;
white-space: nowrap;
}
/* website menu page size */
.navbar-default .nav.navPages li a {
padding-right: var(--menu_pages_side_padding);
padding-left: var(--menu_pages_side_padding);
}
/* letter spacing + word spacing */
.navbar-default .nav.navPages li a .txt-container {
letter-spacing: var(--menu_pages_letter_spacing);
word-spacing: var(--menu_pages_word_spacing);
}
.navbar-default .nav>li>a:hover,
.navbar-default .nav>li>a:focus:hover {
color: #00a1cd;
color: var(--menu_text_hover_color);
}
.navbar-default .nav>li.active>a,
.navbar-default .nav>li.active>a:focus {
color: #00a1cd;
color: var(--menu_text_hover_color);
background-color: transparent;
}
.navbar-default .nav>li.active>a:hover,
.navbar-default .nav>li.active>a :focus:hover {
background-color: transparent;
}
/* Before user scroll
----------------------------------*/
/* logo */
.navbar-default .navbar-brand {
float: none;
padding: 0;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .1);
line-height: normal;
}
.navbar-default .navbar-brand .website-name-preview-helper.weight400,
.navbar-default .navbar-brand.weight400 {
font-weight: normal;
}
.navbar-default .navbar-brand .website-name-preview-helper.weight700,
.navbar-default .navbar-brand.weight700 {
font-weight: bold;
}
/* Italic style */
.navbar-default .navbar-brand .website-name-preview-helper.italic,
.navbar-default .navbar-brand.italic {
font-style: italic;
}
.home_page_design .navbar-default {
border-color: rgba(255, 255, 255, 0.1);
border-color: var(--home_text_color_rgba_01);
border-style: solid;
background-color: transparent;
}
.home_page_design .navbar-default .navbar-brand,
.inside_page_header_design .navbar-default .navbar-brand {
color: #ffffff;
height: 100px;
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: 80px;
}
.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: #00a1cd;
color: var(--menu_text_hover_color);
}
.home_page_design .navbar-default .nav>li>a:not(.navbar-brand):hover .svg-m,
.home_page_design .navbar-default .nav>li>a:not(.navbar-brand):focus:hover .svg-m,
.inside_page_header_design .navbar-default .nav>li>a:not(.navbar-brand):hover .svg-m,
.inside_page_header_design .navbar-default .nav>li>a:not(.navbar-brand):focus:hover .svg-m {
background-color: #00a1cd;
background-color: var(--menu_text_hover_color);
}
.home_page_design .navbar-default .action-button-wrapper .btn-primary-transparent {
color: #ffffff;
}
.home_page_design .navbar-default .action-button-wrapper .btn-primary-transparent .svg-m {
background-color: #ffffff;
}
.home_page_design .btn-primary-action-button-4 {
color: #ffffff !important;
}
/* After user scroll
----------------------------------*/
.home_page_design .navbar-default.affix .btn-primary-action-button-4 {
color: #ffffff !important;
color: var(--menu_text_color) !important;
}
.home_page_design .navbar-default.affix .btn-primary-action-button-4 .svg-m {
background-color: #ffffff !important;
background-color: var(--menu_text_color) !important;
}
/* logo - image
----------------------------------*/
.navbar-default.affix .s123-site-logo img,
.inside_page_header_design .navbar-default .s123-site-logo img {
max-height: 80px;
}
/* logo */
.navbar-default.affix .navbar-brand {
line-height: 80px;
height: 80px;
}
.home_page_design .navbar-default.affix,
.inside_page_header_design .navbar-default {
border-color: #303841;
border-color: var(--menu_thin_border);
background-color: #303841;
background-color: var(--menu_color);
border-bottom: 1px solid #303841;
border-bottom: 1px solid var(--menu_thin_border);
box-shadow: rgb(0 0 0 / 35%) 0px 2px 12px 2px;
}
.navbar-default.affix .navbar-brand,
.inside_page_header_design .navbar-default .navbar-brand {
color: #ffffff;
color: var(--menu_text_color);
}
.navbar-default.affix .nav>li>a,
.navbar-default.affix .nav>li>a:focus,
.inside_page_header_design .navbar-default .nav>li>a,
.inside_page_header_design .navbar-default .nav>li>a:focus {
margin-top: 0;
padding-top: 0;
padding-bottom: 0;
color: #ffffff;
color: var(--menu_text_color);
line-height: 1;
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;
background-color: var(--menu_text_color);
}
.navbar-default.affix .navPages>li.active>a,
.navbar-default.affix .navPages>li.active>a:focus,
.navbar-default.affix .navPages>li>a:not(.navbar-brand):hover,
.navbar-default.affix .navPages>li>a:not(.navbar-brand):focus:hover,
.inside_page_header_design .navbar-default .navPages>li.active>a,
.inside_page_header_design .navbar-default .navPages>li.active>a:focus,
.inside_page_header_design .navbar-default .navPages>li>a:not(.navbar-brand):hover,
.inside_page_header_design .navbar-default .navPages>li>a:not(.navbar-brand):focus:hover {
color: #00a1cd;
color: var(--menu_text_hover_color);
background-color: transparent;
opacity: 1;
}
.navbar-default.affix .navPages>li.active>a>span,
.navbar-default.affix .navPages>li.active>a:focus>span,
.navbar-default.affix .navPages>li>a:not(.navbar-brand):hover>span,
.navbar-default.affix .navPages>li>a:not(.navbar-brand):focus:hover>span,
.inside_page_header_design .navbar-default .navPages>li.active>a>span,
.inside_page_header_design .navbar-default .navPages>li.active>a:focus>span,
.inside_page_header_design .navbar-default .navPages>li>a:not(.navbar-brand):hover>span,
.inside_page_header_design .navbar-default .navPages>li>a:not(.navbar-brand):focus:hover>span {}
.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: #00a1cd;
background-color: var(--menu_text_hover_color);
}
.navbar-default.affix .action-button-wrapper .btn-primary-transparent {
color: #ffffff;
color: var(--menu_text_color);
}
.navbar-default.affix .action-button-wrapper .btn-primary-transparent .svg-m {
background-color: #ffffff;
background-color: var(--menu_text_color);
}
.navbar-default.affix .navActions>li>a:hover {
color: #ffffff;
color: var(--menu_text_color);
}
/* breadcrumb */
.breadcrumb {
margin-bottom: 0;
}
.navbar-default.affix .navPages>li.active>a>span:after,
.navbar-default.affix .navPages>li>a:not(.navbar-brand)>span:after,
.inside_page_header_design .navbar-default .navPages>li.active>a>span:after,
.inside_page_header_design .navbar-default .navPages>li>a:not(.navbar-brand)>span:after {}
.navbar-default.affix .navPages>li.active>a:focus>span:after,
.navbar-default.affix .navPages>li>a:not(.navbar-brand):hover>span:after,
.navbar-default.affix .navPages>li>a:not(.navbar-brand):focus:hover>span:after,
.inside_page_header_design .navbar-default .navPages>li.active>a>span:after,
.inside_page_header_design .navbar-default .navPages>li.active>a:focus>span:after,
.inside_page_header_design .navbar-default .navPages>li>a:not(.navbar-brand):hover>span:after,
.inside_page_header_design .navbar-default .navPages>li>a:not(.navbar-brand):focus:hover>span:after {}
#top-menu .moduleMenu>a,
#popupFloatDivMenu .navPagesPopup a {
font-weight: 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 ########################################## */
#top-section {
min-height: 100vh;
}
:root {
--homepage_layout_height_opacity_space_top: 101px;
}
.home_page_design .navbar-default,
.inside_page_header_design .navbar-default {
opacity: 0.9;
}
/**
* Chrome 95 Bug Fix - After chrome update layouts with slight opacity have a bug
* that when user is hovering above the menu links the opacity was glitching
* Note: We also have html fix in `GetLayoutMenu`
*/
.home_page_design .navbar-default {
opacity: 1 !important;
background-color: transparent !important;
}
.home_page_design .navbar-default>div:is(.site_container, .site-container-wrapper) {
opacity: 0.9 !important;
background-color: #303841 !important;
background-color: var(--menu_color) !important;
}
.home_page_design .navbar-default div.site-container-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/**
* Visible Border Behind Menu Drop Down (Related To Chrome 95 Bug Fix) - After
* we fixed the glitching opacity in the chrome 95 the website menu bottom border
* was visible behind the drop down "more" or some menu item
* link to image: https://trello.com/1/cards/618232fd35cc272f671e73c6/attachments/6182331b065c5d5b774877cb/download/image.png
*/
.home_page_design .navbar-default>div:is(.site_container, .site-container-wrapper) {
border-bottom: 1px solid #303841 !important;
border-bottom: 1px solid var(--menu_thin_border) !important;
height: calc(100% + 1px) !important;
}
.home_page_design .navbar-default.navbar-fixed-top {
border-bottom-width: 0;
}
.inside_page_header_design .navbar-default {
background-color: #303841;
background-color: var(--menu_color);
border-bottom: 1px solid #303841;
border-bottom: 1px solid var(--menu_thin_border);
}
.home_page_design .navbar-default .navbar-header .navbar-brand,
.inside_page_header_design .navbar-default .navbar-header .navbar-brand {
color: #ffffff;
color: var(--menu_text_color);
}
/* svg logo support */
.home_page_design .navbar-default .navbar-brand .svg-m,
.inside_page_header_design .navbar-default .navbar-brand .svg-m {
background-color: #ffffff;
background-color: var(--menu_text_color);
}
.home_page_design .navbar-default .nav>li>a,
.home_page_design .navbar-default .nav>li>a:focus,
.inside_page_header_design .navbar-default .nav>li>a,
.inside_page_header_design .navbar-default .nav>li>a:focus {
margin-top: 0;
padding-top: 0;
padding-bottom: 0;
color: #ffffff;
color: var(--menu_text_color);
line-height: 1;
padding-top: 7px;
padding-bottom: 7px;
border-radius: 0;
}
.home_page_design .navbar-default .nav>li.action-button-wrapper>a,
.home_page_design .navbar-default .nav>li.action-button-wrapper>a:focus,
.inside_page_header_design .navbar-default .nav>li.action-button-wrapper>a,
.inside_page_header_design .navbar-default .nav>li.action-button-wrapper>a:focus {
opacity: 1;
}
.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;
background-color: var(--menu_text_color);
}
.home_page_design .btn-primary-action-button-4 {
color: #ffffff !important;
color: var(--menu_text_color) !important;
}
.home_page_design .navbar-default .navPages>li.active>a,
.home_page_design .navbar-default .navPages>li.active>a:focus,
.home_page_design .navbar-default .navPages>li>a:not(.navbar-brand):hover,
.home_page_design .navbar-default .navPages>li>a:not(.navbar-brand):focus:hover,
.inside_page_header_design .navbar-default .navPages>li.active>a,
.inside_page_header_design .navbar-default .navPages>li.active>a:focus,
.inside_page_header_design .navbar-default .navPages>li>a:not(.navbar-brand):hover,
.inside_page_header_design .navbar-default .navPages>li>a:not(.navbar-brand):focus:hover {
color: #00a1cd;
color: var(--menu_text_hover_color);
background-color: transparent;
opacity: 1;
}
.home_page_design .navbar-default .navPages>li.active>a>span,
.home_page_design .navbar-default .navPages>li.active>a:focus>span,
.home_page_design .navbar-default .navPages>li>a:not(.navbar-brand):hover>span,
.home_page_design .navbar-default .navPages>li>a:not(.navbar-brand):focus:hover>span,
.inside_page_header_design .navbar-default .navPages>li.active>a>span,
.inside_page_header_design .navbar-default .navPages>li.active>a:focus>span,
.inside_page_header_design .navbar-default .navPages>li>a:not(.navbar-brand):hover>span,
.inside_page_header_design .navbar-default .navPages>li>a:not(.navbar-brand):focus:hover>span {}
.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: #00a1cd;
background-color: var(--menu_text_hover_color);
}
.home_page_design .navbar-default .navPages>li>a>span:after,
.home_page_design .navbar-default .navPages>li>a:focus>span:after,
.inside_page_header_design .navbar-default .navPages>li>a>span:after,
.inside_page_header_design .navbar-default .navPages>li>a>span:after {}
.home_page_design .navbar-default .navPages>li.active>a:focus>span:after,
.home_page_design .navbar-default .navPages>li>a:not(.navbar-brand):hover>span:after,
.home_page_design .navbar-default .navPages>li>a:not(.navbar-brand):focus:hover>span:after,
.inside_page_header_design .navbar-default .navPages>li.active>a>span:after,
.inside_page_header_design .navbar-default .navPages>li.active>a:focus>span:after,
.inside_page_header_design .navbar-default .navPages>li>a:not(.navbar-brand):hover>span:after,
.inside_page_header_design .navbar-default .navPages>li>a:not(.navbar-brand):focus:hover>span:after {}
:root {
--homepage_padding_top: 50px;
}
:root {
--homepage_padding_bottom: calc(50px + var(--homepage_layout_height_opacity_space_top) + var(--homepage_layout_height_opacity_space_bottom));
}
/**
* Checkbox Design
* Source: https://codepen.io/BrahmaUI/pen/WgOGQz
*/
.checkbox-label {
font-weight: normal;
padding-left: 18px;
margin-bottom: 10px;
display: inline-flex;
align-items: center;
position: relative;
cursor: pointer;
clear: both;
}
html[dir="rtl"] .checkbox-label {
padding-left: 0;
padding-right: 18px;
}
.checkbox-label input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.checkbox-label .checkbox-custom {
position: absolute;
top: calc(50% - 9px);
left: 0;
height: 18px;
width: 18px;
background-color: transparent;
border-radius: 2px;
box-shadow: inset 0 0 0 1px #cccccc;
transition: box-shadow .2s ease, -webkit-box-shadow .2s ease;
}
html[dir="rtl"] .checkbox-label .checkbox-custom {
left: auto;
right: 0;
}
.checkbox-label:hover .checkbox-custom {
box-shadow: inset 0 0 0 1px #aaaaaa;
}
.checkbox-label input:checked~.checkbox-custom {
background-color: transparent;
border-radius: 2px;
-webkit-transform: rotate(0deg) scale(1);
-ms-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
opacity: 1;
}
.checkbox-label .checkbox-custom::after {
position: absolute;
content: "";
left: 9px;
top: 9px;
height: 0;
width: 0;
border-radius: 2px;
border: solid #555555;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(0deg) scale(0);
-ms-transform: rotate(0deg) scale(0);
transform: rotate(0deg) scale(0);
opacity: 1;
}
.checkbox-label input:checked~.checkbox-custom::after {
-webkit-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
opacity: 1;
left: 7px;
top: 3px;
width: 5px;
height: 9px;
border: solid #555555;
border-width: 0 2px 2px 0;
background-color: transparent;
border-radius: 0;
}
.checkbox-label .input-title {
padding-left: 10px;
display: inline-block;
}
html[dir="rtl"] .checkbox-label .input-title {
padding-left: 0;
padding-right: 10px;
}
/* Black Popup Handler - Fix the color to support the system black popup */
#popupFloatDivSearch .checkbox-label .checkbox-custom::after,
#popupFloatDivSearch .checkbox-label input:checked~.checkbox-custom::after {
border-color: #FFFFFF;
}
/**
* Radio Design
*/
.radio-label {
font-weight: normal;
}
/* IntTelInput
---------------------------------*/
.intl-tel-input .country-list {
color: #555;
/* Related to Boostrap inputs text colors*/
}
/* Global layouts settings
----------------------------------*/
/**
* Internet Explorer Scrollbar - Convert the IE Scrollbar into a standard scrollbar
* because its go over to page content.
* http://answers.microsoft.com/en-us/ie/forum/ie11-windows_7/disappearing-scroll-bar-on-websites/c3b883c6-7c46-4749-97af-02ae4b2cef85?auth=1
*/
@-ms-viewport {
width: auto !important
}
body {
font-family: var(--global_font), 'Open Sans', Arial, sans-serif;
webkit-tap-highlight-color: #222;
color: #000000;
color: var(--modules_color_text);
background-color: #f7f9f8;
background-color: var(--modules_color);
/* my full smoothing solution: https://jsfiddle.net/4mn64n2q/ */
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
-webkit-text-stroke: 1px transparent;
}
.inside_page body {
color: #000000;
color: var(--inside_modules_color_text);
}
html[dir="rtl"] body {
direction: rtl;
}
@media (min-width: 768px) {
html[dir="rtl"] .navbar-right {
float: left !important;
}
}
a {
color: #00a1cd;
color: var(--global_main_color);
transition: opacity .35s;
}
a .svg-m {
background-color: #00a1cd;
background-color: var(--global_main_color);
}
.mainWebsiteColor {
color: #00a1cd;
color: var(--global_main_color);
}
/**
* Padding Helpers Classes
*/
.pl-0 {
padding-left: 0;
}
.pr-0 {
padding-right: 0;
}
/**
* We use this class to fake a focus on fields
* that we are unable to use focus on.
*/
.fake-input-focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}
/**
* Force LTR - Some inputs (e.g. email) need to be LTR even at RTL websites,
* but we like the placeholder to be RTL so we use this solution:
*/
html[dir="rtl"] input.s123-force-ltr:not(:placeholder-shown),
html[dir="rtl"] input.s123-force-ltr:focus,
html[dir="rtl"] input[type="email"]:not(:placeholder-shown),
html[dir="rtl"] input[type="email"]:focus {
direction: ltr !important;
}
html[dir="rtl"] input.s123-force-ltr:placeholder-shown,
html[dir="rtl"] input[type="email"]:placeholder-shown {
direction: rtl;
}
html[dir="rtl"] input.s123-force-ltr:focus::-moz-placeholder,
html[dir="rtl"] input[type="email"]:focus::-moz-placeholder {
color: transparent !important;
}
html[dir="rtl"] input.s123-force-ltr:focus:-ms-input-placeholder,
html[dir="rtl"] input[type="email"]:focus:-ms-input-placeholder {
color: transparent !important;
}
html[dir="rtl"] input.s123-force-ltr:focus::-webkit-input-placeholder,
html[dir="rtl"] input[type="email"]:focus::-webkit-input-placeholder {
color: transparent !important;
}
/**
* Transition Page Load Handler - We need to added the transition only
* after the page loaded, otherwise the transition is apply when the
* page is render and there are bugs. e.g. we we select menu links style
* as "Transparent Buttons" the links border will highlight on page render.
* Source: https://css-tricks.com/transitions-only-after-page-load/
*/
html.page-loaded .moduleMenu a {
transition: color, background-color, border .35s;
}
.moduleMenu.separate {
border: 0;
color: rgb(173, 173, 173);
text-align: center;
}
a:hover,
a:focus {
color: #00a1cd;
color: var(--global_main_color);
opacity: 0.9;
outline: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: inherit;
}
/* FIX different parts the H1,H2... headers so it will fit the way the product is working */
/*
h1, h2, h3, h4, h5, h6 {
line-height: 1.5;
font-weight: 400;
}
*/
/* FIX different parts the H1,H2... headers so it will fit the way the product is working */
p {
margin-bottom: 20px;
line-height: 1.5;
}
hr {
max-width: 50px;
border-color: #00a1cd;
border-color: var(--global_main_color);
border-width: 3px;
}
hr.light {
border-color: #00a1cd;
border-color: var(--global_main_color);
}
.bg-primary hr.light {
border-color: #fff;
}
::selection,
::-moz-selection {
text-shadow: none;
color: #fff;
background: #222;
}
img::selection {
color: #fff;
background: 0 0;
}
img::-moz-selection {
color: #fff;
background: 0 0;
}
.primary-color {
color: #00a1cd;
color: var(--global_main_color);
}
.inside_page .bg-primary .primary-color .box-primary .svg-m {
background-color: #00a1cd;
background-color: var(--global_main_color);
}
.background-primary-color {
background-color: #00a1cd !important;
background-color: var(--global_main_color) !important;
}
.background-primary-color-before:before {
background-color: #00a1cd;
background-color: var(--global_main_color);
}
.background-primary-color.border-left-before::before {
border-left-color: #00a1cd;
border-left-color: var(--global_main_color);
}
.background-primary-color.border-right-before::before {
border-right-color: #00a1cd;
border-right-color: var(--global_main_color);
}
html[dir="rtl"] .background-primary-color.border-left-before::before {
border-right-color: #00a1cd;
border-right-color: var(--global_main_color);
}
html[dir="rtl"] .background-primary-color.border-right-before::before {
border-left-color: #00a1cd;
border-left-color: var(--global_main_color);
}
@media(max-width:900px) {
.background-primary-color.border-left-before::before {
border-right-color: #00a1cd;
border-right-color: var(--global_main_color);
border-left-color: transparent;
}
html[dir="rtl"] .background-primary-color.border-left-before::before {
border-right-color: transparent;
border-left-color: #00a1cd;
border-left-color: var(--global_main_color);
}
}
.loading-primary {
color: #00a1cd;
color: var(--global_main_color);
}
.loading-primary .svg-m {
background-color: #00a1cd;
background-color: var(--global_main_color);
}
.btn-primary-text-color {
color: #ffffff !important;
color: var(--global_main_color_btn_text_color) !important;
}
/* main page - shadow color */
.bg-primary .s123-module-shadows.shadow-before {
background: linear-gradient(to right, #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 #00a1cd;
border: 1px solid var(--global_main_color);
color: #ffffff;
color: var(--global_main_color_btn_text_color);
background-color: #00a1cd;
background-color: var(--global_main_color);
transition: background-color .35s, opacity .35s;
}
.btn-primary .svg-m {
background-color: #ffffff;
background-color: var(--global_main_color_btn_text_color);
}
.btn-primary-transparent {
border: 1px solid;
background-color: transparent;
}
.btn-primary-transparent-main {
border: 1px solid #00a1cd;
border: 1px solid var(--global_main_color);
color: #00a1cd;
color: var(--global_main_color);
background-color: transparent;
}
.btn-primary-transparent-main .svg-m,
.s123-module .btn-primary-transparent-main.btn-primary .svg-m {
background-color: #00a1cd;
background-color: var(--global_main_color);
}
.s123-module .btn-primary-transparent-main.btn-primary:hover .svg-m,
.s123-module .btn-primary-transparent-main.btn-primary:focus .svg-m {
background-color: #ffffff;
background-color: var(--global_main_color_btn_text_color);
}
.btn-primary-simplelink {
color: #00a1cd !important;
color: var(--global_main_color) !important;
background: transparent;
border: none !important;
outline: none;
box-shadow: none !important;
padding: 0 !important;
align-self: center;
font-size: 1.1rem;
}
.btn-primary-simplelink:hover,
.btn-primary-simplelink:focus {
color: #444950;
background: transparent !important;
}
.btn-primary-simplelink .svg-m,
.s123-module .btn-primary-simplelink.btn-primary .svg-m {
background-color: #00a1cd;
background-color: var(--global_main_color);
}
.btn-primary-simplelink:hover .svg-m,
.s123-module .btn-primary-simplelink.btn-primary:hover .svg-m,
.btn-primary-simplelink:focus .svg-m,
.s123-module .btn-primary-simplelink.btn-primary:focus .svg-m {
background-color: #00a1cd !important;
background-color: var(--global_main_color) !important;
}
.btn-primary-simplelink-text-color {
color: #ffffff !important;
background: transparent;
border: none !important;
outline: none;
box-shadow: none !important;
padding: 0 !important;
align-self: center;
font-size: 1.1rem;
}
.btn-primary-simplelink-text-color:hover,
.btn-primary-simplelink-text-color:focus {
color: #444950;
background: transparent !important;
}
.btn-primary-simplelink-text-color .svg-m,
.s123-module .btn-primary-simplelink-text-color.btn-primary .svg-m {
background-color: #ffffff;
}
.btn-primary-simplelink-text-color:hover .svg-m,
.s123-module .btn-primary-simplelink-text-color.btn-primary:hover .svg-m,
.btn-primary-simplelink-text-color:focus .svg-m,
.s123-module .btn-primary-simplelink-text-color.btn-primary:focus .svg-m {
background-color: #ffffff !important;
}
.btn-primary-white {
background-color: #ffffff;
color: #000000;
border-color: transparent;
}
.btn-primary-white .svg-m {
background-color: #000000;
}
.btn-primary-white:hover,
.btn-primary-white:focus {
opacity: 0.9;
}
.btn-primary:hover,
.btn-primary:focus {
border-color: #00a1cd;
border-color: var(--global_main_color);
color: #ffffff;
color: var(--global_main_color_btn_text_color);
background-color: #00a1cd;
background-color: var(--global_main_color);
opacity: 0.9;
}
.btn-primary:hover .svg-m,
.btn-primary:focus .svg-m {
background-color: #ffffff;
background-color: var(--global_main_color_btn_text_color);
}
.btn-primary-transparent:hover,
.btn-primary-transparent:focus {
opacity: 1;
color: #ffffff !important;
}
.btn-primary-transparent:hover .svg-m,
.btn-primary-transparent:focus .svg-m {
background-color: #ffffff !important;
background-color: var(--global_main_color_btn_text_color) !important;
}
.btn-primary .badge {
color: #f7f9f8;
color: var(--modules_color);
background-color: #fff;
}
.btn-sm {
padding: 6px 12px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
.btn-xl {
padding: 0.9rem 1.85rem;
}
.btn-xxl {
padding: 18px 34px;
/* make it bigger in approximately 3 pixels then it's current font size */
font-size: 1.15rem;
}
.btn-primary-simplelink.btn-xxl,
.btn-primary-simplelink-text-color.btn-xxl {
/* make it bigger in approximately 3 pixels then it's current font size */
font-size: 1.28rem;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
border-color: #00a1cd;
border-color: var(--global_main_color);
background-color: #00a1cd;
background-color: var(--global_main_color);
}
/*
######################################
Global Stuff
######################################
*/
.padding-2 {
padding: 2%;
padding-top: 0;
}
.padding-bottom-2 {
padding-bottom: 20px;
}
.padding-5px {
padding: 5px;
}
.padding-10px {
padding: 10px;
}
.row-flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.items-equal-height {}
.full-image-width {
position: relative;
height: 200px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
display: block;
}
.label-date {
position: absolute;
top: 10px;
left: 10px;
background-color: rgba(0, 0, 0, 0.7);
text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;
color: rgb(255, 255, 255);
width: 60px;
height: 64px;
text-align: center;
padding-top: 7px;
font-size: 26px;
line-height: 1;
z-index: 1;
text-decoration: none;
}
.label-date span {
display: block;
font-size: 15px;
margin-top: 5px;
}
.share-buttons {
list-style: none;
padding: 0;
display: flex;
align-items: center;
}
.share-buttons.square li a {
color: #000000;
color: var(--modules_color_text);
opacity: 0.7;
padding: 2px 8px;
font-size: 1.3em;
}
.inside_page .share-buttons.square li a {
color: #000000;
color: var(--inside_modules_color_text);
}
.inside_page .share-buttons.square li a .svg-m {
background-color: #000000;
background-color: var(--inside_modules_color_text);
}
.share-buttons.square li a:hover {
opacity: 1;
}
.s123-card {
margin: 0 0 30px;
position: relative;
border: 1px solid;
border: 1px solid var(--module_separate_border_color);
border-radius: 3px;
display: flex;
}
.s123-card .module-title h3 {
padding: 0;
font-size: 0.8rem;
line-height: 1.2;
font-weight: normal;
letter-spacing: 1px;
margin: 0;
text-transform: uppercase;
}
.s123-card .module-bg {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
width: 100px;
height: 100px;
float: left;
}
.s123-card .module-details {
overflow: hidden;
padding: 5px;
position: relative;
float: left;
}
.s123-card .module-meta {
list-style: none;
padding: 0;
margin-bottom: -5px;
}
.s123-card .module-meta li {
font-size: 0.5rem;
}
.v1-card {
margin: 0 0 30px;
position: relative;
border: 1px solid;
border: 1px solid var(--module_separate_border_color);
border-radius: 3px;
display: flex;
}
.v1-card.v1-top {
flex-direction: column;
}
.v1-card .v1-image {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
width: 100%;
height: 150px;
}
.v1-card .v1-body {
padding: 10px;
}
.v1-card .v1-body .v1-title {
margin: 0;
font-size: 1.5em;
text-align: initial;
margin-bottom: 10px;
}
/*
######################################
box_1
######################################
*/
.lm.box {
padding: 0;
position: relative;
}
.lm.box .product-details-container {
padding: 10px;
}
.lm.box .buttons-container {
padding: 10px;
}
.lm.box .product-sale-banner {
position: absolute;
left: 10px;
top: 10px;
opacity: 1;
z-index: 1;
}
.lm.box .label-date {
position: absolute;
top: 10px;
left: 10px;
background-color: rgba(0, 0, 0, 0.7);
text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;
color: rgb(255, 255, 255);
width: 60px;
height: 64px;
text-align: center;
padding-top: 7px;
font-size: 26px;
line-height: 1;
z-index: 1;
text-decoration: none;
}
.lm.box .label-date span {
display: block;
font-size: 15px;
margin-top: 5px;
}
.lm.box .product-sale-banner:hover {
opacity: 1;
}
.lm.box .product-sale-banner {
position: absolute;
left: 10px;
top: 10px;
opacity: 1;
z-index: 1;
}
.lm.box .product-sale-banner:hover {
opacity: 1;
}
.lm.box .product-image {
width: 100%;
padding-bottom: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
font-size: 0;
display: block;
height: 200px;
padding: 0;
}
.lm.box.box_1 .buttons {
text-align: center;
margin: 20px 0 5px 0;
}
.lm.box .product-details-container {
overflow: hidden;
}
.lm.box .product-details-container h4 {
margin: 0.75em 0;
}
.lm.box .product-details-container p.short {
margin-bottom: 0.75em;
height: 106px;
overflow: hidden;
display: block;
/* Fallback for non-webkit */
display: -webkit-box;
max-width: 100%;
height: 63px;
/* Fallback for non-webkit */
font-size: 15px;
line-height: 1.4;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.lm.box .list-price {
opacity: 0.4;
text-decoration: line-through;
}
.lm.box.box-no-border .product-details-container {
padding: 0 10px;
}
.lm.box.box-no-border .product-details-container H4 {
margin-top: 0;
}
/*
######################################
box_1 Style 2
######################################
*/
.lm.box.box_2 {
display: flex;
flex-direction: row;
height: 250px;
}
.lm.box.box_2 .product-image {
width: 20%;
height: 100%;
padding: 0;
}
.lm.box.box_2.noImages .product-image {
width: 100px;
}
.lm.box.box_2 .product-details-container {
width: 80%;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.lm.box.box_2.noImages .product-details-container {
width: 100%;
}
.lm.box.box_2 .buttons {
display: flex;
flex-grow: 1;
align-items: flex-end;
align-content: center;
justify-content: flex-start;
}
/*
######################################
box_3
######################################
*/
.lm.box.box_3 {
width: 90%;
float: none;
margin: 0 auto;
border: 1px solid #e5e5e5;
margin-bottom: 20px;
overflow: hidden;
display: block;
text-align: center;
}
@media (min-width: 992px) {
.lm.box.box_3 {
width: 50%;
}
}
.lm.box.box_3 .blog-m-meta {
margin: 10px !important;
margin-bottom: 5px !important;
display: inline-block;
list-style: none;
}
.lm.box.box_3 .news-blog-module {
margin: 0 0 30px;
position: relative;
border: 1px solid #ddd;
border-radius: 3px;
}
.lm.box.box_3 .blog-container {
clear: both;
}
@media (min-width: 768px) {
.lm.box.box_3 .blog-container {
clear: none;
}
.lm.box.box_3 .blog-container:nth-child(odd) {
clear: both;
}
}
.lm.box.box_3 .news-blog-module-frame {
border: 1px solid #e5e5e5;
padding: 6px;
margin-bottom: 15px;
}
.lm.box.box_3 .news-blog-module-bg {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 250px;
position: relative;
width: 100%;
}
.lm.box.box_3 .news-blog-module-details {
overflow: hidden;
padding: 20px;
position: relative;
}
.lm.box.box_3 .news-blog-module-title h2 {
padding-bottom: 20px;
font-size: 20px;
font-weight: 600;
letter-spacing: 1px;
margin: 0;
text-transform: uppercase;
}
.lm.box.box_3 .news-blog-module-meta {
list-style: none;
padding: 0;
margin-bottom: -5px;
}
.lm.box.box_3 .news-blog-module-meta li {
float: left;
font-size: 14px;
font-style: italic;
line-height: 14px;
margin: 0 10px 10px 0;
}
html[dir=rtl] .lm.box.box_3 .news-blog-module-meta li {
float: right;
}
html[dir=rtl] .lm.box.box_3 .news-blog-module-meta li:before {
margin-left: 10px;
margin-right: 0;
}
.lm.box.box_3 .news-blog-module-meta li i {
margin-right: 3px;
margin-bottom: 15px;
position: relative;
top: 1px;
}
html[dir=rtl] .lm.box.box_3 .news-blog-module-meta li i {
margin-left: 3px;
margin-right: 0;
}
.lm.box.box_3 .news-blog-module-content a {
float: right;
}
html[dir=rtl] .lm.box.box_3 .news-blog-module-content a {
float: left;
}
html[dir=rtl] .lm.box.box_3 .fa-angle-right:before {
content: "\f104";
}
/* Top Menu
----------------------------------*/
.website-name,
.logo_name {
font-family: var(--font_logo), 'Open Sans', Arial, sans-serif;
}
#mainNav {
font-family: var(--font_menu), 'Open Sans', Arial, sans-serif;
z-index: 3000;
}
.logo_hidden {
visibility: hidden;
position: fixed;
height: auto !important;
}
/* Modules
----------------------------------*/
.s123-modules-container {
position: relative;
}
.s123-modules-container section {
position: relative;
}
.s123-page-container section {
position: relative;
}
.s123-page-container section {
position: relative;
}
.s123-content-area {
min-height: 80vh;
}
.s123-content-area section {
min-height: 80vh;
}
.inside_page .s123-module,
.home_page .s123-module {
padding: 100px 0;
padding: var(--sectionsPadding) 0;
}
@media(max-width:767px) {
.inside_page .s123-module,
.home_page .s123-module {
padding: 50px 0;
padding: calc(var(--sectionsPadding) / 2) 0;
}
}
.inside_page .s123-module.s123-page-data {
padding: 20px 0;
}
@media(max-width:767px) {
.inside_page .s123-module.s123-page-data {
padding: 20px 0;
}
}
.modulesTitle H1,
.modulesTitle H2 {
font-family: var(--font_modules_header), 'Open Sans', Arial, sans-serif;
margin-top: 0;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .1);
letter-spacing: 0.5px;
text-transform: uppercase;
line-height: 1.5;
}
#s123ModulesContainer section#section-169 .header1,
#s123ModulesContainer section#section-169 .header2,
#s123ModulesContainer section[data-module-type-num="167"] .header1,
#s123ModulesContainer section[data-module-type-num="167"] .header2 {
font-family: var(--font_modules_header), 'Open Sans', Arial, sans-serif;
line-height: 1.3;
}
#s123ModulesContainer section#section-169 .header1.header-global-font,
#s123ModulesContainer section#section-169 .header2.header-global-font,
#s123ModulesContainer section[data-module-type-num="167"] .header1.header-global-font,
#s123ModulesContainer section[data-module-type-num="167"] .header2.header-global-font {
font-family: var(--global_font), 'Open Sans', Arial, sans-serif;
}
/* Modules Colors & Settings
----------------------------------*/
.home_page .modulesTitle {
padding-bottom: 10px;
}
.s123-content-area .modulesTitle {
padding-top: 20px;
padding-bottom: 10px;
}
.s123-module {
color: #000000;
color: var(--modules_color_text_second);
background-color: #ebebeb;
background-color: var(--modules_color_second);
}
/* on layout and data page remove the top padding of the titles
because now the section has the padding */
.s123-content-area .s123-module .modulesTitle {
padding-top: 0px;
}
.s123-module .svg-m {
background-color: #000000;
background-color: var(--modules_color_text_second);
}
.s123-module a .svg-m {
background-color: #00a1cd;
background-color: var(--global_main_color);
}
.s123-module .btn-primary .svg-m {
background-color: #ffffff;
background-color: var(--global_main_color_btn_text_color);
}
.home_page .s123-module {
border-bottom: 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;
color: var(--modules_color_text);
background-color: #f7f9f8;
background-color: var(--modules_color);
}
.bg-primary .svg-m {
background-color: #000000;
background-color: var(--inside_modules_color_text);
}
.bg-primary .btn-link .svg-m {
background-color: #337ab7;
}
.bg-primary .btn-primary .svg-m {
background-color: #ffffff;
background-color: var(--global_main_color_btn_text_color);
}
.inside_page .bg-primary {
color: #000000;
color: var(--inside_modules_color_text);
background-color: #f7f9f8;
background-color: var(--inside_modules_color);
}
.bg-primary .text-primary {
color: #000000;
color: var(--modules_color_text);
}
.inside_page .bg-primary .text-primary {
color: #000000;
color: var(--inside_modules_color_text);
}
.bg-primary .text-inverse {
color: #00a1cd;
color: var(--global_main_color);
}
.bg-primary-black {
color: #fff;
background-color: #000;
}
.bg-primary-gray {
color: #444950;
background-color: #ebedf0;
}
.bg-primary-white {
color: #000;
background-color: #fff;
}
.bg-primary-black.border-left-before::before {
border-left-color: #000;
}
.bg-primary-black.border-right-before::before {
border-right-color: #000;
}
html[dir="rtl"] .bg-primary-black.border-left-before::before {
border-right-color: #000;
}
html[dir="rtl"] .bg-primary-black.border-right-before::before {
border-left-color: #000;
}
.bg-primary-gray.border-left-before::before {
border-left-color: #ebedf0;
}
.bg-primary-gray.border-right-before::before {
border-right-color: #ebedf0;
}
html[dir="rtl"] .bg-primary-gray.border-left-before::before {
border-right-color: #ebedf0;
}
html[dir="rtl"] .bg-primary-gray.border-right-before::before {
border-left-color: #ebedf0;
}
.bg-primary-white.border-left-before::before {
border-left-color: #fff;
}
.bg-primary-white.border-right-before::before {
border-right-color: #fff;
}
html[dir="rtl"] .bg-primary-white.border-left-before::before {
border-right-color: #fff;
}
html[dir="rtl"] .bg-primary-white.border-right-before::before {
border-left-color: #fff;
}
@media(max-width:900px) {
.bg-primary-black.border-left-before::before {
border-right-color: #000;
border-left-color: transparent;
}
html[dir="rtl"] .bg-primary-black.border-left-before::before {
border-right-color: transparent;
border-left-color: #000;
}
.bg-primary-gray.border-left-before::before {
border-right-color: #ebedf0;
border-left-color: transparent;
}
html[dir="rtl"] .bg-primary-gray.border-left-before::before {
border-right-color: transparent;
border-left-color: #ebedf0;
}
.bg-primary-white.border-left-before::before {
border-right-color: #fff;
border-left-color: transparent;
}
html[dir="rtl"] .bg-primary-whitek.border-left-before::before {
border-right-color: transparent;
border-left-color: #fff;
}
}
.text-primary {
color: #00a1cd;
color: var(--global_main_color);
}
.text-inverse {
color: #000000;
color: var(--modules_color_text);
}
.inside_page .text-inverse {
color: #000000;
color: var(--inside_modules_color_text);
}
.border-primary {
border-color: #00a1cd;
border-color: var(--global_main_color);
}
.border-top-primary {
border-top-color: #00a1cd;
border-top-color: var(--global_main_color);
}
.border-right-primary {
border-right-color: #00a1cd;
border-right-color: var(--global_main_color);
}
.border-left-primary {
border-left-color: #00a1cd;
border-left-color: var(--global_main_color);
}
.border-bottom-primary {
border-bottom-color: #00a1cd;
border-bottom-color: var(--global_main_color);
}
.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;
background-color: var(--modules_color_box) !important;
}
.inside_page .bg-primary .box-primary {
background-color: #ebebeb !important;
background-color: var(--inside_modules_color_box) !important;
}
.bg-primary .box-primary p,
.bg-primary .box-primary label,
.bg-primary .box-primary h2,
.bg-primary .box-primary h3,
.bg-primary .box-primary h4,
.bg-primary .box-primary h5,
.bg-primary .box-primary h6,
.bg-primary .box-primary li,
.bg-primary .box-primary.box-text-primary,
.bg-primary .box-primary.box-text-primary span,
.bg-primary .box-primary.box-text-primary strong,
.bg-primary .box-primary .box-text-primary,
.bg-primary .box-primary .box-text-primary span,
.bg-primary .box-primary .box-text-primary strong {
color: #000000 !important;
color: var(--modules_color_text_box) !important;
}
.bg-primary .box-primary .price {
color: #000000 !important;
color: var(--modules_color_text_box) !important;
}
/* Sometimes we don't want to use the main link color of the website for some links (like in songs player) so we add this class to the links */
.box-primary .box-primary a.moduleTextColor {
color: #000000 !important;
color: var(--modules_color_text_box) !important;
}
.inside_page .bg-primary .box-primary p,
.inside_page .bg-primary .box-primary label,
.inside_page .bg-primary .box-primary h2,
.inside_page .bg-primary .box-primary h3,
.inside_page .bg-primary .box-primary h4,
.inside_page .bg-primary .box-primary h5,
.inside_page .bg-primary .box-primary h6,
.inside_page .bg-primary .box-primary li,
.inside_page .bg-primary .box-primary.box-text-primary,
.inside_page .bg-primary .box-primary.box-text-primary span,
.inside_page .bg-primary .box-primary.box-text-primary strong,
.inside_page .bg-primary .box-primary .box-text-primary,
.inside_page .bg-primary .box-primary .box-text-primary span,
.inside_page .bg-primary .box-primary .box-text-primary strong {
color: #000000 !important;
color: var(--inside_modules_color_text_box) !important;
}
.inside_page .bg-primary .box-primary .svg-m,
.inside_page .bg-primary .box-primary.box-text-primary .svg-m {
background-color: #000000;
background-color: var(--inside_modules_color_text_box);
}
.inside_page .bg-primary .box-primary .price {
color: #000000 !important;
color: var(--inside_modules_color_text_box) !important;
}
/* Sometimes we don't want to use the main link color of the website for some links (like in songs player) so we add this class to the links */
.inside_page .box-primary .box-primary a.moduleTextColor {
color: #000000 !important;
color: var(--inside_modules_color_text_box) !important;
}
.bg-primary .box-primary.border-left-before::before {
border-left-color: #ebebeb;
border-left-color: var(--modules_color_box);
}
html[dir="rtl"] .bg-primary .box-primary.border-left-before::before {
border-right-color: #ebebeb;
border-right-color: var(--modules_color_box);
}
.bg-primary .box-primary.border-right-before::before {
border-right-color: #ebebeb;
border-right-color: var(--modules_color_box);
}
html[dir="rtl"] .bg-primary .box-primary.border-right-before::before {
border-left-color: #ebebeb;
border-left-color: var(--modules_color_box);
}
.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-right-color: var(--modules_color_box);
border-left-color: transparent;
}
html[dir="rtl"] .bg-primary .box-primary.border-left-before::before {
border-right-color: transparent;
border-left-color: #ebebeb;
border-left-color: var(--modules_color_box);
}
.inside_page .bg-primary .box-primary.border-left-before::before {
border-right-color: #ebebeb;
border-right-color: var(--inside_modules_color_box);
border-left-color: transparent;
}
html[dir="rtl"] .inside_page .bg-primary .box-primary.border-left-before::before {
border-right-color: transparent;
border-left-color: #ebebeb;
border-left-color: var(--inside_modules_color_box);
}
}
/* Secondery */
.box-primary {
background-color: #ffffff !important;
background-color: var(--modules_color_second_box) !important;
}
.box-primary p,
.box-primary label,
.box-primary h2,
.box-primary h3,
.box-primary h4,
.box-primary h5,
.box-primary h6,
.box-primary li,
.box-primary.box-text-primary,
.box-primary.box-text-primary span:not(.a-b-container, .a-b-t),
/* exclude action buttons text */
.box-primary.box-text-primary strong,
.box-primary .box-text-primary,
.box-primary .box-text-primary span:not(.a-b-container, .a-b-t),
/* exclude action buttons text */
.box-primary .box-text-primary strong {
color: #000000 !important;
color: var(--modules_color_text_second_box) !important;
}
.box-primary .svg-m,
.box-primary.box-text-primary .svg-m,
.box-primary .box-text-primary .svg-m {
background-color: #000000;
background-color: var(--inside_modules_color_text_box);
}
.box-primary.border-left-before::before {
border-left-color: #ffffff;
border-left-color: var(--modules_color_second_box);
}
html[dir="rtl"] .box-primary.border-left-before::before {
border-right-color: #ffffff;
border-right-color: var(--modules_color_second_box);
}
.box-primary.border-right-before::before {
border-right-color: #ffffff;
border-right-color: var(--modules_color_second_box);
}
html[dir="rtl"] .box-primary.border-right-before::before {
border-left-color: #ffffff;
border-left-color: var(--modules_color_second_box);
}
@media(max-width:900px) {
.box-primary.border-left-before::before {
border-right-color: #ffffff;
border-right-color: var(--modules_color_second_box);
border-left-color: transparent;
}
html[dir="rtl"] .box-primary.border-left-before::before {
border-right-color: transparent;
border-left-color: #ffffff;
border-left-color: var(--modules_color_second_box);
}
}
/* SVG Icons Inside Of Buttons - Make sure the svg icons inside of buttons
will keep their colors even when they are inside of other design combinations
---------------------*/
.inside_page .bg-primary .box-primary .btn-primary .svg-m,
.box-primary .btn-primary .svg-m {
background-color: #ffffff;
background-color: var(--global_main_color_btn_text_color);
}
.box-primary .price {
color: #000000 !important;
color: var(--modules_color_text_second_box) !important;
}
/* Sometimes we don't want to use the main link color of the website for some links (like in songs player) so we add this class to the links */
.box-primary a.moduleTextColor {
color: #000000 !important;
color: var(--modules_color_text_second_box) !important;
}
/* `box-text-primary` can't display custom text color for Froala editor that using BR as line breaks */
.box-primary .fr-view {
color: #000000 !important;
color: var(--modules_color_text_second_box) !important;
}
/* svg icons - colors in different combinations */
.primary-color .svg-m,
.primary-color.svg-m {
background-color: #00a1cd;
background-color: var(--global_main_color);
}
.primary-color .box-primary .svg-m {
background-color: #00a1cd;
background-color: var(--global_main_color);
}
.bg-primary .primary-color .svg-m {
background-color: #00a1cd;
background-color: var(--global_main_color);
}
.btn-primary-text-color .svg-m {
background-color: #ffffff;
background-color: var(--global_main_color_btn_text_color);
}
/* SVG Icons Inside Of Links - Make sure the svg icons inside of links
will keep their colors even when they are inside of other design combinations
---------------------*/
.box-primary a .svg-m,
.box-primary.box-text-primary a .svg-m {
background-color: #00a1cd;
background-color: var(--global_main_color);
}
.s123-box-padding {
padding: 2em;
}
.s123-box-padding-thin {
padding: 1em;
}
.s123-box-margin-bottom {
margin-bottom: 2em;
}
.s123-box-clean {
border: 0;
border-radius: 0;
}
.s123-box-border {
border: 1px solid #e0e0e0;
border-radius: 0.3rem;
}
.s123-box-shadow {
border-radius: .25rem;
box-shadow: 0 .3125rem .875rem 0 rgba(129, 129, 129, .2) !important;
}
.s123-box-top-primary-border {
border: 1px solid #e0e0e0;
border-radius: 0.3rem;
border-top: 3px solid #00a1cd;
border-top: 3px solid var(--global_main_color);
}
.s123-box-top-primary-big {
border: 0;
border-radius: 0.3rem;
border-top: 6px solid #00a1cd;
border-top: 6px solid var(--global_main_color);
}
/*
SITE123 card box
*/
.s123-card {
margin: 0 0 30px;
position: relative;
border: 1px solid #ebebeb;
border-radius: 3px;
display: flex;
flex-direction: column;
}
.s123-card .image-container {
width: 100%;
height: 10em;
overflow: hidden;
}
.s123-card .image-container .main-image {
display: flex;
height: 100%;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
transition: transform 0.5s;
}
.s123-card:hover .image-container .main-image {
transform: translate(0%, 0%) scale(1.1);
}
.s123-card .image-container .square-date {
position: absolute;
top: 10px;
left: 10px;
background-color: rgba(0, 0, 0, 0.7);
text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;
color: rgb(255, 255, 255);
width: 60px;
height: 64px;
text-align: center;
padding-top: 7px;
font-size: 26px;
line-height: 1;
z-index: 1;
text-decoration: none;
}
.s123-card .image-container .square-date span.s-d-month {
color: rgb(255, 255, 255) !important;
display: block;
font-size: 15px;
margin-top: 5px;
}
.s123-card .details {
overflow: hidden;
padding: 20px;
position: relative;
}
.s123-card .details .title {
height: 2.5em;
}
.s123-card .details .title>a {
color: black;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.s123-card .details .title>a:hover {
text-decoration: none;
}
.s123-box-right-primary-border {
border: 1px solid #e0e0e0;
border-radius: 0.3rem;
border-right: 3px solid #00a1cd;
border-right: 3px solid var(--global_main_color);
}
html[dir="rtl"] .s123-box-right-primary-border {
border-right: 1px solid #e0e0e0;
border-left: 3px solid #00a1cd;
border-left: 3px solid var(--global_main_color);
}
.s123-box-right-primary-border-hover {
border: 1px solid #e0e0e0;
border-radius: 0.3rem;
border-right: 8px solid #e0e0e0;
transition: border-color 0.5s ease;
}
.s123-box-right-primary-border-hover:hover {
border-right: 8px solid #00a1cd;
border-right: 8px solid var(--global_main_color);
}
html[dir="rtl"] .s123-box-right-primary-border-hover {
border-right: 1px solid #e0e0e0;
border-left: 8px solid #e0e0e0;
}
html[dir="rtl"] .s123-box-right-primary-border-hover:hover {
border-right: 1px solid #e0e0e0;
border-left: 8px solid #00a1cd;
border-left: 8px solid var(--global_main_color);
}
.s123-box-left-primary-border {
border: 1px solid #e0e0e0;
border-radius: 0.3rem;
border-left: 3px solid #00a1cd;
border-left: 3px solid var(--global_main_color);
}
html[dir="rtl"] .s123-box-left-primary-border {
border-left: 1px solid #e0e0e0;
border-right: 3px solid #00a1cd;
border-right: 3px solid var(--global_main_color);
}
.s123-box-bottom-primary-border {
border: 1px solid #e0e0e0;
border-radius: 0.3rem;
border-bottom: 3px solid #00a1cd;
border-bottom: 3px solid var(--global_main_color);
}
.s123-box-bottom-primary-border-hover {
border: 1px solid #e0e0e0;
border-radius: 0.3rem;
border-bottom: 8px solid #e0e0e0;
transition: border-color 0.5s ease;
}
.s123-box-bottom-primary-border-hover:hover {
border-bottom: 8px solid #00a1cd;
border-bottom: 8px solid var(--global_main_color);
}
.s123-box-flying-up {
transition: transform .6s ease-out;
transform: translateY(0);
}
.s123-box-flying-up:hover {
transition: transform .6s ease-out;
transform: translateY(-4px);
}
.s123-btn-tag {
border: none;
color: rgba(0, 0, 0, .68);
background: rgba(0, 0, 0, .05);
font-size: 0.8em;
letter-spacing: 0;
text-decoration: none;
border-radius: 3px;
padding: 5px 10px;
line-height: 2.5;
}
.s123-btn-tag:hover {
background: rgba(0, 0, 0, .1);
color: rgba(0, 0, 0, .68);
text-decoration: none;
}
.s123-btn-tag.s123-btn-tag-btn-colors {
color: #ffffff;
color: var(--global_main_color_btn_text_color);
background: #00a1cd;
background: var(--global_main_color);
}
.page-text-color {
color: #000000 !important;
color: var(--modules_color_text_second) !important;
}
.bg-primary .page-text-color {
color: #000000 !important;
color: var(--modules_color_text) !important;
}
.inside_page .bg-primary .page-text-color {
color: #000000 !important;
color: var(--inside_modules_color_text) !important;
}
/* Pagination
----------------------------------*/
.pagination>li>a,
.pagination>li>span {
color: #00a1cd;
color: var(--global_main_color);
background-color: #ebebeb;
background-color: var(--modules_color_box);
border: 1px solid #00a1cd;
border: 1px solid var(--global_main_color);
}
.inside_page .pagination>li>a {
background-color: #ebebeb;
background-color: var(--inside_modules_color_box);
}
.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
color: #fff;
background-color: #00a1cd;
background-color: var(--global_main_color);
border-color: #00a1cd;
border-color: var(--global_main_color);
}
.inside_page .pagination>.active>a {
background-color: #00a1cd;
background-color: var(--global_main_color);
}
.pagination>li>a:focus,
.pagination>li>a:hover,
.pagination>li>span:focus,
.pagination>li>span:hover {
color: #fff;
background-color: #00a1cd;
background-color: var(--global_main_color);
border-color: #00a1cd;
border-color: var(--global_main_color);
}
/* Modal (Open window) CSS
----------------------------------*/
.modal {
z-index: 3001;
}
.modal-content {
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.modal-header .close {
font-size: 32px;
}
button.close {
font-size: 32px;
}
/* Video Player Design
----------------------------------*/
.s123-video-cover {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
cursor: pointer;
}
.s123-video-cover .s123-video-play-icon {
padding: 10px;
background-color: #000;
padding: 10px 26px;
background-color: rgba(0, 0, 0, 0.57);
color: white;
border-radius: 15px;
font-size: 22px;
}
.s123-video-cover .s123-video-play-icon.v-p-i-xs {
padding: 5px 13px;
border-radius: 10px;
font-size: 16px;
}
.s123-video-cover .s123-video-play-icon .svg-m {
background-color: white;
}
.s123-video-cover:hover .s123-video-play-icon {
background-color: #00a1cd;
background-color: var(--global_main_color);
}
/* Categories Filter
---------------------*/
.s123-categories ul {
list-style: none;
padding: 0;
margin: 0 0 2.142em 0;
text-align: center;
}
.s123-categories li {
display: inline-flex;
margin: 0.1714em 0.1714em;
}
.s123-categories li:first-child:before {
display: none;
}
.s123-categories li a {
text-transform: none;
font-weight: bold;
padding: 0.457em 1.414em;
border: 1px solid #00a1cd;
border: 1px solid var(--global_main_color);
text-decoration: none;
border-radius: 3px;
transition: color, background-color .25s;
font-size: 0.8em;
}
.s123-categories li a:hover,
.s123-categories li.active a {
font-weight: bold;
text-decoration: none;
border: 1px solid #00a1cd;
border: 1px solid var(--global_main_color);
color: #ffffff;
color: var(--global_main_color_btn_text_color);
background-color: #00a1cd;
background-color: var(--global_main_color);
}
/* Mobile & Tablet - Add horizontal scrolling to the categories
----------------------------------*/
.s123-categories .m-r-s {
display: none;
;
position: absolute;
width: 10px;
top: 0;
bottom: 0;
}
/* categories shadow in mobile - secondary page design */
.s123-categories .m-r-s:first-child {
box-shadow: inset 8px 0px 5px -5px #ebebeb;
box-shadow: inset 8px 0px 5px -5px var(--modules_color_second);
left: 15px;
}
.s123-categories .m-r-s:last-child {
box-shadow: inset -8px 0px 5px -5px #ebebeb;
box-shadow: inset -8px 0px 5px -5px var(--modules_color_second);
right: 15px;
}
/* categories shadow in mobile - main page design */
.bg-primary .s123-categories .m-r-s:first-child {
box-shadow: inset 8px 0px 5px -5px #f7f9f8;
box-shadow: inset 8px 0px 5px -5px var(--modules_color);
left: 15px;
}
.bg-primary .s123-categories .m-r-s:last-child {
box-shadow: inset -8px 0px 5px -5px #f7f9f8;
box-shadow: inset -8px 0px 5px -5px var(--modules_color);
right: 15px;
}
/* categories shadow in mobile - inside page design */
.inside_page .s123-categories .m-r-s:first-child {
box-shadow: inset 8px 0px 5px -5px #f7f9f8;
box-shadow: inset 8px 0px 5px -5px var(--inside_modules_color);
left: 15px;
}
.inside_page .s123-categories .m-r-s:last-child {
box-shadow: inset -8px 0px 5px -5px #f7f9f8;
box-shadow: inset -8px 0px 5px -5px var(--inside_modules_color);
right: 15px;
}
/* show the shadows only on touch devices
solution: https://stackoverflow.com/questions/11387805/media-query-to-detect-if-device-is-touchscreen/44197598#44197598
*/
@media (pointer:coarse) {
.s123-categories .m-r-s {
display: block;
}
.s123-categories ul {
overflow-x: auto;
white-space: nowrap;
}
}
/* ########################################## cssFooter.php ########################################## */
.inside_page footer {
border-top: 1px solid #303841;
border-top: 1px solid var(--menu_thin_border);
}
/* footer default links behavior */
footer a {
color: #00a1cd;
color: var(--footer_links_color);
}
footer a:hover,
footer a:focus {
color: #00a1cd;
color: var(--footer_text_hover);
}
/* footer_2 */
footer.footer_2 .part1 {
color: #ffffff;
color: var(--footer_text);
padding: 30px 0;
background-color: #333333;
background-color: var(--footer_back);
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;
color: var(--footer_text);
text-transform: capitalize;
white-space: nowrap;
font-size: 0.8rem;
}
footer.footer_2 .part1 .navbar-nav>li>a .svg-m {
background-color: #ffffff;
background-color: var(--footer_text);
}
footer.footer_2 .part1 .nav>li>a:focus,
footer.footer_2 .part1 .nav>li>a:hover footer.footer_2 .part1 .nav>li>a:focus .svg-m,
footer.footer_2 .part1 .nav>li>a:hover .svg-m {
color: #00a1cd;
color: var(--footer_text_hover);
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: #00a1cd;
background-color: var(--global_main_color);
}
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;
color: var(--footer_text);
}
footer .nav>li>a:hover {
color: #00a1cd;
color: var(--footer_text_hover);
}
footer .nav>li>a:focus,
footer .nav>li>a:hover,
footer .nav>li.open>a,
footer .nav>li.open>a:focus,
footer .nav>li.open>a:hover,
footer .nav>li.active>a,
footer .nav>li.active>a:focus,
footer .nav>li.active>a:hover {
background-color: transparent !important;
}
footer .nav .site-dropdown-menu {
background-color: #333333;
background-color: var(--footer_back);
}
footer .nav .site-dropdown-menu li a {
color: #ffffff;
color: var(--footer_text);
background-color: transparent;
}
footer .nav .site-dropdown-menu li a .svg-m {
background-color: #ffffff;
background-color: var(--footer_text);
}
footer .nav .site-dropdown-menu>li>a:focus,
footer .nav .site-dropdown-menu>li>a:hover,
footer .nav .site-dropdown-menu>li.active>a,
footer .nav .site-dropdown-menu>li.active>a:focus,
footer .nav .site-dropdown-menu>li.active>a:hover {
color: #00a1cd;
color: var(--global_main_color) background-color: transparent;
}
/* homepage - contact us form */
#contactUsFormHome .help-block {
font-size: 12px;
}
/* Go to top button on onepage websites
----------------------------------*/
#gotoTop {
display: none;
z-index: 1029;
position: fixed;
width: 40px;
height: 40px;
background-color: #333;
background-color: rgba(0, 0, 0, .3);
font-size: 20px;
line-height: 36px;
top: auto;
left: auto;
right: 30px;
bottom: 30px;
cursor: pointer;
color: #FFF;
border-radius: 2px;
text-align: center;
}
#gotoTop .svg-m {
background-color: #FFF;
}
html.isFreePackage #gotoTop {
bottom: 60px;
}
html[dir="rtl"] #gotoTop {
right: auto;
left: 30px;
}
/* breadcrumb design */
.rich_page .breadcrumb,
.inside_page .breadcrumb {
border-radius: 0;
color: #000000;
color: var(--inside_modules_color_text);
background-color: transparent;
margin-bottom: 0;
font-size: 0.8em;
display: flex;
flex-wrap: wrap;
}
.rich_page .breadcrumb>.active,
.inside_page .breadcrumb>.active {
color: #777;
}
@media(max-width:767px) {
.inside_page .container-fluid>.breadcrumb-wrap>.breadcrumb {
padding-right: 0px;
padding-left: 0px;
}
}
/* ########################################## websiteHeaderStylesCss.php ########################################## */
/* breadcrumb design */
.rich_page .r-c-f-c .mainColor .breadcrumb,
.inside_page .s123-module .mainColor .breadcrumb {
color: #fff !important;
background-color: var(--global_main_color);
}
/* Multi sections breadcrumbs - the selector for the multi section is different so we handle it for here */
.inside_page .s123-module .mainColor .breadcrumb a {
color: #fff;
}
.inside_page .s123-module .mainColor .breadcrumb>.active {
color: #fff;
font-weight: bold;
}
.rich_page section .page_header_style,
.inside_page .page_header_style {
margin-bottom: 20px;
}
/* Inside page - background box color */
.rich_page .r-c-f-c .boxColor,
.inside_page .s123-module .boxColor {
color: #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;
}
/* Header Style 2 - border bottom text width */
.modulesTitle .pageHeaderBorderBottom {
border-bottom: 3px solid var(--global_main_color);
padding: 0 0 10px 0;
display: inline-block;
}
.modulesTitle .pageHeaderBorderBottom.extraSidePadding {
padding: 0 20px 10px 20px;
}
.rich_page .r-c-f-c .mainColor .pageHeaderBorderBottom,
.inside_page .s123-module .mainColor .pageHeaderBorderBottom {
border-color: #fff;
}
/* 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;
}
/* Nav Actions Drop Down - Sometimes the menu don't have
enough space and because of that we add an icon of `hamburger`
that will have a drop down to show all actions
----------------------*/
#top-menu .navActions {
position: relative;
}
.header-menu-wrapper.replaceActionButtonsToIcon.dropdown-submenu {
position: static;
}
.dropdown-submenu.open>.site-dropdown-menu[data-rel="navActions"] {
left: auto;
right: 0;
}
html[dir=rtl] .dropdown-submenu.open>.site-dropdown-menu[data-rel="navActions"] {
left: 0;
right: auto;
}
.dropdown-submenu.open>.site-dropdown-menu[data-rel="navActions"] {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
list-style: none;
margin: 0;
}
.dropdown-submenu.open>.site-dropdown-menu[data-rel="navActions"] .action-button-wrapper {
margin: 5px 0;
}
@media(min-width:768px) {
#mainNav #top-menu .navPages,
#mainNav #top-menu .navActions,
#mainNav #top-menu .headerSocial,
#header .header-row,
.global_footer .nav {
opacity: 0;
}
/* design 'more menu' in the menu */
.site-dropdown-menu,
.website-languages-menu .site-dropdown-menu {
background-color: #303841;
background-color: var(--menu_color);
}
.navbar-default .navbar-nav>.open>a,
#website-languages-menu .navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover {
background-color: transparent;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.site-dropdown-menu {
border-radius: 0;
padding: 0;
}
html[dir=rtl] .dropdown-submenu>.site-dropdown-menu {
border-radius: 0;
}
.dropdown-submenu>.site-dropdown-menu li {
margin: 0;
}
.dropdown-submenu .site-dropdown-menu a {
display: block;
margin: 0;
text-align: left;
border: 0;
}
html[dir=rtl] .dropdown-submenu .site-dropdown-menu a {
text-align: right;
}
}
/* Dropdown Menu Design for all layouts */
.site-dropdown-menu>li>a {
font-size: 14px;
font-weight: 400;
background-color: #303841;
background-color: var(--menu_color);
border: 1px solid transparent;
line-height: 1.5;
color: #ffffff;
color: var(--menu_text_color);
margin-top: 0;
padding: 7px 15px !important;
white-space: nowrap;
}
.site-dropdown-menu>li>a .svg-m {
background-color: #ffffff;
background-color: var(--menu_text_color);
}
.site-dropdown-menu>li>a:focus,
.site-dropdown-menu>li>a:hover,
.site-dropdown-menu>li.active>a,
.site-dropdown-menu>li.active>a:focus,
.site-dropdown-menu>li.active>a:hover {
background-color: #303841;
background-color: var(--menu_color);
color: #00a1cd;
color: var(--menu_text_hover_color);
line-height: 1.5;
text-decoration: none;
opacity: 1;
}
.site-dropdown-menu>li>a:focus .svg-m,
.site-dropdown-menu>li>a:hover .svg-m,
.site-dropdown-menu>li.active>a .svg-m,
.site-dropdown-menu>li.active>a:focus .svg-m,
.site-dropdown-menu>li.active>a:hover .svg-m {
background-color: #00a1cd;
background-color: var(--menu_text_hover_color);
}
/* Build a class that take care dropdown side menu opening */
html .site-dropdown-menu.dropdown-side-open-right {
top: 0;
left: 100%;
right: auto;
}
html .site-dropdown-menu.dropdown-side-open-left {
top: 0;
right: 100%;
left: auto;
}
html .site-dropdown-menu.dropdown-side-open-up {
top: auto;
bottom: 100%;
}
/* ########################################## cssMobileMenu.php ########################################## */
/* Mobile & Tablet
----------------------------------*/
/* Hide the menu (we show it only at mobile devices ) */
#mainNavMobile {
display: none;
}
@media(max-width:767px) {
:root {
--mainNavMobileHeight: 60px;
}
#top-section {
padding-top: 0 !important;
}
.home_page_design body {
padding-top: var(--mainNavMobileHeight) !important;
}
.home_page_design #top-section {
padding-bottom: 0px !important;
margin-top: 0 !important;
}
.home_page_design .body {
padding-top: 0 !important;
}
/* Homepage image - decrase toolbar size */
#top-section {
min-height: calc(100vh - var(--mainNavMobileHeight)) !important;
}
#mainNavMobile {
position: fixed !important;
top: 0;
left: 0;
display: flex;
align-items: center;
background-color: #303841;
background-color: var(--menu_color);
border-width: 0;
min-height: var(--mainNavMobileHeight);
border-bottom: 1px solid #303841;
border-bottom: 1px solid var(--menu_thin_border);
opacity: 0;
}
/* FIX - only for IE 11 */
_:-ms-fullscreen,
:root #mainNavMobile {
height: 60px;
/* for IE11 fix */
}
#mainNavMobile .navPagesLeft {
order: 1;
flex-grow: 1;
padding: 0 5px;
width: 60px;
display: flex;
justify-content: center;
}
#mainNavMobile .navPagesLeft a {
color: #ffffff;
color: var(--menu_text_color);
border-color: #ffffff;
border-color: var(--menu_text_color);
cursor: pointer;
background-color: transparent;
font-size: 20px;
}
#mainNavMobile .navPagesLeft a .svg-m {
background-color: #ffffff;
background-color: var(--menu_text_color);
}
#mainNavMobile .navPagesLeft a:hover,
#mainNavMobile .navPagesLeft a:focus {
cursor: pointer;
background-color: transparent;
}
#mainNavMobile .navbar-header {
order: 2;
flex-grow: 1;
display: flex;
justify-content: center;
width: 100%;
}
#mainNavMobile .navbar-header a {
font-weight: bold;
color: #ffffff;
color: var(--menu_text_color);
font-size: 14px !important;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
text-align: center;
}
/* in mobile we want to limit the logo name font size */
#mainNavMobile .navbar-header a .website-name {
font-size: 14px !important;
}
/* svg logo support */
#mainNavMobile .navbar-header a .svg-m {
background-color: #ffffff;
background-color: var(--menu_text_color);
}
/*
#mainNavMobile .navbar-header a span {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 160px;
}
*/
#mainNavMobile .navbar-header a img {
max-height: 35px !important;
display: block !important;
max-width: 100% !important;
height: auto !important;
width: auto !important;
}
/* Invisible SVG Images Bug Fix - Not all svg icons have the size attributes
and as result when the layout have flex the image is losing it's size so here
we decided that the icons will get size related to the `font-size` setting
(just like svgs that are not colored)
-----------------*/
#mainNavMobile .navbar-header a img.svg-img {
width: 1.5em !important;
height: 1.5em !important;
}
/* hide the website name by default */
#mainNavMobile .s123-site-logo>.website-name {
display: none;
}
/* logo font weight normal */
#mainNavMobile .navbar-header .weight700 {
font-weight: bold;
}
/* logo font weight bold */
#mainNavMobile .navbar-header .weight400 {
font-weight: normal;
}
/* Italic style */
#mainNavMobile .navbar-header .italic {
font-style: italic;
}
/* show the website name if the user choose to */
#mainNavMobile .s123-site-logo>.website-name.website-name-active {
display: inline-block;
padding-left: 4px;
}
html[dir="rtl"] #mainNavMobile .s123-site-logo>.website-name.website-name-active {
padding-left: 0;
padding-right: 4px;
}
#mainNavMobile .navPagesRight {
order: 3;
flex-grow: 1;
padding: 0 5px;
width: 80px;
display: flex;
justify-content: center;
}
#mainNavMobile .navPagesRight .navActions {
margin: 0;
display: flex;
align-items: center;
align-content: center;
justify-content: flex-end;
padding: 0 5px;
}
#mainNavMobile .navPagesRight .navActions li {
display: inline-block;
}
/* we had a bug so we decide to hide the button on mobile for now */
#mainNavMobile .header-client-zone-wrapper {
display: none !important;
}
#mainNavMobile .header-cart-wrapper.show-static {
display: none !important;
}
#mainNavMobile .navPagesRight .navActions a,
#mainNavMobile .navPagesRight .navActions button {
font-size: 15px !important;
padding: 0 !important;
color: #ffffff !important;
color: var(--menu_text_color) !important;
}
#mainNavMobile .navPagesRight .navActions a .svg-m,
#mainNavMobile .navPagesRight .navActions button .svg-m {
background-color: #ffffff !important;
background-color: var(--menu_text_color) !important;
}
#mainNavMobile .navPagesRight .navActions a {
padding: 0 7px !important;
}
.rich_page #s123ModulesContainer,
.s123-content-area {
margin-top: var(--mainNavMobileHeight);
}
/* Remove all menus and margin of the desktop platform */
#websiteHeader {
display: none !important;
}
body,
.body {
margin: 0 !important;
border: 0;
}
.rich_page section.s123-module:first-child:before,
.rich_page #s123ModulesContainer:before,
.inside_page #s123ModulesContainer:before,
.inside_page .s123-page-container:before,
.s123-content-area:before {
content: none;
}
/**
* Mobil Navigation Grid Handler
*/
#mainNavMobile .navbar-header {
position: absolute !important;
z-index: 1;
height: 100%;
align-items: center;
}
#mainNavMobile .navbar-header>a {
max-width: calc(100% - 100px);
padding-top: 2px;
padding-bottom: 2px;
height: 100%;
}
#mainNavMobile .s123-site-logo>.website-name.website-name-active,
#mainNavMobile .website-name {
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
max-height: 100%;
}
#mainNavMobile .navPagesLeft>.header-menu-wrapper {
margin-right: auto;
position: relative;
z-index: 2;
}
html[dir="rtl"] #mainNavMobile .navPagesLeft>.header-menu-wrapper {
margin-right: 0;
margin-left: auto;
}
#mainNavMobile .navPagesRight>ul.navActions {
margin-left: auto;
position: relative;
z-index: 2;
}
html[dir="rtl"] #mainNavMobile .navPagesRight>ul.navActions {
margin-left: 0;
margin-right: auto;
}
/* add padding to the buttons to make them bigger for mobile clicks */
#mainNavMobile .navPagesRight .navActions a,
#mainNavMobile .navPagesLeft>.header-menu-wrapper a {
padding: 7px !important;
}
}
/* ########################################## css.siteLogo.php ########################################## */
/* Logo - Image
----------------------------------*/
#mainNav .s123-site-logo img {
max-height: 99px;
}
#mainNav.affix .s123-site-logo img {
max-height: 79px;
margin: 0;
}
/* hide the website name by default */
#mainNav .s123-site-logo>.website-name {
display: none;
}
/* show the website name if the user choose to */
#mainNav .s123-site-logo>.website-name.website-name-active {
display: inline-block;
padding-left: 4px;
}
html[dir="rtl"] #mainNav .s123-site-logo>.website-name.website-name-active {
padding-left: 0;
padding-right: 4px;
}
.navbar-default:not(.affix) .s123-site-logo img,
.navbar-default.affix .s123-site-logo img {
width: auto;
height: 80%;
max-height: 100%;
}
/* SVG Logos Design
-------------------*/
/**
* IE11 Bug Fix - On ie11 the mask doesn't work so we decided to hide the
* svg icons form this browser
* solution: https://stackoverflow.com/a/20541859
*/
_:-ms-fullscreen,
.logo_name[data-is-svg="true"]>div,
_:-ms-fullscreen,
.g-m-logo {
display: none !important;
}
.s123-site-logo .svg-m,
.logo_name .svg-m {
background-color: #ffffff;
background-color: var(--home_text_color);
}
/* 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 .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;
background-color: var(--menu_text_color);
}
/* show the website name if the user choose to */
.s123-site-logo>.website-name.website-name-active {
display: inline-block;
padding-left: 4px;
}
html[dir="rtl"] .s123-site-logo>.website-name.website-name-active {
padding-left: 0;
padding-right: 4px;
}
/* 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;
}
}
/* Small width - New width we want to test on new users
------------------------------------------------------*/
#showSmallAdOnScroll.small-width {
width: auto;
min-width: 400px;
margin: 0 20px;
padding-right: 20px;
padding-left: 20px;
}
#showSmallAdOnScroll.small-width .s123-b-b-s-1 {
display: none !important;
}
/* Small Height Devices
----------------------------------*/
@media (max-height:660px) and (min-width:768px) {
#showSmallAdOnScroll {
width: auto;
min-width: 400px;
margin: 0 20px;
padding-right: 20px;
padding-left: 20px;
}
#showSmallAdOnScroll .s123-b-b-s-1 {
display: none !important;
}
}
#showSmallAdOnScroll.static {
display: block;
bottom: 0;
}
#showSmallAdOnScroll.style1 {
background-color: #0597F2;
box-shadow: 0px -2px 12px rgba(0, 0, 0, 0.4);
border-top: 5px solid #0597F2;
}
#showSmallAdOnScroll.style1 a {
color: #fff;
}
#showSmallAdOnScroll.style1 a span.site123link {
border: 1px solid;
color: #fff;
padding: 7px;
border-radius: 3px;
font-size: 13px;
}
#showSmallAdOnScroll.style1 a span.site123link:hover {
color: #fff !important;
}
#showSmallAdOnScroll.style2 {
background-color: #fff;
box-shadow: 0px -2px 12px rgba(0, 0, 0, 0.4);
border-top: 5px solid #0583F2;
}
#showSmallAdOnScroll.style2 a {
color: black;
}
#showSmallAdOnScroll.style2 a span.site123link {
border: 1px solid;
color: #0583F2;
padding: 7px;
border-radius: 3px;
font-size: 13px;
}
#showSmallAdOnScroll.style2 a span.site123link:hover {
color: #f39405 !important;
}
.externalAlert {
font-family: arial;
color: black;
}
.contactUsConfirm {
font-family: arial;
color: black;
}
/**
* Website Footer >> Subscribe To Mailing List Popup Feature Bug Fix - Because
* the phone field has different structure and it has no floating label `Phone`
* (like in client zone address form or order step 1 from) we don't need the margin here.
*
* Note: In the future if we decide to change the current structure we can remove this fix.
*/
.bootbox.contactUsConfirm .intl-tel-input.allow-dropdown .selected-flag {
margin-top: 0;
}
.bootbox-search-input-validation {
font-family: arial;
color: black;
z-index: 99999;
}
.bootbox-jobs-form,
.bootbox-branch-form {
font-family: arial;
color: black;
z-index: 99999;
}
.bootbox-reservation-form {
font-family: arial;
color: black;
z-index: 99999;
}
#popupJobs .jobsForm {
width: 70%;
color: white;
text-align: left;
}
#popupRestaurantReservations .restaurantReservationsFormPopup,
#popupRestaurantReservations .orderConfirmation {
width: 70%;
color: white;
text-align: left;
}
html[dir=rtl] #popupJobs .jobsForm {
text-align: right;
}
.modulesTitle H4 {
white-space: pre-wrap;
word-wrap: break-word;
line-height: 1.5;
}
/**
* Email Contact Email
*/
.global-contact-email-container {
width: 70%;
color: #fff;
text-align: left;
}
html[dir=rtl] .global-contact-email-container {
text-align: right;
}
.global-contact-email-container .g-c-email-info-box a {
color: #fff;
}
.g-c-email-message-sent-box {
display: none;
text-align: center;
}
.global-contact-email-container .g-c-email-message-content {
margin-bottom: 30px;
}
ul.share-buttons {
list-style: none;
padding: 0;
}
ul.share-buttons li {
display: inline;
}
.website-languages li>a {
line-height: 30px !important;
}
#cboxOverlay {
background: none;
background-color: #000;
}
/* SVG Icons Support
-------------------------------*/
@-webkit-keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
.input-group-addon .svg-m {
background-color: #555555;
}
.svg-m.fa-spin {
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
.svg-m {
display: inline-block;
width: 1em;
height: 1em;
}
img.svg-img {
background: transparent;
width: 1.5em;
height: 1.5em;
}
/* Because we have ` ` between the the caret icons of the website menus
we change the position of the image so there won't be a lot of space between the caret
and the page name
Note: In the future if we decide to remove the ` ` from the website menu
we can remove this logic
-----------------------*/
/* edge 18 browser bug fix */
@supports (-ms-ime-align: auto) {
.svg-m[data-icon-name^="caret-"] {
mask-position: left !important;
}
html[dir="rtl"] .svg-m[data-icon-name^="caret-"] {
mask-position: right !important;
}
}
/* all browsers */
@supports not (-ms-ime-align: auto) {
.svg-m[data-icon-name^="caret-"] {
-webkit-mask-position-x: left !important;
}
html[dir="rtl"] .svg-m[data-icon-name^="caret-"] {
-webkit-mask-position-x: right !important;
}
}
/* IE 11 Handler - Hide the icons on IE11 because it doesn't support
mask technology, the icons will be shown after the js object will replace
them back to original icons
-----------------*/
_:-ms-fullscreen,
.svg-m {
display: none !important;
}
.svg-m {
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
}
.fa-stack {
position: relative;
display: inline-block;
width: 2em;
height: 2em;
line-height: 2em;
vertical-align: middle;
}
.fa-2x {
font-size: 2em;
}
.fa-3x {
font-size: 3em;
}
.fa-4x {
font-size: 4em;
}
.fa-5x {
font-size: 5em;
}
i.svg-m.fa-fw {
width: 1.28571429em;
}
i.svg-m.blue {
background-color: #0597F2;
}
i.svg-m.white {
background-color: #fff;
}
i.svg-m.red {
background-color: red;
}
i.svg-m.green {
background-color: green;
}
/* edge 18 browser bug fix */
@supports (-ms-ime-align: auto) {
.svg-m {
mask-repeat: space !important;
mask-position: center !important;
mask-size: contain !important;
}
}
/* all browsers */
@supports not (-ms-ime-align: auto) {
.svg-m {
-webkit-mask-position-x: center !important;
-webkit-mask-position-y: center !important;
-webkit-mask-size: contain !important;
-webkit-mask-repeat: no-repeat !important;
-webkit-mask-origin: initial !important;
-webkit-mask-clip: initial !important;
}
}
/* Menu Action Buttons
----------------------------------*/
.navActions a {
border-bottom: 0 !important;
}
.navActions a,
.dropdown-submenu.open>.site-dropdown-menu[data-rel="navActions"] a {
padding: 0 7px !important;
}
/**
* Languages Flag Fix - When the user upload a flag we show it instead
* of our icon, the flag is not a font, its an image, so if the user
* set a big font size to the menu, the icon we not vertical centered.
* When I fix it I sow that its centered everything better, also on
* mobile and other icons, so I add it to all of them.
*/
ul.navActions a {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.navActions li a:hover {
background-color: transparent !important;
}
.action-button-wrapper a:hover {
border-color: transparent !important;
border-bottom: 0 !important;
background-color: transparent !important;
opacity: 1 !important;
}
.btn-primary-action-button-1 {
font-size: 14px;
border-color: #00a1cd;
border-color: var(--global_main_color);
background-color: #00a1cd;
background-color: var(--global_main_color);
font-weight: bold;
color: #ffffff;
color: var(--global_main_color_btn_text_color);
}
/* set icon color according to the button style and
ignore the global menu icon color */
.btn-primary-action-button-1 .svg-m {
background-color: #ffffff !important;
background-color: var(--global_main_color_btn_text_color) !important;
}
.btn-primary-action-button-1:hover {
opacity: 1;
}
.btn-primary-action-button-2 {
font-size: 14px;
border-color: #ffffff;
border-color: var(--menu_text_color);
background-color: #ffffff;
background-color: var(--menu_text_color);
font-weight: bold;
color: #00a1cd;
color: var(--menu_text_hover_color);
}
.btn-primary-action-button-2:hover {
opacity: 1;
}
/* set icon color according to the button style and
ignore the global menu icon color */
#popupFloatDivMenu .btn-primary-action-button-2 .svg-m,
#mainNav.navbar-default .nav>li>a .btn-primary-action-button-2 .svg-m,
#header .header-nav .navActions .btn-primary-action-button-2 .svg-m {
background-color: #00a1cd;
background-color: var(--menu_text_hover_color);
}
#popupFloatDivMenu .btn-primary-action-button-2:hover .svg-m,
#mainNav.navbar-default .nav>li>a .btn-primary-action-button-2:hover .svg-m,
#header .header-nav .navActions .btn-primary-action-button-2:hover .svg-m {
background-color: #ffffff;
background-color: var(--global_main_color_btn_text_color);
}
.btn-primary-action-button-3 {
font-size: 14px;
border-color: #00a1cd;
border-color: var(--menu_text_hover_color);
background-color: #00a1cd;
background-color: var(--menu_text_hover_color);
font-weight: bold;
color: #ffffff;
}
.btn-primary-action-button-3:hover {
opacity: 1;
}
/* set icon color according to the button style and
ignore the global menu icon color */
.btn-primary-action-button-3 .svg-m {
background-color: #ffffff !important;
}
.btn-primary-action-button-4 {
font-size: 14px;
border-bottom: 0;
border: 1px solid;
background-color: transparent;
color: #ffffff;
color: var(--menu_text_color);
position: relative;
}
.btn-primary-action-button-4:hover,
.btn-primary-action-button-4:focus {
border: 1px solid;
background-color: transparent;
color: #ffffff;
color: var(--menu_text_color);
}
.btn-primary-action-button-4::before {
border: 0 !important;
}
.btn-primary-action-button-4 .svg-m,
#header .header-column-menu-actions .navActions>li a:hover .svg-m {
background-color: #ffffff;
background-color: var(--menu_text_color);
}
.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 {
padding: 6px 12px;
display: flex;
align-items: center;
}
/* colored svg - make sure that the
width and height will be the same as icon tags */
#mainNav #topAction_buttonText_1 .s123-icon-converter,
#mainNav #topAction_buttonText_2 .s123-icon-converter {
width: 1em !important;
height: 1em !important;
}
.btn-primary-action-button-6 {
font-size: 14px;
border-bottom: 0;
border: 1px solid #00a1cd;
border: 1px solid var(--global_main_color);
background-color: transparent;
color: #00a1cd;
color: var(--global_main_color);
position: relative;
}
.btn-primary-action-button-6 .svg-m {
background-color: #00a1cd !important;
background-color: var(--global_main_color) !important;
}
.btn-primary-action-button-6:hover,
.btn-primary-action-button-6:focus {
border: 1px solid #00a1cd;
border: 1px solid var(--global_main_color);
background-color: transparent !important;
color: #00a1cd;
color: var(--global_main_color);
}
/* Ads Manager */
.site123adExample {
position: relative;
}
.inside_page .site123adExample img {
margin: 25px 0;
}
.site123adExample .adExample {
position: absolute;
background-color: red;
font-size: 14px;
color: white;
padding: 4px;
top: 0;
right: 0;
}
.inside_page .site123adExample .adExample {
top: 25px;
}
.site123AdsWarningHeader {
font-size: 20px;
font-weight: bold;
}
.site123AdsWarning {
font-size: 16px;
font-weight: normal;
}
.inside_page .AdsenseAd {
text-align: center;
margin: 20px;
}
/**
* Ace Support - We import some CSS from the interface Ace to the preview.
*/
input[type=checkbox].ace,
input[type=radio].ace {
opacity: 0;
position: absolute;
z-index: 1;
width: 18px;
height: 18px;
cursor: pointer;
}
label input[type=checkbox].ace,
label input[type=radio].ace {
z-index: -100 !important;
width: 1px !important;
height: 1px !important;
clip: rect(1px, 1px, 1px, 1px);
position: absolute;
}
/* Ace inputs span */
input[type=checkbox].ace+.lbl,
input[type=radio].ace+.lbl {
position: relative;
display: inline-block;
margin: 0;
line-height: 20px;
min-height: 18px;
min-width: 18px;
font-weight: normal;
cursor: pointer;
}
input[type=checkbox].ace+.lbl::before,
input[type=radio].ace+.lbl::before {
cursor: pointer;
font-weight: normal;
font-size: 12px;
color: #FFF;
content: "\a0";
background-color: #FAFAFA;
border: 1px solid #c8c8c8;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
/*, inset 0px -15px 10px -12px rgba(0,0,0,0.05);*/
border-radius: 0;
display: inline-block;
text-align: center;
height: 16px;
line-height: 14px;
min-width: 16px;
margin-right: 1px;
position: relative;
top: -1px;
}
/* Ace switch */
input[type=checkbox].ace.ace-switch {
width: 55px;
height: 25px;
}
input[type=checkbox].ace.ace-switch+.lbl {
margin: 0 15px;
min-height: 24px;
}
input[type=checkbox].ace.ace-switch+.lbl::before {
content: "";
color: #999;
text-shadow: 0 0 0 #999;
font-weight: normal;
font-size: 11px;
line-height: 17px;
height: 16px;
overflow: hidden;
border-radius: 12px;
background-color: #e4e4e4;
-webkit-box-shadow: inset 0 0px 0px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 0px 0px 0 rgba(0, 0, 0, 0.15);
border: 0px solid #CCC;
text-align: left;
float: left;
padding: 0;
width: 32px;
text-indent: -21px;
margin-right: 0;
-webkit-transition: text-indent 0.25s ease;
-o-transition: text-indent 0.25s ease;
transition: text-indent 0.25s ease;
top: auto;
margin-top: 3px;
}
input[type=checkbox].ace.ace-switch+.lbl::after {
content: '';
font-size: 12px;
font-weight: normal;
letter-spacing: 0;
color: #AAA;
text-shadow: none;
background-color: #FFF;
border-radius: 100%;
width: 24px;
height: 24px;
line-height: 22px;
text-align: center;
position: absolute;
top: -2px;
left: -13px;
-webkit-box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, .3);
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, .3);
-webkit-transition: left 0.25s ease;
-o-transition: left 0.25s ease;
transition: left 0.25s ease;
}
input[type=checkbox].ace.ace-switch:checked+.lbl::before {
text-indent: 8px;
color: #FFF;
text-shadow: 0 0 0 #FFF;
background-color: #02B22B;
border-radius: 50px;
}
input[type=checkbox].ace.ace-switch:checked+.lbl::after {
left: 18px;
background-color: #FFF;
color: #98A0A5;
}
/* RTL support */
html[dir=rtl] .ace-switch+.lbl,
html[dir=rtl] .knob-container {
direction: ltr;
text-align: left;
}
/**
* Preview Manage Buttons
*/
.previewManageButton {
display: none;
flex-direction: column;
position: absolute;
top: 50px;
left: 15px;
z-index: 1020;
width: auto !important;
height: auto !important;
transition: opacity 0.2s linear;
}
html[dir=rtl] .previewManageButton:not(.p-s-m) {
left: auto;
right: 15px;
}
.previewManageButton[data-style="round"] a {
border-radius: 100%;
}
#top-section .previewManageButton {
top: 120px;
}
#section-169 .previewManageButton {
top: 140px;
}
/* Homepage + Promo Preview Helpers
---------------------*/
/* main buttons */
#top-section .previewManageButton[data-type="homepage"]>a[data-action="editImage"],
.s123-module[data-module-type-num="1000"] .previewManageButton:not(.p-s-m)>a.edit-image {
grid-row: 1 / 1;
grid-column: 1 / 1;
}
#top-section .previewManageButton[data-type="homepage"]>a[data-action="image"],
.s123-module:is([data-module-type-num="1000"]) .previewManageButton:not(.p-s-m)>a.edit {
grid-row: 2 / 2;
grid-column: 1 / 1;
}
#top-section .previewManageButton[data-type="homepage"]>a[data-action="goals"],
.s123-module:is([data-module-type-num="1000"]) .previewManageButton:not(.p-s-m)>a.design {
grid-row: 3 / 3;
grid-column: 1 / 1;
}
.s123-module:is([data-module-type-num="1000"]) .previewManageButton:not(.p-s-m)>a.template,
#top-section .previewManageButton[data-type="homepage"]>a[data-action="layouts"] {
grid-row: 4 / 4;
grid-column: 1 / 1;
}
.s123-module:is([data-module-type-num="1000"]) .previewManageButton:not(.p-s-m)>a.log-promo-template {
grid-row: 5 / 5;
grid-column: 1 / 1;
margin: 0;
}
/* Right side buttons design (module sorting, duplicate module)
-----------------------------------*/
.previewManageButton.right-side-btns,
.s123-module:is([data-module-type-num="1000"]) .previewManageButton.right-side-btns {
right: 15px;
left: auto;
grid-template-columns: auto auto !important;
}
.s123-module:is([data-module-type-num="1000"]) .previewManageButton.right-side-btns .duplicate-module {
margin-right: 5px;
}
html[dir="rtl"] .s123-module:is([data-module-type-num="1000"]) .previewManageButton.right-side-btns .duplicate-module {
margin-left: 0;
margin-left: 5px;
}
html[dir="rtl"] .previewManageButton.right-side-btns,
html[dir="rtl"] .s123-module:is([data-module-type-num="1000"]) .previewManageButton.right-side-btns {
right: auto;
left: 15px;
}
/* inside page section - */
html.inside_page .previewManageButton.right-side-btns {
display: none !important;
}
/* Homepage + Promo Preview Helpers Manual Spacing
Note: We didn't use grid gap here because we hide buttons and the gap
is still there so here we used margins instead
---------------------*/
.s123-module:is([data-module-type-num="1000"]) .previewManageButton,
#top-section .previewManageButton[data-type="homepage"] {
grid-template-columns: auto !important;
grid-gap: 0px !important;
}
#top-section .previewManageButton[data-type="homepage"] a,
.s123-module:is([data-module-type-num="1000"]) .previewManageButton a {
margin-top: 0 !important;
margin-bottom: 5px !important;
}
#top-section .previewManageButton[data-type="homepage"] .p-m-b-container,
.s123-module:is([data-module-type-num="1000"]) .previewManageButton .p-m-b-container {
margin-left: 5px !important;
}
html[dir="rtl"] #top-section .previewManageButton[data-type="homepage"] .p-m-b-container,
html[dir="rtl"] .s123-module:is([data-module-type-num="1000"]) .previewManageButton .p-m-b-container {
margin-left: 0 !important;
margin-right: 5px !important;
}
/* buttons that in a container
---------------*/
.previewManageButton .p-m-b-container {
display: inline-flex;
grid-row: 2 / 2;
grid-column: 2 / 2;
}
.previewManageButton .p-m-b-container.grid-row-2 {
grid-row: 2 / 2;
}
.previewManageButton .p-m-b-container a {
margin-right: 5px;
margin-bottom: 0;
}
html[dir="rtl"] .previewManageButton .p-m-b-container a {
margin-right: 0;
margin-left: 5px;
}
/* Empty module add new item button
--------------------------------------------*/
.previewManageButton.section-add-item-btn {
display: flex !important;
opacity: 1;
justify-content: center;
align-items: center;
margin: 0;
width: 100% !important;
position: static;
margin-top: 40px;
margin-bottom: 30px;
}
/* gallery layout 3 bug fix - when the module don't have items
we use padding to create some spacing so the add new section button will
not cover this button
--------------------------------------------*/
.s123-module-gallery.layout-3 .section-add-item-btn {
padding: 100px 0;
margin: 0;
}
/**
* Bootstrap Confirmation
* Documentation : https://ethaizone.github.io/Bootstrap-Confirmation/
*/
.s123-module .popover.confirmation .btn:hover {
box-shadow: 0 14px 26px -12px rgba(255, 82, 58, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(255, 82, 58, 0.2) !important;
}
.s123-module .popover.confirmation .btn-default {
background-color: #9E9E9E !important;
border-color: #9E9E9E;
color: #FFF !important;
}
.s123-module .popover.confirmation .spacing-confirmation-btn:not(:last-child) {
margin-right: 10px;
}
html[dir=rtl] .s123-module .popover.confirmation .spacing-confirmation-btn:not(:last-child) {
margin-right: 0;
margin-left: 10px;
}
.s123-module:hover .popover.confirmation {
visibility: visible;
opacity: 1;
}
/* bug fix - when using text color in section the confirmation
of deleting section button was inheriting it so here we make sure the
color of the section delete question is like in bootstrapWithoutIconsV1.css */
.s123-module:hover .popover.confirmation .popover-title {
color: #333;
}
/* Mobile & Tablet
----------------------------------*/
@media(max-width:767px) {
#top-section .previewManageButton {
top: 50px;
}
}
.p-m-b-design {
width: 40px;
height: auto;
margin: 0 0 5px;
font-family: Rubik, Roboto, arial, sans-serif;
font-size: 12px;
text-align: center;
text-decoration: none !important;
/* overwrite Bootstrap design */
cursor: pointer;
color: #cccccc;
background-color: rgb(34, 34, 34);
border: 1px solid #656565;
border-radius: 3px;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
text-transform: capitalize;
letter-spacing: 0.7px;
}
.previewManageButton a.p-m-b-design,
.previewManageButton a.p-m-b-design:hover,
.previewManageButton a.p-m-b-design:focus,
.dropdown-menu>li>a.p-m-b-design,
.dropdown-menu>li>a.p-m-b-design:hover,
.dropdown-menu>li>a.p-m-b-design:focus {
/* overwrite Bootstrap design */
color: #cccccc;
}
/**
* Disabled Editing on Tablet & Mobile
*/
@media(max-width:768px) {
.p-m-b-design {
display: none !important;
}
/* show widgets buttons */
.widgets-floating-bar .p-m-b-design,
.p-m-b-btn-more-popover .p-m-b-design {
display: flex !important;
}
/* hide widgets sortable buttons */
.p-m-b-btn-more-popover .p-m-b-floating-menu:is([data-type="sortUp"], [data-type="sortDown"]) {
display: none !important;
}
.p-m-b-outline {
display: none !important;
}
.p-m-b-highlight-visible:not([class*="w-m-"]) {
border: none !important;
margin: 0 !important;
}
}
@media(max-width:767px) {
.p-m-b-design {
width: 28px;
height: 28px;
}
}
.p-m-b-design>.p-m-b-text {
display: none;
}
@media(min-width:769px) {
.p-m-b-design {
width: auto;
padding: 8px 9px;
}
.p-m-b-design>.p-m-b-icon,
.p-m-b-tooltip {
display: none !important;
}
.p-m-b-design>.p-m-b-text {
display: inline;
}
}
a.p-m-b-design .svg-m {
background-color: #cccccc;
}
#s123ModulesContainer .previewManageButton .p-m-b-design,
.s123-content-area .previewManageButton .p-m-b-design {
width: auto;
padding: 8px 9px;
}
#s123ModulesContainer section#section-169 .previewManageButton.on-bottom a {
display: none;
}
#s123ModulesContainer section#section-169:only-child .previewManageButton.on-bottom a {
display: flex;
}
/* Mobile & Tablet
----------------------------------*/
@media(max-width:767px) {
#s123ModulesContainer .p-m-b-design,
.s123-content-area .p-m-b-design {
padding: 0 6px;
}
}
.p-m-b-design:hover {
color: #cccccc;
background-color: #364044;
text-decoration: none;
}
.p-m-b-design.delete:hover,
.p-m-b-design[data-type="delete"]:hover {
background-color: #d9534f;
}
.previewManageButton .p-m-b-flash {
animation: p-m-b-flash 1.0s 1 ease 0.0s;
}
@keyframes p-m-b-flash {
0% {
background-color: #222222;
}
50% {
background-color: #f0ad4e;
}
100% {
background-color: #222222;
}
}
/**
* Preview Manage Floating Menu Buttons
*/
.p-m-b-floating-menu {
padding: 2px;
position: absolute;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
visibility: hidden;
opacity: 0;
transition: opacity, visibility 0.2s linear;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
line-height: 1.42857143;
}
/* Preview Menu Buttons Helpers Style
------------------*/
.navbar-header .logo_name:hover+.p-m-b-floating-menu[data-type="websiteLogo"],
.navbar-header .s123-site-logo:hover+.p-m-b-floating-menu[data-type="websiteLogo"],
.navbar-header .p-m-b-floating-menu[data-type="websiteLogo"]:hover {
visibility: visible;
opacity: 1;
}
/* set floating menu buttons header properties */
#mainNavMobile .p-m-b-floating-menu,
/* support for top menu layouts */
#mainNav .p-m-b-floating-menu {
/* support for top menu layouts */
left: 50%;
bottom: 0;
transform: translate(-50%, 95%);
}
#header .header-container .p-m-b-floating-menu-btn {
/* support for side menu layouts */
margin-bottom: 10px;
}
#header .header-container .p-m-b-floating-menu {
/* support for side menu layouts */
left: 100%;
bottom: 50%;
transform: translate(-25%, 50%);
}
html[dir="rtl"] #header .header-container .p-m-b-floating-menu {
/* support for side menu layouts */
left: auto;
right: 100%;
transform: translate(25%, 50%);
}
#header .header-container .p-m-b-floating-menu {
flex-direction: column;
}
#websiteHeader:hover .p-m-b-floating-menu[data-type="menuButtons"] {
visibility: visible;
opacity: 1;
}
/* on layouts with hamburger menu we need to show buttons only when the menu is active */
/* set floating menu buttons footer properties */
.global_footer .p-m-b-floating-menu {
left: 50%;
top: 0;
transform: translate(-50%, -50%);
}
.home_page .global_footer .p-m-b-floating-menu[data-type="footerButtons"] {
top: auto;
bottom: 0;
transform: translate(-50%, -10%);
}
.global_footer:hover .p-m-b-floating-menu {
visibility: visible;
opacity: 1;
}
.p-m-b-floating-menu-btn {
margin-right: 10px;
white-space: nowrap;
}
/* tablet device fix - we don't have icons yet so we add this fix for tablet design only */
@media(max-width:768px) {
.p-m-b-floating-menu-btn {
width: 100%;
padding: 8px 9px;
}
}
html[dir="rtl"] .p-m-b-floating-menu-btn {
margin-left: 0;
margin-right: 10px;
}
.p-m-b-floating-menu-btn.active {
background-color: #0583F2 !important;
border-color: #0583F2 !important;
}
.p-m-b-floating-menu-btn:hover,
.p-m-b-floating-menu .dropdown-menu li .p-m-b-floating-menu-btn:hover,
.p-m-b-floating-menu .dropdown-menu li .p-m-b-floating-menu-btn:focus {
background-color: #364044;
/* when the preview at scale mode the buttons jumps on hover so we fix it using `opacity` */
opacity: 1;
}
/* if the menu has only 1 button we remove the margins from the buttons */
.p-m-b-floating-menu.one-btn-only .p-m-b-floating-menu-btn {
margin: 0;
}
/* set svg size according to the font size */
.p-m-b-floating-menu-btn svg {
width: 1em;
height: 1em;
}
.p-m-b-floating-menu[data-type="widgetButtons"] i.svg-m,
.p-m-b-floating-menu[data-type="homepageGoal"] .p-m-b-floating-menu-btn i.svg-m,
.p-m-b-floating-menu[data-type="moduleItem"] .p-m-b-floating-menu-btn i.svg-m {
background-color: #ffffff;
}
/* preview helper more btn with drop down */
.p-m-b-floating-menu .p-m-b-btn-more-container {
/* because we use the class `p-m-b-floating-menu` to inherit styles
we user `!important` to remove irrelevant styles */
position: relative !important;
transform: initial !important;
left: 0 !important;
height: 100%;
}
.p-m-b-floating-menu .dropdown-menu .p-m-b-floating-menu-btn,
.p-m-b-btn-more-popover .p-m-b-btn-more-list>.p-m-b-floating-menu .p-m-b-floating-menu-btn {
margin: 0;
line-height: 1;
}
.p-m-b-floating-menu .p-m-b-btn-more-container .dropdown-menu,
.p-m-b-btn-more-popover .p-m-b-btn-more-lis {
left: auto;
right: auto;
background-color: #252c2f;
padding: 0;
min-width: auto;
}
.p-m-b-floating-menu .p-m-b-btn-more-container .dropdown-menu li:first-child,
.p-m-b-floating-menu .p-m-b-btn-more-container .dropdown-menu li:last-child,
.p-m-b-btn-more-popover .p-m-b-btn-more-list>.p-m-b-floating-menu:first-child,
.p-m-b-btn-more-popover .p-m-b-btn-more-list>.p-m-b-floating-menu:last-child {
border: 1px solid transparent;
border-radius: 4px;
}
.p-m-b-floating-menu .p-m-b-btn-more-container .dropdown-menu:after {
border-bottom: 6px solid #171717;
-moz-border-bottom-colors: #171717;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
content: "";
display: inline-block;
left: calc(50% - 6px);
position: absolute;
top: -6px;
}
.p-m-b-floating-menu .p-m-b-btn-more-container.dropup .dropdown-menu:after {
top: unset;
bottom: -6px;
border-bottom: unset;
border-top: 6px solid #171717;
}
.p-m-b-floating-menu .p-m-b-btn-more-container .dropdown-menu>li>a,
.p-m-b-btn-more-popover .p-m-b-btn-more-list>.p-m-b-floating-menu>a {
padding: 3px 15px;
border: none;
text-transform: capitalize;
}
.p-m-b-floating-menu .p-m-b-btn-more-container .dropdown-menu>li>a>span,
.p-m-b-btn-more-popover .p-m-b-btn-more-list>.p-m-b-floating-menu>a>span {
margin-left: 3px;
}
html[dir="rtl"] .p-m-b-btn-more-popover .p-m-b-btn-more-list>.p-m-b-floating-menu>a>span,
html[dir="rtl"] .p-m-b-floating-menu .p-m-b-btn-more-container .dropdown-menu>li>a>span {
margin-left: 0;
margin-right: 3px;
}
.p-m-b-floating-menu .dropdown-menu li,
.p-m-b-btn-more-popover .p-m-b-floating-menu {
/* because we use the class `p-m-b-floating-menu` to inherit styles
we user `!important` to remove irrelevant styles */
display: block !important;
margin: 0;
padding: 5px 0 0 0;
position: static !important;
min-width: auto;
transform: initial !important;
}
/* Homepage Goal Highlight Design
--------------------------*/
.p-m-b-btn-more-popover .p-m-b-btn-more-list>.p-m-b-floating-menu .p-m-b-floating-menu-btn,
.p-m-b-floating-menu :is([data-type="homepageGoal"], [data-type="widgetButtons"]) .dropdown-menu .p-m-b-design {
justify-content: flex-start;
}
.p-m-b-btn-more-popover .p-m-b-floating-menu,
.p-m-b-highlight-visible .p-m-b-floating-menu[data-type="homepageGoal"] {
visibility: visible;
opacity: 1;
}
.p-m-b-highlight .p-m-b-floating-menu[data-type="homepageGoal"] {
bottom: 0;
display: flex;
left: 50%;
transform: translate(-50%, 70%);
z-index: 1000;
}
.p-m-b-highlight .p-m-b-floating-menu .p-m-b-floating-menu-btn,
.p-m-b-btn-more-popover .p-m-b-btn-more-list>.p-m-b-floating-menu .p-m-b-floating-menu-btn {
width: auto;
}
/* magic button preview helpers*/
html[dir="rtl"] .all-magic-buttons.mg-b-icon-position-right.p-m-b-highlight-visible .p-m-b-floating-menu,
.all-magic-buttons.p-m-b-highlight-visible .p-m-b-floating-menu {
right: 100%;
left: auto;
visibility: visible;
opacity: 1;
transform: translate(0%, 50%);
z-index: 1;
}
html[dir="rtl"] .all-magic-buttons.p-m-b-highlight-visible .p-m-b-floating-menu,
.mg-b-icon-position-left.all-magic-buttons.p-m-b-highlight-visible .p-m-b-floating-menu {
left: 100%;
right: auto;
}
/* Magic Buttons Preview Helpers
-------------*/
.p-m-b-floating-menu[data-type="magicButton"] {
display: flex;
flex-wrap: wrap;
bottom: 50%;
}
.p-m-b-floating-menu[data-type="magicButton"]>a:first-child {
margin-bottom: 5px;
}
/* Preview Helper Module Items Edit Btn (On Hover)
----------------------*/
.p-m-b-highlight-visible {
/* make sure that the edit button is shown in the box */
position: relative;
/* some times we have items style that items are above
other items */
z-index: 1000;
/* some time items have overflow setting but when hovering we
don't need it because it will hide the "edit" button */
overflow: visible !important;
}
.s123-module .preview-highlighter .p-m-b-floating-menu[data-type="moduleItem"] {
left: 0;
right: 0;
bottom: 0;
}
.s123-module .preview-highlighter.p-h-e-bottom-70 .p-m-b-floating-menu[data-type="moduleItem"] {
transform: translate(0%, -70%) !important;
}
.s123-module .preview-highlighter:not(.p-h-e-bottom-0) .p-m-b-floating-menu[data-type="moduleItem"] {
transform: translate(0%, 50%);
}
.s123-module .preview-highlighter.s123-box-bottom-primary-border-hover .p-m-b-floating-menu[data-type="moduleItem"] {
transform: translate(0%, calc(50% + 10px));
}
.s123-module .p-m-b-highlight-visible .p-m-b-floating-menu[data-type="moduleItem"] {
visibility: visible;
opacity: 1;
/* some layouts have elements with z-index: 99999;
for example about layout 13 so we bring the button forward */
z-index: 10000;
}
.s123-module .preview-highlighter .p-m-b-floating-menu[data-type="moduleItem"] .p-m-b-floating-menu-btn {
width: auto;
}
/* sometimes the buttons of the floating menu is covering the link `learn more` of items
so we move it little down */
.s123-module .preview-highlighter.p-h-e-link-handler .p-m-b-floating-menu[data-type="moduleItem"] {
transform: translate(0%, calc(50% + 15px));
}
/* Homepage Goal Helpers Design
-------------------------------------*/
.s123-module .p-m-b-floating-menu[data-type="moduleItem"],
#top-section .p-m-b-floating-menu[data-type="homepageGoal"],
.p-m-b-floating-menu[data-type="widgetButtons"],
.p-m-b-btn-more-popover .p-m-b-btn-more-list>.p-m-b-floating-menu,
.s123-module:is([data-module-type-num="1000"]) .p-m-b-floating-menu[data-type="homepageGoal"] {
height: 35px;
padding: 0;
}
.s123-module .p-m-b-floating-menu[data-type="moduleItem"] a,
#top-section .p-m-b-floating-menu[data-type="homepageGoal"] a,
.p-m-b-floating-menu[data-type="widgetButtons"] a,
.p-m-b-btn-more-popover .p-m-b-btn-more-list>.p-m-b-floating-menu a,
.s123-module[data-module-type-num="1000"] .p-m-b-floating-menu:is([data-type="homepageGoal"], [data-type="widgetButtons"]) a {
display: flex;
align-items: center;
height: 100%;
margin: 0;
border-radius: 0;
box-shadow: none;
}
/* Section Manager Buttons
-------------------------------------*/
/* hide the first add new section button */
.s123-module:not(.first-section) .p-s-m.on-top {
display: none !important;
}
.previewManageButton.p-s-m {
left: calc(50% - 20px) !important;
align-items: center;
justify-content: center;
flex-flow: row;
}
.previewManageButton.p-s-m>a {
width: 40px !important;
height: 40px;
padding: 0px !important;
margin: 0px;
}
/* Mobile & Tablet
----------------------------------*/
@media(max-width:767px) {
.previewManageButton.p-s-m>a {
width: 28px !important;
height: 28px;
}
}
.previewManageButton.p-s-m.on-top {
top: 0;
bottom: inherit;
transform: translate(0%, -50%);
}
/* on rich page first child we pull the button twice up */
.r-c-f-c .previewManageButton.p-s-m.on-top {
transform: translate(0%, -100%);
}
.previewManageButton.p-s-m.on-bottom {
top: inherit !important;
bottom: 0;
transform: translate(0%, 50%);
}
/* free website and no footer - pull the last add new section button above the free website banner */
/* rich page first section - */
html.rich_page .s123-module.first-section .p-s-m.on-top {
transform: translate(0%, 50%);
}
/* inside page section - */
html.inside_page .s123-module .p-s-m.on-top {
transform: translate(0%, 50%);
}
/**
* s123 Slider inputs design
*
* Note: We Remove the paddings from the slider inputs containers because after we converted
* the text to input we now need full width so the text will be visible.
*/
.s123-slider span[id$="_slider"] {
background: #EBECEE;
border-width: 0;
height: 8px;
display: block;
}
.s123-slider span[id$="_slider"] .ui-widget-header {
background: #0583F2;
}
.s123-slider span[id$="_slider"] .ui-slider-handle {
height: 16px;
width: 16px;
border-width: 0;
background: #FFFFFF;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.24);
border-radius: 50%;
outline-width: 0;
}
.buttonSettingBox .s123-slider span[id$="_slider"] .ui-slider-handle,
.s123-collapse-settings .s123-slider span[id$="_slider"] .ui-slider-handle {
background: #2E383E;
}
.s123-slider div[id$="_view"] {
background: #5F6373;
border-radius: 4px;
color: #FFFFFF;
height: 24px;
}
.s123-slider div[id$="_view"] input {
font-weight: 500 !important;
}
.s123-slider a[data-rel=tooltip] {
color: #010B40;
}
.s123-slider .label.label-info {
padding-right: 0px;
padding-left: 0px;
width: 100%;
}
.s123-slider .slider-input-value {
width: 100%;
height: 100%;
padding: 0;
/* remove ace padding, fix undisplayed text at MAC Safari */
background: transparent !important;
border-width: 0px !important;
color: inherit !important;
font-size: inherit !important;
text-align: inherit !important;
}
.s123-slider .slider-input-value:focus {
box-shadow: none !important;
}
/* Section Preview Management Buttons Grid Style
-----------------------------------*/
.s123-module .previewManageButton:not(.p-s-m) {
grid-template-columns: auto auto auto auto;
grid-gap: 5px;
}
.s123-module .previewManageButton:not(.p-s-m)>a {
margin: 0;
}
.s123-module .previewManageButton:not(.p-s-m)>a.edit {
grid-row: 1 / 1;
grid-column: 1 / 1;
}
.s123-module .previewManageButton:not(.p-s-m)>a.min-height {
grid-row: 1 / 1;
grid-column: 2 / 2;
}
.s123-module .previewManageButton:not(.p-s-m)>a.design {
grid-row: 2 / 2;
grid-column: 1 / 1;
}
.s123-module .previewManageButton:not(.p-s-m)>a.e-c-manage {
grid-row: 2 / 2;
grid-column: 1 / 1;
}
/* move design button 1 row down when module has store manage button */
.s123-module .previewManageButton:not(.p-s-m)>a.e-c-manage+a.design {
grid-row: 3 / 3;
grid-column: 1 / 1;
}
.s123-module .previewManageButton:not(.p-s-m)>a.customizeDesign {
grid-row: 2 / 2;
grid-column: 2 / 2;
}
.s123-module .previewManageButton:not(.p-s-m)>a.delete {
grid-row: 1 / 1;
grid-column: 2 / 2;
}
/* move delete after min height (this is applied only when there is a min height button) */
.s123-module .previewManageButton:not(.p-s-m)>a.min-height+a.delete {
grid-row: 1 / 1;
grid-column: 3 / 3;
}
.s123-module .previewManageButton:not(.p-s-m) a.delete svg {
width: 1em;
height: 1em;
}
/* bug fix - when using text color in section the confirmation
of deleting section button was inheriting it so here we make sure the
color of the section delete question is like in bootstrapWithoutIconsV1.css */
.s123-module .previewManageButton+.confirmation {
color: #333;
}
/* bug fix - the module quick edit buttons container `previewManageButton`
covered the confirmation popover (happened on the new promo)*/
.s123-module .previewManageButton+.confirmation {
z-index: 2051;
}
/* Editable Elements Design
-----------------------------------*/
[data-s123-editable-elements="true"]:focus {
outline: 0;
}
.s123-tool-bar {
display: none;
}
/* Mobile & Tablet - Always hide the toolbar
----------------------------------*/
@media(max-width:768px) {
.s123-tool-bar {
display: none !important;
}
}
.s123-tool-bar.active {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
z-index: 3000;
}
.s123-tool-bar a {
padding: 0 5px;
text-decoration: none;
background-color: rgb(34, 34, 34);
border: 1px solid #444;
width: 40px;
height: 40px;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
color: #fff;
}
.s123-tool-bar a:hover {
background-color: #364044;
}
.s123-tool-bar a.active {
background-color: #0583F2;
border-color: #0583F2;
}
.s123-tool-bar a.disabled {
cursor: default;
background-position: center center;
background-repeat: no-repeat;
background-image: url('/files/images/not_active2.png');
background-color: rgb(75 75 75);
}
.s123-tool-bar a i {
background-color: #fff;
width: 1em;
min-width: 40px;
height: 1em;
}
.s123-tool-bar a svg {
color: #fff;
width: 1em;
height: 1em;
}
/* Sections Sorting
---------------------*/
.s123-module .s123-sortable-sections {
display: grid;
grid-gap: 5px;
}
.s123-module .s123-sortable-sections .move-section-up {
grid-row: 1 / 1;
grid-column: 2 / 2;
}
.s123-module .s123-sortable-sections .move-section-down {
grid-row: 1 / 1;
grid-column: 1 / 1;
}
.s123-module .s123-sortable.disabled {
background-color: rgb(130 130 130);
}
/* on some homepage templates the setting min height didn't effect
when decreasing the value and that is because inner elements min height
so we removed the min height here so the live height will effect */
#top-section .live-min-height-bug-fix {
min-height: auto !important;
}
/* S123 Popover Tools
------------------------------------*/
.s123-popover,
.tooltip.in,
.s123-popover-tooltip {
z-index: 3000;
}
.s123-popover .shadow-controller a {
font-size: 20px;
color: #000;
margin: 0 5px;
text-decoration: none;
display: inline-block;
padding: 3px;
}
.s123-popover .shadow-controller a.active {
transform: scale(1.2);
outline: 1px solid #0597F2;
outline-offset: 2px;
}
/* allow to the slider label to break line if the text is not fitting */
.s123-popover:not(.s123-popover-sliders) .s123-slider[data-design="oneLine"] .slider-title label {
white-space: initial !important;
}
/* S123 Popover Sliders custom Fix - Here
We decided that the popover will auto grow so all of
the slider text will be visible
-------------------------------------*/
.s123-popover-sliders {
max-width: 100% !important;
}
.s123-popover-sliders .s123-slider[data-design="oneLine"] .slider-title {
min-width: 75px !important;
width: calc(100% - (145px + 52px)) !important;
}
.s123-popover-sliders .slider-tool {
width: 145px !important;
}
.s123-popover-sliders .slider-value {
width: 52px !important;
}
.s123-popover-sliders label {
overflow: visible !important;
text-overflow: unset !important;
}
/* Section Highlight
-------------------------------------*/
@keyframes sectionHighlighter {
0% {
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 0;
}
}
.section-highlight:before {
opacity: 0;
background-color: #f0ad4e;
-webkit-animation: sectionHighlighter 1s linear;
animation: sectionHighlighter 1s linear;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
/* S123 Resizable Elements
-------------------------------------*/
.s123-resizable {
left: auto !important;
top: auto !important;
}
/**/
.s123-resizable[data-s123-resizable-full-controllers="true"] .p-m-b-floating-menu:not(.p-m-b-btn-more-container) {
transform: translate(-50%, -20%);
}
/* cover the element with temporary cover because sometimes
we have iframes inside and the realizable tool not
reacting to the pointer when it is inside of iframe */
.s123-resizable.resizing:before {
position: absolute;
content: '';
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}
.s123-resizable .ui-resizable-handle {
display: none;
width: 25px;
height: 25px;
padding: 5px;
}
.s123-resizable .ui-resizable-handle:before {
position: absolute;
content: '';
top: 5px;
right: 5px;
bottom: 5px;
left: 5px;
background-color: #ffffff;
border: 1px solid #000000;
}
.s123-resizable.p-m-b-highlight-visible .ui-resizable-handle,
.s123-resizable.active .ui-resizable-handle,
.s123-resizable.resizing .ui-resizable-handle {
display: block;
}
/* top left corner controller */
.s123-resizable .ui-resizable-nw {
cursor: url(https://cdn-cms-s.f-static.net/files/images/customCursor/nw-resize.png) 12 12, auto;
left: -17px;
top: -17px;
}
/* top center controller */
.s123-resizable .ui-resizable-n {
cursor: url(https://cdn-cms-s.f-static.net/files/images/customCursor/n-resize.png) 12 12, auto;
top: -17px;
left: calc(50% - 12.5px);
/* 12.5 because 25px width / 2 */
}
/* top right corner controller */
.s123-resizable .ui-resizable-ne {
cursor: url(https://cdn-cms-s.f-static.net/files/images/customCursor/ne-resize.png) 12 12, auto;
top: -17px;
right: -17px;
}
/* right center controller */
.s123-resizable .ui-resizable-e {
cursor: url(https://cdn-cms-s.f-static.net/files/images/customCursor/e-resize.png) 12 12, auto;
right: -17px;
top: calc(50% - 12.5px);
/* 12.5 because 25px height / 2 */
}
/* right bottom corner controller */
.s123-resizable .ui-resizable-se {
cursor: url(https://cdn-cms-s.f-static.net/files/images/customCursor/se-resize.png) 12 12, auto;
bottom: -17px;
right: -17px;
background-image: initial;
/* remove the default image of jquery-ui*/
}
/* bottom center controller */
.s123-resizable .ui-resizable-s {
cursor: url(https://cdn-cms-s.f-static.net/files/images/customCursor/s-resize.png) 12 12, auto;
bottom: -17px;
left: calc(50% - 12.5px);
/* 12.5 because 25px width / 2 */
}
/* bottom left corner controller */
.s123-resizable .ui-resizable-sw {
cursor: url(https://cdn-cms-s.f-static.net/files/images/customCursor/sw-resize.png) 12 12, auto;
bottom: -17px;
left: -17px;
}
/* left center controller */
.s123-resizable .ui-resizable-w {
cursor: url(https://cdn-cms-s.f-static.net/files/images/customCursor/w-resize.png) 12 12, auto;
left: -17px;
top: calc(50% - 12.5px);
/* 12.5 because 25px height / 2 */
}
/* Bug Fix - When user is resizing the text we are using a technique to check
if the content is overflowing and some styles always have overflowing elements
so here we handle them by removing them while resizing (it is happening fast so the user don't see it change)
---------------*/
.s123-resizable .get-clean-scroll-width:after,
.s123-resizable .get-clean-scroll-width:before {
display: none;
}
.s123-resizable .get-clean-scroll-width {
border-width: 0px !important;
}
/* Resizable Font
---------------------------*/
.resizable-text-wrapper {
max-width: 100%;
display: none;
}
.resizable-text-wrapper.visible {
display: inline-flex;
}
/* 2 side promo bug fix - we want the realizable wrapper to get the width of
it's child so we overwrite the flex align */
.s123-module.s123-promo-module-v2.twoSideCallAction .start:not(.p-text-position) .resizable-text-wrapper.visible {
align-self: start;
}
.s123-module.s123-promo-module-v2.twoSideCallAction.twoSideDiffBack .promoContentOrder {
display: flex;
flex-flow: column;
justify-content: center;
}
.s123-module.s123-promo-module-v2.twoSideCallAction.twoSideDiffBack .start:not(.p-text-position) .promoContentOrder {
align-items: center;
}
.s123-module.s123-promo-module-v2.twoSideCallAction.twoSideDiffBack .start:not(.p-text-position) .promoContentOrder .resizable-text-wrapper.visible {
align-self: center;
}
/* Mobile & Tablet - hide the controllers because
the font size is fitted with js when the user is changing the preview mode
----------------------------------*/
@media(max-width:768px) {
.s123-resizable .ui-resizable-handle {
display: none !important;
}
}
/* Homepage / Promo Text Margin Handler - Because we wrapped the homepage / promo texts
with div that will be re sizable and we didn't want to change the homepage text
infrastructure in the front we forced the re sizable div to inhering the margins
--------------------------------------------*/
.resizable-text-wrapper>#home_siteSlogan,
.resizable-text-wrapper>#home_siteSlogan_2,
.resizable-text-wrapper>#home_SecondSiteSlogan,
.resizable-text-wrapper>.promoText1,
.resizable-text-wrapper>.promoText2,
.resizable-text-wrapper>.promoText3,
.resizable-text-wrapper>.promoText {
margin-top: 0 !important;
margin-bottom: 0 !important;
width: 100%;
}
.resizable-text-wrapper[data-rel="home_siteSlogan"] {
margin-top: var(--home_text_top_space_1);
margin-bottom: var(--home_text_bottom_space_1);
}
.resizable-text-wrapper[data-rel="home_siteSlogan_2"] {
margin-top: var(--home_text_top_space_2);
margin-bottom: var(--home_text_bottom_space_2);
}
.resizable-text-wrapper[data-rel="home_SecondSiteSlogan"] {
margin-top: var(--home_text_top_space_3);
margin-bottom: var(--home_text_bottom_space_3);
}
/* With this tool we are checking the image original size
of the image for different purposes
--------------*/
img.s123-size-tester {
visibility: hidden;
position: fixed !important;
top: 0;
left: 0;
width: auto !important;
height: auto !important;
max-height: none !important;
max-width: none !important;
}
/* Text Visibility Handler
----------------------*/
.t-v-handler-tools {
right: auto !important;
display: none !important;
min-width: 50px;
min-height: 25px;
}
.t-v-handler-tools.active {
display: grid !important;
grid-gap: 2px;
}
.t-v-handler-tools a {
font-size: 15px;
width: 25px;
height: 25px;
padding: 0;
margin: 0;
}
.t-v-handler-tools a.font-size-counter {
display: flex;
grid-row: 1 / 1;
grid-column: 3 / 3;
font-size: 10px;
width: auto;
border-radius: 0;
padding: 0 5px;
}
.t-v-handler-tools a.add-text {
grid-row: 1 / 1;
grid-column: 1/1;
}
.t-v-handler-tools a.remove-text {
grid-row: 1 / 1;
grid-column: 2 / 2;
}
.t-v-handler-tools a.disabled {
opacity: 0.7;
}
/* Text Length Counter
----------------------*/
.t-c-handler {
right: auto !important;
display: none !important;
min-width: 50px;
min-height: 25px;
}
html[dir="rtl"] .t-c-handler {
direction: rtl;
}
.t-c-handler.active {
display: grid !important;
grid-gap: 2px;
grid-template-columns: 1fr auto;
}
.t-c-handler .p-m-b-design {
padding: 0;
border-width: 0;
margin: 0;
cursor: default;
}
.t-c-handler .header-type,
.t-c-handler .text-current-length-counter,
.t-c-handler .text-max-length-counter {
display: flex;
font-size: 10px;
border-radius: 0;
padding: 0 5px;
margin: 0;
}
.t-c-handler.hide-text-counter.active {
min-width: 10px;
}
.t-c-handler.hide-text-counter.active .text-counter-contianer {
display: none;
}
/* Section `Add Text` Button
---------------------*/
.section-main-text-btn {
display: none !important;
position: static;
max-width: 150px;
margin: 10px;
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
section.s-m-t-b[data-s-m-t-b="active"] .section-main-text-btn {
display: inline-block !important;
}
section.s-m-t-b[data-s-m-t-b="active"]:hover .section-main-text-btn {
opacity: 1;
}
/* S123 Layout Customizer Popover Tools
---------------------------------------*/
.popover.layout-customizer {
font-family: Rubik, Roboto, arial, sans-serif;
font-size: 14px;
}
.popover.layout-customizer[data-current-module="headers"],
.popover.layout-customizer[data-current-module="homepageModule"] {
z-index: 3000;
}
.popover.layout-customizer .popover-content {
padding: 20px;
color: #5F6373;
}
.popover.layout-customizer label {
font-weight: normal;
display: inline;
}
.popover.layout-customizer .p-m-s-mobile-back-btn {
color: #337ab7 !important;
display: none;
}
.popover.layout-customizer .p-m-s-container {
min-width: 200px;
}
.popover.layout-customizer .popover-content a[data-rel=tooltip] i {
width: 16px !important;
height: 16px !important;
color: #010B40 !important;
border-radius: 50px;
text-align: center;
}
.popover.layout-customizer .popover-content .form-group input,
.popover.layout-customizer .popover-content .form-group select {
font-size: 14px;
}
.popover.layout-customizer .popover-content .form-group select {
height: 34px;
padding: 4px 6px;
-webkit-appearance: none;
-moz-appearance: none;
background-position: right 50%;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
}
html[dir=rtl] .popover.layout-customizer .popover-content .form-group select {
background-position: 0.5em 50%;
padding-left: 1.5em;
}
@media (max-width: 480px) {
.popover.layout-customizer {
width: calc(100vw - 130px);
max-width: none;
}
}
.popover.layout-customizer .c-l-mobile-back-btn {
display: none;
}
/* S123 Floating Bar Design
---------------------*/
.s123-floating-bar {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
z-index: 1030;
}
.s123-floating-bar .previewManageButton {
position: static;
display: flex;
flex-direction: row;
}
.s123-floating-bar .p-m-b-design {
margin-left: 3px;
}
.s123-floating-bar .p-m-b-design svg {
width: 1em;
height: 1em;
}
html[dir="rtl"] .s123-floating-bar .p-m-b-design {
margin-left: 0;
margin-right: 3px;
}
/* Mobile & Tablet
----------------------------------*/
/* mobile - hide the buttons */
@media(max-width:767px) {
.s123-floating-bar[data-type="moduleTitle"],
.s123-floating-bar[data-type="moduleSlogan"] {
display: none;
}
}
/* tablet - fix the size */
@media(max-width:769px) {
.s123-floating-bar .p-m-b-design {
width: 100% !important;
padding: 8px 9px !important;
}
}
/* PC Small Screen Module Title Quick Edit Bug Fix - When the preview
is small the module title `edit/slogan` buttons was covered by other
quick manage buttons so we decided to pull then to the side in this case
-------------------------------*/
@media(max-width:1280px) {
.s123-floating-bar[data-type="moduleTitle"] .previewManageButton[data-header-style=""],
.s123-floating-bar[data-type="moduleTitle"] .previewManageButton[data-header-style="2"],
.s123-floating-bar[data-type="moduleTitle"] .previewManageButton[data-header-style="11"],
.s123-floating-bar[data-type="moduleTitle"] .previewManageButton[data-header-style="12"] {
transform: translateX(-30%);
}
.s123-floating-bar[data-type="moduleTitle"] .previewManageButton[data-header-style="5"] {
transform: translateX(60%);
}
.s123-floating-bar[data-type="moduleTitle"] .previewManageButton[data-header-style="14"] {
transform: translateX(20%);
}
html[dir=rtl] .s123-floating-bar[data-type="moduleTitle"] .previewManageButton[data-header-style=""],
html[dir=rtl] .s123-floating-bar[data-type="moduleTitle"] .previewManageButton[data-header-style="2"],
html[dir=rtl] .s123-floating-bar[data-type="moduleTitle"] .previewManageButton[data-header-style="11"],
html[dir=rtl] .s123-floating-bar[data-type="moduleTitle"] .previewManageButton[data-header-style="12"] {
transform: translateX(20%);
}
html[dir=rtl] .s123-floating-bar[data-type="moduleTitle"] .previewManageButton[data-header-style="5"] {
transform: translateX(-60%);
}
html[dir=rtl] .s123-floating-bar[data-type="moduleTitle"] .previewManageButton[data-header-style="14"] {
transform: translateX(-10%);
}
}
/* the outline is out of screen for the top menu so we used border instead*/
#mainNav .navbar-header .p-m-b-highlight-visible~.p-m-b-outline {
display: none;
}
#mainNav .navbar-header .p-m-b-highlight-visible {
border: 2px solid #0597F2;
margin: -2px;
}
/* Outline Handler
----------------------------*/
.p-m-b-outline {
box-sizing: border-box;
display: block;
position: absolute !important;
}
/* some elements position is incorrect so we fix it
if the position is not absolute or already relative */
.o-h-relative {
position: relative;
}
/* dummy div only used as view component without any events */
.p-m-b-outline>div {
pointer-events: none;
background-color: #0597F2;
}
/* bottom + top */
.p-m-b-outline.bottom-side,
.p-m-b-outline.top-side {
height: 10px;
margin-left: -5px;
padding: 4px 0;
/* 4 because the outline height is 2px*/
}
.p-m-b-outline.bottom-side>div,
.p-m-b-outline.top-side>div {
width: 100%;
height: 2px;
}
/* left + right */
.p-m-b-outline.left-side,
.p-m-b-outline.right-side {
margin-top: -5px;
width: 10px;
padding: 0 4px;
/* 4 because the outline width is 2px*/
}
.p-m-b-outline.left-side>div,
.p-m-b-outline.right-side>div {
width: 2px;
height: 100%;
}
/* when the outline don't have offset we need to pull it in
so it will wrap the element without spaces around */
.p-m-b-outline.top-side.no-outline-offset {
margin-top: 2px;
margin-left: 0;
padding: 0;
height: 2px;
}
.p-m-b-outline.right-side.no-outline-offset {
margin-top: 0;
margin-left: -2px;
padding: 0;
width: 2px;
}
.p-m-b-outline.bottom-side.no-outline-offset {
margin-top: -2px;
margin-left: 0;
padding: 0;
height: 2px;
}
.p-m-b-outline.left-side.no-outline-offset {
margin-top: 0;
margin-left: 2px;
padding: 0;
width: 2px;
}
/* bring the structure + column widgets outlines above
the shapes */
.w-m-structure~.p-m-b-outline,
.w-m-column~.p-m-b-outline {
z-index: 2;
}
/* Homepage Goal Buttons Type
------------------------------*/
.magic_homepage .promoButtons .p-m-b-highlight {
z-index: 1;
}
/* pull forward the button that the user is hovering on at the moment */
.magic_homepage .promoButtons .p-m-b-highlight.p-m-b-highlight-visible {
z-index: 2;
}
/* Homepage Goal Position
------------------------------------*/
.goal-position-container {
display: flex;
align-items: center;
justify-content: center;
}
.goal-position {
display: grid;
grid-template-columns: 30px 30px 30px;
grid-template-rows: 20px 20px 20px;
column-gap: 5px;
justify-items: center;
align-items: center;
row-gap: 5px;
}
.goal-position-container .goal-box {
width: 20px;
height: 20px;
overflow: hidden;
display: flex;
position: relative;
align-items: center;
justify-content: center;
border-radius: 5px;
}
/* mirror flip of the elements on rtl because gird doesn't do that
solution: https://stackoverflow.com/a/11457128 */
html[dir="rtl"] .goal-position-container .goal-box>span {
-webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
-moz-transform: matrix(-1, 0, 0, 1, 0, 0);
-o-transform: matrix(-1, 0, 0, 1, 0, 0);
transform: matrix(-1, 0, 0, 1, 0, 0);
}
.goal-position-container .goal-box:not(.dummy) {
cursor: pointer;
}
.s123-popover .goal-position-container .goal-box:not(.dummy):hover,
.s123-popover .goal-position-container .goal-box.active {
outline: 1px solid #0597F2;
outline-offset: 2px;
}
.goal-position-container .goal-box.disabled {
opacity: 0.5;
}
/* Custom Section Padding Tool
------------------*/
.s123-popover.homepage-sizing label {
font-size: 11px;
}
.s123-popover.homepage-sizing .custom-padding {
max-width: 288px;
/* limited the width to the closest width of the sliders in the same popover */
}
.s123-popover.homepage-sizing .s123-s-p-custom-padding-box.disabled {
opacity: 0.7;
pointer-events: none;
}
.s123-popover.homepage-sizing .tab-content {
width: 60%;
}
.s123-popover.homepage-sizing .tab-content label {
font-weight: normal;
}
.s123-popover.homepage-sizing .tab-content .tab {
display: none;
}
.s123-popover.homepage-sizing .tab-content .tab#custom>div:first-child {
margin-right: 10px;
}
.s123-popover.homepage-sizing .tab-content .tab#custom>div {
display: inline-block;
width: calc(50% - 5px);
font-size: inherit;
}
.s123-popover.homepage-sizing .tab-content .tab#custom .form-control {
font-size: inherit !important;
}
[data-type="gallery"] input[type=checkbox].ace:checked+.lbl::before,
[data-type="gallery"] input[type=radio].ace:checked+.lbl::before {
font-family: FontAwesome;
display: inline-block;
content: '\f00c';
color: #0583F2;
}
/* Outline Bug Fix - Sometimes the outline of the preview helpers are
covering the quick edit buttons so in order to prevent such thing
from happening we set to the buttons containers a z-index of 2050
----------------------*/
.previewManageButton,
.p-m-b-floating-menu {
z-index: 2050;
}
/*
Homepage Goal SVG Images Bug Fix - Before the deploy users that used svg images
in the homepage goals didn't see them and after the deploy the user can only change images
from the preview so we made sure that the svg images will have width so the users will be able to
change the svg
--------------------------------------------------*/
#top-section .magic_homepage .home_custom_image[src*=".svg"] {
height: var(--home_custom_image_size);
max-height: 100%;
}
.global_footer .social-details-container .p-m-b-floating-menu {
top: 100%;
}
.s123-popover .w-m-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.s123-popover .w-m-container .w-m-i {
width: 25px;
height: 25px;
cursor: pointer;
}
.p-m-b-floating-menu[data-type="widgetButtons"] {
display: flex;
position: static;
visibility: visible;
opacity: 1;
position: absolute;
background-color: transparent;
height: 35px;
right: auto;
width: auto;
}
.p-m-b-floating-menu[data-type="widgetButtons"] .p-m-b-design {
margin: 0;
font-size: 11px;
}
.s123-popover .w-m-container .w-m-i .w-m-i-preview,
.s123-popover .w-m-container .w-m-i .w-m-i-preview svg {
width: 100%;
height: 100%;
color: #000;
}
.s123-popover .w-m-container .w-m-i .w-m-i-preview:hover {
outline: 1px solid #0597F2;
outline-offset: 2px;
}
.s123-popover.widgets-position .goal-position {
grid-template-columns: 30px 30px 30px;
grid-template-rows: 20px;
}
.p-m-b-floating-menu[data-type="ColumnWidget"] {
position: absolute;
right: -5px;
top: -5px;
visibility: visible;
opacity: 1;
}
.p-m-b-floating-menu[data-type="ColumnWidget"].column-menu-position-left {
right: auto;
left: -5px;
}
.previewManageButton .w-m-system-widgets {
grid-row: 2/2;
grid-column: 2/2;
display: grid;
grid-gap: 5px;
}
.previewManageButton .w-m-system-widgets .w-m-structure-controller {
grid-row: 1 / 1;
grid-column: 2 / 2;
}
.previewManageButton .w-m-system-widgets .w-m-column-controller {
grid-row: 1 / 1;
grid-column: 1 / 1;
}
.w-m-controllers .w-m-controllers-container {
display: flex;
}
.w-m-controllers .w-m-controllers-container .w-m-controller {
width: 25px;
height: 25px;
cursor: pointer;
border: solid 2px #000;
margin: 0 5px;
border-top-width: 5px;
border-radius: 3px;
}
.w-m-controllers .w-m-controllers-container .w-m-controller:is(:hover, .active) {
outline: 1px solid #0597F2;
outline-offset: 2px;
}
.widgets-floating-bar {
transform: translateY(-85%);
height: 25px !important;
}
.widgets-floating-bar.has-bottom-resize-controller {
transform: translate(-13px, -85%);
}
@media(max-width:768px) {
.widgets-floating-bar.has-bottom-resize-controller {
transform: translate(0%, -85%);
}
}
.widgets-floating-bar .p-m-b-design {
padding: 5px;
}
.widgets-floating-bar .p-m-b-design>.p-m-b-design {
font-size: 11px;
}
.p-m-b-floating-menu:is([data-type="sortUp"], [data-type="sortDown"]) .disabled {
opacity: 0.5 !important;
cursor: not-allowed;
}
.p-m-b-btn-more-popover {
background-color: #252c2f;
border-radius: 4px;
padding: 0;
}
.p-m-b-btn-more-popover .popover-content {
padding: 0;
}
.p-m-b-btn-more-popover.top {
margin-top: -5px;
}
.p-m-b-btn-more-popover.top>.arrow:after {
bottom: -6px;
}
.p-m-b-btn-more-popover.top>.arrow,
.p-m-b-btn-more-popover.top>.arrow:after {
margin-left: -6px;
border-width: 6px;
}
.p-m-b-btn-more-popover.top>.arrow:after {
border-top-color: #171717;
}
.p-m-b-btn-more-popover.bottom {
margin-top: 5px;
}
.p-m-b-btn-more-popover.bottom>.arrow:after {
top: -6px;
}
.p-m-b-btn-more-popover.bottom>.arrow,
.p-m-b-btn-more-popover.bottom>.arrow:after {
margin-left: -6px;
border-width: 6px;
}
.p-m-b-btn-more-popover.bottom>.arrow:after {
border-bottom-color: #171717;
}
.popover.page-header-settings .btn-primary {
background-color: #0583F2 !important;
border-color: #0583F2;
}
.popover.page-header-settings textarea {
font-size: inherit;
}
.s123-module-rich-page[data-sections-amount="0"] {
position: static;
}
.previewManageButton[data-type="richpageEmptySction"] {
display: flex !important;
align-items: center;
justify-content: center;
position: static !important;
width: 100% !important;
min-height: inherit;
}
.previewManageButton[data-type="richpageEmptySction"] .p-m-b-floating-menu {
display: grid;
grid-gap: 10px;
visibility: visible;
opacity: 1;
position: static;
padding: 0;
}
.previewManageButton[data-type="richpageEmptySction"] .p-m-b-floating-menu a {
grid-row: 1/1;
margin: 0;
}
#cplToolbar {
position: absolute;
z-index: 10;
}
#cplToolbar:not(.active) {
display: none;
}
#cplToolbar .fr-toolbar {
margin: 0;
}
[data-cpl] .fr-counter {
display: none !important;
}
.fr-toolbar.fr-inline {
z-index: 3001 !important;
}
.global_footer .social-icons .list-inline>li>a {
border: 1px solid #00a1cd;
border: 1px solid var(--global_main_color);
border-radius: 50%;
font-size: 18px;
color: #fff;
background-color: #00a1cd;
background-color: var(--global_main_color);
width: 37px;
height: 37px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 5px;
text-decoration: none;
}
.global_footer .social-icons .list-inline>li>a .svg-m {
background-color: #ffffff;
background-color: var(--global_main_color_btn_text_color);
}
.global_footer .social-icons .list-inline>li>a:hover {
opacity: 0.8;
text-decoration: none;
}
.social-icons .svg-m[data-icon-name="facebook"] {
width: 0.65em;
}
#top-section .item {
filter: contrast(90%) brightness(100%) saturate(100%) hue-rotate(-10deg);
}
#top-section .item.itemImage1 {
background-image: url('../img/800_641af64a631ca.png');
height: 100%;
background-position: 65.31% 55.68%;
}
#top-section .item.itemImage2 {
background-image: url('../img/800_641af657dec1a.png');
height: 100%;
background-position: 50.77% 40.27%;
}
#top-section .item.itemImage3 {
background-image: url('../img/800_641af66339d3c.png');
height: 100%;
background-position: 50.00% 50.00%;
}
#top-section .item.itemImage4 {
background-image: url('');
height: 100%;
}
#top-section .item.itemImage5 {
background-image: url('');
height: 100%;
}
@media(min-width:768px) {
#top-section .item.itemImage1 {
background-image: url('../img/2000_641af64a631ca.png');
}
#top-section .item.itemImage2 {
background-image: url('../img/2000_641af657dec1a.png');
}
#top-section .item.itemImage3 {
background-image: url('../img/2000_641af66339d3c.png');
}
#top-section .item.itemImage4 {
background-image: url('');
}
#top-section .item.itemImage5 {
background-image: url('');
}
}
#top-section .item.patterns {
background-size: initial !important;
background-attachment: fixed !important;
background-repeat: repeat !important;
}
html.parallax-active #top-section.parallax-on,
html.parallax-active .home_background_wrapper.parallax-on,
html.parallax-active .s123-module-promo.parallax-on,
html.parallax-active .s123-module-promo .parallax-on,
html.parallax-active .s123-promo-module-v2.parallax-on,
html.parallax-active .s123-promo-module-v2 .parallax-on,
html.parallax-active .s123-module-headers.parallax-on,
html.parallax-active .parallax-window {
background: none !important;
}
.orderPopupWin {
z-index: 99999;
}
.orderPopupWin .modal-footer {
display: none;
}
.website-languages-menu-link {
cursor: pointer;
}
#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);
}
}
.s123-responsive-table {
overflow-x: auto;
}
video.fr-draggable {
opacity: 0;
}
.fr-toolbar .fr-command.fr-btn .svg-m,
.fr-popup .fr-command.fr-btn .svg-m {
background-color: #222222;
}
.breakable {
word-wrap: break-word;
}
.s123-new-line-break {
white-space: pre-wrap;
word-wrap: break-word;
}
.s123-flex-center {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
}
@media(min-width:768px) {
.s123-col-centered {
display: inline-block;
float: none;
vertical-align: text-top;
}
}
.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;
}
.header-cart-wrapper a,
.header-wish-list a {
border: 0;
color: #ffffff;
color: var(--menu_text_color);
}
.header-cart-wrapper a .svg-m,
.header-wish-list a .svg-m {
width: 1.1em;
height: 1.1em;
background-color: #ffffff;
background-color: var(--menu_text_color);
}
.header-cart-wrapper a:hover,
.header-wish-list a:hover {
border: 0;
}
.header-cart-wrapper i,
.header-wish-list i {
position: relative;
}
#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: #00a1cd;
background: var(--global_main_color);
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: #00a1cd;
background-color: var(--menu_text_hover_color);
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;
}
.onlyContent123 .s123-content-area,
.onlyContent123 #s123ModulesContainer,
.onlyContent123 .s123-page-container {
padding-top: 0 !important;
}
html.onlyContent123 body {
background-color: #f7f9f8;
background-color: var(--inside_modules_color);
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;
border-color: var(--modules_color_text_second) !important;
}
.bg-primary .fr-view[dir="rtl"] blockquote blockquote {
border-color: #000000 !important;
border-color: var(--modules_color_text_second) !important;
}
.bg-primary .fr-view[dir="rtl"] blockquote blockquote blockquote {
border-color: #000000 !important;
border-color: var(--modules_color_text_second) !important;
}
.bg-primary .fr-view blockquote {
border-color: #000000 !important;
border-color: var(--modules_color_text_second) !important;
color: #000000 !important;
color: var(--modules_color_text_second) !important;
}
.fr-view[dir="rtl"] blockquote {
border-color: #000000 !important;
border-color: var(--modules_color_text) !important;
}
.fr-view[dir="rtl"] blockquote blockquote {
border-color: #000000 !important;
border-color: var(--modules_color_text) !important;
}
.fr-view[dir="rtl"] blockquote blockquote blockquote {
border-color: #000000 !important;
border-color: var(--modules_color_text) !important;
}
.fr-view blockquote {
border-color: #000000 !important;
border-color: var(--modules_color_text) !important;
color: #000000 !important;
color: var(--modules_color_text) !important;
}
.inside_page .bg-primary .fr-view[dir="rtl"] blockquote {
border-color: #000000 !important;
border-color: var(--inside_modules_color_text) !important;
}
.inside_page .bg-primary .fr-view[dir="rtl"] blockquote blockquote {
border-color: #000000 !important;
border-color: var(--inside_modules_color_text) !important;
}
.inside_page .bg-primary .fr-view[dir="rtl"] blockquote blockquote blockquote {
border-color: #000000 !important;
border-color: var(--inside_modules_color_text) !important;
}
.inside_page .bg-primary .fr-view blockquote {
border-color: #000000 !important;
border-color: var(--inside_modules_color_text) !important;
color: #000000 !important;
color: var(--inside_modules_color_text) !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;
}
:root {
--global_main_color_rgba_02: rgba(0, 173, 181, 0.2)
}
.datepicker thead {
border-bottom: 1px solid #eaeaea;
}
.datepicker tfoot {
border-top: 1px solid #eaeaea;
}
.datepicker td,
.datepicker th {
padding: 10px 10px !important;
border-radius: 0 !important;
}
.datepicker table tr td {
background-image: none !important;
}
.datepicker table tr td:hover {
background-image: none !important;
}
html[dir="rtl"] .datepicker.datepicker-dropdown.dropdown-menu {
right: auto;
}
}
.datepicker table tr td.active:hover,
.datepicker table tr td.active:hover:hover,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.disabled:hover:hover,
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active:hover.disabled,
.datepicker table tr td.active.disabled.disabled,
.datepicker table tr td.active.disabled:hover.disabled,
.datepicker table tr td.active[disabled],
.datepicker table tr td.active:hover[disabled],
.datepicker table tr td.active.disabled[disabled],
.datepicker table tr td.active.disabled:hover[disabled] {
background-color: #00a1cd;
background-color: var(--global_main_color);
}
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active {
background-color: #00a1cd \9;
background-color: var(--global_main_color);
}
.datepicker table tr td.today:hover,
.datepicker table tr td.today:hover:hover,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today.disabled:hover:hover,
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:hover.active,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today:hover.disabled,
.datepicker table tr td.today.disabled.disabled,
.datepicker table tr td.today.disabled:hover.disabled,
.datepicker table tr td.today[disabled],
.datepicker table tr td.today:hover[disabled],
.datepicker table tr td.today.disabled[disabled],
.datepicker table tr td.today.disabled:hover[disabled] {
background-color: rgba(0, 173, 181, 0.2);
background-color: var(--global_main_color_rgba_02);
}
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:hover.active {
background-color: rgba(0, 173, 181, 0.2) \9;
background-color: var(--global_main_color_rgba_02);
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: #00a1cd;
background: var(--global_main_color);
}
.s123-calendar-handler .modal-footer .confirm-selection,
.s123-calendar-handler .datepicker-days .day.active:not(.today) {
background-color: #00a1cd !important;
background-color: var(--global_main_color) !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 #00a1cd !important;
border: 2px solid var(--global_main_color) !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;
color: var(--global_main_color_btn_text_color);
}
.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;
}