UNPKG

ng2-flex-layout

Version:

Angular 2 Material Responsive Layout Directives

2,123 lines (1,929 loc) 266 kB
.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