/*
- Skeleton V1.2
- www.getskeleton.com
- Free to use under the MIT license.

Table of Contents -----------------------------------------------------------------
- Base 960 Grid
- Tablet (Portrait)
- Mobile (Portrait)
- Mobile (Landscape)
- Clearing
*/

/* #Base 960 Grid ----------------------------------------------------------------- */
@media only screen and ( min-width:1400px ) {
    .container { position:relative; width:980px; margin:auto; padding:0; text-align:center; }
    .container .column, .container .columns { display:inline-block; margin-left:10px; margin-right:10px; margin-top:0px; text-align:center; align-content:center; justify-content:center; }
    .row { margin-bottom:0px; }

    /* Nested Column Classes */
    .column.alpha, .columns.alpha { margin-left: 0; }
    .column.omega, .columns.omega { margin-right: 0; }

    /* Base Grid */
    .container .one.column, .container .one.columns { width:40px; }
    .container .two.columns { width:100px; }
    .container .three.columns { width:100px; float:right; }
    .container .four.columns { width:220px; margin-bottom:-35px; }
    .container .five.columns { width:300px; }
    .container .six.columns { width:340px; }
    .container .seven.columns { width:400px; }
    .container .eight.columns { width:460px; }
    .container .nine.columns { width:520px; }
    .container .ten.columns { width:580px; }
    .container .eleven.columns { width:640px; }
    .container .twelve.columns { width:900px; }
    .container .thirteen.columns { width:760px; }
    .container .fourteen.columns { width:820px; }
    .container .fifteen.columns { width:880px; }
    .container .sixteen.columns { width:940px; }

    .container .one-third.column { width:300px; margin-top:50px; }
    .container .two-thirds.column { width:620px; }
    .container .boxes.column { width:220px; margin:1px 24px 0 0px; }

    /* Offsets */
    .container .offset-by-one { padding-left:60px;  }
    .container .offset-by-two { padding-left:120px; }
    .container .offset-by-three { padding-left:180px; }
    .container .offset-by-four { padding-left:240px; }
    .container .offset-by-five { padding-left:300px; }
    .container .offset-by-six { padding-left:360px; }
    .container .offset-by-seven { padding-left:420px; }
    .container .offset-by-eight { padding-left:480px; }
    .container .offset-by-nine { padding-left:540px; }
    .container .offset-by-ten { padding-left:600px; }
    .container .offset-by-eleven { padding-left:660px; }
    .container .offset-by-twelve { padding-left:720px; }
    .container .offset-by-thirteen { padding-left:780px; }
    .container .offset-by-fourteen { padding-left:840px; }
    .container .offset-by-fifteen { padding-left:900px; }
}


/* Tablet (Landscape) ----------------------------------------------------------------- */
    @media only screen and (min-width:1024px) and (max-width:1399px) {
        .container { position:relative; width:900px; margin:auto; padding:0; text-align:center; }
    .container .column, .container .columns { display:inline-block; margin-left:10px; margin-right:10px; margin-top:0px; text-align:center; align-content:center; justify-content:center; }
    .row { margin-bottom:0px; }
        .column.alpha, .columns.alpha { margin-left:0; margin-right:0px; }
        .column.omega, .columns.omega { margin-right:0; margin-left:0px; }
        .alpha.omega { margin-left:0; margin-right:0; }

        .container .one-third.column { width:270px; margin-top:50px; margin-left:10px; margin-right:10px; }
        .container .two-thirds.column { width:680px; }
}


/*  Mobile Portrait Small ----------------------------------------------------------------- */
    /* Design for a width to 374px */
    @media only screen and (max-width:374px) {
        .container { position:relative; width:250px; margin:auto; padding:0; text-align:center; }
    .container .column, .container .columns { display:inline-block; margin-left:10px; margin-right:10px; margin-top:0px; text-align:center; align-content:center; justify-content:center; }
    .row { margin-bottom:0px; }
        .container .columns,
        .container .column { margin:0; }
        .container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column { width:240px; margin-top:50px; margin-left:10px; margin-right:10px; }
        .container .boxes.column { width:240px; margin:5px 20px 0 0px; }
    }

/*  Mobile Portrait ----------------------------------------------------------------- */
    @media only screen and (min-width:375px) and (max-width:480px) {
        .container { position:relative; width:300px; margin:auto; padding:0; text-align:center; }
    .container .column, .container .columns { display:inline-block; margin-left:10px; margin-right:10px; margin-top:0px; text-align:center; align-content:center; justify-content:center; }
    .row { margin-bottom:0px; }
        .container .columns,
        .container .column { margin:0; }
        .container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column { width:300px; margin-top:70px; }
        .container .two-thirds.column { width:300px; }
        .container .boxes.column { width:210px; margin:5px 0px 0 0px; }

        /* Offsets */
        .container .offset-by-one,
        .container .offset-by-two,
        .container .offset-by-three,
        .container .offset-by-four,
        .container .offset-by-five,
        .container .offset-by-six,
        .container .offset-by-seven,
        .container .offset-by-eight,
        .container .offset-by-nine,
        .container .offset-by-ten,
        .container .offset-by-eleven,
        .container .offset-by-twelve,
        .container .offset-by-thirteen,
        .container .offset-by-fourteen,
        .container .offset-by-fifteen { padding-left:0; }
    }


/* Mobile (Landscape) ----------------------------------------------------------------- */
    @media only screen and (min-width:481px) and (max-width:1023px) {
        .container { position:relative; width:480px; margin:auto; padding:0; text-align:center; }
    .container .column, .container .columns { display:inline-block; margin-left:10px; margin-right:10px; margin-top:0px; text-align:center; align-content:center; justify-content:center; }
    .row { margin-bottom:0px; }

        .container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns  { width:400px; }
        .container .one-third.column { width:350px; margin:70px 10px 0 10px; }
        .container .two-thirds.column { width:200px; margin:0 10px 0 10px; }
        .container .boxes.column { width:210px; margin:0px 20px 0px 12px; }
    }

/* #Clearing ----------------------------------------------------------------- */

    /* Self Clearing Goodness */
    .container:after { content:"\0020"; display:block; height:0; clear:both; visibility:hidden; }

    /* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */
    .clearfix:before, .clearfix:after, .row:before, .row:after { content:'\0020'; display:block; overflow:hidden; visibility:hidden; width:0; height:0; }
    .row:after, .clearfix:after { clear:both; }
    .row, .clearfix { zoom:1; }

    /* You can also use a <br class="clear" /> to clear columns */
    .clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
    }