/* * Pills * A simple, responsive, and tiny CSS grid for humans who don't like memorising all those cryptic codes like col-*-6 or something. 
* https://github.com/rohitkrai03/pills * Copyright 2015, Rohit Rai */

 html, body {
     margin: 0;
     padding: 0;
}

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

 .row {
     display: block;
     margin: 0 auto;
     max-width: 1024px;
     overflow: hidden;
     *zoom: 1;
}

 .row::before, .row::after {
     content: "";
     display: table;
     line-height: 0;
}

 .row::after {
     clear: both;
}

 .row .row {
     max-width: 100%;
     min-width: 100%;
}

 .row .column, .row .columns {
     float: left;
     padding: 10px;
     width: 100%;
}

 .row .column:first-of-type, .row .columns:first-of-type {
     padding-left: 20px;
}

 .row .column:last-of-type, .row .columns:last-of-type {
     padding-right: 20px;
}

 .wide {
     max-width: 1180px;
}

 .wider {
     max-width: 1366px;
}

 .free-width {
     max-width: none;
}

 .column img, .columns img {
     max-width: 100%;
}

 .column .column:first-of-type, .column .columns:first-of-type, .columns .column:first-of-type, .columns .columns:first-of-type {
     padding-left: 0;
}

 .column .column:last-of-type, .column .columns:last-of-type, .columns .column:last-of-type, .columns .columns:last-of-type {
     padding-right: 0;
}

 .column .row:first-of-type > .column, .column .row:first-of-type > .columns, .columns .row:first-of-type > .column, .columns .row:first-of-type > .columns {
     padding-top: 0;
}

 .column .row:last-of-type > .column, .column .row:last-of-type > .columns, .columns .row:last-of-type > .column, .columns .row:last-of-type > .columns {
     padding-bottom: 0;
}

 .column.no-padding, .columns.no-padding {
     padding-left: 0 !important;
     padding-right: 0 !important;
}

 .column.one, .columns.one {
     width: 8.33333%;
}
 .column.two, .columns.two {
     width: 16.66667%;
}

 .column.three, .columns.three {
     width: 25%;
}

 .column.four, .columns.four {
     width: 33.33333%;
}

 .column.five, .columns.five {
     width: 41.66667%;
}

 .column.six, .columns.six {
     width: 50%;
}

 .column.seven, .columns.seven {
     width: 58.33333%;
}

 .column.eight, .columns.eight {
     width: 66.66667%;
}

 .column.nine, .columns.nine {
     width: 75%;
}

 .column.ten, .columns.ten {
     width: 83.33333%;
}

 .column.eleven, .columns.eleven {
     width: 91.66667%;
}

 .column.twelve, .columns.twelve {
     width: 100%;
}

 .column.whole, .column.w-1-1, .columns.whole, .columns.w-1-1 {
     width: 100%;
}

 .column.half, .column.w-1-2, .columns.half, .columns.w-1-2 {
     width: 50%;
}

 .column.one-third, .column.w-1-3, .columns.one-third, .columns.w-1-3 {
     width: 33.33333%;
}

 .column.two-thirds, .column.w-2-3, .columns.two-thirds, .columns.w-2-3 {
     width: 66.66667%;
}

 .column.one-quarter, .column.one-fourth, .column.w-1-4, .columns.one-quarter, .columns.one-fourth, .columns.w-1-4 {
     width: 25%;
}

 .column.three-quarters, .column.three-fourths, .column.w-3-4, .columns.three-quarters, .columns.three-fourths, .columns.w-3-4 {
     width: 75%;
}

 .column.one-fifth, .column.w-1-5, .columns.one-fifth, .columns.w-1-5 {
     width: 20%;
}

 .column.two-fifths, .column.w-2-5, .columns.two-fifths, .columns.w-2-5 {
     width: 40%;
}

 .column.three-fifths, .column.w-3-5, .columns.three-fifths, .columns.w-3-5 {
     width: 60%;
}

 .column.four-fifths, .column.w-4-5, .columns.four-fifths, .columns.w-4-5 {
     width: 80%;
}

 .offset.by-one {
     margin-left: 8.33333%;
}

 .offset.by-two {
     margin-left: 16.66667%;
}

 .offset.by-three {
     margin-left: 25%;
}

 .offset.by-four {
     margin-left: 33.33333%;
}

 .offset.by-five {
     margin-left: 41.66667%;
}

 .offset.by-six {
     margin-left: 50%;
}

 .offset.by-seven {
     margin-left: 58.33333%;
}

 .offset.by-eight {
     margin-left: 66.66667%;
}
 .offset.by-nine {
     margin-left: 75%;
}

 .offset.by-ten {
     margin-left: 83.33333%;
}

 .offset.by-eleven {
     margin-left: 91.66667%;
}

 .offset.by-half {
     margin-left: 50%;
}

 .offset.by-one-third {
     margin-left: 33.33333%;
}

 .offset.by-two-thirds {
     margin-left: 66.66667%;
}

 .offset.by-one-quarter, .offset.by-one-fourth {
     margin-left: 25%;
}

 .offset.by-three-quarters, .offset.by-three-fourths {
     margin-left: 75%;
}

 .offset.by-one-fifth {
     margin-left: 20%;
}

 .offset.by-two-fifths {
     margin-left: 40%;
}

 .offset.by-three-fifths {
     margin-left: 60%;
}

 .offset.by-four-fifths {
     margin-left: 80%;
}

 .align-center {
     text-align: center;
}

 .align-left {
     text-align: left;
}

 .align-right {
     text-align: right;
}

 .pull-left {
     float: left;
}

 .only-on-mobiles {
     display: none !important;
}

 .hide {
     display: none !important;
}

 .invisible {
     visibility: hidden;
}

/* Mobile first */

 @media screen and (max-width: 599px) {
     .row:not(.no-stacking-on-mobiles) > .column, .row:not(.no-stacking-on-mobiles) > .columns {
         padding-left: 20px;
         padding-right: 20px;
         width: 100% !important;
    }
     .column .row .column, .column .row .columns, .columns .row .column, .columns .row .columns {
         padding-left: 0px;
         padding-right: 0px;
    }
     .center-on-mobiles {
         text-align: center !important;
    }
     .hide-on-mobiles {
         display: none !important;
    }
     .only-on-mobiles {
         display: block !important;
    }
}

 @media screen and (min-width: 1180px) {
     .wide .row, .row .wide {
         margin: 0 auto;
         max-width: 1180px;
    }
}

 @media screen and (min-width: 1366px) {
     .wider .row, .row .wider {
         margin: 0 auto;
         max-width: 1366px;
    }
}

 .show-for-landscape, .hide-for-portrait {
     display: block !important;
}

 @media screen and (orientation: landscape) {
     .show-for-landscape, .hide-for-portrait {
         display: block !important;
    }
}

 @media screen and (orientation: portrait) {
     .show-for-landscape, .hide-for-portrait {
         display: none !important;
    }
}

 .hide-for-landscape, .show-for-portrait {
     display: none !important;
}

 @media screen and (orientation: landscape) {
     .hide-for-landscape, .show-for-portrait {
         display: none !important;
    }
}

 @media screen and (orientation: portrait) {
     .hide-for-landscape, .show-for-portrait {
         display: block !important;
    }
}