/* ==========================================================================
   Variables                                               
   ========================================================================== */


/**
 * Find the most consistently used font styles, colors, and container widths 
 * for your site and assign them to the jinja variables below for easy use 
 * and reference. 
 *
 * Apply the variable as shown below.  Ignore the jingja comment tags.
 * to use these variables inside of another coded file:
 *  
 * 
 * obviously change the #'s to %  
 */

/* Colors */
  /* BIF blue */
  /* BIF Dark blue    */
  /* BIF Gold */
  /* BIF dark gold */
  /* BIF red */
  /* BIF dark red */

    /*  */
    /*  */
    /*  */
    /*  */
    /*  */
    /*  */

/* Typography */

            /*  */

                         /*  */
                          /*  */
 /*  */

/* Containers */
 /* Used on '.page-center' in 'Base' and in the 'Portrait tablet to landscape and desktop' media query */
 /* Add some left/right padding to prevent content from bumping up to the canvas edge beyond maxwidth */

/*Media Queries
* xs,sm,lmd,md,lg,xl all denote screen size range
* up, down, denote the min and max for that range
*/
/*Extra Small - phones*/

/*Small - Tablets*/


/*Lower Medium - large tablets, small desktop/laptops*/


/*Medium - Desktop/Laptop*/


/*Large - Desktop/Laptop*/


/*Extra Large - Wides screen desktop and laptops*/


/*Buttons*/
/*used on .btn class to round buttons*/

/* ==========================================================================
   Macros                                                  
   ========================================================================== */


/** 
  * Create jinja macros for CSS3 properties that need browser prefixes.
  *
  * Apply the style as shown below on it's own CSS property line.  
  * Ignore the jinja comment tags. 
  *
  * 
  */

 

/** 
  * Example of how to apply the above macro (ignore the jinja comment tags):
  *
  * a {
  *   color: red;
  *   font-size: 12px;
  *    
  * }
  */


/** 
  * Example of how to apply the above macro (ignore the jinja comment tags):
  *
  * .container {
  *   color: red;
  *   font-size: 12px;
  *    
  * }
  * .container .child {
  *   color: red;
  *   font-size: 12px;
  *    
  * }
  *
  * This will cause .child to be vertically and horizontally centered within .container
  */