/* 8. LAYOUT [LARGE]
----------------------------------------------------------------------------------------*/
#wrapper {
	max-width: 100%;
    margin: 0 auto;}

.navigation {
    width: 100%;}

.navigation li {
    padding: 0 1%;}


/* COLUMNS
----------------------------------------------------------------------------------------*/

.row + .row {
    margin: 2.5em auto;}

.column {
	display: block;
	float: left;
    padding: 0 1.25%;}

.column + .column {margin: 0 auto;}

.span_01 {
    width: 8.33333%;}

.span_02 {
    width: 16.66667%;}

.span_03 {
    width: 23%;}

.span_04 {
    width: 33.33333%;}

.span_05 {
    width: 41.66667%;}

.span_06 {
    width: 50%;}

.span_07 {
    width: 58.33333%;}

.span_08 {
    width: 66.66667%;}

.span_09 {
    width: 73%;}

.span_10 {
    width: 83.33333%;}

.span_11 {
    width: 91.66667%;}

.span_12 {
    width: 100%;}


/* LAYOUT (MEDIUM)
----------------------------------------------------------------------------------------*/
@media screen and (min-width: 50em) and (max-width: 60em) {
    
#wrapper {
    max-width: 100%; 
    margin: 0 auto;}

.navigation {
    width: 100%;}

.navigation li {
    padding: 0 1%;}
    
}


/* LAYOUT (MEDIUM-RARE)
----------------------------------------------------------------------------------------*/
@media screen and (min-width: 30em) and (max-width: 50em) {

#wrapper {
    max-width: 100%; 
    margin: 0 auto;}

.navigation {
    width: 100%;}

.navigation li {
    padding: 0 1%;}

.column {
    margin: 0 auto;
    float: none;
    width: 100%;}

}