/*
this will have all the style that can be affected by the amea setting,
so most typography will be here
*/
body,#layout-wrapper .h1,#layout-wrapper .h2,#layout-wrapper .h3,#layout-wrapper .h4,#layout-wrapper .h5,#layout-wrapper .h6,
#layout-wrapperh1,#layout-wrapper h2,#layout-wrapper h3,#layout-wrapper h4,#layout-wrapper h5,#layout-wrapper h6 
{
    font-family: var(--font-family);
    
    color: var(--font-color);
    word-spacing: var(--word-spacing);
}
body #layout-wrapper {
    line-height: var(--line-height);
    font-size: var(--font-size-8);
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
    line-height: var(--line-height-headers);
}
.info-text {
  letter-spacing: var(--letter-spacing-35);
  font-size: var(--font-size-11)!important;
}
.footer{
    color:var(--footer-font-color);
}
.spacing-35{
    letter-spacing: var(--letter-spacing-35); 
}
.spacing-50{
    letter-spacing: var(--letter-spacing-50);
}
.spacing-150{
    letter-spacing: var(--letter-spacing-150);
}

.bg-gray{
    background-color: var(--bg-gray);
}

/* the sname of the size classes coresponds to pt, ie size-10 means 10pt in pixels */
.size-8{
    font-size: var(--font-size-8)!important;
}
.size-9{
    font-size: var(--font-size-9)!important;
}
.size-10{
    font-size: var(--font-size-10)!important;
}
.size-11{
    font-size: var(--font-size-11)!important;
}
.size-12{
    font-size: var(--font-size-12)!important;
}
.size-14{
    font-size: var(--font-size-14)!important;
}
.size-16{
    font-size: var(--font-size-16)!important;
}
.size-18{
    font-size: var(--font-size-18)!important;
}
.size-21{
    font-size: var(--font-size-21)!important;
}
.size-32{
    font-size: var(--font-size-32)!important;
}
.size-10-responsive{
    font-size: var(--font-size-10-responsive)!important;
    
}