/*

* Skeleton V1.2 — mobile-first, mimics Tailwind v4 breakpoints

* Original: Copyright 2011, Dave Gamache — www.getskeleton.com

* Free to use under the MIT license.

* http://www.opensource.org/licenses/mit-license.php

*

* Mobile-first: base (unqueried) rules are the smallest tier; each

* @media (min-width) block layers on top and overrides upward. No

* max-width bounds — a later, larger tier naturally wins via cascade

* order, so there's no overlap/off-by-one range to compute.

*

* Tiers mirror Tailwind v4 defaults: sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536

*/

/* Table of Contents

==================================================

    #Base (mobile portrait, <480px, default)

    #Mobile Landscape (480px+)

    #SM (640px+)

    #MD (768px+)

    #LG (1024px+)

    #XL (1280px+)

    #2XL (1536px+)

    #Clearing */

/* #Base (mobile portrait, <480px — default, no media query)

================================================== */
.container {
    position: relative;
    margin: 0 auto;
    padding: 0;
    width: 300px;
}

.container .col, .container .cols {
    float: left;
    display: inline;
    margin: 0;
}

.row {
    margin-bottom: 20px;
}

.col.alpha, .cols.alpha {
    margin-left: 0;
}

.col.omega, .cols.omega {
    margin-right: 0;
}

.container .one.col, .container .one.cols, .container .two.cols, .container .three.cols, .container .four.cols, .container .five.cols, .container .six.cols, .container .seven.cols, .container .eight.cols, .container .nine.cols, .container .ten.cols, .container .eleven.cols, .container .twelve.cols, .container .thirteen.cols, .container .fourteen.cols, .container .fifteen.cols, .container .sixteen.cols, .container .one-third.col, .container .two-thirds.col {
    width: 300px;
}

.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 (480px+)

================================================== */
@media only screen and (min-width: 30rem) {
    .container {
        width: 420px;
    }

    .container .one.col, .container .one.cols, .container .two.cols, .container .three.cols, .container .four.cols, .container .five.cols, .container .six.cols, .container .seven.cols, .container .eight.cols, .container .nine.cols, .container .ten.cols, .container .eleven.cols, .container .twelve.cols, .container .thirteen.cols, .container .fourteen.cols, .container .fifteen.cols, .container .sixteen.cols, .container .one-third.col, .container .two-thirds.col {
        width: 420px;
    }
}

/* #SM (640px+)

================================================== */

/* Tailwind defines sm as a breakpoint, not a container width — 560px chosen

   here to match the margin ratio the original mobile-landscape tier used. */
@media only screen and (min-width: 40rem) {
    .container {
        width: 560px;
    }

    .container .col, .container .cols {
        margin-left: 10px;
        margin-right: 10px;
    }

    .container .one.col, .container .one.cols {
        width: 15px;
    }

    .container .two.cols {
        width: 50px;
    }

    .container .three.cols {
        width: 85px;
    }

    .container .four.cols {
        width: 120px;
    }

    .container .five.cols {
        width: 155px;
    }

    .container .six.cols {
        width: 190px;
    }

    .container .seven.cols {
        width: 225px;
    }

    .container .eight.cols {
        width: 260px;
    }

    .container .nine.cols {
        width: 295px;
    }

    .container .ten.cols {
        width: 330px;
    }

    .container .eleven.cols {
        width: 365px;
    }

    .container .twelve.cols {
        width: 400px;
    }

    .container .thirteen.cols {
        width: 435px;
    }

    .container .fourteen.cols {
        width: 470px;
    }

    .container .fifteen.cols {
        width: 505px;
    }

    .container .sixteen.cols {
        width: 540px;
    }

    .container .one-third.col {
        width: 167px;
    }

    .container .two-thirds.col {
        width: 353px;
    }

    .container .offset-by-one {
        padding-left: 35px;
    }

    .container .offset-by-two {
        padding-left: 70px;
    }

    .container .offset-by-three {
        padding-left: 105px;
    }

    .container .offset-by-four {
        padding-left: 140px;
    }

    .container .offset-by-five {
        padding-left: 175px;
    }

    .container .offset-by-six {
        padding-left: 210px;
    }

    .container .offset-by-seven {
        padding-left: 245px;
    }

    .container .offset-by-eight {
        padding-left: 280px;
    }

    .container .offset-by-nine {
        padding-left: 315px;
    }

    .container .offset-by-ten {
        padding-left: 350px;
    }

    .container .offset-by-eleven {
        padding-left: 385px;
    }

    .container .offset-by-twelve {
        padding-left: 420px;
    }

    .container .offset-by-thirteen {
        padding-left: 455px;
    }

    .container .offset-by-fourteen {
        padding-left: 490px;
    }

    .container .offset-by-fifteen {
        padding-left: 525px;
    }
}

/* #MD (768px+)

================================================== */
@media only screen and (min-width: 48rem) {
    .container {
        width: 768px;
    }

    .container .col, .container .cols {
        margin-left: 10px;
        margin-right: 10px;
    }

    .col.alpha, .cols.alpha {
        margin-left: 0;
        margin-right: 10px;
    }

    .col.omega, .cols.omega {
        margin-right: 0;
        margin-left: 10px;
    }

    .alpha.omega {
        margin-left: 0;
        margin-right: 0;
    }

    .container .one.col, .container .one.cols {
        width: 28px;
    }

    .container .two.cols {
        width: 76px;
    }

    .container .three.cols {
        width: 124px;
    }

    .container .four.cols {
        width: 172px;
    }

    .container .five.cols {
        width: 220px;
    }

    .container .six.cols {
        width: 268px;
    }

    .container .seven.cols {
        width: 316px;
    }

    .container .eight.cols {
        width: 364px;
    }

    .container .nine.cols {
        width: 412px;
    }

    .container .ten.cols {
        width: 460px;
    }

    .container .eleven.cols {
        width: 508px;
    }

    .container .twelve.cols {
        width: 556px;
    }

    .container .thirteen.cols {
        width: 604px;
    }

    .container .fourteen.cols {
        width: 652px;
    }

    .container .fifteen.cols {
        width: 700px;
    }

    .container .sixteen.cols {
        width: 748px;
    }

    .container .one-third.col {
        width: 236px;
    }

    .container .two-thirds.col {
        width: 492px;
    }

    .container .offset-by-one {
        padding-left: 48px;
    }

    .container .offset-by-two {
        padding-left: 96px;
    }

    .container .offset-by-three {
        padding-left: 144px;
    }

    .container .offset-by-four {
        padding-left: 192px;
    }

    .container .offset-by-five {
        padding-left: 240px;
    }

    .container .offset-by-six {
        padding-left: 288px;
    }

    .container .offset-by-seven {
        padding-left: 336px;
    }

    .container .offset-by-eight {
        padding-left: 384px;
    }

    .container .offset-by-nine {
        padding-left: 432px;
    }

    .container .offset-by-ten {
        padding-left: 480px;
    }

    .container .offset-by-eleven {
        padding-left: 528px;
    }

    .container .offset-by-twelve {
        padding-left: 576px;
    }

    .container .offset-by-thirteen {
        padding-left: 624px;
    }

    .container .offset-by-fourteen {
        padding-left: 672px;
    }

    .container .offset-by-fifteen {
        padding-left: 720px;
    }
}

/* #LG (1024px+)

================================================== */
@media only screen and (min-width: 64rem) {
    .container {
        width: 1024px;
    }/* Reset alpha/omega back to the simple form — otherwise MD's asymmetric

           margin override above would leak upward into LG/XL/2XL. */

    .col.alpha, .cols.alpha {
        margin-left: 0;
    }

    .col.omega, .cols.omega {
        margin-right: 0;
    }

    .container .one.col, .container .one.cols {
        width: 44px;
    }

    .container .two.cols {
        width: 108px;
    }

    .container .three.cols {
        width: 172px;
    }

    .container .four.cols {
        width: 236px;
    }

    .container .five.cols {
        width: 300px;
    }

    .container .six.cols {
        width: 364px;
    }

    .container .seven.cols {
        width: 428px;
    }

    .container .eight.cols {
        width: 492px;
    }

    .container .nine.cols {
        width: 556px;
    }

    .container .ten.cols {
        width: 620px;
    }

    .container .eleven.cols {
        width: 684px;
    }

    .container .twelve.cols {
        width: 748px;
    }

    .container .thirteen.cols {
        width: 812px;
    }

    .container .fourteen.cols {
        width: 876px;
    }

    .container .fifteen.cols {
        width: 940px;
    }

    .container .sixteen.cols {
        width: 1004px;
    }

    .container .one-third.col {
        width: 321px;
    }

    .container .two-thirds.col {
        width: 663px;
    }

    .container .offset-by-one {
        padding-left: 64px;
    }

    .container .offset-by-two {
        padding-left: 128px;
    }

    .container .offset-by-three {
        padding-left: 192px;
    }

    .container .offset-by-four {
        padding-left: 256px;
    }

    .container .offset-by-five {
        padding-left: 320px;
    }

    .container .offset-by-six {
        padding-left: 384px;
    }

    .container .offset-by-seven {
        padding-left: 448px;
    }

    .container .offset-by-eight {
        padding-left: 512px;
    }

    .container .offset-by-nine {
        padding-left: 576px;
    }

    .container .offset-by-ten {
        padding-left: 640px;
    }

    .container .offset-by-eleven {
        padding-left: 704px;
    }

    .container .offset-by-twelve {
        padding-left: 768px;
    }

    .container .offset-by-thirteen {
        padding-left: 832px;
    }

    .container .offset-by-fourteen {
        padding-left: 896px;
    }

    .container .offset-by-fifteen {
        padding-left: 960px;
    }
}

/* #XL (1280px+)

================================================== */
@media only screen and (min-width: 80rem) {
    .container {
        width: 1280px;
    }

    .container .one.col, .container .one.cols {
        width: 60px;
    }

    .container .two.cols {
        width: 140px;
    }

    .container .three.cols {
        width: 220px;
    }

    .container .four.cols {
        width: 300px;
    }

    .container .five.cols {
        width: 380px;
    }

    .container .six.cols {
        width: 460px;
    }

    .container .seven.cols {
        width: 540px;
    }

    .container .eight.cols {
        width: 620px;
    }

    .container .nine.cols {
        width: 700px;
    }

    .container .ten.cols {
        width: 780px;
    }

    .container .eleven.cols {
        width: 860px;
    }

    .container .twelve.cols {
        width: 940px;
    }

    .container .thirteen.cols {
        width: 1020px;
    }

    .container .fourteen.cols {
        width: 1100px;
    }

    .container .fifteen.cols {
        width: 1180px;
    }

    .container .sixteen.cols {
        width: 1260px;
    }

    .container .one-third.col {
        width: 407px;
    }

    .container .two-thirds.col {
        width: 833px;
    }

    .container .offset-by-one {
        padding-left: 80px;
    }

    .container .offset-by-two {
        padding-left: 160px;
    }

    .container .offset-by-three {
        padding-left: 240px;
    }

    .container .offset-by-four {
        padding-left: 320px;
    }

    .container .offset-by-five {
        padding-left: 400px;
    }

    .container .offset-by-six {
        padding-left: 480px;
    }

    .container .offset-by-seven {
        padding-left: 560px;
    }

    .container .offset-by-eight {
        padding-left: 640px;
    }

    .container .offset-by-nine {
        padding-left: 720px;
    }

    .container .offset-by-ten {
        padding-left: 800px;
    }

    .container .offset-by-eleven {
        padding-left: 880px;
    }

    .container .offset-by-twelve {
        padding-left: 960px;
    }

    .container .offset-by-thirteen {
        padding-left: 1040px;
    }

    .container .offset-by-fourteen {
        padding-left: 1120px;
    }

    .container .offset-by-fifteen {
        padding-left: 1200px;
    }
}

/* #2XL (1536px+)

================================================== */
@media only screen and (min-width: 96rem) {
    .container {
        width: 1536px;
    }

    .container .one.col, .container .one.cols {
        width: 76px;
    }

    .container .two.cols {
        width: 172px;
    }

    .container .three.cols {
        width: 268px;
    }

    .container .four.cols {
        width: 364px;
    }

    .container .five.cols {
        width: 460px;
    }

    .container .six.cols {
        width: 556px;
    }

    .container .seven.cols {
        width: 652px;
    }

    .container .eight.cols {
        width: 748px;
    }

    .container .nine.cols {
        width: 844px;
    }

    .container .ten.cols {
        width: 940px;
    }

    .container .eleven.cols {
        width: 1036px;
    }

    .container .twelve.cols {
        width: 1132px;
    }

    .container .thirteen.cols {
        width: 1228px;
    }

    .container .fourteen.cols {
        width: 1324px;
    }

    .container .fifteen.cols {
        width: 1420px;
    }

    .container .sixteen.cols {
        width: 1516px;
    }

    .container .one-third.col {
        width: 492px;
    }

    .container .two-thirds.col {
        width: 1004px;
    }

    .container .offset-by-one {
        padding-left: 96px;
    }

    .container .offset-by-two {
        padding-left: 192px;
    }

    .container .offset-by-three {
        padding-left: 288px;
    }

    .container .offset-by-four {
        padding-left: 384px;
    }

    .container .offset-by-five {
        padding-left: 480px;
    }

    .container .offset-by-six {
        padding-left: 576px;
    }

    .container .offset-by-seven {
        padding-left: 672px;
    }

    .container .offset-by-eight {
        padding-left: 768px;
    }

    .container .offset-by-nine {
        padding-left: 864px;
    }

    .container .offset-by-ten {
        padding-left: 960px;
    }

    .container .offset-by-eleven {
        padding-left: 1056px;
    }

    .container .offset-by-twelve {
        padding-left: 1152px;
    }

    .container .offset-by-thirteen {
        padding-left: 1248px;
    }

    .container .offset-by-fourteen {
        padding-left: 1344px;
    }

    .container .offset-by-fifteen {
        padding-left: 1440px;
    }
}

/* #Clearing

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

.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;
}

.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}