/* LAYOUT [LARGE]
----------------------------------------------------------------------------------------*/
#wrapper {
    max-width: 100%;
    margin: 0 auto 2.5em;
    display: block;}

footer { margin: 0 auto; }

#hero { display: block; }

#socialnetwork {
    width: 100%;
    margin: 0 auto;
    padding: 0;}

.navigation {
    margin: 0 auto;
    padding: 10px 0 0 0;
    text-align: right;}

a.logo {
    margin: 0 auto;
    text-align: left;}

.header_inner {
    padding: 20px 0;}

.mobile { display: none; }
.desktop { display: block; }
.large_screen { display: block; }

.content { margin: 4em auto; }

.introduction {
    margin: 3.5em auto 0;}


/* TYPOGRAPHY
----------------------------------------------------------------------------------------*/

h1 { font-size: 4em; }
h2, a.show_link { font-size: 2em; }

p { font-size: 1.2em; }

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

.row {
	clear: both;
	width: 100%;
    margin: 0 auto;
    display: block;}

.span_01 {
    width: 8.33333%;}

.span_02 {
    width: 16.66667%;}

.span_03 {
    width: 23%;}

.span_04 {
    width: 31.33333%;}

.span_05 {
    width: 41.66667%;}

.span_06 {
    width: 46%;}

.span_07 {
    width: 58.33333%;}

.span_08 {
    width: 62.66667%;}

.span_09 {
    width: 73%;}

.span_10 {
    width: 83.33333%;}

.span_11 {
    width: 91.66667%;}

.span_12 {
    width: 100%;}

.column {
    float: left;
    padding: 0;
    margin: 0 1%;}

.column + .column {
    margin: 0 1%;}

.portfolio_wrapper > .column {
    padding: 0;}

.column.full {
    padding-left: 0;
    padding-right: 0;
    clear: both;}


/* LAYOUT [MEDIUM]
----------------------------------------------------------------------------------------*/
@media screen and (min-width: 50em) and (max-width: 60em) {

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

#hero { display: block; }

a.logo {
    margin: 0 auto;
    text-align: left;}

.navigation {
    margin: 0 auto;
    padding: 10px 0 0 0;
    text-align: right;}

.header_inner {
    padding: 20px 0;}

.navigation li a { font-size: 1.25em; }

.mobile { display: none; }
.desktop { display: block; }
.large_screen { display: block; }

.content { margin: 4em auto; }


/* TYPOGRAPHY
----------------------------------------------------------------------------------------*/

h1 { font-size: 3em; }
h2 { font-size: 2em; }

}


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

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

#hero { display: block; }

a.logo {
    margin: 0 auto;
    text-align: center;
    font-size: 2em;}

.navigation {
    margin: 0 auto;
    padding: 10px 0 0 0;
    text-align: center;}

.header_inner {
    padding: 20px 0;}

.navigation li a { font-size: 1.25em; }

.mobile { display: none; }
.desktop { display: block; }
.large_screen { display: none; }

.repeatable .column {
    margin-bottom: 2.5em;}

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

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

.content { margin: 4em auto; }

.no_buffer {
    margin: 0 auto !important;}



/* TYPOGRAPHY
----------------------------------------------------------------------------------------*/

h1 { font-size: 3em; }
h2, a.show_link { font-size: 2em; }

}