/******************************************************************/
/* Supergrid v.1.0                                                */
/******************************************************************/

/* Grid container */
.grid-container, .grid {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Clear fix */
.grid:after {
    clear: both;
    content: '';
    display: table;
}

/* Grid columns */
.grid > .column {
    float: left;
    width: 100%;
    min-height: 1px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Panels */
.column > .panel {
    position: relative;
    min-height: 1px;
    padding: 10px;
    background-color: #f6f6f6;
    border: 1px solid #dddddd;
}

/* Images responsive */
.img-responsive {
    display: block;
    height: auto;
    max-width: 100%;
}

/* Responsive breakpoints */
@media only screen and (max-width: 479px) { /* EXTRA SMALL - XS */
    /* Container */
    .grid-container { width: 100%; padding-right: 10px; padding-left: 10px; }

    /* Gutter vertical */
    .grid, .column { margin-top: 10px; }
    .grid:first-child, .column:first-child { margin-top: 0; }
    .grid.no-gutter > .column { margin-top: 0; }

    /* Hidden */
    .xs-hidden { display: none; }
}

@media only screen and (min-width: 480px) and (max-width: 767px) { /* SMALL - S */
    /* Container */
    .grid-container { width: 100%; padding-right: 20px; padding-left: 20px; }

    /* Columns */
    .s-1 { width: 8.333333333333332% !important; }
    .s-2 { width: 16.666666666666664% !important; }
    .s-3 { width: 25% !important; }
    .s-4 { width: 33.33333333333333% !important; }
    .s-5 { width: 41.66666666666667% !important; }
    .s-6 { width: 50% !important; }
    .s-7 { width: 58.333333333333336% !important; }
    .s-8 { width: 66.66666666666666% !important; }
    .s-9 { width: 75% !important; }
    .s-10 { width: 83.33333333333334% !important; }
    .s-11 { width: 91.66666666666666% !important; }
    .s-12 { width: 100% !important; }

    /* Gutter horizontal */
    .grid { margin-left: -20px; }
    .grid > .column { padding-left: 20px; }
    .grid.no-gutter { margin-left: 0; }
    .grid.no-gutter > .column { padding-left: 0; }

    /* Gutter vertical */
    .grid { margin-top: 20px; }
    .grid:first-child { margin-top: 0; }
    .s-new { display: block; clear: both; height: 20px; }
    .grid.no-gutter > .s-new { height: 0; }

    /* Hidden */
    .s-hidden { display: none; }
}

@media only screen and (min-width: 768px) and (max-width: 991px) { /* MEDIUM - M */
    /* Container */
    .grid-container { width: 720px; margin: 0 auto; }

    /* Columns */
    .m-1 { width: 8.333333333333332% !important; }
    .m-2 { width: 16.666666666666664% !important; }
    .m-3 { width: 25% !important; }
    .m-4 { width: 33.33333333333333% !important; }
    .m-5 { width: 41.66666666666667% !important; }
    .m-6 { width: 50% !important; }
    .m-7 { width: 58.333333333333336% !important; }
    .m-8 { width: 66.66666666666666% !important; }
    .m-9 { width: 75% !important; }
    .m-10 { width: 83.33333333333334% !important; }
    .m-11 { width: 91.66666666666666% !important; }
    .m-12 { width: 100% !important; }

    /* Gutter horizontal */
    .grid { margin-left: -30px; }
    .grid > .column { padding-left: 30px; }
    .grid.no-gutter { margin-left: 0; }
    .grid.no-gutter > .column { padding-left: 0; }

    /* Gutter vertical */
    .grid { margin-top: 30px; }
    .grid:first-child { margin-top: 0; }
    .m-new { display: block; clear: both; height: 30px; }
    .grid.no-gutter > .m-new { height: 0; }

    /* Hidden */
    .m-hidden { display: none; }
}

@media only print, only screen and (min-width: 992px) and (max-width: 1199px) { /* LARGE - L */
    /* Container */
    .grid-container { width: 940px; margin: 0 auto; }

    /* Columns */
    .l-1 { width: 8.333333333333332% !important; }
    .l-2 { width: 16.666666666666664% !important; }
    .l-3 { width: 25% !important; }
    .l-4 { width: 33.33333333333333% !important; }
    .l-5 { width: 41.66666666666667% !important; }
    .l-6 { width: 50% !important; }
    .l-7 { width: 58.333333333333336% !important; }
    .l-8 { width: 66.66666666666666% !important; }
    .l-9 { width: 75% !important; }
    .l-10 { width: 83.33333333333334% !important; }
    .l-11 { width: 91.66666666666666% !important; }
    .l-12 { width: 100% !important; }

    /* Gutter horizontal */
    .grid { margin-left: -40px; }
    .grid > .column { padding-left: 40px; }
    .grid.no-gutter { margin-left: 0; }
    .grid.no-gutter > .column { padding-left: 0; }

    /* Gutter vertical */
    .grid { margin-top: 40px; }
    .grid:first-child { margin-top: 0; }
    .l-new { display: block; clear: both; height: 40px; }
    .grid.no-gutter > .l-new { height: 0; }

    /* Hidden */
    .l-hidden { display: none; }
}

@media only screen and (min-width: 1200px) and (max-width: 1439px) { /* EXTRA LARGE - XL */
    /* Container */
    .grid-container { width: 1140px; margin: 0 auto; }

    /* Columns */
    .xl-1 { width: 8.333333333333332% !important; }
    .xl-2 { width: 16.666666666666664% !important; }
    .xl-3 { width: 25% !important; }
    .xl-4 { width: 33.33333333333333% !important; }
    .xl-5 { width: 41.66666666666667% !important; }
    .xl-6 { width: 50% !important; }
    .xl-7 { width: 58.333333333333336% !important; }
    .xl-8 { width: 66.66666666666666% !important; }
    .xl-9 { width: 75% !important; }
    .xl-10 { width: 83.33333333333334% !important; }
    .xl-11 { width: 91.66666666666666% !important; }
    .xl-12 { width: 100% !important; }

    /* Gutter horizontal */
    .grid { margin-left: -50px; }
    .grid > .column { padding-left: 50px; }
    .grid.no-gutter { margin-left: 0; }
    .grid.no-gutter > .column { padding-left: 0; }

    /* Gutter vertical */
    .grid { margin-top: 50px; }
    .grid:first-child { margin-top: 0; }
    .xl-new { display: block; clear: both; height: 50px; }
    .grid.no-gutter > .xl-new { height: 0; }

    /* Hidden */
    .xl-hidden { display: none; }
}

@media only screen and (min-width: 1440px) { /* EXTRA EXTRA LARGE - XXL */
    /* Container */
    .grid-container { width: 1380px; margin: 0 auto; }

    /* Columns */
    .xxl-1 { width: 8.333333333333332% !important; }
    .xxl-2 { width: 16.666666666666664% !important; }
    .xxl-3 { width: 25% !important; }
    .xxl-4 { width: 33.33333333333333% !important; }
    .xxl-5 { width: 41.66666666666667% !important; }
    .xxl-6 { width: 50% !important; }
    .xxl-7 { width: 58.333333333333336% !important; }
    .xxl-8 { width: 66.66666666666666% !important; }
    .xxl-9 { width: 75% !important; }
    .xxl-10 { width: 83.33333333333334% !important; }
    .xxl-11 { width: 91.66666666666666% !important; }
    .xxl-12 { width: 100% !important; }

    /* Gutter horizontal */
    .grid { margin-left: -60px; }
    .grid > .column { padding-left: 60px; }
    .grid.no-gutter { margin-left: 0; }
    .grid.no-gutter > .column { padding-left: 0; }

    /* Gutter vertical */
    .grid { margin-top: 60px; }
    .grid:first-child { margin-top: 0; }
    .xxl-new { display: block; clear: both; height: 60px; }
    .grid.no-gutter > .xxl-new { height: 0; }

    /* Hidden */
    .xxl-hidden { display: none; }
}