html,body{
    box-sizing: border-box;
}
.mui-flex {
    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-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}
.mui-flex .mui-flex {
    display: -webkit-box !important;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box !important;           /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox !important;          /* TWEENER - IE 10 */
    display: -webkit-flex !important;         /* NEW - Chrome */
    display: flex !important;                /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.mui-flex, .mui-flex *, .mui-flex:after, .mui-flex:before {
    box-sizing: border-box
}

.mui-flex.vertical {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.mui-flex.vertical.reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse
}

.mui-flex.vertical >.cell {
    width: auto
}

.mui-flex.vertical > .cell > .inner {
    position: absolute;
    width: 100%;
    height: 100%
}

.mui-flex.horizental {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row
}

.mui-flex.reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

.mui-flex.justify-start {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.mui-flex.justify-end {
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

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

.mui-flex.justify-between {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.mui-flex.justify-around {
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around
}

.mui-flex.align-start {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start
}

.mui-flex.align-end {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end
}

.mui-flex.align-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.mui-flex.align-stretch {
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch
}

.mui-flex.align-stretch .cell {
    height: auto !important
}

.mui-flex.center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.mui-flex > .cell {
    -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;         /* OLD - Firefox 19- */
    /*width: 20%;               /!* For old syntax, otherwise collapses. *!/*/
    -webkit-flex: 1;          /* Chrome */
    -ms-flex: 1;              /* IE 10 */
    flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
    width: 0;
    -webkit-flex-basis: 0;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    max-width: 100%;
    display: block;
    padding: 0;
    position: relative
}
.mui-flex.vertical > .cell {
    width: auto;
    height: 0;
    -webkit-flex-basis: 0;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    /*max-height: 100%;*/
    /*max-width: inherit;*/
    display: block;
    padding: 0;
    position: relative
}

.mui-flex > .cell.fixed {
    -webkit-box-flex: 0 !important;
    -webkit-flex: none !important;
    -ms-flex: none !important;
    flex: none !important;
    width: auto
}

.mui-flex > .cell.self-start {
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start
}

.mui-flex > .cell.self-end {
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end
}

.mui-flex > .cell.self-center {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center
}

.cat{
    -webkit-box-flex: 3;
    -moz-box-flex: 3;
    -webkit-flex: 3;
    -ms-flex: 3;
    flex: 3;
}