/* -------------------------------- 
Typography
-------------------------------- */
 

html { 
  font-size: var(--text-base-size); 
  overflow-x: hidden; /* for avoid horizontal scroll in gutenberg wide images */
  scroll-behavior: smooth;
} 

body {
    letter-spacing: 0.01em;
    font-family: var(--font-primary);
    color: hsla(var(--dark),.6);
    height: 100%;
    width: 100%;
    line-height: var(--body-line-height);
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    background:var(--light);
} 


a  { text-decoration:none; outline:0; color: hsla(var(--brand-second),1); font-weight: 500 }
a:hover, 
a:active, 
a:not([class*="button_"]):hover, 
a:not([class*="button_"]):active  { color:hsla(var(--brand-second),.7); }



h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-secondary);
    color: hsla(var(--dark),1);
    margin:0; 
    line-height: var(--heading-line-height);
    font-weight: 400;
}

h1, h2, h3, h4 {  font-weight: 600; }


p { 
line-height: var(--body-line-height); 
margin: 0 0 var(--space-m);
font-weight: 300;

font-family: var(--font-secondary); 
padding:0; 
color:hsla(var(--dark),.8); 
font-size: calc(var(--text-m) - 3px);

}

p:last-child { margin-bottom: 0; }



h1, .text-xxl      { font-size: var(--text-xxl); }
h2, .text-xl       { font-size: var(--text-xl); }
h3, .text-l        { font-size: var(--text-l); }
h4, .text-m        { font-size: var(--text-m); }
h5, .text-s        { font-size: var(--text-s); }
h6, .text-xs       { font-size: var(--text-xs); }
small, .text-xxs   { font-size: var(--text-xxs); }

.text-large        { font-size: var(--text-large); }
.text-huge         { font-size: var(--text-huge); }
.text-huge2x       { font-size: var(--text-huge2x:); }
 
/*p small { line-height: 18px; color:hsl(var(--dark)); display: block; }*/

sup {
  font-size: var(--text-xxs);
    top: -.2em;
    color:hsl(var(--dark));
}


h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p { margin-top: var(--space-s);}
p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: var(--space-l);}
h2 + h3, h3 + h4                               { margin-top: var(--space-m);}



/*********************** LISTS */

 
ul, ol         { margin-bottom: var(--space-m); }
ul, ol         { list-style-position: outside; padding-left: 24px; }
ul             { list-style-type: disc; }
ol             { list-style-type: decimal; }
ul li, ol li   { line-height: var(--body-line-height); position: relative; font-weight: 300;   }

ul ul, ol ol, ul ol, ol ul { margin-top: 0em; margin-bottom: 0em; }


 /*********************** BLOCKQUOTE */
 

 

/*********************** TEXT UTILITIES */

b, strong              { font-weight: bold; }
em                     { font-style: italic; }
u                      { text-decoration: underline; }

.text-center           { text-align: center; }
.text-left             { text-align: left; }
.text-right            { text-align: right; }
.left-center           { text-align: left; } 
.right-center          { text-align: right; } 
.text--dark            { color: hsla(var(--dark),1) }

.pretitle,
.posttitle             { display: block; font-family: var(--font-primary); font-weight:400; line-height: var(--body-line-height); 
                         text-transform: uppercase; color:hsla(var(--brand-second),1); }    

.pretitle              { margin-bottom: var(--space-xs); }
.posttitle             { margin-top: var(--space-xs); }     

.pretitle::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 2px;
    background-color: hsla(var(--brand-second),1);
    margin-right: var(--space-xs);
    position: relative;
    top: -4px;
}
 

.meta p, 
p.meta                  { font-family: var(--font-secondary); font-weight:300; padding:0; 
                         line-height: var(--body-line-height); font-size: calc(var(--text-m) - 3px); color:hsla(var(--dark),.8); } 

.meta p strong, 
.meta strong            { font-weight:400; color:hsla(var(--dark),1); } 
  

.truncate              { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ellipses {
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}


.top-line-primary:before,
.bottom-line-primary:after,
.top-line-second:before,
.bottom-line-second:after  {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background-color: hsl(var(--brand));
  margin:0 0 var(--space-l);
  position: absolute;
}


.top-line-second:before   { background-color: hsl(var(--brand-second)); }
.bottom-line-second:after { background-color: hsl(var(--brand-second)); margin:var(--space-xs) 0 var(--space-s); }


/*---TEXT COLUMNS */

.columns {
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  -webkit-column-gap: var(--space-l);
     -moz-column-gap: var(--space-l);
          column-gap: var(--space-l);
}


 
@media only screen and (max-width:59.9375em) {

.left-center, .right-center   { text-align: center; } 

.columns {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
}

}
 

@media only screen and (max-width:31.250em){ 

.columns {
  -webkit-column-count: 1;
     -moz-column-count: 1;
          column-count: 1;
}


}