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

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

    @media only screen and (min-width: 1500px) { .container { max-width: 1000px; } }
    @media only screen and (min-width : 690px) and (max-width : 1024px) { .container { max-width: 1000px; } }
    @media only screen and (max-width : 690px) { .container { max-width:80%; } }



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

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

    .span1  { width: 4.666%;  }
    .span2  { width: 13.333%; }
    .span3  { width: 22%; }
    .span4  { width: 27%; }
    .span5  { width: 39.5%; }
    .span6  { width: 48.0%; }
    .span7  { width: 56.5%; }
    .span8  { width: 65.0%; }
    .span9  { width: 73.5%; }
    .span10 { width: 82.0%; }
    .span11 { width: 90.5%; }
    .span12 { width: 100%;  margin-right: 0; }

    @media only screen and (max-width : 1024px) {
        [class*="span"] { float: none;  margin:0px auto !important;  width:80%; margin-bottom: 2em; }
    }