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

h1 { font-size: 2em; }
h1.the_title { font-size: 1.75em; }
h2 { font-size: 1.75em; }

.row {
    position: relative;}

a.book_button { width: 175px; }

header.splash {
    width: 100%;
    max-width: 2000px;
    min-height: 1000px;
    background-image: url(../../images/splash.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;}


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

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

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

.padded {
    max-width: 90%;}

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

.column:first-child { padding: 0 0.625em 0 0; }
.column:last-child { padding: 0 0 0 0.625em; }

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

.span_01 {
    width: 8.33333%;}

.span_02 {
    width: 16.66667%;}

.span_03 {
    width: 25%;}

.span_04 {
    width: 33.3333%;}

.span_05 {
    width: 100%;}

.span_06 {
    width: 50%;}

.span_07 {
    width: 100%;}

.span_08 {
    width: 66.6666%;}

.span_09 {
    width: 73%;}

.span_10 {
    width: 83.33333%;}

.span_11 {
    width: 91.66667%;}

.span_12 {
    width: 100%;}


/* 9. CUSTOM LAYOUT & TYPOGRAPHY [MEDIUM]
----------------------------------------------------------------------------------------*/
@media screen and (min-width: 40em) and (max-width: 63.236em) {

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

header.splash {
    width: 100%;
    max-width: 2000px;
    min-height: 1000px;
    background-image: url(../../images/splash.jpg);
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;}

h1 { font-size: 1.75em; }

a.book_button { width: 125px; }

}