/*-------------------------------------------------------------------------
 =  Lemongrab: a simple, modular css grid system.
 --------------------------------------------------------------------------*/

/*-------------------------------------------------------------------------
 =  Setting everything to use box-sizing: border-box, so that we're not
    doing extra math to figure out widths relative to padding or
    anything else. http://www.paulirish.com/2012/box-sizing-border-box-ftw
    --------------------------------------------------------------------------*/
[class*='grid-'],
.border-box {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

#wrapper {
    width: 1024px;
}

/*= Setting base font size to 16px, so that 1em = 16px, if you choose to use ems.
--------------------------------------------------------------------------*/

html {
    font: 16px/1 Arial, Helvetica, sans-serif;
}

/*-------------------------------------------------------------------------
 =  COLUMNS & BOXES
    Setting up default column and box widths. These are altered via media
    query for handheld devices.
    --------------------------------------------------------------------------*/

/*= floats and padding for all columns
--------------------------------------------------------------------------*/
.grid-col {
    display: block;
    float: left;
    padding: 10px;
    position: relative;
}

/*= floats and padding for all box elements
--------------------------------------------------------------------------*/
.grid-box {
    display: block;
    float: left;
    padding: 0;
    position: relative;
}

/*= .contain
--------------------------------------------------------------------------*/
.grid-container {
    margin: 0 auto;
    position: relative;
}


.grid-container:after {
    clear: both;
    content: '';
    display: table;
}

/*-------------------------------------------------------------------------
= OVERRIDES -- add these classes to elements that you want to override
default behavior
--------------------------------------------------------------------------*/
/*= DESKTOP ONLY: removes left-side padding for first column in grid, clears left
--------------------------------------------------------------------------*/
.first {
    clear: left;
    padding-left: 0;
}

/*= DESKTOP ONLY: removes right-side padding for last column in grid, clears right
--------------------------------------------------------------------------*/
.last {
    clear: right;
    padding-right: 0;
}

/*= floats a given element left
--------------------------------------------------------------------------*/
.l {
    float: left;
}

/*= floats a given element right
--------------------------------------------------------------------------*/
.r {
    float: right;
}

/*= removes float from a given element
--------------------------------------------------------------------------*/
.n {
    float: none;
}

/*= assigns inline-block to a given element
--------------------------------------------------------------------------*/
.inline-block {
    display: inline-block;
    zoom: 1;

    *display: inline;
}

/*= Flexbox stuff for mobile and supporting browsers
 --------------------------------------------------------------------------*/
 .flex-container {
    -webkit-align-items: flex-start;
    align-items: flex-start; 
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;

 }

 .flex-child {
    padding: 10px;
    flex: 1 100%;
 }

/*-------------------------------------------------------------------------
 =  GRID-BREAKERS: These are push/pull classes that allow us to style
    elements that break out of the grid. The .push class moves the element
    to the right by a specified column-width/percentage, the .pull class
    moves the element to the left by a specified column-width/percentage.
    --------------------------------------------------------------------------*/
[class*='push-'],
    [class*='pull-'] {
    position: relative;
}

/*= PUSH
--------------------------------------------------------------------------*/
.push-_5 {
    left: 2.5%;
}

.push-1 {
    left: 5%;
}

.push-1_5 {
    left: 7.5%;
}

.push-2 {
    left: 10%;
}

.push-2_5 {
    left: 12.5%;
}

.push-3 {
    left: 15%;
}

.push-3_5 {
    left: 17.5%;
}

.push-4 {
    left: 20%;
}

.push-4_5 {
    left: 22.5%;
}

.push-5 {
    left: 25%;
}

.push-6 {
    left: 30%;
}

.push-7 {
    left: 35%;
}

.push-8 {
    left: 40%;
}

.push-9 {
    left: 45%;
}

.push-10 {
    left: 50%;
}

.push-11 {
    left: 55%;
}

.push-12 {
    left: 60%;
}

.push-13 {
    left: 65%;
}

.push-14 {
    left: 70%;
}

.push-15 {
    left: 75%;
}

.push-16 {
    left: 80%;
}

.push-17 {
    left: 85%;
}

.push-18 {
    left: 90%;
}

.push-19 {
    left: 95%;
}

.push-20 {
    left: 100%;
}

/*= PULL
--------------------------------------------------------------------------*/
.pull-_5 {
    right: 2.5%;
}

.pull-1 {
    right: 5%;
}

.pull-1_5 {
    right: 7.5%;
}

.pull-2 {
    right: 10%;
}

.pull-2_5 {
    right: 12.5%;
}

.pull-3 {
    right: 15%;
}

.pull-3_5 {
    right: 17.5%;
}

.pull-4 {
    right: 20%;
}

.pull-4_5 {
    right: 22.5%;
}

.pull-5 {
    right: 25%;
}

.pull-6 {
    right: 30%;
}

.pull-7 {
    right: 35%;
}

.pull-8 {
    right: 40%;
}

.pull-9 {
    right: 45%;
}

.pull-10 {
    right: 50%;
}

.pull-11 {
    right: 55%;
}

.pull-12 {
    right: 60%;
}

.pull-13 {
    right: 65%;
}

.pull-14 {
    right: 70%;
}

.pull-15 {
    right: 75%;
}

.pull-16 {
    right: 80%;
}

.pull-17 {
    right: 85%;
}

.pull-18 {
    right: 90%;
}

.pull-19 {
    right: 95%;
}

.pull-20 {
    right: 100%;
}

/*-------------------------------------------------------------------------
=   WIDTHS: Default widths. Max-widths, and min widths are defined for
    .span-20 only. These are overridden via media query for handheld.
    --------------------------------------------------------------------------*/
.span-1 {
    width: 5%;
}

.span-2 {
    width: 10%;
}

.span-3 {
    width: 15%;
}

.span-4 {
    width: 20%;
}

.span-5 {
    width: 25%;
}

.span-6 {
    width: 30%;
}

.span-7 {
    width: 35%;
}

.span-8 {
    width: 40%;
}

.span-9 {
    width: 45%;
}

.span-10 {
    width: 50%;
}

.span-11 {
    width: 55%;
}

.span-12 {
    width: 60%;
}

.span-13 {
    width: 65%;
}

.span-14 {
    width: 70%;
}

.span-15 {
    width: 75%;
}

.span-16 {
    width: 80%;
}

.span-17 {
    width: 85%;
}

.span-18 {
    width: 90%;
}

.span-19 {
    width: 95%;
}

.span-20,
    .span-full {
    max-width: 100%;
    width: 100%;
}

/*-------------------------------------------------------------------------
 =  Typography
 --------------------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
    line-height: 1.25;
}

p {
    line-height: 1.25;
    margin: 0;
    padding: 10px 0 ;
}

/*-------------------------------------------------------------------------
 = MEDIA QUERIES
 --------------------------------------------------------------------------*/
/*= Desktop specific. May eventually remove.
--------------------------------------------------------------------------*/
@media only screen and (min-device-width: 768px) {
    /*=    Shows content optimized solely for desktop and tablet  browsers.
 --------------------------------------------------------------------------*/
    .fullsize {
        display: block;
    }

    /*= Shows content optimized solely for handheld browsers. Defaults to none, changes
           with media-query.
     --------------------------------------------------------------------------*/
    .handheld {
        display: none;
    }
}

/*= Tablet
--------------------------------------------------------------------------*/
@media only screen
and (max-device-width: 1024px) {
    #wrapper {
        min-width: 100%;
        width: 100%;
    }
}

 /*= iPad Mini. May use for text and padding changes.
 --------------------------------------------------------------------------*/
@media only screen
 and (min-device-width: 768px) and (max-device-width: 1024px)
 and (-webkit-min-device-pixel-ratio: 1) {
    body {
        font-size: 18px;
    }
    h1 {
        font-size: 3em;
    }
}

/*= Smartphones (portrait and landscape)
--------------------------------------------------------------------------*/
@media only screen and (max-device-width : 767px) {

    #wrapper {
        max-width: 100%;
        min-width: 320px;
        width: 100%;
    }

    .first,
    .last {
        clear: none;
        float: left;
        padding: 10px;
    }

    .handheld {
        display: block;
    }

    .fullsize {
        display: none;
    }

    .span-1,
    .span-2,
    .span-3,
    .span-4,
    .span-5 {
        width: 25%;
    }

    .span-6,
    .span-7,
    .span-8,
    .span-9,
    .span-10 {
        width: 50%;
    }


    .span-11,
    .span-12,
    .span-13,
    .span-14,
    .span-15,
    .span-16,
    .span-17,
    .span-18,
    .span-19 {
        width: 100%;
    }

    [class*='push'],
    [class*='pull'] {
        left: auto;
        right: auto;
    }
}