/* -------- ▲ grid -------- */
/*  http://jamespark.ninja  */
/* --- James Park: 2016 --- */


/* Variables */

.tri.space > .ang, .tri.space > .angle {
    padding:10px;
}

/* Core Styles */

.tri {
    width:100%;
    
    -ms-flex-flow: row wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    display: -ms-flexbox;
    display:-webkit-box;
    display:flex;
     
    margin-left:auto;
    margin-right:auto;
}

.tri.full {
    max-width:100vw;
}

.tri.space > .ang, .tri.space > .angle {
    box-sizing: border-box;
}

.tri > .angle {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.tri > .ang {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
}

.no-flexbox:not(.flexboxtweener) .tri {
    display:table;
    ?display:block;
    ?clear:both;
}

.no-flexbox:not(.flexboxtweener) .tri > .angle, .no-flexbox:not(.flexboxtweener) .tri > .ang {
    display:table-cell;
    ?float:left;
    ?display:block;
}

.no-flexbox:not(.flexboxtweener) .tri > .angle {
    ?width:auto;
}

.le-1 {
    width: 4.1667%;
    ?width: 4.1357%;
}

.le-2 {
    width: 8.3333%;
    ?width: 8.3023%;
}

.le-3 {
    width: 12.5000%;
    ?width: 12.4690%;
}

.le-4 {
    width: 16.6667%;
    ?width: 16.6357%;
}

.le-5 {
    width: 20.8333%;
    ?width: 20.8023%;
}

.le-6, .le-quarter {
    width: 25%;
    ?width: 24.9690%;
}

.le-7 {
    width: 29.1667%;
    ?width: 29.1357%;
}

.le-8, .le-third {
    width: 33.3333%;
    ?width: 33.3023%;
}

.le-9 {
    width: 37.5000%;
    ?width: 37.4690%;
}

.le-10 {
    width: 41.6667%;
    ?width: 41.6357%;
}

.le-11 {
    width: 45.8333%;
    ?width: 45.8023%;
}

.le-12, .le-half, .le-quarter-2 {
    width: 50%;
    ?width: 49.9690%;
}

.le-13 {
    width: 54.1667%;
    ?width: 54.1357%;
}

.le-14 {
    width: 58.3333%;
    ?width: 58.3023%;
}

.le-15 {
    width: 62.5000%;
    ?width: 62.4690%;
}

.le-16, .le-third-2 {
    width: 66.6667%;
    ?width: 66.6357%;
}

.le-17 {
    width: 70.8333%;
    ?width: 70.8023%;
}

.le-18, .le-quarter-3 {
    width: 75%;
    ?width: 74.9690%;
}

.le-19 {
    width: 79.1667%;
    ?width: 79.1357%;
}

.le-20 {
    width: 83.3333%;
    ?width: 83.3023%;
}

.le-21 {
    width: 87.5000%;
    ?width: 87.4690%;
}

.le-22 {
    width: 91.6667%;
    ?width: 91.6357%;
}

.le-23 {
    width: 95.8333%;
    ?width: 95.8023%;
}

.le-24, .le-full, .le-half-2 {
    width: 100%;
}

/* Mobile Landscape to Tablet Portrait */
@media screen and (min-width:48em) {
    .sm-1 {
        width: 4.1667%;
        ?width: 4.1357%;
    }

    .sm-2 {
        width: 8.3333%;
        ?width: 8.3023%;
    }

    .sm-3 {
        width: 12.5000%;
        ?width: 12.4690%;
    }

    .sm-4 {
        width: 16.6667%;
        ?width: 16.6357%;
    }

    .sm-5 {
        width: 20.8333%;
        ?width: 20.8023%;
    }

    .sm-6, .sm-quarter {
        width: 25%;
        ?width: 24.9690%;
    }

    .sm-7 {
        width: 29.1667%;
        ?width: 29.1357%;
    }

    .sm-8, .sm-third {
        width: 33.3333%;
        ?width: 33.3023%;
    }

    .sm-9 {
        width: 37.5000%;
        ?width: 37.4690%;
    }

    .sm-10 {
        width: 41.6667%;
        ?width: 41.6357%;
    }

    .sm-11 {
        width: 45.8333%;
        ?width: 45.8023%;
    }

    .sm-12, .sm-half {
        width: 50%;
        ?width: 49.9690%;
    }

    .sm-13 {
        width: 54.1667%;
        ?width: 54.1357%;
    }

    .sm-14 {
        width: 58.3333%;
        ?width: 58.3023%;
    }

    .sm-15 {
        width: 62.5000%;
        ?width: 62.4690%;
    }

    .sm-16, .sm-third-2 {
        width: 66.6667%;
        ?width: 66.6357%;
    }

    .sm-17 {
        width: 70.8333%;
        ?width: 70.8023%;
    }

    .sm-18, .sm-quarter-3 {
        width: 75%;
        ?width: 74.9690%;
    }

    .sm-19 {
        width: 79.1667%;
        ?width: 79.1357%;
    }

    .sm-20 {
        width: 83.3333%;
        ?width: 83.3023%;
    }

    .sm-21 {
        width: 87.5000%;
        ?width: 87.4690%;
    }

    .sm-22 {
        width: 91.6667%;
        ?width: 91.6357%;
    }

    .sm-23 {
        width: 95.8333%;
        ?width: 95.8023%;
    }

    .sm-24, .sm-full {
        width: 100%;
    }
}

/* Tablet Landscape to Small Desktop */
@media screen and (min-width:48em) {
    .md-1 {
        width: 4.1667%;
        ?width: 4.1357%;
    }

    .md-2 {
        width: 8.3333%;
        ?width: 8.3023%;
    }

    .md-3 {
        width: 12.5000%;
        ?width: 12.4690%;
    }

    .md-4 {
        width: 16.6667%;
        ?width: 16.6357%;
    }

    .md-5 {
        width: 20.8333%;
        ?width: 20.8023%;
    }

    .md-6, .md-quarter {
        width: 25%;
        ?width: 24.9690%;
    }

    .md-7 {
        width: 29.1667%;
        ?width: 29.1357%;
    }

    .md-8, .md-third {
        width: 33.3333%;
        ?width: 33.3023%;
    }

    .md-9 {
        width: 37.5000%;
        ?width: 37.4690%;
    }

    .md-10 {
        width: 41.6667%;
        ?width: 41.6357%;
    }

    .md-11 {
        width: 45.8333%;
        ?width: 45.8023%;
    }

    .md-12, .md-half {
        width: 50%;
        ?width: 49.9690%;
    }

    .md-13 {
        width: 54.1667%;
        ?width: 54.1357%;
    }

    .md-14 {
        width: 58.3333%;
        ?width: 58.3023%;
    }

    .md-15 {
        width: 62.5000%;
        ?width: 62.4690%;
    }

    .md-16, .md-third-2 {
        width: 66.6667%;
        ?width: 66.6357%;
    }

    .md-17 {
        width: 70.8333%;
        ?width: 70.8023%;
    }

    .md-18, .md-quarter-3 {
        width: 75%;
        ?width: 74.9690%;
    }

    .md-19 {
        width: 79.1667%;
        ?width: 79.1357%;
    }

    .md-20 {
        width: 83.3333%;
        ?width: 83.3023%;
    }

    .md-21 {
        width: 87.5000%;
        ?width: 87.4690%;
    }

    .md-22 {
        width: 91.6667%;
        ?width: 91.6357%;
    }

    .md-23 {
        width: 95.8333%;
        ?width: 95.8023%;
    }

    .md-24, .md-full {
        width: 100%;
    }
}

/* Large Desktop */
@media screen and (min-width: 64em) {
    .lg-1 {
        width: 4.1667%;
        ?width: 4.1357%;
    }

    .lg-2 {
        width: 8.3333%;
        ?width: 8.3023%;
    }

    .lg-3 {
        width: 12.5000%;
        ?width: 12.4690%;
    }

    .lg-4 {
        width: 16.6667%;
        ?width: 16.6357%;
    }

    .lg-5 {
        width: 20.8333%;
        ?width: 20.8023%;
    }

    .lg-6, .lg-quarter {
        width: 25%;
        ?width: 24.9690%;
    }

    .lg-7 {
        width: 29.1667%;
        ?width: 29.1357%;
    }

    .lg-8, .lg-third {
        width: 33.3333%;
        ?width: 33.3023%;
    }

    .lg-9 {
        width: 37.5000%;
        ?width: 37.4690%;
    }

    .lg-10 {
        width: 41.6667%;
        ?width: 41.6357%;
    }

    .lg-11 {
        width: 45.8333%;
        ?width: 45.8023%;
    }

    .lg-12, .lg-half {
        width: 50%;
        ?width: 49.9690%;
    }

    .lg-13 {
        width: 54.1667%;
        ?width: 54.1357%;
    }

    .lg-14 {
        width: 58.3333%;
        ?width: 58.3023%;
    }

    .lg-15 {
        width: 62.5000%;
        ?width: 62.4690%;
    }

    .lg-16, .lg-third-2 {
        width: 66.6667%;
        ?width: 66.6357%;
    }

    .lg-17 {
        width: 70.8333%;
        ?width: 70.8023%;
    }

    .lg-18, .lg-quarter-3 {
        width: 75%;
        ?width: 74.9690%;
    }

    .lg-19 {
        width: 79.1667%;
        ?width: 79.1357%;
    }

    .lg-20 {
        width: 83.3333%;
        ?width: 83.3023%;
    }

    .lg-21 {
        width: 87.5000%;
        ?width: 87.4690%;
    }

    .lg-22 {
        width: 91.6667%;
        ?width: 91.6357%;
    }

    .lg-23 {
        width: 95.8333%;
        ?width: 95.8023%;
    }

    .lg-24, .lg-full {
        width: 100%;
    }
}


/* Hidden Mobile - Landscape */
@media screen and (max-width:47.938em) {
    .md-only{display:none !important;}
    .lg-only{display:none !important;}
    .hide-sm{display:none !important;}
}
/* Hidden Tablet & Small Desktop */
@media screen and (min-width:48em) and (max-width:63.938em) {
    .sm-only{display:none !important;}
    .lg-only{display:none !important;}
    .hide-md{display:none !important;}
}
/* Hidden Large Desktop */
@media screen and (min-width:64em) {
    .sm-only{display:none !important;}
    .md-only{display:none !important;}
    .hide-lg{display:none !important;}
}