/** 
*
*  Empresa Responsive Grid CSS
*  Version: 0.2;
*  Author(s): Robin Turner
*
*  Config: values to change are commented #CONFIG#
*
*/


/**
*
*  Large & Base - Large Desktops & high resolution devices 
*
*  These styles filter down into lower sizes
* 
*/


/*  Container   */

.container
{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  margin: 0 auto;
  max-width: 1024px; /* #CONFIG# - The maximum width the site will ever be, change to 100% for a full width site */
  padding-left: 32px; /* #CONFIG # - The padding on the left hand side of the container */
  padding-right: 32px; /* #CONFIG # - The padding on the right hand side of the container */
}


/*  Show and hides  */

.hide,
.hide_Large
{
  display: none;
}

.show,
.show_Large
{
  display: block;
}

a.show,
a.show_Large,
span.show,
span.show_Large
{
  display: inline;
}

/* Display */

.block {
    display: block !important;
}

.inline {
    display: inline !important;
}

.inlineBlock {
    display: inline-block !important;
}

/*  Floats  */

.floatLeft,
.floatLeft_Lrg
{
  float: left;
}

.floatRight,
.floatRight_Lrg
{
  float: right;
}

/*  Aligns */

.lefted
{
  text-align: left;
}

.righted
{
  text-align: right;
}

.centered
{
  text-align: center;
}


/*  Clear  */

.clear,
.clear_Lrg
{
  clear: both;
  content: "";
  height: 0;
  line-height: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

.clear_Med,
.clear_Sma,
.clear_XSma
{
  display: none;
  clear: none;
}

.clearContainer:before,
.clearContainer:after,
.colRow:before,
.colRow:after
{
  content: " ";
  display: table;
}

.clearContainer:after,
.colRow:after
{
  clear: both;
}


/*  Collumns  */

.colRow
{
  margin-left: -12px; /* #CONFIG# - Half of the collumn gutter size */
  margin-right: -12px; /* #CONFIG# - Half of the collumn gutter size */
  position: relative;
  width: auto;
}

.colRow .col
{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  float: left;
  margin-bottom: 0; /* #CONFIG# - Bottom margin size for collumns */
  padding-left: 12px; /* #CONFIG# - Half of the collumn gutter size */
  padding-right: 12px; /* #CONFIG# - Half of the collumn gutter size */
  min-height: 30px;
}

    .colRow .col img { max-width: 100%; }

.col01
{
  width: 8.333333333333332%;
}

.col02
{
  width: 16.666666666666664%;
}

.col03
{
  width: 25%;
}

.col04
{
  width: 33.33333333333333%;
}

.col05
{
  width: 41.66666666666667%;
}

.col06
{
  width: 50%;
}

.col07
{
  width: 58.333333333333336%;
}

.col08
{
  width: 66.66666666666666%;
}

.col09
{
  width: 75%;
}

.col10
{
  width: 83.33333333333334%;
}

.col11
{
  width: 91.66666666666666%;
}

.col12
{
  width: 100%;
}

.col .colColour
{
  background-color: #000;
  color: #fff !important;
  min-height: 200px;
  padding: 10px;
}

/*.col > *:last-child,
.col > p:only-child,
.col article > *:last-child,
.col article > p:only-child
{
margin-bottom: 0;
}*/

/**
*
*  Medium - New Phones & Tablets
* 
*/

@media (max-width: 1024px) /* #CONFIG# - Maximum width for medium devices, any device larger than this is large/base */
  {
    .centered_Med { text-align: center; }
  .lefted_Med { text-align: left; }
  .righted_Med { text-align: right; }

  /*  Container   */
  
  .container,
  .container_Med
  {
    margin: 0;
    padding-left: 20px; /* #CONFIG # - The padding on the left hand side of the container */
    padding-right: 20px; /* #CONFIG # - The padding on the right hand side of the container */
  }
  
  /*  Show and hides  */
  
  .hide_Med
  {
    display: none;
  }
  
  .show_Med
  {
    display: block;
  }
  
  a.show_Med,
  span.show_Med
  {
    display: inline;
  }
  
  /*  Floats  */
  
  .floatLeft_Med
  {
    float: left;
  }
  
  .floatRight_Med
  {
    float: right;
  }
  
  .floatLeft_Lrg,
  .floatRight_Lrg
  {
    float: none;
  }
  
  
  /*  Clear  */
  
  .clear_Med
  {
    clear: both;
    content: "";
    display: block;
    height: 0;
    line-height: 0;
    margin: 0;
    overflow: hidden;
    padding: 0;
  }
  
  .clear_Lrg,
  .clear_Sma,
  .clear_XSma
  {
    display: none;
    clear: none;
  }
  
  /*  Collumns  */
  
  .colRow
  {
    margin-left: -12px; /* #CONFIG# - Medium gutter size */
    margin-right: -12px; /* #CONFIG# - Medium gutter size */
  }
  
  .colRow .col
  {
    margin-bottom: 0; /* #CONFIG# - Bottom margin size for collumns */
    padding-left: 12px; /* #CONFIG# - Half of the collumn gutter size */
    padding-right: 12px; /* #CONFIG# - Half of the collumn gutter size */
  }
  
  .col00_Med
  {
    display: none;
    width: 0%;
  }
  
  .col01_Med
  {
    width: 8.333333333333332%;
  }
  
  .col02_Med
  {
    width: 16.666666666666664%;
  }
  
  .col03_Med
  {
    width: 25%;
  }
  
  .col04_Med
  {
    width: 33.33333333333333%;
  }
  
  .col05_Med
  {
    width: 41.66666666666667%;
  }
  
  .col06_Med
  {
    width: 50%;
  }
  
  .col07_Med
  {
    width: 58.333333333333336%;
  }
  
  .col08_Med
  {
    width: 66.66666666666666%;
  }
  
  .col09_Med
  {
    width: 75%;
  }
  
  .col10_Med
  {
    width: 83.33333333333334%;
  }
  
  .col11_Med
  {
    width: 91.66666666666666%;
  }
  
  .col12_Med
  {
    width: 100%;
  }
  
  .col .colColour
  {
    background-color: blue;
  }
}

/**
*
*  Small - Phones & Tablets
* 
*/

@media (max-width: 767px) /* #CONFIG# - Maxiumum width for small devices, any device larger than this is medium */
  {
    .noPaddingL_Sma {
        padding-left: 0 !important;
    }

    .centered_Sma { text-align: center; }
  .lefted_Sma { text-align: left; }
  .righted_Sma { text-align: right; }

  /*  Container   */
  
  .container,
  .container_Sma
  {
    padding-left: 20px; /* #CONFIG # - The padding on the left hand side of the container */
    padding-right: 20px; /* #CONFIG # - The padding on the right hand side of the container */
  }
  
  
  /*  Show and hides  */   
  
  .hide_Sma
  {
    display: none;
  }
  
  .show_Sma
  {
    display: block;
  }
  
  a.show_Sma,
  span.show_Sma
  {
    display: inline;
  }
  
  
  /*  Floats  */
  
  .floatLeft_Sma
  {
    float: left;
  }
  
  .floatRight_Sma
  {
    float: right;
  }
  
  .floatLeft_Lrg,
  .floatRight_Lrg,
  .floatLeft_Med,
  .floatRight_Med
  {
    float: none;
  }
  
  
  /*  Clear  */
  
  .clear_Sma
  {
    clear: both;
    content: "";
    display: block; 
    height: 0;
    line-height: 0;
    margin: 0;
    overflow: hidden;
    padding: 0;
  }
  
  .clear_Lrg,
  .clear_Med,
  .clear_XSma
  {
    clear: none;
    display: none;
  }
  
  
  /*  Collumns  */
  
  .colRow
  {
    margin-left: -8px; /* #CONFIG# - Half of the collumn gutter size */
    margin-right: -8px; /* #CONFIG# - Half of the collumn gutter size */
  }
  
  .colRow .col
  {
    margin-bottom: 0; /* #CONFIG# - Small bottom margin size for collumns */
    padding-left: 8px; /* #CONFIG# - Half of the collumn gutter size */
    padding-right: 8px; /* #CONFIG# - Half of the collumn gutter size */
  }
  
  .col00_Sma
  {
    display: none;
    width: 0%;
  }
  
  .col01_Sma
  {
    width: 8.333333333333332%;
  }
  
  .col02_Sma
  {
    width: 16.666666666666664%;
  }
  
  .col03_Sma
  {
    width: 25%;
  }
  
  .col04_Sma
  {
    width: 33.33333333333333%;
  }
  
  .col05_Sma
  {
    width: 41.66666666666667%;
  }
  
  .col06_Sma
  {
    width: 50%;
  }
  
  .col07_Sma
  {
    width: 58.333333333333336%;
  }
  
  .col08_Sma
  {
    width: 66.66666666666666%;
  }
  
  .col09_Sma
  {
    width: 75%;
  }
  
  .col10_Sma
  {
    width: 83.33333333333334%;
  }
  
  .col11_Sma
  {
    width: 91.66666666666666%;
  }
  
  .col12_Sma
  {
    width: 100%;
  }
  
  .col .colColour
  {
    background-color: green;
  }
}

/**
*
*  Extra Small - Old Phones
* 
*/

@media (max-width: 320px) /* #CONFIG# - Maxiumum width for small devices, any device larger than this is medium */
  {
    .centered_XSma { text-align: center; }
  .lefted_XSma { text-align: left; }
  .righted_XSma { text-align: right; }

  /*  Container   */
  
  .container,
  .container_XSma
  {
    padding-left: 10px; /* #CONFIG # - The padding on the left hand side of the container */
    padding-right: 10px; /* #CONFIG # - The padding on the right hand side of the container */
  }
  
  /*  Show and hides  */
  
  .hide_XSma
  {
    display: none;
  }
  
  .show_XSma
  {
    display: block;
  }
  
  a.show_XSma,
  span.show_XSma
  {
    display: inline;
  }
  
  
  /*  Floats  */
  
  .floatLeft_XSma
  {
    float: left;
  }
  
  .floatRight_XSma
  {
    float: right;
  }
  
  .floatLeft_Lrg,
  .floatRight_Lrg,
  .floatLeft_Med,
  .floatRight_Med,
  .floatLeft_Sma,
  .floatRight_Sma
  {
    float: none;
  }
  
  
  /*  Clear  */
  
  .clear_XSma
  {
    clear: both;
    content: "";
    display: block; 
    height: 0;
    line-height: 0;
    margin: 0;
    overflow: hidden;
    padding: 0;
  }
  
  .clear_Lrg,
  .clear_Med,
  .clear_Sma
  {
    clear: none;
    display: none;
  }
  
  
  /*  Collumns  */
  
  .colRow
  {
    margin-left: -4px; /* #CONFIG# - Half of the collumn gutter size */
    margin-right: -4px; /* #CONFIG# - Half of the collumn gutter size */
  }
  
  .colRow .col
  {
    margin-bottom: 0; /* #CONFIG# - Small bottom margin size for collumns */
    padding-left: 4px; /* #CONFIG# - Half of the collumn gutter size */
    padding-right: 4px; /* #CONFIG# - Half of the collumn gutter size */
  }
  
  .col00_XSma
  {
    display: none;
    width: 0%;
  }
  
  .col01_XSma
  {
    width: 8.333333333333332%;
  }
  
  .col02_XSma
  {
    width: 16.666666666666664%;
  }
  
  .col03_XSma
  {
    width: 25%;
  }
  
  .col04_XSma
  {
    width: 33.33333333333333%;
  }
  
  .col05_XSma
  {
    width: 41.66666666666667%;
  }
  
  .col06_XSma
  {
    width: 50%;
  }
  
  .col07_XSma
  {
    width: 58.333333333333336%;
  }
  
  .col08_XSma
  {
    width: 66.66666666666666%;
  }
  
  .col09_XSma
  {
    width: 75%;
  }
  
  .col10_XSma
  {
    width: 83.33333333333334%;
  }
  
  .col11_XSma
  {
    width: 91.66666666666666%;
  }
  
  .col12_XSma
  {
    width: 100%;
  }
  
  .col .colColour
  {
    background-color: red;
  }
}