ng2-flex-layout
Version:
Angular 2 Material Responsive Layout Directives
2,123 lines (1,929 loc) • 266 kB
CSS
.layout, .layout-column, .layout-row {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex; }
.layout-column {
flex-direction: column; }
.layout-row {
flex-direction: row; }
.flex {
flex: 1;
box-sizing: border-box; }
.flex-0 {
flex: 1 1 0%;
max-width: 0%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-0 {
flex: 1 1 0%;
max-width: 0%;
max-height: 100%;
box-sizing: border-box;
min-width: 0; }
.layout-column > .flex-0 {
flex: 1 1 0%;
max-width: 100%;
max-height: 0%;
box-sizing: border-box; }
.layout-row > .flex-33, .layout-row > .flex-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-66, .layout-row > .flex-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-33, .layout-column > .flex-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-66, .layout-column > .flex-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-row > .flex-0 {
flex: 1 1 0%;
max-width: 0%;
max-height: 100%;
box-sizing: border-box;
min-width: 0; }
.layout-column > .flex-0 {
flex: 1 1 0%;
max-width: 100%;
max-height: 0%;
box-sizing: border-box;
min-height: 0; }
.flex-5 {
flex: 1 1 5%;
max-width: 5%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-5 {
flex: 1 1 5%;
max-width: 5%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-5 {
flex: 1 1 5%;
max-width: 100%;
max-height: 5%;
box-sizing: border-box; }
.layout-row > .flex-33, .layout-row > .flex-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-66, .layout-row > .flex-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-33, .layout-column > .flex-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-66, .layout-column > .flex-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-row > .flex-5 {
flex: 1 1 5%;
max-width: 5%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-5 {
flex: 1 1 5%;
max-width: 100%;
max-height: 5%;
box-sizing: border-box; }
.flex-10 {
flex: 1 1 10%;
max-width: 10%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-10 {
flex: 1 1 10%;
max-width: 10%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-10 {
flex: 1 1 10%;
max-width: 100%;
max-height: 10%;
box-sizing: border-box; }
.layout-row > .flex-33, .layout-row > .flex-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-66, .layout-row > .flex-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-33, .layout-column > .flex-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-66, .layout-column > .flex-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-row > .flex-10 {
flex: 1 1 10%;
max-width: 10%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-10 {
flex: 1 1 10%;
max-width: 100%;
max-height: 10%;
box-sizing: border-box; }
.flex-15 {
flex: 1 1 15%;
max-width: 15%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-15 {
flex: 1 1 15%;
max-width: 15%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-15 {
flex: 1 1 15%;
max-width: 100%;
max-height: 15%;
box-sizing: border-box; }
.layout-row > .flex-33, .layout-row > .flex-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-66, .layout-row > .flex-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-33, .layout-column > .flex-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-66, .layout-column > .flex-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-row > .flex-15 {
flex: 1 1 15%;
max-width: 15%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-15 {
flex: 1 1 15%;
max-width: 100%;
max-height: 15%;
box-sizing: border-box; }
.flex-20 {
flex: 1 1 20%;
max-width: 20%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-20 {
flex: 1 1 20%;
max-width: 20%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-20 {
flex: 1 1 20%;
max-width: 100%;
max-height: 20%;
box-sizing: border-box; }
.layout-row > .flex-33, .layout-row > .flex-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-66, .layout-row > .flex-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-33, .layout-column > .flex-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-66, .layout-column > .flex-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-row > .flex-20 {
flex: 1 1 20%;
max-width: 20%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-20 {
flex: 1 1 20%;
max-width: 100%;
max-height: 20%;
box-sizing: border-box; }
.flex-25 {
flex: 1 1 25%;
max-width: 25%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-25 {
flex: 1 1 25%;
max-width: 25%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-25 {
flex: 1 1 25%;
max-width: 100%;
max-height: 25%;
box-sizing: border-box; }
.layout-row > .flex-33, .layout-row > .flex-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-66, .layout-row > .flex-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-33, .layout-column > .flex-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-66, .layout-column > .flex-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-row > .flex-25 {
flex: 1 1 25%;
max-width: 25%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-25 {
flex: 1 1 25%;
max-width: 100%;
max-height: 25%;
box-sizing: border-box; }
.flex-30 {
flex: 1 1 30%;
max-width: 30%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-30 {
flex: 1 1 30%;
max-width: 30%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-30 {
flex: 1 1 30%;
max-width: 100%;
max-height: 30%;
box-sizing: border-box; }
.layout-row > .flex-33, .layout-row > .flex-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-66, .layout-row > .flex-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-33, .layout-column > .flex-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-66, .layout-column > .flex-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-row > .flex-30 {
flex: 1 1 30%;
max-width: 30%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-30 {
flex: 1 1 30%;
max-width: 100%;
max-height: 30%;
box-sizing: border-box; }
.flex-35 {
flex: 1 1 35%;
max-width: 35%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-35 {
flex: 1 1 35%;
max-width: 35%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-35 {
flex: 1 1 35%;
max-width: 100%;
max-height: 35%;
box-sizing: border-box; }
.layout-row > .flex-33, .layout-row > .flex-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-66, .layout-row > .flex-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-33, .layout-column > .flex-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-66, .layout-column > .flex-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-row > .flex-35 {
flex: 1 1 35%;
max-width: 35%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-35 {
flex: 1 1 35%;
max-width: 100%;
max-height: 35%;
box-sizing: border-box; }
.flex-40 {
flex: 1 1 40%;
max-width: 40%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-40 {
flex: 1 1 40%;
max-width: 40%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-40 {
flex: 1 1 40%;
max-width: 100%;
max-height: 40%;
box-sizing: border-box; }
.layout-row > .flex-33, .layout-row > .flex-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-66, .layout-row > .flex-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-33, .layout-column > .flex-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-66, .layout-column > .flex-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-row > .flex-40 {
flex: 1 1 40%;
max-width: 40%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-40 {
flex: 1 1 40%;
max-width: 100%;
max-height: 40%;
box-sizing: border-box; }
.flex-45 {
flex: 1 1 45%;
max-width: 45%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-45 {
flex: 1 1 45%;
max-width: 45%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-45 {
flex: 1 1 45%;
max-width: 100%;
max-height: 45%;
box-sizing: border-box; }
.layout-row > .flex-33, .layout-row > .flex-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-66, .layout-row > .flex-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-33, .layout-column > .flex-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-66, .layout-column > .flex-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-row > .flex-45 {
flex: 1 1 45%;
max-width: 45%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-45 {
flex: 1 1 45%;
max-width: 100%;
max-height: 45%;
box-sizing: border-box; }
.flex-50 {
flex: 1 1 50%;
max-width: 50%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-50 {
flex: 1 1 50%;
max-width: 50%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-50 {
flex: 1 1 50%;
max-width: 100%;
max-height: 50%;
box-sizing: border-box; }
.layout-row > .flex-33, .layout-row > .flex-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-66, .layout-row > .flex-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-33, .layout-column > .flex-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-66, .layout-column > .flex-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-row > .flex-50 {
flex: 1 1 50%;
max-width: 50%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-50 {
flex: 1 1 50%;
max-width: 100%;
max-height: 50%;
box-sizing: border-box; }
.flex-55 {
flex: 1 1 55%;
max-width: 55%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-55 {
flex: 1 1 55%;
max-width: 55%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-55 {
flex: 1 1 55%;
max-width: 100%;
max-height: 55%;
box-sizing: border-box; }
.layout-row > .flex-33, .layout-row > .flex-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-66, .layout-row > .flex-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-33, .layout-column > .flex-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-66, .layout-column > .flex-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-row > .flex-55 {
flex: 1 1 55%;
max-width: 55%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-55 {
flex: 1 1 55%;
max-width: 100%;
max-height: 55%;
box-sizing: border-box; }
.flex-60 {
flex: 1 1 60%;
max-width: 60%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-60 {
flex: 1 1 60%;
max-width: 60%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-60 {
flex: 1 1 60%;
max-width: 100%;
max-height: 60%;
box-sizing: border-box; }
.layout-row > .flex-33, .layout-row > .flex-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-66, .layout-row > .flex-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-33, .layout-column > .flex-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-66, .layout-column > .flex-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-row > .flex-60 {
flex: 1 1 60%;
max-width: 60%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-60 {
flex: 1 1 60%;
max-width: 100%;
max-height: 60%;
box-sizing: border-box; }
.flex-65 {
flex: 1 1 65%;
max-width: 65%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-65 {
flex: 1 1 65%;
max-width: 65%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-65 {
flex: 1 1 65%;
max-width: 100%;
max-height: 65%;
box-sizing: border-box; }
.layout-row > .flex-33, .layout-row > .flex-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-66, .layout-row > .flex-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-33, .layout-column > .flex-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-66, .layout-column > .flex-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-row > .flex-65 {
flex: 1 1 65%;
max-width: 65%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-65 {
flex: 1 1 65%;
max-width: 100%;
max-height: 65%;
box-sizing: border-box; }
.flex-70 {
flex: 1 1 70%;
max-width: 70%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-70 {
flex: 1 1 70%;
max-width: 70%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-70 {
flex: 1 1 70%;
max-width: 100%;
max-height: 70%;
box-sizing: border-box; }
.layout-row > .flex-33, .layout-row > .flex-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-66, .layout-row > .flex-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-33, .layout-column > .flex-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-66, .layout-column > .flex-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-row > .flex-70 {
flex: 1 1 70%;
max-width: 70%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-70 {
flex: 1 1 70%;
max-width: 100%;
max-height: 70%;
box-sizing: border-box; }
.flex-75 {
flex: 1 1 75%;
max-width: 75%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-75 {
flex: 1 1 75%;
max-width: 75%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-75 {
flex: 1 1 75%;
max-width: 100%;
max-height: 75%;
box-sizing: border-box; }
.layout-row > .flex-33, .layout-row > .flex-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-66, .layout-row > .flex-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-33, .layout-column > .flex-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-66, .layout-column > .flex-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-row > .flex-75 {
flex: 1 1 75%;
max-width: 75%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-75 {
flex: 1 1 75%;
max-width: 100%;
max-height: 75%;
box-sizing: border-box; }
.flex-80 {
flex: 1 1 80%;
max-width: 80%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-80 {
flex: 1 1 80%;
max-width: 80%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-80 {
flex: 1 1 80%;
max-width: 100%;
max-height: 80%;
box-sizing: border-box; }
.layout-row > .flex-33, .layout-row > .flex-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-66, .layout-row > .flex-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-33, .layout-column > .flex-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-66, .layout-column > .flex-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-row > .flex-80 {
flex: 1 1 80%;
max-width: 80%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-80 {
flex: 1 1 80%;
max-width: 100%;
max-height: 80%;
box-sizing: border-box; }
.flex-85 {
flex: 1 1 85%;
max-width: 85%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-85 {
flex: 1 1 85%;
max-width: 85%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-85 {
flex: 1 1 85%;
max-width: 100%;
max-height: 85%;
box-sizing: border-box; }
.layout-row > .flex-33, .layout-row > .flex-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-66, .layout-row > .flex-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-33, .layout-column > .flex-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-66, .layout-column > .flex-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-row > .flex-85 {
flex: 1 1 85%;
max-width: 85%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-85 {
flex: 1 1 85%;
max-width: 100%;
max-height: 85%;
box-sizing: border-box; }
.flex-90 {
flex: 1 1 90%;
max-width: 90%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-90 {
flex: 1 1 90%;
max-width: 90%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-90 {
flex: 1 1 90%;
max-width: 100%;
max-height: 90%;
box-sizing: border-box; }
.layout-row > .flex-33, .layout-row > .flex-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-66, .layout-row > .flex-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-33, .layout-column > .flex-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-66, .layout-column > .flex-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-row > .flex-90 {
flex: 1 1 90%;
max-width: 90%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-90 {
flex: 1 1 90%;
max-width: 100%;
max-height: 90%;
box-sizing: border-box; }
.flex-95 {
flex: 1 1 95%;
max-width: 95%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-95 {
flex: 1 1 95%;
max-width: 95%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-95 {
flex: 1 1 95%;
max-width: 100%;
max-height: 95%;
box-sizing: border-box; }
.layout-row > .flex-33, .layout-row > .flex-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-66, .layout-row > .flex-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-33, .layout-column > .flex-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-66, .layout-column > .flex-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-row > .flex-95 {
flex: 1 1 95%;
max-width: 95%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-95 {
flex: 1 1 95%;
max-width: 100%;
max-height: 95%;
box-sizing: border-box; }
.flex-100 {
flex: 1 1 100%;
max-width: 100%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-100 {
flex: 1 1 100%;
max-width: 100%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-100 {
flex: 1 1 100%;
max-width: 100%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-33, .layout-row > .flex-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-66, .layout-row > .flex-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-33, .layout-column > .flex-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-66, .layout-column > .flex-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-row > .flex-100 {
flex: 1 1 100%;
max-width: 100%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-100 {
flex: 1 1 100%;
max-width: 100%;
max-height: 100%;
box-sizing: border-box; }
@media (max-width: 599px) {
.hide-xs:not(.show-xs):not(.show), .hide:not(.show-xs):not(.show) {
display: none; }
.layout-xs, .layout-xs-column, .layout-xs-row {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex; }
.layout-xs-column {
flex-direction: column; }
.layout-xs-row {
flex-direction: row; }
.flex-xs {
flex: 1;
box-sizing: border-box; }
.flex-xs-0 {
flex: 1 1 0%;
max-width: 0%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-0 {
flex: 1 1 0%;
max-width: 0%;
max-height: 100%;
box-sizing: border-box;
min-width: 0; }
.layout-column > .flex-xs-0 {
flex: 1 1 0%;
max-width: 100%;
max-height: 0%;
box-sizing: border-box; }
.layout-row > .flex-xs-33, .layout-row > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-66, .layout-row > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-33, .layout-column > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-xs-66, .layout-column > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-xs-row > .flex-xs-0 {
flex: 1 1 0%;
max-width: 0%;
max-height: 100%;
box-sizing: border-box;
min-width: 0; }
.layout-xs-column > .flex-xs-0 {
flex: 1 1 0%;
max-width: 100%;
max-height: 0%;
box-sizing: border-box;
min-height: 0; }
.flex-xs-5 {
flex: 1 1 5%;
max-width: 5%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-5 {
flex: 1 1 5%;
max-width: 5%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-5 {
flex: 1 1 5%;
max-width: 100%;
max-height: 5%;
box-sizing: border-box; }
.layout-row > .flex-xs-33, .layout-row > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-66, .layout-row > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-33, .layout-column > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-xs-66, .layout-column > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-xs-row > .flex-xs-5 {
flex: 1 1 5%;
max-width: 5%;
max-height: 100%;
box-sizing: border-box; }
.layout-xs-column > .flex-xs-5 {
flex: 1 1 5%;
max-width: 100%;
max-height: 5%;
box-sizing: border-box; }
.flex-xs-10 {
flex: 1 1 10%;
max-width: 10%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-10 {
flex: 1 1 10%;
max-width: 10%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-10 {
flex: 1 1 10%;
max-width: 100%;
max-height: 10%;
box-sizing: border-box; }
.layout-row > .flex-xs-33, .layout-row > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-66, .layout-row > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-33, .layout-column > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-xs-66, .layout-column > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-xs-row > .flex-xs-10 {
flex: 1 1 10%;
max-width: 10%;
max-height: 100%;
box-sizing: border-box; }
.layout-xs-column > .flex-xs-10 {
flex: 1 1 10%;
max-width: 100%;
max-height: 10%;
box-sizing: border-box; }
.flex-xs-15 {
flex: 1 1 15%;
max-width: 15%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-15 {
flex: 1 1 15%;
max-width: 15%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-15 {
flex: 1 1 15%;
max-width: 100%;
max-height: 15%;
box-sizing: border-box; }
.layout-row > .flex-xs-33, .layout-row > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-66, .layout-row > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-33, .layout-column > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-xs-66, .layout-column > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-xs-row > .flex-xs-15 {
flex: 1 1 15%;
max-width: 15%;
max-height: 100%;
box-sizing: border-box; }
.layout-xs-column > .flex-xs-15 {
flex: 1 1 15%;
max-width: 100%;
max-height: 15%;
box-sizing: border-box; }
.flex-xs-20 {
flex: 1 1 20%;
max-width: 20%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-20 {
flex: 1 1 20%;
max-width: 20%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-20 {
flex: 1 1 20%;
max-width: 100%;
max-height: 20%;
box-sizing: border-box; }
.layout-row > .flex-xs-33, .layout-row > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-66, .layout-row > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-33, .layout-column > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-xs-66, .layout-column > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-xs-row > .flex-xs-20 {
flex: 1 1 20%;
max-width: 20%;
max-height: 100%;
box-sizing: border-box; }
.layout-xs-column > .flex-xs-20 {
flex: 1 1 20%;
max-width: 100%;
max-height: 20%;
box-sizing: border-box; }
.flex-xs-25 {
flex: 1 1 25%;
max-width: 25%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-25 {
flex: 1 1 25%;
max-width: 25%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-25 {
flex: 1 1 25%;
max-width: 100%;
max-height: 25%;
box-sizing: border-box; }
.layout-row > .flex-xs-33, .layout-row > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-66, .layout-row > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-33, .layout-column > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-xs-66, .layout-column > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-xs-row > .flex-xs-25 {
flex: 1 1 25%;
max-width: 25%;
max-height: 100%;
box-sizing: border-box; }
.layout-xs-column > .flex-xs-25 {
flex: 1 1 25%;
max-width: 100%;
max-height: 25%;
box-sizing: border-box; }
.flex-xs-30 {
flex: 1 1 30%;
max-width: 30%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-30 {
flex: 1 1 30%;
max-width: 30%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-30 {
flex: 1 1 30%;
max-width: 100%;
max-height: 30%;
box-sizing: border-box; }
.layout-row > .flex-xs-33, .layout-row > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-66, .layout-row > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-33, .layout-column > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-xs-66, .layout-column > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-xs-row > .flex-xs-30 {
flex: 1 1 30%;
max-width: 30%;
max-height: 100%;
box-sizing: border-box; }
.layout-xs-column > .flex-xs-30 {
flex: 1 1 30%;
max-width: 100%;
max-height: 30%;
box-sizing: border-box; }
.flex-xs-35 {
flex: 1 1 35%;
max-width: 35%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-35 {
flex: 1 1 35%;
max-width: 35%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-35 {
flex: 1 1 35%;
max-width: 100%;
max-height: 35%;
box-sizing: border-box; }
.layout-row > .flex-xs-33, .layout-row > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-66, .layout-row > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-33, .layout-column > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-xs-66, .layout-column > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-xs-row > .flex-xs-35 {
flex: 1 1 35%;
max-width: 35%;
max-height: 100%;
box-sizing: border-box; }
.layout-xs-column > .flex-xs-35 {
flex: 1 1 35%;
max-width: 100%;
max-height: 35%;
box-sizing: border-box; }
.flex-xs-40 {
flex: 1 1 40%;
max-width: 40%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-40 {
flex: 1 1 40%;
max-width: 40%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-40 {
flex: 1 1 40%;
max-width: 100%;
max-height: 40%;
box-sizing: border-box; }
.layout-row > .flex-xs-33, .layout-row > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-66, .layout-row > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-33, .layout-column > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-xs-66, .layout-column > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-xs-row > .flex-xs-40 {
flex: 1 1 40%;
max-width: 40%;
max-height: 100%;
box-sizing: border-box; }
.layout-xs-column > .flex-xs-40 {
flex: 1 1 40%;
max-width: 100%;
max-height: 40%;
box-sizing: border-box; }
.flex-xs-45 {
flex: 1 1 45%;
max-width: 45%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-45 {
flex: 1 1 45%;
max-width: 45%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-45 {
flex: 1 1 45%;
max-width: 100%;
max-height: 45%;
box-sizing: border-box; }
.layout-row > .flex-xs-33, .layout-row > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-66, .layout-row > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-33, .layout-column > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-xs-66, .layout-column > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-xs-row > .flex-xs-45 {
flex: 1 1 45%;
max-width: 45%;
max-height: 100%;
box-sizing: border-box; }
.layout-xs-column > .flex-xs-45 {
flex: 1 1 45%;
max-width: 100%;
max-height: 45%;
box-sizing: border-box; }
.flex-xs-50 {
flex: 1 1 50%;
max-width: 50%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-50 {
flex: 1 1 50%;
max-width: 50%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-50 {
flex: 1 1 50%;
max-width: 100%;
max-height: 50%;
box-sizing: border-box; }
.layout-row > .flex-xs-33, .layout-row > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-66, .layout-row > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-33, .layout-column > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-xs-66, .layout-column > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-xs-row > .flex-xs-50 {
flex: 1 1 50%;
max-width: 50%;
max-height: 100%;
box-sizing: border-box; }
.layout-xs-column > .flex-xs-50 {
flex: 1 1 50%;
max-width: 100%;
max-height: 50%;
box-sizing: border-box; }
.flex-xs-55 {
flex: 1 1 55%;
max-width: 55%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-55 {
flex: 1 1 55%;
max-width: 55%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-55 {
flex: 1 1 55%;
max-width: 100%;
max-height: 55%;
box-sizing: border-box; }
.layout-row > .flex-xs-33, .layout-row > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-66, .layout-row > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-33, .layout-column > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-xs-66, .layout-column > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-xs-row > .flex-xs-55 {
flex: 1 1 55%;
max-width: 55%;
max-height: 100%;
box-sizing: border-box; }
.layout-xs-column > .flex-xs-55 {
flex: 1 1 55%;
max-width: 100%;
max-height: 55%;
box-sizing: border-box; }
.flex-xs-60 {
flex: 1 1 60%;
max-width: 60%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-60 {
flex: 1 1 60%;
max-width: 60%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-60 {
flex: 1 1 60%;
max-width: 100%;
max-height: 60%;
box-sizing: border-box; }
.layout-row > .flex-xs-33, .layout-row > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-66, .layout-row > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-33, .layout-column > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-xs-66, .layout-column > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-xs-row > .flex-xs-60 {
flex: 1 1 60%;
max-width: 60%;
max-height: 100%;
box-sizing: border-box; }
.layout-xs-column > .flex-xs-60 {
flex: 1 1 60%;
max-width: 100%;
max-height: 60%;
box-sizing: border-box; }
.flex-xs-65 {
flex: 1 1 65%;
max-width: 65%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-65 {
flex: 1 1 65%;
max-width: 65%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-65 {
flex: 1 1 65%;
max-width: 100%;
max-height: 65%;
box-sizing: border-box; }
.layout-row > .flex-xs-33, .layout-row > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-66, .layout-row > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-33, .layout-column > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-xs-66, .layout-column > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-xs-row > .flex-xs-65 {
flex: 1 1 65%;
max-width: 65%;
max-height: 100%;
box-sizing: border-box; }
.layout-xs-column > .flex-xs-65 {
flex: 1 1 65%;
max-width: 100%;
max-height: 65%;
box-sizing: border-box; }
.flex-xs-70 {
flex: 1 1 70%;
max-width: 70%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-70 {
flex: 1 1 70%;
max-width: 70%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-70 {
flex: 1 1 70%;
max-width: 100%;
max-height: 70%;
box-sizing: border-box; }
.layout-row > .flex-xs-33, .layout-row > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-66, .layout-row > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-33, .layout-column > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-xs-66, .layout-column > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-xs-row > .flex-xs-70 {
flex: 1 1 70%;
max-width: 70%;
max-height: 100%;
box-sizing: border-box; }
.layout-xs-column > .flex-xs-70 {
flex: 1 1 70%;
max-width: 100%;
max-height: 70%;
box-sizing: border-box; }
.flex-xs-75 {
flex: 1 1 75%;
max-width: 75%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-75 {
flex: 1 1 75%;
max-width: 75%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-75 {
flex: 1 1 75%;
max-width: 100%;
max-height: 75%;
box-sizing: border-box; }
.layout-row > .flex-xs-33, .layout-row > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-66, .layout-row > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-33, .layout-column > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-xs-66, .layout-column > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-xs-row > .flex-xs-75 {
flex: 1 1 75%;
max-width: 75%;
max-height: 100%;
box-sizing: border-box; }
.layout-xs-column > .flex-xs-75 {
flex: 1 1 75%;
max-width: 100%;
max-height: 75%;
box-sizing: border-box; }
.flex-xs-80 {
flex: 1 1 80%;
max-width: 80%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-80 {
flex: 1 1 80%;
max-width: 80%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-80 {
flex: 1 1 80%;
max-width: 100%;
max-height: 80%;
box-sizing: border-box; }
.layout-row > .flex-xs-33, .layout-row > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-66, .layout-row > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-33, .layout-column > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-xs-66, .layout-column > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-xs-row > .flex-xs-80 {
flex: 1 1 80%;
max-width: 80%;
max-height: 100%;
box-sizing: border-box; }
.layout-xs-column > .flex-xs-80 {
flex: 1 1 80%;
max-width: 100%;
max-height: 80%;
box-sizing: border-box; }
.flex-xs-85 {
flex: 1 1 85%;
max-width: 85%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-85 {
flex: 1 1 85%;
max-width: 85%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-85 {
flex: 1 1 85%;
max-width: 100%;
max-height: 85%;
box-sizing: border-box; }
.layout-row > .flex-xs-33, .layout-row > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-66, .layout-row > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-33, .layout-column > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-xs-66, .layout-column > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-xs-row > .flex-xs-85 {
flex: 1 1 85%;
max-width: 85%;
max-height: 100%;
box-sizing: border-box; }
.layout-xs-column > .flex-xs-85 {
flex: 1 1 85%;
max-width: 100%;
max-height: 85%;
box-sizing: border-box; }
.flex-xs-90 {
flex: 1 1 90%;
max-width: 90%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-90 {
flex: 1 1 90%;
max-width: 90%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-90 {
flex: 1 1 90%;
max-width: 100%;
max-height: 90%;
box-sizing: border-box; }
.layout-row > .flex-xs-33, .layout-row > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-66, .layout-row > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-33, .layout-column > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-xs-66, .layout-column > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-xs-row > .flex-xs-90 {
flex: 1 1 90%;
max-width: 90%;
max-height: 100%;
box-sizing: border-box; }
.layout-xs-column > .flex-xs-90 {
flex: 1 1 90%;
max-width: 100%;
max-height: 90%;
box-sizing: border-box; }
.flex-xs-95 {
flex: 1 1 95%;
max-width: 95%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-95 {
flex: 1 1 95%;
max-width: 95%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-95 {
flex: 1 1 95%;
max-width: 100%;
max-height: 95%;
box-sizing: border-box; }
.layout-row > .flex-xs-33, .layout-row > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-66, .layout-row > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-33, .layout-column > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-xs-66, .layout-column > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-xs-row > .flex-xs-95 {
flex: 1 1 95%;
max-width: 95%;
max-height: 100%;
box-sizing: border-box; }
.layout-xs-column > .flex-xs-95 {
flex: 1 1 95%;
max-width: 100%;
max-height: 95%;
box-sizing: border-box; }
.flex-xs-100 {
flex: 1 1 100%;
max-width: 100%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-100 {
flex: 1 1 100%;
max-width: 100%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-100 {
flex: 1 1 100%;
max-width: 100%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-33, .layout-row > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
max-height: 100%;
box-sizing: border-box; }
.layout-row > .flex-xs-66, .layout-row > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
max-height: 100%;
box-sizing: border-box; }
.layout-column > .flex-xs-33, .layout-column > .flex-xs-33 {
flex: 1 1 33.33%;
max-width: 100%;
max-height: 33.33%;
box-sizing: border-box; }
.layout-column > .flex-xs-66, .layout-column > .flex-xs-66 {
flex: 1 1 66.66%;
max-width: 100%;
max-height: 66.66%;
box-sizing: border-box; }
.layout-xs-row > .flex-xs-100 {
flex: 1 1 100%;
max-width: 100%;
max-height: 100%;
box-sizing: border-box; }
.layout-xs-column > .flex-xs-100 {
flex: 1 1 100%;
max-width: 100%;
max-height: 100%;
box-sizing: border-box; } }
@media (min-width: 600px) {
.layout-gt-xs, .layout-gt-xs-column, .layout-gt-xs