body {
    margin: .5em;
}

.section {
    margin-bottom: .5em;
}

.col {
    width: 100%;
    
   -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    -moz-background-clip:padding-box !important;
    -webkit-background-clip:padding-box !important;
    background-clip:padding-box !important;
}

@media screen and (min-width: 800px) {

    body {
        margin: 0 1em;
    }
    
    .section {
        margin-bottom: 1em;
    }
    
    .row {
        margin-left: -0.5em;
        margin-right: -0.5em;
    }
    
    .row .row {
        margin-left: -0.5em;
        margin-right: -0.5em;
    }
    
    .row .row .span12 {
        margin-left: 0;
        margin-right: 0;
    }
    
    .col {
        float: left;
        padding-left: 0.5em;
        padding-right: 0.5em;
    }
    
    .row:before,
    .row:after {
      content: " ";
      display: table;
    }
    .row:after {
      clear: both;
    }
    
    .span1 { width: 8.33%; }
    .span2 { width: 16.66% }
    .span3 { width: 25% }
    .span4 { width: 33.33%; }
    .span5 { width: 41.66%; }
    .span6 { width: 50%; }
    .span7 { width: 58.33%; }
    .span8 { width: 66.66%; }
    .span9 { width: 75%; }
    .span10 { width: 83.33%; }
    .span11 { width: 91.66%; }
    .span12 { width: 100%; }
    
    .push-right {
        float: right;
    }

    .pull-left {
        float: left;
    }
}

@media screen and (max-width: 800px) {
	.header .row, .header .col { float: left; }
	.header .row { width: 100% }
        
	.span4 { width: 33.33%; }
    .span3 { width: 25% }
    .span5 { width: 41.66%; }
	.span8 { width: 66.66%; }

    .div-tlf { display: none !important }
    .nav-main { font-size: 8px !important; float: right !important; }
}