@supports (display: flex) { .row, .col { display: flex; flex: 0 1 auto; flex-wrap: wrap; } } @supports not (display: flex) { .row, .col { display: table; } .row [class*="col-"], .col [class*="col-"] { display: table-cell; } } @supports (display: flex) { .row { flex-direction: row; } .col { flex-direction: column; } .row.reverse { flex-direction: row-reverse; } .col.reverse { flex-direction: column-reverse; } } @supports not (display: flex) { .row { direction: ltr; } .row.reverse { direction: rtl; } } .col-all-1 { flex-basis: 8.333333333333334%; max-width: 8.333333333333334%; width: 8.333333333333334%; } .offset-all-1 { margin-left: 8.333333333333334%; } .col-all-2 { flex-basis: 16.666666666666668%; max-width: 16.666666666666668%; width: 16.666666666666668%; } .offset-all-2 { margin-left: 16.666666666666668%; } .col-all-3 { flex-basis: 25%; max-width: 25%; width: 25%; } .offset-all-3 { margin-left: 25%; } .col-all-4 { flex-basis: 33.333333333333336%; max-width: 33.333333333333336%; width: 33.333333333333336%; } .offset-all-4 { margin-left: 33.333333333333336%; } .col-all-5 { flex-basis: 41.666666666666664%; max-width: 41.666666666666664%; width: 41.666666666666664%; } .offset-all-5 { margin-left: 41.666666666666664%; } .col-all-6 { flex-basis: 50%; max-width: 50%; width: 50%; } .offset-all-6 { margin-left: 50%; } .col-all-7 { flex-basis: 58.333333333333336%; max-width: 58.333333333333336%; width: 58.333333333333336%; } .offset-all-7 { margin-left: 58.333333333333336%; } .col-all-8 { flex-basis: 66.66666666666667%; max-width: 66.66666666666667%; width: 66.66666666666667%; } .offset-all-8 { margin-left: 66.66666666666667%; } .col-all-9 { flex-basis: 75%; max-width: 75%; width: 75%; } .offset-all-9 { margin-left: 75%; } .col-all-10 { flex-basis: 83.33333333333333%; max-width: 83.33333333333333%; width: 83.33333333333333%; } .offset-all-10 { margin-left: 83.33333333333333%; } .col-all-11 { flex-basis: 91.66666666666667%; max-width: 91.66666666666667%; width: 91.66666666666667%; } .offset-all-11 { margin-left: 91.66666666666667%; } .col-all-12, .col-all { flex-basis: 100%; max-width: 100%; width: 100%; } .offset-all-12 { margin-left: 100%; } .start-all { justify-content: flex-start; text-align: left; } .center-all { justify-content: center; text-align: center; } .end-all { justify-content: flex-end; text-align: right; } .around-all { justify-content: space-around; } .between-all { justify-content: space-between; } .stretch-horizontal-all { justify-content: stretch; } .stretch-vertical-all { align-items: stretch; } .top-all { align-items: flex-start; vertical-align: top; } .middle-all { align-items: center; vertical-align: middle; } .bottom-all { align-items: flex-end; vertical-align: bottom; } .first-all { order: -1; } .last-all { order: 1; } @media (min-width: 20rem) { .col-xs-1 { flex-basis: 8.333333333333334%; max-width: 8.333333333333334%; width: 8.333333333333334%; } .offset-xs-1 { margin-left: 8.333333333333334%; } .col-xs-2 { flex-basis: 16.666666666666668%; max-width: 16.666666666666668%; width: 16.666666666666668%; } .offset-xs-2 { margin-left: 16.666666666666668%; } .col-xs-3 { flex-basis: 25%; max-width: 25%; width: 25%; } .offset-xs-3 { margin-left: 25%; } .col-xs-4 { flex-basis: 33.333333333333336%; max-width: 33.333333333333336%; width: 33.333333333333336%; } .offset-xs-4 { margin-left: 33.333333333333336%; } .col-xs-5 { flex-basis: 41.666666666666664%; max-width: 41.666666666666664%; width: 41.666666666666664%; } .offset-xs-5 { margin-left: 41.666666666666664%; } .col-xs-6 { flex-basis: 50%; max-width: 50%; width: 50%; } .offset-xs-6 { margin-left: 50%; } .col-xs-7 { flex-basis: 58.333333333333336%; max-width: 58.333333333333336%; width: 58.333333333333336%; } .offset-xs-7 { margin-left: 58.333333333333336%; } .col-xs-8 { flex-basis: 66.66666666666667%; max-width: 66.66666666666667%; width: 66.66666666666667%; } .offset-xs-8 { margin-left: 66.66666666666667%; } .col-xs-9 { flex-basis: 75%; max-width: 75%; width: 75%; } .offset-xs-9 { margin-left: 75%; } .col-xs-10 { flex-basis: 83.33333333333333%; max-width: 83.33333333333333%; width: 83.33333333333333%; } .offset-xs-10 { margin-left: 83.33333333333333%; } .col-xs-11 { flex-basis: 91.66666666666667%; max-width: 91.66666666666667%; width: 91.66666666666667%; } .offset-xs-11 { margin-left: 91.66666666666667%; } .col-xs-12, .col-xs { flex-basis: 100%; max-width: 100%; width: 100%; } .offset-xs-12 { margin-left: 100%; } .start-xs { justify-content: flex-start; text-align: left; } .center-xs { justify-content: center; text-align: center; } .end-xs { justify-content: flex-end; text-align: right; } .around-xs { justify-content: space-around; } .between-xs { justify-content: space-between; } .stretch-horizontal-xs { justify-content: stretch; } .stretch-vertical-xs { align-items: stretch; } .top-xs { align-items: flex-start; vertical-align: top; } .middle-xs { align-items: center; vertical-align: middle; } .bottom-xs { align-items: flex-end; vertical-align: bottom; } .first-xs { order: -1; } .last-xs { order: 1; } } @media (min-width: 20rem) and (max-width: 33.74rem) { .xs { width: 20rem; } .hidden-xs { display: none !important; } } @media (max-width: 19.99rem) { .pre-xs { width: 20rem; } .hidden-pre-xs { display: none !important; } } @media (min-width: 20rem) { .post-xs { width: 20rem; } .hidden-post-xs { display: none !important; } } @media (min-width: 33.75rem) { .col-sm-1 { flex-basis: 8.333333333333334%; max-width: 8.333333333333334%; width: 8.333333333333334%; } .offset-sm-1 { margin-left: 8.333333333333334%; } .col-sm-2 { flex-basis: 16.666666666666668%; max-width: 16.666666666666668%; width: 16.666666666666668%; } .offset-sm-2 { margin-left: 16.666666666666668%; } .col-sm-3 { flex-basis: 25%; max-width: 25%; width: 25%; } .offset-sm-3 { margin-left: 25%; } .col-sm-4 { flex-basis: 33.333333333333336%; max-width: 33.333333333333336%; width: 33.333333333333336%; } .offset-sm-4 { margin-left: 33.333333333333336%; } .col-sm-5 { flex-basis: 41.666666666666664%; max-width: 41.666666666666664%; width: 41.666666666666664%; } .offset-sm-5 { margin-left: 41.666666666666664%; } .col-sm-6 { flex-basis: 50%; max-width: 50%; width: 50%; } .offset-sm-6 { margin-left: 50%; } .col-sm-7 { flex-basis: 58.333333333333336%; max-width: 58.333333333333336%; width: 58.333333333333336%; } .offset-sm-7 { margin-left: 58.333333333333336%; } .col-sm-8 { flex-basis: 66.66666666666667%; max-width: 66.66666666666667%; width: 66.66666666666667%; } .offset-sm-8 { margin-left: 66.66666666666667%; } .col-sm-9 { flex-basis: 75%; max-width: 75%; width: 75%; } .offset-sm-9 { margin-left: 75%; } .col-sm-10 { flex-basis: 83.33333333333333%; max-width: 83.33333333333333%; width: 83.33333333333333%; } .offset-sm-10 { margin-left: 83.33333333333333%; } .col-sm-11 { flex-basis: 91.66666666666667%; max-width: 91.66666666666667%; width: 91.66666666666667%; } .offset-sm-11 { margin-left: 91.66666666666667%; } .col-sm-12, .col-sm { flex-basis: 100%; max-width: 100%; width: 100%; } .offset-sm-12 { margin-left: 100%; } .start-sm { justify-content: flex-start; text-align: left; } .center-sm { justify-content: center; text-align: center; } .end-sm { justify-content: flex-end; text-align: right; } .around-sm { justify-content: space-around; } .between-sm { justify-content: space-between; } .stretch-horizontal-sm { justify-content: stretch; } .stretch-vertical-sm { align-items: stretch; } .top-sm { align-items: flex-start; vertical-align: top; } .middle-sm { align-items: center; vertical-align: middle; } .bottom-sm { align-items: flex-end; vertical-align: bottom; } .first-sm { order: -1; } .last-sm { order: 1; } } @media (min-width: 33.75rem) and (max-width: 47.99rem) { .sm { width: 33.75rem; } .hidden-sm { display: none !important; } } @media (max-width: 33.74rem) { .pre-sm { width: 33.75rem; } .hidden-pre-sm { display: none !important; } } @media (min-width: 33.75rem) { .post-sm { width: 33.75rem; } .hidden-post-sm { display: none !important; } } @media (min-width: 48rem) { .col-md-1 { flex-basis: 8.333333333333334%; max-width: 8.333333333333334%; width: 8.333333333333334%; } .offset-md-1 { margin-left: 8.333333333333334%; } .col-md-2 { flex-basis: 16.666666666666668%; max-width: 16.666666666666668%; width: 16.666666666666668%; } .offset-md-2 { margin-left: 16.666666666666668%; } .col-md-3 { flex-basis: 25%; max-width: 25%; width: 25%; } .offset-md-3 { margin-left: 25%; } .col-md-4 { flex-basis: 33.333333333333336%; max-width: 33.333333333333336%; width: 33.333333333333336%; } .offset-md-4 { margin-left: 33.333333333333336%; } .col-md-5 { flex-basis: 41.666666666666664%; max-width: 41.666666666666664%; width: 41.666666666666664%; } .offset-md-5 { margin-left: 41.666666666666664%; } .col-md-6 { flex-basis: 50%; max-width: 50%; width: 50%; } .offset-md-6 { margin-left: 50%; } .col-md-7 { flex-basis: 58.333333333333336%; max-width: 58.333333333333336%; width: 58.333333333333336%; } .offset-md-7 { margin-left: 58.333333333333336%; } .col-md-8 { flex-basis: 66.66666666666667%; max-width: 66.66666666666667%; width: 66.66666666666667%; } .offset-md-8 { margin-left: 66.66666666666667%; } .col-md-9 { flex-basis: 75%; max-width: 75%; width: 75%; } .offset-md-9 { margin-left: 75%; } .col-md-10 { flex-basis: 83.33333333333333%; max-width: 83.33333333333333%; width: 83.33333333333333%; } .offset-md-10 { margin-left: 83.33333333333333%; } .col-md-11 { flex-basis: 91.66666666666667%; max-width: 91.66666666666667%; width: 91.66666666666667%; } .offset-md-11 { margin-left: 91.66666666666667%; } .col-md-12, .col-md { flex-basis: 100%; max-width: 100%; width: 100%; } .offset-md-12 { margin-left: 100%; } .start-md { justify-content: flex-start; text-align: left; } .center-md { justify-content: center; text-align: center; } .end-md { justify-content: flex-end; text-align: right; } .around-md { justify-content: space-around; } .between-md { justify-content: space-between; } .stretch-horizontal-md { justify-content: stretch; } .stretch-vertical-md { align-items: stretch; } .top-md { align-items: flex-start; vertical-align: top; } .middle-md { align-items: center; vertical-align: middle; } .bottom-md { align-items: flex-end; vertical-align: bottom; } .first-md { order: -1; } .last-md { order: 1; } } @media (min-width: 48rem) and (max-width: 63.74rem) { .md { width: 48rem; } .hidden-md { display: none !important; } } @media (max-width: 47.99rem) { .pre-md { width: 48rem; } .hidden-pre-md { display: none !important; } } @media (min-width: 48rem) { .post-md { width: 48rem; } .hidden-post-md { display: none !important; } } @media (min-width: 63.75rem) { .col-lg-1 { flex-basis: 8.333333333333334%; max-width: 8.333333333333334%; width: 8.333333333333334%; } .offset-lg-1 { margin-left: 8.333333333333334%; } .col-lg-2 { flex-basis: 16.666666666666668%; max-width: 16.666666666666668%; width: 16.666666666666668%; } .offset-lg-2 { margin-left: 16.666666666666668%; } .col-lg-3 { flex-basis: 25%; max-width: 25%; width: 25%; } .offset-lg-3 { margin-left: 25%; } .col-lg-4 { flex-basis: 33.333333333333336%; max-width: 33.333333333333336%; width: 33.333333333333336%; } .offset-lg-4 { margin-left: 33.333333333333336%; } .col-lg-5 { flex-basis: 41.666666666666664%; max-width: 41.666666666666664%; width: 41.666666666666664%; } .offset-lg-5 { margin-left: 41.666666666666664%; } .col-lg-6 { flex-basis: 50%; max-width: 50%; width: 50%; } .offset-lg-6 { margin-left: 50%; } .col-lg-7 { flex-basis: 58.333333333333336%; max-width: 58.333333333333336%; width: 58.333333333333336%; } .offset-lg-7 { margin-left: 58.333333333333336%; } .col-lg-8 { flex-basis: 66.66666666666667%; max-width: 66.66666666666667%; width: 66.66666666666667%; } .offset-lg-8 { margin-left: 66.66666666666667%; } .col-lg-9 { flex-basis: 75%; max-width: 75%; width: 75%; } .offset-lg-9 { margin-left: 75%; } .col-lg-10 { flex-basis: 83.33333333333333%; max-width: 83.33333333333333%; width: 83.33333333333333%; } .offset-lg-10 { margin-left: 83.33333333333333%; } .col-lg-11 { flex-basis: 91.66666666666667%; max-width: 91.66666666666667%; width: 91.66666666666667%; } .offset-lg-11 { margin-left: 91.66666666666667%; } .col-lg-12, .col-lg { flex-basis: 100%; max-width: 100%; width: 100%; } .offset-lg-12 { margin-left: 100%; } .start-lg { justify-content: flex-start; text-align: left; } .center-lg { justify-content: center; text-align: center; } .end-lg { justify-content: flex-end; text-align: right; } .around-lg { justify-content: space-around; } .between-lg { justify-content: space-between; } .stretch-horizontal-lg { justify-content: stretch; } .stretch-vertical-lg { align-items: stretch; } .top-lg { align-items: flex-start; vertical-align: top; } .middle-lg { align-items: center; vertical-align: middle; } .bottom-lg { align-items: flex-end; vertical-align: bottom; } .first-lg { order: -1; } .last-lg { order: 1; } } @media (min-width: 63.75rem) and (max-width: 76.24rem) { .lg { width: 63.75rem; } .hidden-lg { display: none !important; } } @media (max-width: 63.74rem) { .pre-lg { width: 63.75rem; } .hidden-pre-lg { display: none !important; } } @media (min-width: 63.75rem) { .post-lg { width: 63.75rem; } .hidden-post-lg { display: none !important; } } @media (min-width: 76.25rem) { .col-xl-1 { flex-basis: 8.333333333333334%; max-width: 8.333333333333334%; width: 8.333333333333334%; } .offset-xl-1 { margin-left: 8.333333333333334%; } .col-xl-2 { flex-basis: 16.666666666666668%; max-width: 16.666666666666668%; width: 16.666666666666668%; } .offset-xl-2 { margin-left: 16.666666666666668%; } .col-xl-3 { flex-basis: 25%; max-width: 25%; width: 25%; } .offset-xl-3 { margin-left: 25%; } .col-xl-4 { flex-basis: 33.333333333333336%; max-width: 33.333333333333336%; width: 33.333333333333336%; } .offset-xl-4 { margin-left: 33.333333333333336%; } .col-xl-5 { flex-basis: 41.666666666666664%; max-width: 41.666666666666664%; width: 41.666666666666664%; } .offset-xl-5 { margin-left: 41.666666666666664%; } .col-xl-6 { flex-basis: 50%; max-width: 50%; width: 50%; } .offset-xl-6 { margin-left: 50%; } .col-xl-7 { flex-basis: 58.333333333333336%; max-width: 58.333333333333336%; width: 58.333333333333336%; } .offset-xl-7 { margin-left: 58.333333333333336%; } .col-xl-8 { flex-basis: 66.66666666666667%; max-width: 66.66666666666667%; width: 66.66666666666667%; } .offset-xl-8 { margin-left: 66.66666666666667%; } .col-xl-9 { flex-basis: 75%; max-width: 75%; width: 75%; } .offset-xl-9 { margin-left: 75%; } .col-xl-10 { flex-basis: 83.33333333333333%; max-width: 83.33333333333333%; width: 83.33333333333333%; } .offset-xl-10 { margin-left: 83.33333333333333%; } .col-xl-11 { flex-basis: 91.66666666666667%; max-width: 91.66666666666667%; width: 91.66666666666667%; } .offset-xl-11 { margin-left: 91.66666666666667%; } .col-xl-12, .col-xl { flex-basis: 100%; max-width: 100%; width: 100%; } .offset-xl-12 { margin-left: 100%; } .start-xl { justify-content: flex-start; text-align: left; } .center-xl { justify-content: center; text-align: center; } .end-xl { justify-content: flex-end; text-align: right; } .around-xl { justify-content: space-around; } .between-xl { justify-content: space-between; } .stretch-horizontal-xl { justify-content: stretch; } .stretch-vertical-xl { align-items: stretch; } .top-xl { align-items: flex-start; vertical-align: top; } .middle-xl { align-items: center; vertical-align: middle; } .bottom-xl { align-items: flex-end; vertical-align: bottom; } .first-xl { order: -1; } .last-xl { order: 1; } } @media (min-width: 76.25rem) { .xl { width: 76.25rem; } .hidden-xl { display: none !important; } } @media (max-width: 76.24rem) { .pre-xl { width: 76.25rem; } .hidden-pre-xl { display: none !important; } } @media (min-width: 76.25rem) { .post-xl { width: 76.25rem; } .hidden-post-xl { display: none !important; } } @media (min-width: 20rem) and (max-width: 33.74rem) { .hidden-xs-sm { display: none !important; } } @media (min-width: 20rem) and (max-width: 47.99rem) { .hidden-xs-md { display: none !important; } } @media (min-width: 20rem) and (max-width: 63.74rem) { .hidden-xs-lg { display: none !important; } } @media (min-width: 20rem) and (max-width: 76.24rem) { .hidden-xs-xl { display: none !important; } } @media (min-width: 33.75rem) and (max-width: 19.99rem) { .hidden-sm-xs { display: none !important; } } @media (min-width: 33.75rem) and (max-width: 47.99rem) { .hidden-sm-md { display: none !important; } } @media (min-width: 33.75rem) and (max-width: 63.74rem) { .hidden-sm-lg { display: none !important; } } @media (min-width: 33.75rem) and (max-width: 76.24rem) { .hidden-sm-xl { display: none !important; } } @media (min-width: 48rem) and (max-width: 19.99rem) { .hidden-md-xs { display: none !important; } } @media (min-width: 48rem) and (max-width: 33.74rem) { .hidden-md-sm { display: none !important; } } @media (min-width: 48rem) and (max-width: 63.74rem) { .hidden-md-lg { display: none !important; } } @media (min-width: 48rem) and (max-width: 76.24rem) { .hidden-md-xl { display: none !important; } } @media (min-width: 63.75rem) and (max-width: 19.99rem) { .hidden-lg-xs { display: none !important; } } @media (min-width: 63.75rem) and (max-width: 33.74rem) { .hidden-lg-sm { display: none !important; } } @media (min-width: 63.75rem) and (max-width: 47.99rem) { .hidden-lg-md { display: none !important; } } @media (min-width: 63.75rem) and (max-width: 76.24rem) { .hidden-lg-xl { display: none !important; } } @media (min-width: 76.25rem) and (max-width: 19.99rem) { .hidden-xl-xs { display: none !important; } } @media (min-width: 76.25rem) and (max-width: 33.74rem) { .hidden-xl-sm { display: none !important; } } @media (min-width: 76.25rem) and (max-width: 47.99rem) { .hidden-xl-md { display: none !important; } } @media (min-width: 76.25rem) and (max-width: 63.74rem) { .hidden-xl-lg { display: none !important; } } .hidden { display: none !important; }