The local helper classes are used in Widget/HTML and applied directly to our elements displayed in content or footer sections.
01. background colors
bg-transparent | The transparent background color |
bg-primary | The main accent background color |
bg-secondary | The secondary accent background color |
bg-primary-dark | The primary dark background color (footer) |
bg-secondary-dark | The secondary dark background color |
bg-white | White background color |
bg-dark | |
bg-turquoise | |
bg-emerald | |
bg-peter-river | |
bg-amethyst | |
bg-wet-asphalt | |
bg-green-sea | |
bg-nephritis | |
bg-belize-hole | |
bg-wisteria | |
bg-midnight-blue | |
bg-sun-flower | |
bg-carrot | |
bg-alizarin | |
bg-clouds | |
bg-concrete | |
bg-orange | |
bg-pumpkin | |
bg-pomegranate | |
bg-silver | |
bg-asbestos | |
bg-red | |
bg-blue | |
bg-green | |
bg-yellow | |
bg-pink | |
bg-purple | |
bg-amber | |
bg-lime | |
bg-brown | |
bg-teal | |
bg-cyan | |
bg-gray | |
bg-gradient-1 | The background gradient style 1 |
bg-gradient-2 | The background gradient style 2 |
bg-gradient-3 | The background gradient style 3 |
02. text color and link
color-dark | The headings and text color #000000 |
color-white | The headings and text color #ffffff |
link-white | The global link color #ffffff |
link-dark | The global link color #000000 |
link-grey | The global link color #cccccc |
has-dark-link | The text color in custom buttons (not hover) |
03. padding and margin
no-padding | padding:0px |
add-5 | padding:5px |
add-10 | padding:10px |
add-15 | padding:15px |
add-20 | padding:20px |
add-25 | padding:25px |
add-30 | padding:30px |
no-margin | margin:0 |
pull-top | margin-top:-15px |
pull-btm | margin-bottom:-15px |
04. alignment
hs-left | float:left |
hs-right | float:right |
hs-center | float:none |
text-left | text-align:left |
text-right | text-align:right |
text-center | text-align:center |
is--left | left-align (Flexbox) |
is--right | right-align (Flexbox) |
is--center | center-align (Flexbox) |
05. text size and font weight
size-11 | font-size:11px |
size-12 | font-size:12px |
size-13 | font-size:13px |
size-14 | font-size:14px |
size-15 | font-size:15px |
size-16 | font-size:16px |
size-17 | font-size:17px |
size-18 | font-size:18px |
size-19 | font-size:19px |
size-20 | font-size:20px |
size-25 | font-size:25px |
size-30 | font-size:30px |
has-large-text | font-size:300% (only desktop) |
has-large-mobile | font-size:300% (desktop & mobile) |
has-super-large-text | font-size:500% (only desktop) |
weight-300 | font-weight:300 |
weight-400 | font-weight:400 |
weight-500 | font-weight:500 |
weight-600 | font-weight:600 |
weight-700 | font-weight:700 |
weight-800 | font-weight:800 |
06. position
rel | position:relative |
absolute-top-left | position:absolute;top:0;left:0; |
absolute-top-right | position:absolute;top:0;right:0; |
absolute-btm-left | position:absolute;bottom:0;left:0; |
absolute-btm-right | position:absolute;bottom:0;right:0; |
fixed | position:fixed (used only for sticky elements in HTML) |
07. display desktop or mobile only
only-mobile | Display only in tablet and mobile |
only-mobile-phone | Display only in mobile |
hide-mobile | Display only in desktop |
08. hero overlay opacity
opacity-8 | opacity:0.8 |
opacity-6 | opacity:0.6 |
opacity-4 | opacity:0.4 |
opacity-2 | opacity:0.2 |
09. grid columns
col-12 | width: 100% |
col-11 | width: 91.66666667% |
col-10 | width: 83.33333333% |
col-9 | width: 75% |
col-8 | width: 66.66666667% |
col-7 | width: 58.33333333% |
col-6 | width: 50% |
col-5 | width: 41.66666667% |
col-4 | width:33.33333333% |
col-3 | width:25% |
col-2 | width:16.66666667% |
col-1 | width:8.33333333% |
col-0 | width:auto |
10. buttons
mid-round | border:none |
bg-round | border:1px solid #303030 |
ghost-dark | box-shadow: 0px 17px 35px rgba(74,74,115,0.1), 0px 5px 15px rgba(0,0,0,0.07) |
ghost-white | text-shadow: 2px 4px 3px rgba(0,0,0,0.3) |
has-flat-style | box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.1) inset |
fullwidth-btn | width:100% |
small-btn | padding: 12px 25px |
large-btn | padding: 15px 55px |
Last updates: 22-12-2020
/* -------------------------------------------------------------------------------- /
[7] HELPER CLASSES updated 27-12-2020
/ -------------------------------------------------------------------------------- */
/* text colors for dark backgrounds */
.color-white,.color-white p,.color-white td,.color-white table,.color-white span,.color-white h1,.color-white h2,.color-white h3{
color:#fff;
}
/* text colors for white backgrounds */
.color-dark,.color-dark p,.color-dark td,.color-dark table,.color-dark span,.color-dark h1,.color-dark h2,.color-dark h3 {
color:#333;
}
.color-primary {
color:#c2a476; /* color 1 */
}
.color-secondary {
color:#ae895d;
}
.color-grey {
color:#ccc;
}
/* backgrounds */
#hs-container .bg-grey,
#hs-container .bg-gray{
background:#D1D3D4;
}
#hs-container .bg-lightgray{
background:#E8E9E9;
}
#hs-container .bg-darkgray{
background:#BABDBF;
}
#hs-container .bg-white{
background:#ffffff;
}
#hs-container .bg-dark{
background:#000000;
}
.bg-white,.brand-bg .bg-white{
background:#ffffff;
}
a.hs-button.bg-white{
color:#333!important;
}
a.hs-button.bg-white:hover{
color:#fff!important;
}
#hs-container .bg-transparent {
background:none;
}
/* links colors */
#cc-inner .link-dark a:link,#cc-inner .link-dark a:visited{
color:#444;
}
#cc-inner .link-white a:link,#cc-inner .link-white a:visited{
color:#fff;
}
#cc-inner .link-grey a:link,#cc-inner .link-grey a:visited{
color:#ccc;
}
#cc-inner .link-underlined .j-text a:link,#cc-inner .link-underlined .j-text a:visited {
box-shadow: inset 0 -1px 0;
padding: 0 0 0.2em 0;
-webkit-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}
#cc-inner .link-underlined .j-text a:hover{
box-shadow: inset 0 -2px 0;
opacity:0.8;
}
/* default UI colors */
/* source: http://materialuicolors.co/ */
#hs-container .bg-red {
background:#F44336;
}
#hs-container .bg-pink {
background:#E91E63;
}
#hs-container .bg-purple {
background:#9C27B0;
}
#hs-container .bg-deep-purple {
background:#673AB7;
}
#hs-container .bg-indigo {
background:#3F51B5;
}
#hs-container .bg-blue {
background:#2196F3;
}
#hs-container .bg-light-blue {
background:#03A9F4;
}
#hs-container .bg-cyan {
background:#00BCD4;
}
#hs-container .bg-teal {
background:#009688;
}
#hs-container .bg-green {
background:#4CAF50;
}
#hs-container .bg-light-green {
background:#8BC34A;
}
#hs-container .bg-lime {
background:#CDDC39;
}
#hs-container .bg-yellow {
background:#FFEB3B;
}
#hs-container .bg-amber {
background:#FFC107;
}
#hs-container .bg-orange {
background:#FF9800;
}
#hs-container .bg-deep-orange {
background:#FF5722;
}
#hs-container .bg-brown {
background:#795548;
}
/*** FlatUI colors palette ***/
/* source: https://flatuicolors.com/ */
#hs-container .bg-turquoise {
background: #1dd2af;
}
#hs-container .bg-emerald {
background: #2ecc71;
}
#hs-container .bg-peter-river{
background: #3498db;
}
#hs-container .bg-amethyst{
background: #9b59b6;
}
#hs-container .bg-wet-asphalt {
background: #34495e;
}
#hs-container .bg-green-sea {
background: #16a085;
}
#hs-container .bg-nephritis {
background: #27ae60;
}
#hs-container .bg-belize-hole {
background: #2980b9;
}
#hs-container .bg-wisteria {
background: #8e44ad;
}
#hs-container .bg-midnight-blue {
background: #2c3e50;
}
#hs-container .bg-sun-flower {
background: #f1c40f;
}
#hs-container .bg-carrot {
background: #e67e22;
}
#hs-container .bg-alizarin {
background: #e74c3c;
}
#hs-container .bg-clouds {
background: #ecf0f1;
}
#hs-container .bg-concrete {
background: #95a5a6;
}
#hs-container .bg-orange{
background: #f39c12;
}
#hs-container .bg-pumpkin {
background: #d35400;
}
#hs-container .bg-pomegranate {
background: #c0392b;
}
#hs-container .bg-silver {
background: #bdc3c7;
}
#hs-container .bg-asbestos {
background: #7f8c8d;
}
#hs-container .jimdo-blue {
background: #1ba9e1;
}
#hs-container .jimdo-green {
background: #c0d34b;
}
.hs-overlay{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0.6;
}
.has-custom-overlay .matrix-hero .hs-overlay {
background: var(--bg-primary);
}
.bg-gradient {
background: -webkit-linear-gradient(to right, #2c3e50, #2980b9); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #2c3e50, #2980b9); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.bg-gradient-2 {
background: -webkit-linear-gradient(to left, #ff4b1f , #1fddff); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #ff4b1f , #1fddff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.bg-gradient-3 {
background: -webkit-linear-gradient(to left, #00bf8f , #001510); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #00bf8f , #001510); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
/* font-weight */
#cc-inner .weight-300 {font-weight:300;}
#cc-inner .weight-400 {font-weight:400;}
#cc-inner .weight-500 {font-weight:500;}
#cc-inner .weight-600 {font-weight:600;}
#cc-inner .weight-700 {font-weight:700;}
#cc-inner .weight-800 {font-weight:800;}
/* remove default uppercase style */
#cc-inner .is-inherit h1,#cc-inner .is-inherit h2,#cc-inner .is-inherit h3,#cc-inner .is-inherit .j-nav-variant-nested,#cc-inner .is-inherit .j-nav-variant-standard,#cc-inner .is-inherit .j-nav-variant-breadcrumb,.cc-page.lowercase .slicknav_nav a,#hs-container .lowercase a.readmore,#cc-inner .is-inherit .j-product .cc-shop-product-desc .cc-shop-addtocard,#cc-inner .is-inherit #cc-sidecart .cc-sidecart-footer .cc-sidecart-checkout,#cc-inner .is-inherit #cc-checkout-wrapper #cc-checkout-gutter .cc-checkout-btn,#cc-inner .is-inherit .j-blogarticle .blogreadmore:link,#cc-inner .is-inherit .j-blogarticle .blogreadmore:visited,#cc-inner .is-inherit .j-blogarticle .comment:link,#cc-inner .is-inherit .j-blogarticle .comment:visited,#cc-inner .is-inherit .post .blogreadmore:link,#cc-inner .is-inherit .post .blogreadmore:visited,#cc-inner .is-inherit .post .comment:link,#cc-inner .is-inherit .post .comment:visited,#cc-inner .is-inherit .commententry input[type="submit"],#cc-inner .is-inherit .j-formnew input[type='submit'],#cc-inner .is-inherit .j-downloadDocument .cc-m-download-link,#cc-inner .is-inherit .j-newsletterbox input[type='submit'],#cc-inner .is-inherit input[type="submit"].submitUser,#cc-inner .is-inherit .j-rss br+a[target="_blank"],#cc-inner .is-inherit input#mc-embedded-subscribe.button,#cc-inner .is-inherit a.j-calltoaction-link.j-calltoaction-link-style-1,#cc-inner .is-inherit a.j-calltoaction-link.j-calltoaction-link-style-2,#cc-inner .is-inherit a.j-calltoaction-link.j-calltoaction-link-style-3,#cc-inner .is-inherit .hs-button,#cc-inner .is-inherit span.fn,#cc-inner .is-inherit .cc-catalog-wrapper span a,#cc-inner .is-inherit div.caption.cc-m-image-align-3,#cc-inner .is-inherit .cc-imagewrapper.cc-m-image-align-3 figcaption {
text-transform:none;
}
/* remove letter-spacing */
#cc-inner .no-letter-spacing h1,#cc-inner .no-letter-spacing h2,#cc-inner .no-letter-spacing h3,#cc-inner .no-letter-spacing .j-nav-variant-nested,#cc-inner .no-letter-spacing .j-nav-variant-standard,#cc-inner .no-letter-spacing .j-nav-variant-breadcrumb,#cc-inner .no-letter-spacing .slicknav_nav a,#cc-inner .no-letter-spacing a.readmore,#cc-inner .no-letter-spacing .j-product .cc-shop-product-desc .cc-shop-addtocard,#cc-inner .no-letter-spacing #cc-sidecart .cc-sidecart-footer .cc-sidecart-checkout,#cc-inner .no-letter-spacing #cc-checkout-wrapper #cc-checkout-gutter .cc-checkout-btn,#cc-inner .no-letter-spacing .j-blogarticle .blogreadmore:link,#cc-inner .no-letter-spacing .j-blogarticle .blogreadmore:visited,#cc-inner .no-letter-spacing .j-blogarticle .comment:link,#cc-inner .no-letter-spacing .j-blogarticle .comment:visited,#cc-inner .no-letter-spacing .post .blogreadmore:link,#cc-inner .no-letter-spacing .post .blogreadmore:visited,#cc-inner .no-letter-spacing .post .comment:link,#cc-inner .no-letter-spacing .post .comment:visited,#cc-inner .no-letter-spacing .commententry input[type="submit"],#cc-inner .no-letter-spacing .j-formnew input[type='submit'],#cc-inner .no-letter-spacing .j-downloadDocument .cc-m-download-link,#cc-inner .no-letter-spacing .j-newsletterbox input[type='submit'],#cc-inner .no-letter-spacing input[type="submit"].submitUser,#cc-inner .no-letter-spacing .j-rss br+a[target="_blank"],#cc-inner .no-letter-spacing input#mc-embedded-subscribe.button,#cc-inner .no-letter-spacing a.j-calltoaction-link.j-calltoaction-link-style-1,#cc-inner .no-letter-spacing a.j-calltoaction-link.j-calltoaction-link-style-2,#cc-inner .no-letter-spacing a.j-calltoaction-link.j-calltoaction-link-style-3,#cc-inner .no-letter-spacing .hs-button,#cc-inner .no-letter-spacing span.fn,#cc-inner .no-letter-spacing .cc-catalog-wrapper span a,#cc-inner .no-letter-spacing div.caption.cc-m-image-align-3,#cc-inner .no-letter-spacing .cc-imagewrapper.cc-m-image-align-3 figcaption {
letter-spacing:0;
}
/* remove google font */
#hs-container .no-g-font h1,#hs-container .no-g-font h2,#hs-container .no-g-font h3,#hs-container .no-g-font .j-nav-variant-nested,#hs-container .no-g-font .j-nav-variant-standard,#hs-container .no-g-font .j-nav-variant-breadcrumb,.cc-page .no-g-font .slicknav_nav a,#hs-container .no-g-font a.readmore,#hs-container .no-g-font .j-product .cc-shop-product-desc .cc-shop-addtocard,#hs-container .no-g-font #cc-sidecart .cc-sidecart-footer .cc-sidecart-checkout,#hs-container .no-g-font #cc-checkout-wrapper #cc-checkout-gutter .cc-checkout-btn,#hs-container .no-g-font .j-blogarticle .blogreadmore:link,#hs-container .no-g-font .j-blogarticle .blogreadmore:visited,#hs-container .no-g-font .j-blogarticle .comment:link,#hs-container .no-g-font .j-blogarticle .comment:visited,#hs-container .no-g-font .post .blogreadmore:link,#hs-container .no-g-font .post .blogreadmore:visited,#hs-container .no-g-font .post .comment:link,#hs-container .no-g-font .post .comment:visited,#hs-container .no-g-font .commententry input[type="submit"],#hs-container .no-g-font .j-formnew input[type='submit'],#hs-container .no-g-font .j-downloadDocument .cc-m-download-link,#hs-container .no-g-font .j-newsletterbox input[type='submit'],.cc-pagemode-overlay #hs-container .no-g-font input[type="submit"].submitUser,#hs-container .no-g-font .j-rss br+a[target="_blank"],#hs-container .no-g-font input#mc-embedded-subscribe.button,.no-g-font a.j-calltoaction-link.j-calltoaction-link-style-1,.no-g-font a.j-calltoaction-link.j-calltoaction-link-style-2,.no-g-font a.j-calltoaction-link.j-calltoaction-link-style-3,#hs-container .no-g-font .hs-button,#hs-container .no-space span.fn,#hs-container .no-g-font .cc-catalog-wrapper span a,#hs-container .no-g-font div.caption.cc-m-image-align-3,#hs-container .no-g-font .cc-imagewrapper.cc-m-image-align-3 figcaption {
font-family:inherit;
text-transform:none!important;
letter-spacing:0!important;
}
h1.no-g-font,h2.no-g-font,h3.no-g-font,h4.no-g-font {
font-family:inherit!important;
text-transform:none!important;
letter-spacing:0!important;
}
/*** must have elements ***/
.size-11 {
font-size:11px;
}
.size-12 {
font-size:12px;
}
.size-13 {
font-size:13px;
}
.size-14 {
font-size:14px;
}
.size-15 {
font-size:15px;
}
.size-16 {
font-size:16px;
}
.size-17 {
font-size:17px;
}
.size-18 {
font-size:18px;
}
.size-19 {
font-size:19px;
}
.size-20 {
font-size:20px;
}
.size-25 {
font-size:25px;
}
.size-30 {
font-size:30px;
}
.max-height-20 img {
max-height:20px;
}
.max-height-40 img {
max-height:40px;
}
.max-height-50 img {
max-height:50px;
}
.max-height-60 img {
max-height:60px;
}
.max-height-70 img {
max-height:70px;
}
.max-height-80 img {
max-height:80px;
}
.max-height-90 img {
max-height:90px;
}
.max-height-100 img {
max-height:100px;
}
.max-height-120 img {
max-height:120px;
}
.max-height-150 img {
max-height:150px;
}
#cc-inner .has-large-text,#cc-inner .has-large-mobile,#cc-inner .has-large-heading h1,#cc-inner .has-large-heading h2,#cc-inner .has-large-heading h3 {
font-size:300%!important;
}
#cc-inner .has-super-large-text,#cc-inner .has-super-large-heading h1,#cc-inner .has-super-large-heading h2,#cc-inner .has-super-large-heading h3 {
font-size:500%!important;
}
@media only screen and (max-width: 459px) {
#cc-inner .has-large-text,#cc-inner .has-large-mobile,#cc-inner .has-large-heading h1,#cc-inner .has-large-heading h2,#cc-inner .has-large-heading h3 {
font-size:120%!important;
}
.has-super-large-text,.has-super-large-heading h1,.has-super-large-heading h2,.has-super-large-heading h3 {
font-size:150%!important;
}
}
.has-small-text {
font-size:90%!important;
}
.has-dashed-border {
outline: 1px dashed #ccc;
outline-offset: -5px;
}
.has-solid-border {
outline: 1px solid #ccc;
outline-offset: -5px;
}
.has-white-solid-border {
outline: 1px solid #fff;
outline-offset: -5px;
}
.has-white-dashed-border {
outline: 1px dashed #fff;
outline-offset: -5px;
}
.no-border{
border:none!important;
border-top:none!important;
border-right:none!important;
border-bottom:none!important;
border-bottom:none!important;
}
.add-border{
border:1px solid #303030;
}
.add-border-bold{
border:2px solid #303030;
}
/* paddings and margins */
.no-padding{
padding:0!important;
}
.no-padding-top{
padding-top:0;
}
.no-padding-btm{
padding-bottom:0;
}
.no-padding-left{
padding-left:0;
}
.no-padding-right{
padding-right:0;
}
.no-margin{
margin:0;
}
.no-margin-top{
padding-top:0;
}
.no-margin-btm{
margin-bottom:0;
}
.remove-margin-left{
margin-left:0;
}
.remove-margin-right{
margin-right:0;
}
.add-top-5 {
padding-top:5px;
}
.add-top-10 {
padding-top:10px;
}
.add-top-15 {
padding-top:15px;
}
.add-top-20 {
padding-top:20px;
}
.add-top-25 {
padding-top:25px;
}
.add-top-30 {
padding-top:30px;
}
.add-right-5 {
padding-right:5px;
}
.add-right-10 {
padding-right:10px;
}
.add-right-15 {
padding-right:15px;
}
.add-right-20 {
padding-right:20px;
}
.add-right-25 {
padding-right:25px;
}
.add-right-30 {
padding-right:30px;
}
.add-btm-5 {
padding-bottom:5px;
}
.add-btm-10 {
padding-bottom:10px;
}
.add-btm-15 {
padding-bottom:15px;
}
.add-btm-20 {
padding-bottom:20px;
}
.add-btm-25 {
padding-bottom:25px;
}
.add-bottom-30 {
padding-bottom:30px;
}
.add-left-5 {
padding-left:5px;
}
.add-left-10 {
padding-left:10px;
}
.add-left-15 {
padding-left:15px;
}
.add-left-20 {
padding-left:20px;
}
.add-left-25 {
padding-left:25px;
}
.add-left-30 {
padding-left:30px;
}
.add-5 {
padding:5px;
}
.add-10 {
padding:10px;
}
.add-15 {
padding:15px;
}
.add-20 {
padding:20px;
}
.add-25 {
padding:25px;
}
.add-30 {
padding:30px;
}
/* pull margins */
.pull-top-10 {
margin-top:-10px!important;
}
.pull-top-20 {
margin-top:-20px!important;
}
.pull-top-30 {
margin-top:-30px!important;
}
.pull-top-40 {
margin-top:-40px!important;
}
.pull-top-50 {
margin-top:-50px!important;
}
.pull-btm-10 {
margin-bottom:-10px!important;
}
.pull-btm-20 {
margin-bottom:-20px!important;
}
.pull-btm-30 {
margin-bottom:-30px!important;
}
.pull-btm-40 {
margin-bottom:-40px!important;
}
.pull-btm-50 {
margin-bottom:-50px!important;
}
.hs-left,.left-align {
float:left;
}
.hs-right,.right-align {
float:right;
}
.hs-center,.center-align {
float:none;
margin:0 auto;
text-align:center;
}
.text-center {
display: table;
margin: 0 auto;
text-align:center;
}
.text-left {
text-align:left;
}
.text-right {
text-align:right;
}
.hs-iframe {
overflow:hidden;
}
/* horizontal line */
#hs-container .color-hr .hr {
border-bottom-width:0px;
height: 1px;
border-bottom-width: 0px;
border-color:transparent;
}
#hs-container .color-hr-2 .hr{
border-bottom-width:0px;
height: 2px;
border-bottom-width: 0px;
border-color:transparent;
}
#hs-container .color-hr-3 .hr{
border-bottom-width:0px;
height: 3px;
border-bottom-width: 0px;
border-color:transparent;
}
#hs-container .grey-hr .hr {
border-bottom-width:0px;
height: 1px;
border-bottom-width: 0px;
border-color:transparent;
}
#hs-container .grey-hr-2 .hr{
border-bottom-width:0px;
height: 2px;
border-bottom-width: 0px;
border-color:transparent;
}
#hs-container .grey-hr-3 .hr{
border-bottom-width:0px;
height: 3px;
border-bottom-width: 0px;
border-color:transparent;
}
#hs-container .grey-hr .hr,#hs-container .grey-hr-2 .hr,#hs-container .grey-hr-3 .hr {
background:#ececec!important;
}
#hs-container .dark-hr .hr {
border-bottom-width:0px;
height: 1px;
border-bottom-width: 0px;
border-color:transparent;
}
#hs-container .dark-hr-2 .hr{
border-bottom-width:0px;
height: 2px;
border-bottom-width: 0px;
border-color:transparent;
}
#hs-container .dark-hr-3 .hr{
border-bottom-width:0px;
height: 3px;
border-bottom-width: 0px;
border-color:transparent;
}
#hs-container .dark-hr .hr,#hs-container .dark-hr-2 .hr,#hs-container .dark-hr-3 .hr {
background:#111!important;
}
#hs-container .white-hr .hr {
border-bottom-width:0px;
height: 1px;
border-bottom-width: 0px;
border-color:transparent;
}
#hs-container .white-hr-2 .hr{
border-bottom-width:0px;
height: 2px;
border-bottom-width: 0px;
border-color:transparent;
}
#hs-container .white-hr-3 .hr{
border-bottom-width:0px;
height: 3px;
border-bottom-width: 0px;
border-color:transparent;
}
#hs-container .white-hr .hr,#hs-container .white-hr-2 .hr,#hs-container .white-hr-3 .hr {
background:#fff!important;
}
.gutter-5 {
padding:5px;
}
.gutter-10 {
padding:10px;
}
.gutter-15 {
padding:15px;
}
.gutter-20 {
padding:20px;
}
.gutter-25 {
padding:25px;
}
.gutter-30 {
padding:30px;
}
.one-fourth {
width:25%;
float:left;
padding:0;
}
.one-third {
width:33.33333333%;
float:left;
padding:0;
}
.one-third-with-border {
width:32.33333333%;
float:left;
padding:0;
}
.border-right {
border-right:1px solid #ccc;
}
.is--flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding:0 10px;
}
.is--center{
display: flex;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
text-align: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
margin:0 10px;
min-width: 0;
width: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
align-self: stretch;
height: auto;
}
.is--left {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.is--right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
text-align: right;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-flex: 1;
-ms-flex: 1 1 0;
flex: 1;
}
@media only screen and (max-width: 1023px) {
.is--left-mobile {
justify-content: flex-start!important;
flex: 1!important;
}
.is--inherit-mobile {
-webkit-flex: inherit!important;
-ms-flex: inherit!important;
flex: inherit!important;
}
}
.is--flex0 {
-webkit-flex: 0;
-ms-flex: 0;
flex: 0;
}
.is--flex1 {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.is--flex2 {
-webkit-flex: 2;
-ms-flex: 2;
flex: 2;
}
.is--flex3 {
-webkit-flex: 3;
-ms-flex: 3;
flex: 3;
}
.is--flex4 {
-webkit-flex: 4;
-ms-flex: 4;
flex: 4;
}
/*** mid boxes with flex ***/
.half-fullwidth, .is-flex {
display: flex;
}
.col-flex {
flex: 1;
}
@media only screen and (max-width: 745px) {
.is-flex-block {
display:block;
}
.is-flex-column {
flex-direction:column;
}
.is-flex-reverse {
flex-direction:column-reverse;
}
}
.half-fullwidth:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.mid-box-left {
float:left;
width:50%;
margin: -5px 0 -5px -500%;
padding: 1.5em 0 1.5em 500%;
}
.mid-box-right {
float:right;
width:50%;
margin: -5px -500% -5px 0;
padding: 1.5em 500% 1.5em 0;
}
/*** display and hide widgets ***/
.only-mobile,.only-mobile-phone{
display:none;
border:none;
}
.matrix .only-mobile,.matrix .only-mobile-phone {
display:block;
border:5px solid #e67e22;
}
.hidden,.invisible,.cd-btn{
display:none;
}
.matrix .invisible {
display:block;
}
.matrix .cd-btn{
position:fixed;
bottom:50%;
left:0;
z-index:999999;
font-family: "Brandon Text",Asap,Verdana,Arial,sans-serif!important;
display:block;
text-align:left;
font-size:20px;
padding:0;
width:45px;
height:45px;
background-color: #4e75b9;
display: flex;
flex-direction: column;
justify-content: center;
border-radius:500px;
color:#fff!important;
text-decoration:none!important;
}
.matrix .cd-btn:before {
content: "+";
text-align:center;
font-size:40px;
font-family: "Brandon Text",Asap,Verdana,Arial,sans-serif!important;
font-weight:300;
}
.matrix .cd-btn:hover:before {
}
.matrix-msg {
background:#414141;
border-radius:0.3em;
color:#fff;
font-weight:400;
font-style:normal;
text-decoration:none;
padding:7px;
text-align: left;
font-family: "Brandon Text","Asap",Verdana,Arial,sans-serif!important;
font-size: 13px!important;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
#hs-container .invisible a:link,#hs-container .invisible a:visited{
color:#fff!important;
}
.admin-only {
display:none;
}
.matrix .admin-only {
display:block;
}
.large-inner .inner{
margin:0 auto;
position:relative;
max-width:1170px;
}
@media (min-width: 992px) {
.large-inner .inner {
width: 970px;
}
}
@media (min-width: 1200px) {
.large-inner .inner {
width: 1170px;
}
}
.mid-inner .inner {
width: 908px;
margin: 0 auto;
position:relative;
}
.small-inner .inner {
width: 702px;
margin: 0 auto;
position:relative;
}
.fa h1,.fa h2,.fa h3,.fa h4,.fa p,.fa span {
display:inline;
}
.wow:first-child {
visibility: hidden;
}
.opacity-8 {
background-color: rgba(0, 0, 0, 0.8);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000,endColorstr=#CC000000);/* for old IE */
}
.opacity-6 {
background-color: rgba(0, 0, 0, 0.6);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000,endColorstr=#CC000000);/* for old IE */
}
.opacity-4 {
background-color: rgba(0, 0, 0, 0.4);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000,endColorstr=#CC000000);/* for old IE */
}
.opacity-2 {
background-color: rgba(0, 0, 0, 0.2);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000,endColorstr=#CC000000);/* for old IE */
}
.w-100 {
width:100%;
}
.w-50 {
width:50%;
}
.rel {
position:relative;
}
/*** grid ***/
.col-12,.col-11,.col-10,.col-10,.col-9,.col-8,.col-7,.col-6,.col-5,.col-4,.col-3,.col-2,.col-1 {
position: relative;
}
.col-12 {
width: 100%;
}
.col-11 {
width: 91.66666667%;
}
.col-10 {
width: 83.33333333%;
}
.col-9 {
width: 75%;
}
.col-8 {
width: 66.66666667%;
}
.col-7 {
width: 58.33333333%;
}
.col-6 {
width: 50%;
}
.col-5 {
width: 41.66666667%;
}
.col-4 {
width: 33.33333333%;
}
.col-3 {
width: 25%;
}
.col-2 {
width: 16.66666667%;
}
.col-1 {
width: 8.33333333%;
}
.col-0 {
width: auto;
}
@media only screen and (min-width: 290px) and (max-width: 745px) {
.col-12,.col-11,.col-10,.col-10,.col-9,.col-8,.col-7,.col-6,.col-5,.col-4,.col-3,.col-2,.col-1 {width:100%;float:left;}
}
#content_area>div>div {
clear: both;
}
.h-overflow {
overflow:hidden;
}
.videowrapper {
position: relative;
padding-bottom: 56.25%;/* 16:9 */
padding-top: 0px;
height: 0;
}
.videowrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
}
.map-responsive{
overflow:hidden;
padding-bottom:56.25%;
width: 100%;
margin: 0 auto;
position: relative;
height:0;
}
.map-responsive iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
.lazy{
opacity: 0;
transition: opacity 0.5s ease 0.5s;
-webkit-transform: translate3d(0,0,0);
}
.loaded{
opacity: 1;
}
.z-999 {
z-index:999999;
}
.absolute-top-right {
position:absolute;
right:0;
top:0;
}
.absolute-top-left {
position:absolute;
left:0;
top:0;
}
.absolute-btm-left {
position:absolute;
left:0;
bottom:0px;
}
.absolute-btm-right {
position:absolute;
bottom:0;
right:0;
}
.absolute-center {
width: 100%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 5%; bottom: 0; right: 5%;
}
.cc-box {
box-sizing: border-box;
}
a.div-link {
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
}
.has-shadow {
box-shadow: 0px 17px 35px rgba(74,74,115,0.1), 0px 5px 15px rgba(0,0,0,0.07);
}
.has-text-shadow {
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
}
.outlined {
position:relative;
}
.outlined::before{
background-color: rgba(85,85,85, 0.2);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000,endColorstr=#CC000000);/* for old IE */
position: absolute;
bottom: -5px;
right: -5px;
content: '';
display: block;
width: 100%;
height: 100%;
}
.slide-up-hover {
transition: transform 0.3s ease;
}
.slide-up-hover:hover {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
/* custom lines */
.line {
height:2px;
background:#000;
width:100%;
margin:5px 0;
position:relative;
}
.medium-line{
width:50%;
}
.small-line {
width:50px;
}
.slim-line {
height:1px;
}
.bold-line {
height:5px;
}
.has-outline {
border-bottom: 3px double white;
}
@media only screen and (max-width: 1023px) {
#cc-inner .big {
font-size:inherit!important;
}
}
The classes used only in HTML folder (design> custom template> html) and defines the global section styles.
form-white | contact form for white background |
form-dark | contact form for dark background |
o-form | contact form for colored background (opacity) |
mid-round-btn | default Jimdo buttons with border-radius:5px |
round-btn | default Jimdo buttons with border-radius:500px |
dark-outline-btn | default Jimdo buttons with dark outlined styles |
white-outline-btn | default Jimdo buttons with white outlined styles |
color-hr | horizontal line with accent background color |
dark-hr | horizontal line with dark background color |
white-hr | horizontal line with white background color |
grey-hr | horizontal line with grey background color |
With the body classes you can change the global styles of a specific page ( Settings> Edit Head> Select a page)
no-hero | hide the hero image |
main-page | make your hero image the same size like in homepage |
no-hero-overlay | remove the hero overlay |
has-mask-hero | apply the absolute position for your hero section |
has-slope | display the slope element in hero section |
hide-subnav | remove the sub-navigation (breadcrumbs) |
blog-page | apply the narrow content (for the blog pages) |
The template configurations have the same functions as the body classes but applied for the whole website.
For example, with body class no-hero you can hide the hero image from a specific page while the same class used directly in HTML ( Design> Custom Template> HTML) will remove the hero image from the whole website.
no-hero | hide the hero image |
main-page | make your hero image the same size like in homepage |
no-global-hero | hide the hero image in all pages except the homepage |
has-global-hero | display the hero image only in specific page |
no-hero-overlay | remove the hero overlay |
has-mask-hero | apply the absolute position for your hero section |
has-slope | display the slope element in hero section |
has-custom-hero | remove the sub-navigation (breadcrumbs) |
has-custom-header | apply the narrow content (for the blog pages) |
large-inner | make you content 980px width ( default ) |
has-large-content | make your content 95vw ( max-width 1500px ) |
has-play-of-columns | activate the play of columns option |
has-left-nav | navigation left alignment |
has-center-nav | navigation center alignment |
has-right-nav | navigation right alignment |
has-custom-text |
apply different font style for the global styles |
has-custom-blog |
the default blog page has narrow content |
The classes available as Matrix variables and can be used only inside the Columns module
draggable-logo | applied only for logo or header sections |
draggable-hero | applied only for hero section |
has-padding | removes the default 5px padding from any Jimdo module |
is-tile | display tile widget |
is-overlay | display the overlay widget |
is-overlay is-white | display the overlay widget with white caption background |
is-teaser | applied for Text with Photo module |
is-fullwidth | display fullwidth any Jimdo element |
hs-fullwidth | display the fullwidth background |