:root { 

    /* grid */


    /*
    //    FONTS
    //  =========
    //
    //  --var-font-*-*
    //
    */

        --var-font-family-base: -apple-system, BlinkMacSystemFont, “Segoe UI”, “Roboto”, “Oxygen”, “Ubuntu”, “Cantarell”, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, sans-serif;
        --var-font-family-serif: var(--var-font-family-base);
        --var-font-family-sans-serif: var(--var-font-family-base);
        --var-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono";
        --var-font-family-cursive:  var(--var-font-family-base);
        --var-font-family-fantasy:  var(--var-font-family-base);
        --var-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

        /*
        --var-font-size-root: 16px;
        --var-font-size-base: 1rem;
        --var-font-size-h1:  150px;
        --var-font-size-h2:  100px;
        --var-font-size-h3:  64px;
        --var-font-size-h4:  32px;
        --var-font-size-h5:  20px;
        --var-font-size-h6:  20px;
        --var-font-size-p:   20px;
        */

        --var-font-rem-font-weight: normal;       /*      */
        --var-font-h1-font-weight:  normal;       /*      */
        --var-font-h2-font-weight:  normal;       /*      */
        --var-font-h3-font-weight:  normal;       /*      */
        --var-font-h4-font-weight:  normal;       /*      */
        --var-font-h5-font-weight:  normal;       /*      */
        --var-font-h6-font-weight:  normal;       /*      */
        --var-font-p-font-weight:   normal;       /*      */

    /* colours */
    /* images */
        /*
        --var-img-header-width:     700px;
        */


        --var-tabbed-box-shadow: 0px 0px 5px 5px hotpink;
        --var-tabbed-outline-color: hotpink;

        --var-tabbed-text-color: black;
        --var-tabbed-text-bg-color: yellow;    


}



/*
//
//    .col-xs-* 
//    (extra small devices - screen width equal to or greater than 0)
//
//  var(--var-grid-breakpoints-xs)
//
*/
@media (min-width: 0px) {

    :root {

        --var-font-size-root: 16px;
        --var-font-size-base: 1rem;
        --var-font-size-h1:  85px;
        --var-font-size-h2:  10px;
        --var-font-size-h3:  28px;
        --var-font-size-h4:  22px;
        --var-font-size-h5:  16px;
        --var-font-size-h6:  16px;
        --var-font-size-p:   16px;


        --var-font-size-whisper: 32px;

        /*
        --var-font-line-height-article-title:           1.5em;
        --var-font-line-height-article-opening-big:     1.5em;
        --var-font-line-height-article-opening-small:   1.5em;
        */
        

        --var-font-m-b-article-title:                   30px;
        --var-font-m-b-article-opening-big:             30px;
        --var-font-m-b-article-opening-small:           60px;



        --var-img-header-width:     300px;
        --var-img-card-icon-width:  200px;
        

        --var-layout-spacer-between-rows:   15px;

        --var-layout-quote-movement: 40px;

    }
    
}


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

    :root {

        --var-font-size-h1:  85px;

        --var-font-size-h3:  32px;  /* make variable via clamp 34-42 */
        --var-font-size-h4:  24px;

        --var-font-size-whisper: 40px;

        --var-img-header-width:     325px;
        
    }
       
}



/*
//
//  .col-md-* 
//  (medium devices - screen width equal to or greater than 768px)
//
//  var(--var-grid-breakpoints-md)
//
*/
@media (min-width: 768px) {

    :root {

        --var-font-size-h1:  130px;


        --var-font-size-h3:  42px;
        --var-font-size-h4:  28px;

        --var-font-size-whisper: 70px;

        --var-img-header-width:     400px;

        --var-font-m-b-article-title:                   45px;
        --var-font-m-b-article-opening-big:             45px;
        --var-font-m-b-article-opening-small:           75px;

        --var-layout-quote-movement: 60px;

        
    }

}



/*
//
//  .col-lg-*
//  (large devices - screen width equal to or greater than 992px)
//
//  var(--var-grid-breakpoints-lg)
//
*/
@media (min-width: 992px) {

    :root {

        --var-font-size-h1:  165px;

        --var-font-size-h3:  52px;
        --var-font-size-h4:  30px;

        --var-font-size-h5:  18px;
        --var-font-size-h6:  18px;
        --var-font-size-p:   18px;        

        --var-font-size-whisper: 95px;

        --var-img-header-width:     450px;

        /*
        --var-font-m-b-article-title:                   45px;
        --var-font-m-b-article-opening-big:             45px;
        --var-font-m-b-article-opening-small:           75px;
        */

        --var-layout-quote-movement: 80px;

        
    }

}



/*
//
//  .col-xl-* 
//  (xlarge devices - screen width equal to or greater than 1200px)
//
//  var(--var-grid-breakpoints-xl)
//
*/
@media (min-width: 1200px) {

    :root {

        --var-font-size-h1:  195px;


        --var-font-size-h3:  64px;
        --var-font-size-h4:  32px;

        --var-font-size-h5:  20px;
        --var-font-size-h6:  20px;
        --var-font-size-p:   20px;
        
        --var-font-size-whisper: 110px;

        --var-img-header-width:     525px;

        --var-layout-quote-movement: 100px;
    }

}



/*
//
//  .col-xxl-* 
//  (xxlarge devices - screen width equal to or greater than 1400px)
//
//  var(--var-grid-breakpoints-xxl)
//
*/
@media (min-width: 1400px) {

    :root {


        --var-font-size-h1:  220px;
        --var-font-size-h2:  110px;
        --var-font-size-h3:  62px;
        --var-font-size-h4:  32px;

        --var-font-size-h5:  20px;
        --var-font-size-h6:  20px;
        --var-font-size-p:   20px;
        
        --var-font-size-whisper: 120px;

        --var-font-line-height-article-title:           52px;
        --var-font-line-height-article-opening-big:     1rem;
        --var-font-line-height-article-opening-small:   1rem;

        --var-font-m-b-article-title:                   45px;
        --var-font-m-b-article-opening-big:             45px;
        --var-font-m-b-article-opening-small:           60px;


        /*
        --var-font-m-b-article-title:                   2.5em;
        --var-font-m-b-article-opening-big:             2.5rem;
        --var-font-m-b-article-opening-smallXXX:           3em;
        */


        --var-img-header-width:     550px;

        
    }


}



/*
//
//  .col-uw-* 
//  (xxlarge devices - screen width equal to or greater than 1400px)
//
//  var(--var-grid-breakpoints-xxl)
//
*/
@media (min-width: 1600px) {

    :root {

        --var-font-size-h1:  275px;

        --var-font-line-height-article-title:           52px;
        --var-font-line-height-article-opening-big:     1rem;
        --var-font-line-height-article-opening-small:   1rem;

        --var-font-m-b-article-title:                   90px;
        --var-font-m-b-article-opening-big:             60px;
        --var-font-m-b-article-opening-small:           135px;


    }


}



/*
//
//  .col-uw-* 
//  (xxlarge devices - screen width equal to or greater than 1900px)
//
//  var(--var-grid-breakpoints-xxl)
//
*/
@media (min-width: 1899px) {

    :root {
        --var-font-size-h1:  325px;
    }


}





/*
@import url("test-bootstrap-width.css");
*/

.row .row
{
    border:0px solid orange;
    max-width:105%; /* THis feels like a shocking hack.... go for 99% if needed, i dunno whats going on here */
}