/*  ==========================================================================
    Container  
    ========================================================================== */

    .container { margin: 0 auto; max-width: 860px; }
    .container:before, .container:after { display: table; content: ""; line-height: 0;}
    .container:after { clear: both; }

    @media only screen and (min-width: 1300px) { .container { max-width: 1100px; } }
    @media only screen and (min-width : 690px) and (max-width : 1000px) { .container { max-width: 600px; } }
    @media only screen and (max-width : 690px) { .container { max-width: 300px; } }



/*  ==========================================================================
    Column  
    ========================================================================== */

    [class*="span"] { float: left;  margin-right: 2%;  position: relative; }
    [class*="span"]:last-child, [class*="span"].last { margin-right: 0; } 

    .span1  { width: 6.5%;  }
    .span2  { width: 15.0%; }
    .span3  { width: 23.5%; }
    .span4  { width: 32.0%; }
    .span5  { width: 40.5%; }
    .span6  { width: 49.0%; }
    .span7  { width: 57.5%; }
    .span8  { width: 66.0%; }
    .span9  { width: 74.5%; }
    .span10 { width: 83.0%; }
    .span11 { width: 91.5%; }
    .span12 { width: 100%;  margin-right: 0; }

    @media only screen and (max-width : 1000px) {
        [class*="span"] { float: none;  margin-right: 0;  width: 100%; margin-bottom: 2em; }
    }