/**
 * ZeroGrid
 *
 * Description:  A modern CSS flexbox grid system.
 * Source:       https://github.com/Smartik89/ZeroGrid
 * Version:      1.0-beta
 * License:      MIT
 * 
 */
/*
-------------------------------------------------------------------------------
Common zg rules
-------------------------------------------------------------------------------
*/
[class*="zg"],
[class*="zg"] > [class*="zg"] {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: -15px;
    margin-right: -15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

[class*="zg"],
[class*="zg"] > [class*="zg"],
[class*="zg"] > .zg-flex {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

[class*="zg"] > * {
    -webkit-flex-basis: 100%;
    flex-basis: 100%;
    max-width: 100%;
}

[class*="zg"] > *,
[class*="zg"] > [class*="zg"] {
    list-style: none;
    margin: 0;
    float: none;
    padding-left: 15px;
    padding-right: 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.zg-as-table {
    margin-bottom: 20px;
}

.zg-as-table > * {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

/*
-------------------------------------------------------------------------------
Grid any device
-------------------------------------------------------------------------------
*/
[class*="zg"] > .col-1,
.zg-12 > * {
    -webkit-flex-basis: 8.333333333333334%;
    flex-basis: 8.333333333333334%;
    max-width: 8.33333333%;
}

[class*="zg"] > .col-2,
.zg-6 > * {
    -webkit-flex-basis: 16.666666666666668%;
    flex-basis: 16.666666666666668%;
    max-width: 16.66666667%;
}

[class*="zg"] > .col-3,
.zg-4 > * {
    -webkit-flex-basis: 25%;
    flex-basis: 25%;
    max-width: 25%;
}

[class*="zg"] > .col-4,
.zg-3 > * {
    -webkit-flex-basis: 33.333333333333336%;
    flex-basis: 33.333333333333336%;
    max-width: 33.33333333%;
}

[class*="zg"] > .col-5 {
    -webkit-flex-basis: 41.666666666666664%;
    flex-basis: 41.666666666666664%;
    max-width: 41.66666667%;
}

.zg-5 > * {
    -webkit-flex-basis: 20%;
    flex-basis: 20%;
    max-width: 20%;
}

[class*="zg"] > .col-6,
.zg-2 > * {
    -webkit-flex-basis: 50%;
    flex-basis: 50%;
    max-width: 50%;
}

[class*="zg"] > .col-7 {
    -webkit-flex-basis: 58.333333333333336%;
    flex-basis: 58.333333333333336%;
    max-width: 58.33333333%;
}

.zg-7 > * {
    -webkit-flex-basis: 14.285714285714286%;
    flex-basis: 14.285714285714286%;
    max-width: 14.28571429%;
}

[class*="zg"] > .col-8 {
    -webkit-flex-basis: 66.66666666666667%;
    flex-basis: 66.66666666666667%;
    max-width: 66.66666667%;
}

.zg-8 > * {
    -webkit-flex-basis: 12.5%;
    flex-basis: 12.5%;
    max-width: 12.5%;
}

[class*="zg"] > .col-9 {
    -webkit-flex-basis: 75%;
    flex-basis: 75%;
    max-width: 75%;
}

.zg-9 > * {
    -webkit-flex-basis: 11.11111111111111%;
    flex-basis: 11.11111111111111%;
    max-width: 11.11111111%;
}

[class*="zg"] > .col-10 {
    -webkit-flex-basis: 83.33333333333333%;
    flex-basis: 83.33333333333333%;
    max-width: 83.33333333%;
}

.zg-10 > * {
    -webkit-flex-basis: 10%;
    flex-basis: 10%;
    max-width: 10%;
}

[class*="zg"] > .col-11 {
    -webkit-flex-basis: 91.66666666666667%;
    flex-basis: 91.66666666666667%;
    max-width: 91.66666667%;
}

.zg-11 > * {
    -webkit-flex-basis: 9.090909090909092%;
    flex-basis: 9.090909090909092%;
    max-width: 9.09090909%;
}

[class*="zg"] > .col-12,
.zg-1 > * {
    -webkit-flex-basis: 100%;
    flex-basis: 100%;
    max-width: 100%;
}

/* Columns horizontal align
	-------------------------*/
.zg-left {
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}

.zg-right {
    -webkit-box-pack: end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

.zg-center {
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

/* Columns vertical align
	----------------------------------*/
.zg-top {
    -webkit-box-align: start;
    -moz-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.zg-middle {
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.zg-bottom {
    -webkit-box-align: end;
    -moz-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
}

/* Columns hv space
	------------------------*/
.zg-collapse {
    margin: 0;
}

.zg-collapse > * {
    padding: 0;
}

/* Columns horizontal space between
	----------------------------------------*/
.zg-normal,
.zg-h-normal {
    margin-left: -15px;
    margin-right: -15px;
}

.zg-normal > *,
.zg-h-normal > * {
    padding-left: 15px;
    padding-right: 15px;
}

.zg-small,
.zg-h-small {
    margin-left: -7.5px;
    margin-right: -7.5px;
}

.zg-small > *,
.zg-h-small > * {
    padding-left: 7.5px;
    padding-right: 7.5px;
}

.zg-large,
.zg-h-large {
    margin-left: -30px;
    margin-right: -30px;
}

.zg-large > *,
.zg-h-large > * {
    padding-left: 30px;
    padding-right: 30px;
}

/* Columns vertical space between
	--------------------------------------*/
.zg-normal,
.zg-v-normal {
    margin-top: -15px;
    margin-bottom: -15px;
}

.zg-normal > *,
.zg-v-normal > * {
    padding-top: 15px;
    padding-bottom: 15px;
}

.zg-small,
.zg-v-small {
    margin-top: -7.5px;
    margin-bottom: -7.5px;
}

.zg-small > *,
.zg-v-small > * {
    padding-top: 7.5px;
    padding-bottom: 7.5px;
}

.zg-large,
.zg-v-large {
    margin-top: -30px;
    margin-bottom: -30px;
}

.zg-large > *,
.zg-v-large > * {
    padding-top: 30px;
    padding-bottom: 30px;
}

/* Columns horizontal direction
	-----------------------------------------*/
.zg-rtl {
    -webkit-box-direction: reverse;
    -moz-box-direction: reverse;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.zg-ltr {
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

/* Columns wrapping in multiple lines
	------------------------------------------*/
.zg-nowrap {
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.zg-wrap {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

/* Grid container, columns show or hide
	--------------------------------------------*/
.zg-hide,
[class*="zg"] > .col-hide {
    display: none;
}

.zg-show,
[class*="zg"] > .col-show {
    display: inline;
    display: initial;
}

/* Column self vertical align
	----------------------------------*/
[class*="zg"] > .col-top {
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
}

[class*="zg"] > .col-bottom {
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
}

[class*="zg"] > .col-middle {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
}

/* Column width auto
	-------------------------*/
[class*="zg"] > .col-auto {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

/* Text align
	------------------*/
.text-right {
    text-align: right;
}

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

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

/*
-------------------------------------------------------------------------------
Grid small view -xs-
-------------------------------------------------------------------------------
*/
@media (min-width: 481px) {
    [class*="zg"] > .col-xs-1,
    .zg-xs-12 > * {
        -webkit-flex-basis: 8.333333333333334%;
        flex-basis: 8.333333333333334%;
        max-width: 8.33333333%;
    }

    [class*="zg"] > .col-xs-2,
    .zg-xs-6 > * {
        -webkit-flex-basis: 16.666666666666668%;
        flex-basis: 16.666666666666668%;
        max-width: 16.66666667%;
    }

    [class*="zg"] > .col-xs-3,
    .zg-xs-4 > * {
        -webkit-flex-basis: 25%;
        flex-basis: 25%;
        max-width: 25%;
    }

    [class*="zg"] > .col-xs-4,
    .zg-xs-3 > * {
        -webkit-flex-basis: 33.333333333333336%;
        flex-basis: 33.333333333333336%;
        max-width: 33.33333333%;
    }

    [class*="zg"] > .col-xs-5 {
        -webkit-flex-basis: 41.666666666666664%;
        flex-basis: 41.666666666666664%;
        max-width: 41.66666667%;
    }

    .zg-xs-5 > * {
        -webkit-flex-basis: 20%;
        flex-basis: 20%;
        max-width: 20%;
    }

    [class*="zg"] > .col-xs-6,
    .zg-xs-2 > * {
        -webkit-flex-basis: 50%;
        flex-basis: 50%;
        max-width: 50%;
    }

    [class*="zg"] > .col-xs-7 {
        -webkit-flex-basis: 58.333333333333336%;
        flex-basis: 58.333333333333336%;
        max-width: 58.33333333%;
    }

    .zg-xs-7 > * {
        -webkit-flex-basis: 14.285714285714286%;
        flex-basis: 14.285714285714286%;
        max-width: 14.28571429%;
    }

    [class*="zg"] > .col-xs-8 {
        -webkit-flex-basis: 66.66666666666667%;
        flex-basis: 66.66666666666667%;
        max-width: 66.66666667%;
    }

    .zg-xs-8 > * {
        -webkit-flex-basis: 12.5%;
        flex-basis: 12.5%;
        max-width: 12.5%;
    }

    [class*="zg"] > .col-xs-9 {
        -webkit-flex-basis: 75%;
        flex-basis: 75%;
        max-width: 75%;
    }

    .zg-xs-9 > * {
        -webkit-flex-basis: 11.11111111111111%;
        flex-basis: 11.11111111111111%;
        max-width: 11.11111111%;
    }

    [class*="zg"] > .col-xs-10 {
        -webkit-flex-basis: 83.33333333333333%;
        flex-basis: 83.33333333333333%;
        max-width: 83.33333333%;
    }

    .zg-xs-10 > * {
        -webkit-flex-basis: 10%;
        flex-basis: 10%;
        max-width: 10%;
    }

    [class*="zg"] > .col-xs-11 {
        -webkit-flex-basis: 91.66666666666667%;
        flex-basis: 91.66666666666667%;
        max-width: 91.66666667%;
    }

    .zg-xs-11 > * {
        -webkit-flex-basis: 9.090909090909092%;
        flex-basis: 9.090909090909092%;
        max-width: 9.09090909%;
    }

    [class*="zg"] > .col-xs-12,
    .zg-xs-1 > * {
        -webkit-flex-basis: 100%;
        flex-basis: 100%;
        max-width: 100%;
    }

    /* Columns horizontal align
      -------------------------*/
    .zg-xs-left {
        -webkit-box-pack: start;
        -moz-box-pack: start;
        -ms-flex-pack: start;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
    }

    .zg-xs-right {
        -webkit-box-pack: end;
        -moz-box-pack: end;
        -ms-flex-pack: end;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
    }

    .zg-xs-center {
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
    }

    /* Columns vertical align
      ----------------------------------*/
    .zg-xs-top {
        -webkit-box-align: start;
        -moz-box-align: start;
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
        align-items: flex-start;
    }

    .zg-xs-middle {
        -webkit-box-align: center;
        -moz-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .zg-xs-bottom {
        -webkit-box-align: end;
        -moz-box-align: end;
        -webkit-align-items: flex-end;
        -ms-flex-align: end;
        align-items: flex-end;
    }

    /* Columns hv space
      ------------------------*/
    .zg-xs-collapse {
        margin: 0;
    }

    .zg-xs-collapse > * {
        padding: 0;
    }

    /* Columns horizontal space between
      ----------------------------------------*/
    .zg-xs-normal,
    .zg-xs-h-normal {
        margin-left: -15px;
        margin-right: -15px;
    }

    .zg-xs-normal > *,
    .zg-xs-h-normal > * {
        padding-left: 15px;
        padding-right: 15px;
    }

    .zg-xs-small,
    .zg-xs-h-small {
        margin-left: -7.5px;
        margin-right: -7.5px;
    }

    .zg-xs-small > *,
    .zg-xs-h-small > * {
        padding-left: 7.5px;
        padding-right: 7.5px;
    }

    .zg-xs-large,
    .zg-xs-h-large {
        margin-left: -30px;
        margin-right: -30px;
    }

    .zg-xs-large > *,
    .zg-xs-h-large > * {
        padding-left: 30px;
        padding-right: 30px;
    }

    /* Columns vertical space between
      --------------------------------------*/
    .zg-xs-normal,
    .zg-xs-v-normal {
        margin-top: -15px;
        margin-bottom: -15px;
    }

    .zg-xs-normal > *,
    .zg-xs-v-normal > * {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .zg-xs-small,
    .zg-xs-v-small {
        margin-top: -7.5px;
        margin-bottom: -7.5px;
    }

    .zg-xs-small > *,
    .zg-xs-v-small > * {
        padding-top: 7.5px;
        padding-bottom: 7.5px;
    }

    .zg-xs-large,
    .zg-xs-v-large {
        margin-top: -30px;
        margin-bottom: -30px;
    }

    .zg-xs-large > *,
    .zg-xs-v-large > * {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    /* Columns horizontal direction
      -----------------------------------------*/
    .zg-xs-rtl {
        -webkit-box-direction: reverse;
        -moz-box-direction: reverse;
        -webkit-box-orient: horizontal;
        -moz-box-orient: horizontal;
        -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
    }

    .zg-xs-ltr {
        -webkit-box-direction: normal;
        -moz-box-direction: normal;
        -webkit-box-orient: horizontal;
        -moz-box-orient: horizontal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
    }

    /* Columns wrapping in multiple lines
      ------------------------------------------*/
    .zg-xs-nowrap {
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

    .zg-xs-wrap {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    /* Grid container, columns show or hide
      --------------------------------------------*/
    .zg-xs-hide,
    [class*="zg"] > .col-xs-hide {
        display: none;
    }

    .zg-xs-show,
    [class*="zg"] > .col-xs-show {
        display: inline;
        display: initial;
    }

    /* Column self vertical align
      ----------------------------------*/
    [class*="zg"] > .col-xs-top {
        -webkit-align-self: flex-start;
        -ms-flex-item-align: start;
        align-self: flex-start;
    }

    [class*="zg"] > .col-xs-bottom {
        -webkit-align-self: flex-end;
        -ms-flex-item-align: end;
        align-self: flex-end;
    }

    [class*="zg"] > .col-xs-middle {
        -webkit-align-self: center;
        -ms-flex-item-align: center;
        align-self: center;
    }

    /* Column width auto
      -------------------------*/
    [class*="zg"] > .col-xs-auto {
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
    }

    /* Text align
      ------------------*/
    .text-xs-right {
        text-align: right;
    }

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

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

/*
-------------------------------------------------------------------------------
Small view -sm-
-------------------------------------------------------------------------------
*/
@media (min-width: 769px) {
    [class*="zg"] > .col-sm-1,
    .zg-sm-12 > * {
        -webkit-flex-basis: 8.333333333333334%;
        flex-basis: 8.333333333333334%;
        max-width: 8.33333333%;
    }

    [class*="zg"] > .col-sm-2,
    .zg-sm-6 > * {
        -webkit-flex-basis: 16.666666666666668%;
        flex-basis: 16.666666666666668%;
        max-width: 16.66666667%;
    }

    [class*="zg"] > .col-sm-3,
    .zg-sm-4 > * {
        -webkit-flex-basis: 25%;
        flex-basis: 25%;
        max-width: 25%;
    }

    [class*="zg"] > .col-sm-4,
    .zg-sm-3 > * {
        -webkit-flex-basis: 33.333333333333336%;
        flex-basis: 33.333333333333336%;
        max-width: 33.33333333%;
    }

    [class*="zg"] > .col-sm-5 {
        -webkit-flex-basis: 41.666666666666664%;
        flex-basis: 41.666666666666664%;
        max-width: 41.66666667%;
    }

    .zg-sm-5 > * {
        -webkit-flex-basis: 20%;
        flex-basis: 20%;
        max-width: 20%;
    }

    [class*="zg"] > .col-sm-6,
    .zg-sm-2 > * {
        -webkit-flex-basis: 50%;
        flex-basis: 50%;
        max-width: 50%;
    }

    [class*="zg"] > .col-sm-7 {
        -webkit-flex-basis: 58.333333333333336%;
        flex-basis: 58.333333333333336%;
        max-width: 58.33333333%;
    }

    .zg-sm-7 > * {
        -webkit-flex-basis: 14.285714285714286%;
        flex-basis: 14.285714285714286%;
        max-width: 14.28571429%;
    }

    [class*="zg"] > .col-sm-8 {
        -webkit-flex-basis: 66.66666666666667%;
        flex-basis: 66.66666666666667%;
        max-width: 66.66666667%;
    }

    .zg-sm-8 > * {
        -webkit-flex-basis: 12.5%;
        flex-basis: 12.5%;
        max-width: 12.5%;
    }

    [class*="zg"] > .col-sm-9 {
        -webkit-flex-basis: 75%;
        flex-basis: 75%;
        max-width: 75%;
    }

    .zg-sm-9 > * {
        -webkit-flex-basis: 11.11111111111111%;
        flex-basis: 11.11111111111111%;
        max-width: 11.11111111%;
    }

    [class*="zg"] > .col-sm-10 {
        -webkit-flex-basis: 83.33333333333333%;
        flex-basis: 83.33333333333333%;
        max-width: 83.33333333%;
    }

    .zg-sm-10 > * {
        -webkit-flex-basis: 10%;
        flex-basis: 10%;
        max-width: 10%;
    }

    [class*="zg"] > .col-sm-11 {
        -webkit-flex-basis: 91.66666666666667%;
        flex-basis: 91.66666666666667%;
        max-width: 91.66666667%;
    }

    .zg-sm-11 > * {
        -webkit-flex-basis: 9.090909090909092%;
        flex-basis: 9.090909090909092%;
        max-width: 9.09090909%;
    }

    [class*="zg"] > .col-sm-12,
    .zg-sm-1 > * {
        -webkit-flex-basis: 100%;
        flex-basis: 100%;
        max-width: 100%;
    }

    /* Columns horizontal align
      -------------------------*/
    .zg-sm-left {
        -webkit-box-pack: start;
        -moz-box-pack: start;
        -ms-flex-pack: start;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
    }

    .zg-sm-right {
        -webkit-box-pack: end;
        -moz-box-pack: end;
        -ms-flex-pack: end;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
    }

    .zg-sm-center {
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
    }

    /* Columns vertical align
      ----------------------------------*/
    .zg-sm-top {
        -webkit-box-align: start;
        -moz-box-align: start;
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
        align-items: flex-start;
    }

    .zg-sm-middle {
        -webkit-box-align: center;
        -moz-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .zg-sm-bottom {
        -webkit-box-align: end;
        -moz-box-align: end;
        -webkit-align-items: flex-end;
        -ms-flex-align: end;
        align-items: flex-end;
    }

    /* Columns hv space
      ------------------------*/
    .zg-sm-collapse {
        margin: 0;
    }

    .zg-sm-collapse > * {
        padding: 0;
    }

    /* Columns horizontal space between
      ----------------------------------------*/
    .zg-sm-normal,
    .zg-sm-h-normal {
        margin-left: -15px;
        margin-right: -15px;
    }

    .zg-sm-normal > *,
    .zg-sm-h-normal > * {
        padding-left: 15px;
        padding-right: 15px;
    }

    .zg-sm-small,
    .zg-sm-h-small {
        margin-left: -7.5px;
        margin-right: -7.5px;
    }

    .zg-sm-small > *,
    .zg-sm-h-small > * {
        padding-left: 7.5px;
        padding-right: 7.5px;
    }

    .zg-sm-large,
    .zg-sm-h-large {
        margin-left: -30px;
        margin-right: -30px;
    }

    .zg-sm-large > *,
    .zg-sm-h-large > * {
        padding-left: 30px;
        padding-right: 30px;
    }

    /* Columns vertical space between
      --------------------------------------*/
    .zg-sm-normal,
    .zg-sm-v-normal {
        margin-top: -15px;
        margin-bottom: -15px;
    }

    .zg-sm-normal > *,
    .zg-sm-v-normal > * {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .zg-sm-small,
    .zg-sm-v-small {
        margin-top: -7.5px;
        margin-bottom: -7.5px;
    }

    .zg-sm-small > *,
    .zg-sm-v-small > * {
        padding-top: 7.5px;
        padding-bottom: 7.5px;
    }

    .zg-sm-large,
    .zg-sm-v-large {
        margin-top: -30px;
        margin-bottom: -30px;
    }

    .zg-sm-large > *,
    .zg-sm-v-large > * {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    /* Columns horizontal direction
      -----------------------------------------*/
    .zg-sm-rtl {
        -webkit-box-direction: reverse;
        -moz-box-direction: reverse;
        -webkit-box-orient: horizontal;
        -moz-box-orient: horizontal;
        -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
    }

    .zg-sm-ltr {
        -webkit-box-direction: normal;
        -moz-box-direction: normal;
        -webkit-box-orient: horizontal;
        -moz-box-orient: horizontal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
    }

    /* Columns wrapping in multiple lines
      ------------------------------------------*/
    .zg-sm-nowrap {
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

    .zg-sm-wrap {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    /* Grid container, columns show or hide
      --------------------------------------------*/
    .zg-sm-hide,
    [class*="zg"] > .col-sm-hide {
        display: none;
    }

    .zg-sm-show,
    [class*="zg"] > .col-sm-show {
        display: inline;
        display: initial;
    }

    /* Column self vertical align
      ----------------------------------*/
    [class*="zg"] > .col-sm-top {
        -webkit-align-self: flex-start;
        -ms-flex-item-align: start;
        align-self: flex-start;
    }

    [class*="zg"] > .col-sm-bottom {
        -webkit-align-self: flex-end;
        -ms-flex-item-align: end;
        align-self: flex-end;
    }

    [class*="zg"] > .col-sm-middle {
        -webkit-align-self: center;
        -ms-flex-item-align: center;
        align-self: center;
    }

    /* Column width auto
      -------------------------*/
    [class*="zg"] > .col-sm-auto {
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
    }

    /* Text align
      ------------------*/
    .text-sm-right {
        text-align: right;
    }

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

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

/*
-------------------------------------------------------------------------------
Medium view -md-
-------------------------------------------------------------------------------
*/
@media (min-width: 981px) {
    [class*="zg"] > .col-md-1,
    .zg-md-12 > * {
        -webkit-flex-basis: 8.333333333333334%;
        flex-basis: 8.333333333333334%;
        max-width: 8.33333333%;
    }

    [class*="zg"] > .col-md-2,
    .zg-md-6 > * {
        -webkit-flex-basis: 16.666666666666668%;
        flex-basis: 16.666666666666668%;
        max-width: 16.66666667%;
    }

    [class*="zg"] > .col-md-3,
    .zg-md-4 > * {
        -webkit-flex-basis: 25%;
        flex-basis: 25%;
        max-width: 25%;
    }

    [class*="zg"] > .col-md-4,
    .zg-md-3 > * {
        -webkit-flex-basis: 33.333333333333336%;
        flex-basis: 33.333333333333336%;
        max-width: 33.33333333%;
    }

    [class*="zg"] > .col-md-5 {
        -webkit-flex-basis: 41.666666666666664%;
        flex-basis: 41.666666666666664%;
        max-width: 41.66666667%;
    }

    .zg-md-5 > * {
        -webkit-flex-basis: 20%;
        flex-basis: 20%;
        max-width: 20%;
    }

    [class*="zg"] > .col-md-6,
    .zg-md-2 > * {
        -webkit-flex-basis: 50%;
        flex-basis: 50%;
        max-width: 50%;
    }

    [class*="zg"] > .col-md-7 {
        -webkit-flex-basis: 58.333333333333336%;
        flex-basis: 58.333333333333336%;
        max-width: 58.33333333%;
    }

    .zg-md-7 > * {
        -webkit-flex-basis: 14.285714285714286%;
        flex-basis: 14.285714285714286%;
        max-width: 14.28571429%;
    }

    [class*="zg"] > .col-md-8 {
        -webkit-flex-basis: 66.66666666666667%;
        flex-basis: 66.66666666666667%;
        max-width: 66.66666667%;
    }

    .zg-md-8 > * {
        -webkit-flex-basis: 12.5%;
        flex-basis: 12.5%;
        max-width: 12.5%;
    }

    [class*="zg"] > .col-md-9 {
        -webkit-flex-basis: 75%;
        flex-basis: 75%;
        max-width: 75%;
    }

    .zg-md-9 > * {
        -webkit-flex-basis: 11.11111111111111%;
        flex-basis: 11.11111111111111%;
        max-width: 11.11111111%;
    }

    [class*="zg"] > .col-md-10 {
        -webkit-flex-basis: 83.33333333333333%;
        flex-basis: 83.33333333333333%;
        max-width: 83.33333333%;
    }

    .zg-md-10 > * {
        -webkit-flex-basis: 10%;
        flex-basis: 10%;
        max-width: 10%;
    }

    [class*="zg"] > .col-md-11 {
        -webkit-flex-basis: 91.66666666666667%;
        flex-basis: 91.66666666666667%;
        max-width: 91.66666667%;
    }

    .zg-md-11 > * {
        -webkit-flex-basis: 9.090909090909092%;
        flex-basis: 9.090909090909092%;
        max-width: 9.09090909%;
    }

    [class*="zg"] > .col-md-12,
    .zg-md-1 > * {
        -webkit-flex-basis: 100%;
        flex-basis: 100%;
        max-width: 100%;
    }

    /* Columns horizontal align
      -------------------------*/
    .zg-md-left {
        -webkit-box-pack: start;
        -moz-box-pack: start;
        -ms-flex-pack: start;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
    }

    .zg-md-right {
        -webkit-box-pack: end;
        -moz-box-pack: end;
        -ms-flex-pack: end;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
    }

    .zg-md-center {
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
    }

    /* Columns vertical align
      ----------------------------------*/
    .zg-md-top {
        -webkit-box-align: start;
        -moz-box-align: start;
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
        align-items: flex-start;
    }

    .zg-md-middle {
        -webkit-box-align: center;
        -moz-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .zg-md-bottom {
        -webkit-box-align: end;
        -moz-box-align: end;
        -webkit-align-items: flex-end;
        -ms-flex-align: end;
        align-items: flex-end;
    }

    /* Columns hv space
      ------------------------*/
    .zg-md-collapse {
        margin: 0;
    }

    .zg-md-collapse > * {
        padding: 0;
    }

    /* Columns horizontal space between
      ----------------------------------------*/
    .zg-md-normal,
    .zg-md-h-normal {
        margin-left: -15px;
        margin-right: -15px;
    }

    .zg-md-normal > *,
    .zg-md-h-normal > * {
        padding-left: 15px;
        padding-right: 15px;
    }

    .zg-md-small,
    .zg-md-h-small {
        margin-left: -7.5px;
        margin-right: -7.5px;
    }

    .zg-md-small > *,
    .zg-md-h-small > * {
        padding-left: 7.5px;
        padding-right: 7.5px;
    }

    .zg-md-large,
    .zg-md-h-large {
        margin-left: -30px;
        margin-right: -30px;
    }

    .zg-md-large > *,
    .zg-md-h-large > * {
        padding-left: 30px;
        padding-right: 30px;
    }

    /* Columns vertical space between
      --------------------------------------*/
    .zg-md-normal,
    .zg-md-v-normal {
        margin-top: -15px;
        margin-bottom: -15px;
    }

    .zg-md-normal > *,
    .zg-md-v-normal > * {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .zg-md-small,
    .zg-md-v-small {
        margin-top: -7.5px;
        margin-bottom: -7.5px;
    }

    .zg-md-small > *,
    .zg-md-v-small > * {
        padding-top: 7.5px;
        padding-bottom: 7.5px;
    }

    .zg-md-large,
    .zg-md-v-large {
        margin-top: -30px;
        margin-bottom: -30px;
    }

    .zg-md-large > *,
    .zg-md-v-large > * {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    /* Columns horizontal direction
      -----------------------------------------*/
    .zg-md-rtl {
        -webkit-box-direction: reverse;
        -moz-box-direction: reverse;
        -webkit-box-orient: horizontal;
        -moz-box-orient: horizontal;
        -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
    }

    .zg-md-ltr {
        -webkit-box-direction: normal;
        -moz-box-direction: normal;
        -webkit-box-orient: horizontal;
        -moz-box-orient: horizontal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
    }

    /* Columns wrapping in multiple lines
      ------------------------------------------*/
    .zg-md-nowrap {
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

    .zg-md-wrap {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    /* Grid container, columns show or hide
      --------------------------------------------*/
    .zg-md-hide,
    [class*="zg"] > .col-md-hide {
        display: none;
    }

    .zg-md-show,
    [class*="zg"] > .col-md-show {
        display: inline;
        display: initial;
    }

    /* Column self vertical align
      ----------------------------------*/
    [class*="zg"] > .col-md-top {
        -webkit-align-self: flex-start;
        -ms-flex-item-align: start;
        align-self: flex-start;
    }

    [class*="zg"] > .col-md-bottom {
        -webkit-align-self: flex-end;
        -ms-flex-item-align: end;
        align-self: flex-end;
    }

    [class*="zg"] > .col-md-middle {
        -webkit-align-self: center;
        -ms-flex-item-align: center;
        align-self: center;
    }

    /* Column width auto
      -------------------------*/
    [class*="zg"] > .col-md-auto {
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
    }

    /* Text align
      ------------------*/
    .text-md-right {
        text-align: right;
    }

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

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

/*
-------------------------------------------------------------------------------
Large view -lg-
-------------------------------------------------------------------------------
*/
@media (min-width: 1201px) {
    [class*="zg"] > .col-lg-1,
    .zg-lg-12 > * {
        -webkit-flex-basis: 8.333333333333334%;
        flex-basis: 8.333333333333334%;
        max-width: 8.33333333%;
    }

    [class*="zg"] > .col-lg-2,
    .zg-lg-6 > * {
        -webkit-flex-basis: 16.666666666666668%;
        flex-basis: 16.666666666666668%;
        max-width: 16.66666667%;
    }

    [class*="zg"] > .col-lg-3,
    .zg-lg-4 > * {
        -webkit-flex-basis: 25%;
        flex-basis: 25%;
        max-width: 25%;
    }

    [class*="zg"] > .col-lg-4,
    .zg-lg-3 > * {
        -webkit-flex-basis: 33.333333333333336%;
        flex-basis: 33.333333333333336%;
        max-width: 33.33333333%;
    }

    [class*="zg"] > .col-lg-5 {
        -webkit-flex-basis: 41.666666666666664%;
        flex-basis: 41.666666666666664%;
        max-width: 41.66666667%;
    }

    .zg-lg-5 > * {
        -webkit-flex-basis: 20%;
        flex-basis: 20%;
        max-width: 20%;
    }

    [class*="zg"] > .col-lg-6,
    .zg-lg-2 > * {
        -webkit-flex-basis: 50%;
        flex-basis: 50%;
        max-width: 50%;
    }

    [class*="zg"] > .col-lg-7 {
        -webkit-flex-basis: 58.333333333333336%;
        flex-basis: 58.333333333333336%;
        max-width: 58.33333333%;
    }

    .zg-lg-7 > * {
        -webkit-flex-basis: 14.285714285714286%;
        flex-basis: 14.285714285714286%;
        max-width: 14.28571429%;
    }

    [class*="zg"] > .col-lg-8 {
        -webkit-flex-basis: 66.66666666666667%;
        flex-basis: 66.66666666666667%;
        max-width: 66.66666667%;
    }

    .zg-lg-8 > * {
        -webkit-flex-basis: 12.5%;
        flex-basis: 12.5%;
        max-width: 12.5%;
    }

    [class*="zg"] > .col-lg-9 {
        -webkit-flex-basis: 75%;
        flex-basis: 75%;
        max-width: 75%;
    }

    .zg-lg-9 > * {
        -webkit-flex-basis: 11.11111111111111%;
        flex-basis: 11.11111111111111%;
        max-width: 11.11111111%;
    }

    [class*="zg"] > .col-lg-10 {
        -webkit-flex-basis: 83.33333333333333%;
        flex-basis: 83.33333333333333%;
        max-width: 83.33333333%;
    }

    .zg-lg-10 > * {
        -webkit-flex-basis: 10%;
        flex-basis: 10%;
        max-width: 10%;
    }

    [class*="zg"] > .col-lg-11 {
        -webkit-flex-basis: 91.66666666666667%;
        flex-basis: 91.66666666666667%;
        max-width: 91.66666667%;
    }

    .zg-lg-11 > * {
        -webkit-flex-basis: 9.090909090909092%;
        flex-basis: 9.090909090909092%;
        max-width: 9.09090909%;
    }

    [class*="zg"] > .col-lg-12,
    .zg-lg-1 > * {
        -webkit-flex-basis: 100%;
        flex-basis: 100%;
        max-width: 100%;
    }

    /* Columns horizontal align
      -------------------------*/
    .zg-lg-left {
        -webkit-box-pack: start;
        -moz-box-pack: start;
        -ms-flex-pack: start;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
    }

    .zg-lg-right {
        -webkit-box-pack: end;
        -moz-box-pack: end;
        -ms-flex-pack: end;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
    }

    .zg-lg-center {
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
    }

    /* Columns vertical align
      ----------------------------------*/
    .zg-lg-top {
        -webkit-box-align: start;
        -moz-box-align: start;
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
        align-items: flex-start;
    }

    .zg-lg-middle {
        -webkit-box-align: center;
        -moz-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .zg-lg-bottom {
        -webkit-box-align: end;
        -moz-box-align: end;
        -webkit-align-items: flex-end;
        -ms-flex-align: end;
        align-items: flex-end;
    }

    /* Columns hv space
      ------------------------*/
    .zg-lg-collapse {
        margin: 0;
    }

    .zg-lg-collapse > * {
        padding: 0;
    }

    /* Columns horizontal space between
      ----------------------------------------*/
    .zg-lg-normal,
    .zg-lg-h-normal {
        margin-left: -15px;
        margin-right: -15px;
    }

    .zg-lg-normal > *,
    .zg-lg-h-normal > * {
        padding-left: 15px;
        padding-right: 15px;
    }

    .zg-lg-small,
    .zg-lg-h-small {
        margin-left: -7.5px;
        margin-right: -7.5px;
    }

    .zg-lg-small > *,
    .zg-lg-h-small > * {
        padding-left: 7.5px;
        padding-right: 7.5px;
    }

    .zg-lg-large,
    .zg-lg-h-large {
        margin-left: -30px;
        margin-right: -30px;
    }

    .zg-lg-large > *,
    .zg-lg-h-large > * {
        padding-left: 30px;
        padding-right: 30px;
    }

    /* Columns vertical space between
      --------------------------------------*/
    .zg-lg-normal,
    .zg-lg-v-normal {
        margin-top: -15px;
        margin-bottom: -15px;
    }

    .zg-lg-normal > *,
    .zg-lg-v-normal > * {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .zg-lg-small,
    .zg-lg-v-small {
        margin-top: -7.5px;
        margin-bottom: -7.5px;
    }

    .zg-lg-small > *,
    .zg-lg-v-small > * {
        padding-top: 7.5px;
        padding-bottom: 7.5px;
    }

    .zg-lg-large,
    .zg-lg-v-large {
        margin-top: -30px;
        margin-bottom: -30px;
    }

    .zg-lg-large > *,
    .zg-lg-v-large > * {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    /* Columns horizontal direction
      -----------------------------------------*/
    .zg-lg-rtl {
        -webkit-box-direction: reverse;
        -moz-box-direction: reverse;
        -webkit-box-orient: horizontal;
        -moz-box-orient: horizontal;
        -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
    }

    .zg-lg-ltr {
        -webkit-box-direction: normal;
        -moz-box-direction: normal;
        -webkit-box-orient: horizontal;
        -moz-box-orient: horizontal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
    }

    /* Columns wrapping in multiple lines
      ------------------------------------------*/
    .zg-lg-nowrap {
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

    .zg-lg-wrap {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    /* Grid container, columns show or hide
      --------------------------------------------*/
    .zg-lg-hide,
    [class*="zg"] > .col-lg-hide {
        display: none;
    }

    .zg-lg-show,
    [class*="zg"] > .col-lg-show {
        display: inline;
        display: initial;
    }

    /* Column self vertical align
      ----------------------------------*/
    [class*="zg"] > .col-lg-top {
        -webkit-align-self: flex-start;
        -ms-flex-item-align: start;
        align-self: flex-start;
    }

    [class*="zg"] > .col-lg-bottom {
        -webkit-align-self: flex-end;
        -ms-flex-item-align: end;
        align-self: flex-end;
    }

    [class*="zg"] > .col-lg-middle {
        -webkit-align-self: center;
        -ms-flex-item-align: center;
        align-self: center;
    }

    /* Column width auto
      -------------------------*/
    [class*="zg"] > .col-lg-auto {
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
    }

    /* Text align
      ------------------*/
    .text-lg-right {
        text-align: right;
    }

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

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