/* ==========================================================================
    Hotel Bayerischer Hof | Erlangen
    Grid System for www.bayerischer-hof-erlangen.de
    (based on http://getskeleton.com)
   ========================================================================== */


/* ==========================================================================
    RESET
   ========================================================================== */

*, *:before, *:after {
margin: 0;
padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
box-sizing:             border-box;
}

/* ==========================================================================
    CONTAINER
   ========================================================================== */

.fullwidth {
position: relative;
width: 100%;
margin: 0;
padding: 0;
}

.widescreen, .container, .container-nsr {
position: relative;
width: 90%;
max-width: 960px;
margin: 0 auto;
padding: 0;
}

.widescreen { max-width: 1600px; }

/* ==========================================================================
    ROWS
   ========================================================================== */

.row { margin-bottom: 0; }

/* ==========================================================================
    COLUMNS
   ========================================================================== */

.column, .columns, .wide-col, .sml-col {
width: 100%;
float: left;
}

.wide-col { background: #F0F0F0; }

.sml-col {
font-size: 13px;
line-height: 1.7em;
background: #F5F5F5;
}

/* ==========================================================================
    MEDIA QUERIES
   ========================================================================== */

/* ≥ 480px */
@media (min-width: 480px) {

    .container, .container-nsr {
    width: 85%;
    padding: 0;
    }

}

/* ≥ 768px */
@media (min-width: 768px) {

    .container, .container-nsr { width: 85%; }

    .column, .columns { margin-left: 4%; }

    .column:first-child, .columns:first-child { margin-left: 0; }

    .one.column, .one.columns               { width: 4.6666666667%; }
    .one.column.expand, .one.columns.expand { width: 8.6666666667%; }

    .two.columns                { width: 13.3333333333%; }
    .two.columns.expand         { width: 17.3333333333%; }

    .three.columns              { width: 22%; }
    .three.columns.expand       { width: 26%; }

    .four.columns               { width: 30.6666666667%; }
    .four.columns.expand        { width: 34.6666666667%; }

    .five.columns               { width: 39.3333333333%; }
    .five.columns.expand        { width: 43.3333333333%; }

    .six.columns                { width: 48%; }
    .six.columns.expand         { width: 52%; }

    .seven.columns              { width: 56.6666666667%; }
    .seven.columns.expand       { width: 60.6666666667%; }

    .eight.columns              { width: 65.3333333333%; }
    .eight.columns.expand       { width: 69.3333333333%; }

    .nine.columns               { width: 74%; }
    .nine.columns.expand        { width: 78%; }

    .ten.columns                { width: 82.6666666667%; }
    .ten.columns.expand         { width: 86.6666666667%; }

    .eleven.columns             { width: 91.3333333333%; }
    .eleven.columns.expand      { width: 95.3333333333%; }

    .twelve.columns             { width: 100%; margin-left: 0; }

    /* Offset */
    .offset-by-one.column, .offset-by-one.columns           { margin-left: 8.6666666667%; }
    .offset-by-two.column, .offset-by-two.columns           { margin-left: 17.3333333333%; }
    .offset-by-three.column, .offset-by-three.columns       { margin-left: 26%; }
    .offset-by-four.column, .offset-by-four.columns         { margin-left: 34.6666666667%; }
    .offset-by-five.column, .offset-by-five.columns         { margin-left: 43.3333333333%; }
    .offset-by-six.column, .offset-by-six.columns           { margin-left: 52%; }
    .offset-by-seven.column, .offset-by-seven.columns       { margin-left: 60.6666666667%; }
    .offset-by-eight.column, .offset-by-eight.columns       { margin-left: 69.3333333333%; }
    .offset-by-nine.column, .offset-by-nine.columns         { margin-left: 78%; }
    .offset-by-ten.column, .offset-by-ten.columns           { margin-left: 86.6666666667%; }
    .offset-by-eleven.column, .offset-by-eleven.columns     { margin-left: 95.3333333333%; }

}

/* ≥ 1024px */
@media (min-width: 1024px) {

    .wide-col   { width: 60%; }
    .sml-col    { width: 40%; }

}

/* ≥ 1280px */
@media (min-width: 1280px) {

    .wide-col   { width: 65%; }
    .sml-col    { width: 35%; }

}

/* ==========================================================================
    CLEARFIX
   ========================================================================== */

.row:before, .row:after {
content: " ";
display: table;
}

.row:after { clear: both; }

.row { *zoom: 1; }

