/* we can remove this once we load Font locally */
/*
@import url('https://fonts.googleapis.com/css?family=Poppins');
*/
/*
@import url('https://fonts.googleapis.com/css?family=EB+Garamond');
@import url('https://fonts.googleapis.com/css?family=Special+Elite');
*/


/* poppins-regular - latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    
    src: local(''),
         url('../../../fonts/poppins-v19-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('../../../fonts/poppins-v19-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* poppins-700 - latin */
  
  @font-face {
    font-family: 'Poppins-700';
    font-style: bold;
    font-weight: 700;
    font-display: swap;
    src: local(''),
         url('../../../fonts/poppins-v19-latin-700.woff2') format('woff2'), 
         url('../../../fonts/poppins-v19-latin-700.woff') format('woff'); 
  }
  

    html
    {
        padding: env(safe-area-inset);
    }

    html, 
    body { 
        margin: 0; 
        padding: 0; 
        height: 100%; 
        background-color: var(--colour-tw-neutral-050);
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-display: swap;
    }

    h1, h2, h3, h4, h5, h6
    {
        font-weight: 400;
        font-weight: bold;
        font-family: 'Poppins', Helevtica, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        line-height: 1.4;
        font-display: swap;
        -webkit-font-smoothing:antialiased;
        text-rendering: optimizeLegibility;
        
    }

    h1, h2, h3
    {
        letter-spacing: -2px;
    }

    h4
    {
        letter-spacing: -1px;
    }


/*
//
//    .col-sm-* 
//    (small devices - screen width equal to or greater than 576px)
//
//  var(--var-grid-breakpoints-sm)
//
*/



    h1 span, 
    h2 span, 
    h3 span, 
    h4 span, 
    h5 span, 
    h6 span
    {
        display:block;
    }


    h1 {
        font-size: var(--var-font-size-h1);
        color: var(--var-font-color-h1);
        /*
        line-height: var(--var-font-line-height-h1, 1.5em);
        margin-bottom: var(--var-font-m-b-h1, 1.5em);
        */
    }

    h2 {
        font-size: var(--var-font-size-h2);
        color: var(--var-font-color-h2);
        /*
        line-height: var(--var-font-line-height-h2, 1.5em);
        margin-bottom: var(--var-font-m-b-h2, 1.5em);
        */        
        font-size: var(--var-font-size-p, 10px);
        margin-bottom: var(--var-font-m-b-article-title, 1.5em);

    }


    h3 {
        font-size: var(--var-font-size-h3);
        color: var(--var-font-color-h3);
        /*
        line-height: var(--var-font-line-height-h3, 1.5em);
        margin-bottom: var(--var-font-m-b-h3, 1.5em);
        */        
    }


    h4 {
        font-size: var(--var-font-size-h4);
        color: var(--var-font-color-h4);
        /*
        line-height: var(--var-font-line-height-h4, 1.5em);
        margin-bottom: var(--var-font-m-b-h4, 1.5em);
        */        
    }


    h5 {
        font-size: var(--var-font-size-h5);
        color: var(--var-font-color-h5);
        /*
        line-height: var(--var-font-line-height-h6, 1.5em);
        margin-bottom: var(--var-font-m-b-h6, 1.5em);
        */        
    }

    h6 {
        font-size: var(--var-font-size-h6);
        color: var(--var-font-color-h6);
        /*
        line-height: var(--var-font-line-height-h6, 1.5em);
        margin-bottom: var(--var-font-m-b-h6, 1.5em);
        */        
        text-decoration: underline;
        
    }


    p
    article p,
    section p,
    footer p
    {
        font-size: var(--var-font-size-p);
        color: var(--var-font-color-p);
        /*
        line-height: var(--var-font-line-height-p, 1.5em);
        margin-bottom: var(--var-font-m-b-p, 1.5em);
        */        
    }

    li
    article li,
    section li,
    footer li
    {
        font-size: var(--var-font-size-p);
        color: var(--var-font-color-p);
        /*
        line-height: var(--var-font-line-height-li, 1.5em);
        margin-bottom: var(--var-font-m-b-li, 1.5em);
        */            

        margin-bottom: 1rem;
        line-height: 1.5;
    }

    li li
    article li li,
    section li li,
    footer li li
    {
        font-size: var(--var-font-size-p);
        color: var(--var-font-color-p);
        /*
        line-height: var(--var-font-line-height-li-li, 1.5em);
        margin-bottom: var(--var-font-m-b-li-li, 1.5em);
        */   
        margin-bottom: 1rem;
        line-height: 1.5;                 
    }    


    hr
    {
        margin: 2.5vh 0px 10vh;
        border: none;
        background: none;
        border-bottom: 1px dashed #999;
    }



    a:focus,
    .btn:focus
    {
            box-shadow: var(--var-tabbed-box-shadow);
            outline-color: var(--var-tabbed-outline-color);
            color: var(--var-tabbed-text-color);
            background-color: var(--var-tabbed-text-bg-color);  
                      
    }

    a:focus:not(.btn)
    {
            padding:3px 6px 6px;
    }


    a[target="_blank"] i {
        margin-left: 0.4rem;
        margin-right: 0.4rem;
        color:var(--var-font-color-h2);
        font-size: 80%;
    }


        a.btn
        {
            text-transform: uppercase;
            padding-bottom: 0.5rem;
            padding-right: 1rem;
            font-weight: bold;
        }

        a.btn i
        {
            margin-right: 0.5rem;
        }

        a.btn i,
        .bi::before,
        [class^="bi-"]::before,
        [class*=" bi-"]::before 
        {
          display: inline-block;
          font-family: bootstrap-icons !important;
          font-style: normal;
          font-weight: normal !important;
          font-variant: normal;
          text-transform: none;
          line-height: 1;
          vertical-align: baseline;          
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;

        }

        a.btn i.bi
        {
            font-size:1rem;
            margin-right: 0.5rem;
        }        


        .bi {
            fill: currentColor;
            font-display:swap;
          }        



:root {

    
}