/*
    FONT WIEGHT:
    THIN 100
    LIGHT 300
    REGULAR 400
    MEDIUM 500
    BOLD 700
    BLACK 900
*/

@-ms-viewport {
    width: device-width;
}

:root {
    --z-axis-0-index: auto;
    --z-axis-1-index: 1000;
    --z-axis-2-index: 2000;
    --z-axis-3-index: 3000;
    --z-axis-4-index: 4000;
    --z-axis-6-index: 6000;
    --z-axis-8-index: 8000;
    --z-axis-9-index: 9000;
    --z-axis-12-index: 12000;
    --z-axis-16-index: 16000;
    --z-axis-24-index: 24000;

    --z-axis-0-shadow: none;
    --z-axis-1-shadow: 0 0.0625rem 0.1875rem 0 rgba(0, 0, 0, 0.2),
                       0 0.0625rem 0.0625rem 0 rgba(0, 0, 0, 0.14),
                       0 0.125rem 0.0625rem -0.0625rem rgba(0, 0, 0, 0.12);
    --z-axis-2-shadow: 0 0.0625rem 0.3125rem 0 rgba(0, 0, 0, 0.2),
                       0 0.125rem 0.125rem 0 rgba(0, 0, 0, 0.14),
                       0 0.1875rem 0.0625rem -0.125rem rgba(0, 0, 0, 0.12);
    --z-axis-3-shadow: 0 0625rem 0.5rem 0 rgba(0, 0, 0, 0.2),
                       0 0.1875rem 0.25rem 0 rgba(0, 0, 0, 0.14),
                       0 0.1875rem 0.1875rem -0.125rem rgba(0, 0, 0, 0.12);
    --z-axis-4-shadow: 0 0.125rem 0.25rem -0.0625rem rgba(0, 0, 0, 0.2),
                       0 0.25rem 0.3125rem 0 rgba(0, 0, 0, 0.14),
                       0 0.0625rem 0.625rem 0 rgba(0, 0, 0, 0.12);
    --z-axis-6-shadow: 0 0.1875rem 0.3125rem -0.0625rem rgba(0, 0, 0, 0.2),
                       0 0.375rem 0.625rem 0 rgba(0, 0, 0, 0.14),
                       0 0.0625rem 1.125rem 0 rgba(0, 0, 0, 0.12);
    --z-axis-8-shadow: 0 0.3125rem 0.3125rem -0.1875rem rgba(0, 0, 0, 0.2),
                       0 0.5rem 0.625rem 0.0625rem rgba(0, 0, 0, 0.14),
                       0 0.1875rem 0.875rem 0.125rem rgba(0, 0, 0, 0.12);
    --z-axis-9-shadow: 0 0.3125rem 0.375rem -0.1875rem rgba(0, 0, 0, 0.2),
                       0 0.5625rem 0.75rem 0.0625rem rgba(0, 0, 0, 0.14),
                       0 0.1875rem 1rem 0.125rem rgba(0, 0, 0, 0.12);
    --z-axis-12-shadow: 0 0.4375rem 0.5rem -0.25rem rgba(0, 0, 0, 0.2),
                        0 0.75rem 1.0625rem 0.125rem rgba(0, 0, 0, 0.14),
                        0 0.3125rem 1.375rem 0.25rem rgba(0, 0, 0, 0.12);
    --z-axis-16-shadow: 0 0.5rem 0.625rem -0.3125rem rgba(0, 0, 0, 0.2),
                        0 1rem 1.5rem 0.125rem rgba(0, 0, 0, 0.14),
                        0 0.375rem 1.875rem 0.3125rem rgba(0, 0, 0, 0.12);
    --z-axis-24-shadow: 0 0.6875rem 0.9375rem -0.4375rem rgba(0, 0, 0, 0.2),
                        0 1.5rem 2.375rem 0.1875rem rgba(0, 0, 0, 0.14),
                        0 0.5625rem 2.875rem 0.5rem rgba(0, 0, 0, 0.12);

    font-size: 16px;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    -webkit-outline: 0;
    -moz-outline: 0;
    outline: 0;

    font-family: 'Roboto', sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    color: inherit;
    word-break: break-word;
}

html:lang(en-US) *, html[lang] *:lang(en-US), html[lang] *:lang(en-US) * {
    font-family: 'Roboto', sans-serif;
}
html:lang(ar-BH) *, html[lang] *:lang(ar-BH), html[lang] *:lang(ar-BH) * {
    font-family: 'arabic_notosans_regular', 'Roboto', sans-serif;
}

html[dir="ltr"] *, html[dir] *[dir="ltr"], html[dir] *[dir="ltr"] * {
    direction: ltr;
}
html[dir="rtl"] *, html[dir] *[dir="rtl"], html[dir] *[dir="rtl"] * {
    direction: rtl;
}

html[lang] {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html {
    height: 100%;
    width: 100%;
}

body {
    height: 100%;
    overflow-y: auto;
    margin: 0;
    padding: 4rem 0 0;
}

#mdc-main-content {
    z-index: 0;
    position: relative;
}

/* #mdc-main-content::before, #mdc-main-content::after {
    content: '';
    display: block;
    position: relative;
    width: 100%;
    height: 0;
} */

h1, h2, h3, h4, h5, h6 {
    word-wrap: break-word;
    margin: 0 0 0.333333em;
}

h1 {
    font-size: 6rem;
    letter-spacing: -0.015625em;
    font-weight: 300;
    font-style: normal;
}

h2 {
    font-size: 3.75rem;
    letter-spacing: -0.0.008333em;
    font-weight: 300;
    font-style: normal;
}

h3 {
    font-size: 3rem;
    letter-spacing: 0;
    font-weight: 400;
    font-style: normal;
}

h4 {
    font-size: 2.125rem;
    letter-spacing: 0.007353em;
    font-weight: 400;
    font-style: normal;
}

h5 {
    font-size: 1.5rem;
    letter-spacing: 0;
    font-weight: 400;
    font-style: normal;
}

h6 {
    font-size: 1.25rem;
    letter-spacing: 0.0075em;
    font-weight: 500;
    font-style: normal;
}

p {
    font-size: 1rem;
    letter-spacing: 0.03125em;
    font-weight: 400;
    font-style: normal;
}

img {
    max-width: 100%;
    height: auto;
}

p {
    margin: 0 0 1rem;
    max-width: 40rem;
}

b, .bold {
    font-weight: 700;
}

i, .italic {
    font-style: italic;
}

a {
    color: #039BE5;
    outline: 0;
    text-decoration: none;
}

a:focus {
    text-decoration: underline;
}

button {
    background: none;
    border: none;
}

ol, ul {
    margin-bottom: 1.25rem;
    padding-left: 1.25rem;
}
html[dir="ltr"] ol, html[dir] ol[dir="ltr"], html[dir="ltr"] ul, html[dir] ul[dir="ltr"] {
    padding-left: 1.25rem;
    padding-right: 0;
}
html[dir="rtl"] ol, html[dir] ol[dir="rtl"], html[dir="rtl"] ul, html[dir] ul[dir="rtl"] {
    padding-left: 0;
    padding-right: 1.25rem;
}

ol li, ul li {
    font-size: 1rem;
    letter-spacing: 0.03125em;
    font-weight: 400;
    margin: 0 0 0.5rem;
    max-width: 40rem;
}

body * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

table {
    table-layout: auto;
    width: 100%;
    margin-bottom: 2.5rem;
    border-collapse: collapse;
}

table th, table td {
    border: solid 0.0625rem rgba(var(--foreground-color), var(--opacity-divider));
    font-size: 0.875rem;
    font-weight: normal;
    line-height: 1.8;
    padding: 0.75rem 1.5rem;
    text-align: left;
}

.table-container {
    max-width: 100%;
    overflow-y: hidden;
    overflow-x: auto;
    margin-bottom: 2.5rem;
}

.table-container > table {
    margin: 0;
    width: 100%;
    width: -moz-max-content;
    width: -webkit-max-content;
    width: -o-max-content;
    width: max-content;
}

html[dir="ltr"] table th, html[dir="ltr"] table td,
html[dir] table[dir="ltr"] th, html[dir] table[dir="ltr"] td {
    text-align: left;
}

html[dir="rtl"] table th, html[dir="rtl"] table td,
html[dir] table[dir="rtl"] th, html[dir] table[dir="rtl"] td {
    text-align: right;
}

pre {
    margin: 1rem 0;
    overflow-x: auto;
    padding: 1rem 1.5rem;
    border: solid 0.0625rem rgba(var(--foreground-color), var(--opacity-divider));
}

html[dir="ltr"] pre, html[dir] pre[dir="ltr"],
html[dir="rtl"] pre, html[dir] pre[dir="rtl"] {
    direction: ltr;
}

code {
    white-space: nowrap;
    padding: 0 0.25rem;
    border: solid 0.0625rem rgba(var(--foreground-color), var(--opacity-divider));
}

html[dir="ltr"] code, html[dir] code[dir="ltr"],
html[dir="rtl"] code, html[dir] code[dir="rtl"] {
    direction: ltr;
}

section {
    margin: 4rem 0;
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block;
}

.mdt-h1 {
    font-size: 6rem;
    letter-spacing: -0.015625em;
    font-weight: 300;
    word-wrap: break-word;
}

.mdt-h2 {
    font-size: 3.75rem;
    letter-spacing: -0.0.008333em;
    font-weight: 300;
    word-wrap: break-word;
}

.mdt-h3 {
    font-size: 3rem;
    letter-spacing: 0;
    font-weight: 400;
    word-wrap: break-word;
}

.mdt-h4 {
    font-size: 2.125rem;
    letter-spacing: 0.007353em;
    font-weight: 400;
    word-wrap: break-word;
}

.mdt-h5 {
    font-size: 1.5rem;
    letter-spacing: 0;
    font-weight: 400;
    word-wrap: break-word;
}

.mdt-h6 {
    font-size: 1.25rem;
    letter-spacing: 0.0075em;
    font-weight: 500;
    word-wrap: break-word;
}

.mdt-subtitle, .mdt-subtitle-1 {
    font-size: 1rem;
    letter-spacing: 0.009375em;
    font-weight: 400;
    word-wrap: break-word;
}

.mdt-subtitle-2 {
    font-size: 0.875rem;
    letter-spacing: 0.007143em;
    font-weight: 500;
    word-wrap: break-word;
}

.mdt-body, .mdt-body-1 {
    font-size: 1rem;
    letter-spacing: 0.03125em;
    font-weight: 400;
    word-wrap: break-word;
}

.mdt-body-2 {
    font-size: 0.875rem;
    letter-spacing: 0.017857em;
    font-weight: 400;
    word-wrap: break-word;
}

.mdt-button {
    font-size: 0.875rem;
    letter-spacing: 0.053571em;
    font-weight: 500;
    text-transform: uppercase;
}

.mdt-caption {
    font-size: 0.75rem;
    letter-spacing: 0.033333em;
    font-weight: 400;
    word-wrap: break-word;
}

.mdt-overline {
    font-size: 0.625rem;
    letter-spacing: 0.15em;
    font-weight: 400;
    text-transform: uppercase;
    word-wrap: break-word;
}

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

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

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

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

.text-nowrap {
    white-space: nowrap;
}

.text-lowercase {
    text-transform: lowercase;
}

.text-uppercase {
    text-transform: uppercase;
}

.text-capitalize {
    text-transform: capitalize;
}

.z-axis-0 {
    position: relative;
    z-index: var(--z-axis-0-index);
    box-shadow: var(--z-axis-0-shadow);
}

.z-axis-1 {
    position: relative;
    z-index: var(--z-axis-1-index);
    box-shadow: var(--z-axis-1-shadow);
}

.z-axis-2 {
    position: relative;
    z-index: var(--z-axis-2-index);
    box-shadow: var(--z-axis-2-shadow);
}

.z-axis-3 {
    position: relative;
    z-index: var(--z-axis-3-index);
    box-shadow: var(--z-axis-3-shadow);
}

.z-axis-4 {
    position: relative;
    z-index: var(--z-axis-4-index);
    box-shadow: var(--z-axis-4-shadow);
}

.z-axis-6 {
    position: relative;
    z-index: var(--z-axis-6-index);
    box-shadow: var(--z-axis-6-shadow);
}

.z-axis-8 {
    position: relative;
    z-index: var(--z-axis-8-index);
    box-shadow: var(--z-axis-8-shadow);
}

.z-axis-9 {
    position: relative;
    z-index: var(--z-axis-9-index);
    box-shadow: var(--z-axis-9-shadow);
}

.z-axis-12 {
    position: relative;
    z-index: var(--z-axis-12-index);
    box-shadow: var(--z-axis-12-shadow);
}

.z-axis-16 {
    position: relative;
    z-index: var(--z-axis-16-index);
    box-shadow: var(--z-axis-16-shadow);
}

.z-axis-24 {
    position: relative;
    z-index: var(--z-axis-24-index);
    box-shadow: var(--z-axis-24-shadow);
}

.material-icon {
    font-family: 'Material Symbols Outlined' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 1.5rem; /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
}

.material-icon.md-18 {
    font-size: 1.125rem;
}

.material-icon.md-24 {
    font-size: 1.5rem;
}

.material-icon.md-36 {
    font-size: 2.25rem;
}

.material-icon.md-48 {
    font-size: 3rem;
}

a.material-icon, button.material-icon, .material-icon.interactive {
    position: relative;
    padding: 0;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

a.material-icon.disabled, a.material-icon[disabled], a.material-icon:disabled,
button.material-icon.disabled, button.material-icon[disabled], button.material-icon:disabled,
.material-icon.interactive.disabled, .material-icon.interactive[disabled], .material-icon.interactive:disabled {
    color: rgba(var(--foreground-color), var(--opacity-hint));
    cursor: default;
}

a.material-icon::before, button.material-icon::before, .material-icon.interactive::before {
    content: '';
    display: inline-block;
    background-color: rgb(var(--foreground-color));
    opacity: 0;
    border-radius: 100%;
    position: absolute;
    z-index: 0;
    height: 1.5rem;
    width: 1.5rem;
    top: 50%;
    left: 50%;
    margin-top: -0.75rem;
    margin-left: -0.75rem;
    transition: all 0.2s;
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
}

a.material-icon:hover::before, button.material-icon:hover::before, .material-icon.interactive:hover::before {
    opacity: var(--opacity-hover);
    -ms-transform: scale(2);
    -webkit-transform: scale(2);
    transform: scale(2);
}

a.material-icon:active::before, button.material-icon:active::before, .material-icon.interactive:active::before {
    opacity: var(--opacity-pressed);
    -ms-transform: scale(2);
    -webkit-transform: scale(2);
    transform: scale(2);
}

a.material-icon:focus::before, button.material-icon:focus::before, .material-icon.interactive:focus::before {
    opacity: var(--opacity-focus);
    -ms-transform: scale(2);
    -webkit-transform: scale(2);
    transform: scale(2);
}

a.material-icon.dense:hover::before, button.material-icon.dense:hover::before, .material-icon.dense.interactive:hover::before {
    opacity: var(--opacity-hover);
    -ms-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}

a.material-icon.dense:active::before, button.material-icon.dense:active::before, .material-icon.dense.interactive:active::before {
    opacity: var(--opacity-pressed);
    -ms-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}

a.material-icon.dense:focus::before, button.material-icon.dense:focus::before, .material-icon.dense.interactive:focus::before {
    opacity: var(--opacity-focus);
    -ms-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}

a.material-icon.disabled::before, a.material-icon[disabled]::before, a.material-icon:disabled::before,
button.material-icon.disabled::before, button.material-icon[disabled]::before, button.material-icon:disabled::before,
.material-icon.interactive.disabled::before, .material-icon.interactive[disabled]::before, .material-icon.interactive:disabled::before {
    display: none;
}

.container, .container-fluid {
    margin: 0 auto;
    padding: 0 0.5rem;
    width: 100%;
    max-width: 100%;
}

.container.align-start,
html[dir="ltr"] .container.align-start,
html[dir] .container[dir="ltr"].align-start,
html[dir="rtl"] .container.align-end,
html[dir] .container[dir="rtl"].align-end {
    margin-left: 0;
    margin-right: auto;
}

.container.align-end,
html[dir="ltr"] .container.align-end,
html[dir] .container[dir="ltr"].align-end,
html[dir="rtl"] .container.align-start,
html[dir] .container[dir="rtl"].align-start {
    margin-left: auto;
    margin-right: 0;
}

.clearfix {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
    width: 100%;
}

.clearfix::before, .clearfix::after {
    content: '';
    display: table;
}

.clearfix::after {
    clear: both;
}

.row {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.row.col-align-top {
    -ms-flex-align: start;
    align-items: flex-start;
}

.row.col-align-middle {
    -ms-flex-align: center;
    align-items: center;
}

.row.col-align-bottom {
    -ms-flex-align: end;
    align-items: flex-end;
}

.row.col-justify-start {
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.row.col-justify-center {
    -ms-flex-pack: center!important;
    justify-content: center!important;
}

.row.col-justify-end {
    -ms-flex-pack: end!important;
    justify-content: flex-end!important;
}

.row.col-justify-around {
    -ms-flex-pack: distribute!important;
    justify-content: space-around!important;
}

.row.col-justify-between {
    -ms-flex-pack: justify!important;
    justify-content: space-between!important;
}

.row.direction-reverse {
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.col {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;

    position: relative;
    min-height: 1px;
    padding: 0 0.5rem;
    width: 100%;
    max-width: 100%;
    word-break: break-all;
    
    -ms-flex-preferred-size: 1;
    flex-basis: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.col.align-top {
    -ms-flex-item-align: start;
    align-self: flex-start;
}

.col.align-middle {
    -ms-flex-item-align: center;
    align-self: center;
}

.col.align-bottom {
    -ms-flex-item-align: end;
    align-self: flex-end;
}

/* X-SMALL CLASSES */

.col.xsmall-1, .col.xsmall-2, .col.xsmall-3, .col.xsmall-4 {
}

.col.xsmall-order-first {
    -ms-flex-order: -1;
    order: -1;
}

.col.xsmall-order-last {
    -ms-flex-order: 5;
    order: 5;
}

.col.xsmall-auto {
    min-width: 25%;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
}

.col.xsmall-fill-space {
    min-width: 25%;
    -ms-flex: 1 0 0;
    flex: 1 0 0;
    width: auto;
}

.col.xsmall-1 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}

.col.xsmall-2 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

.col.xsmall-3 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
}

.col.xsmall-4 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

.col.xsmall-order-0 {
    -ms-flex-order: 0;
    order: 0;
}

.col.xsmall-order-1 {
    -ms-flex-order: 1;
    order: 1;
}

.col.xsmall-order-2 {
    -ms-flex-order: 2;
    order: 2;
}

.col.xsmall-order-3 {
    -ms-flex-order: 3;
    order: 3;
}

.col.xsmall-order-4 {
    -ms-flex-order: 4;
    order: 4;
}

.col.xsmall-offset-1, html[dir="ltr"] .col.xsmall-offset-1, html[dir] .row[dir="ltr"] .col.xsmall-offset-1 {
    margin-left: 25%;
    margin-right: 0;
}
html[dir="rtl"] .col.xsmall-offset-1, html[dir] .row[dir="rtl"] .col.xsmall-offset-1 {
    margin-left: 0;
    margin-right: 25%;
}

.col.xsmall-offset-2, html[dir="ltr"] .col.xsmall-offset-2, html[dir] .row[dir="ltr"] .col.xsmall-offset-2 {
    margin-left: 50%;
    margin-right: 0;
}
html[dir="rtl"] .col.xsmall-offset-2, html[dir] .row[dir="rtl"] .col.xsmall-offset-2 {
    margin-left: 0;
    margin-right: 50%;
}

.col.xsmall-offset-3, html[dir="ltr"] .col.xsmall-offset-3, html[dir] .row[dir="ltr"] .col.xsmall-offset-3 {
    margin-left: 75%;
    margin-right: 0;
}
html[dir="rtl"] .col.xsmall-offset-3, html[dir] .row[dir="rtl"] .col.xsmall-offset-3 {
    margin-left: 0;
    margin-right: 75%;
}

@media (min-width: 400px) and (max-width: 479px) {
    .container {
        width: 360px;
    }
}

@media (min-width: 480px) and (max-width: 599px) {
    .container {
        width: 400px;
    }
}

/* SMALL SCREEN SIZE */
@media (min-width: 600px) {
    .col.small-1, .col.small-2, .col.small-3, .col.small-4,
    .col.small-5, .col.small-6, .col.small-7, .col.small-8 {
    }

    .col.small-order-first {
        -ms-flex-order: -1;
        order: -1;
    }

    .col.small-order-last {
        -ms-flex-order: 9;
        order: 9;
    }

    .col.small-auto {
        min-width: 12.5%;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
    }

    .col.small-fill-space {
        min-width: 12.5%;
        -ms-flex: 1 0 0;
        flex: 1 0 0;
        width: auto;
    }

    .col.small-1 {
        -ms-flex: 0 0 12.5%;
        flex: 0 0 12.5%;
        max-width: 12.5%;
    }

    .col.small-2 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col.small-3 {
        -ms-flex: 0 0 37.5%;
        flex: 0 0 37.5%;
        max-width: 37.5%;
    }

    .col.small-4 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col.small-5 {
        -ms-flex: 0 0 62.5%;
        flex: 0 0 62.5%;
        max-width: 62.5%;
    }

    .col.small-6 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col.small-7 {
        -ms-flex: 0 0 87.5%;
        flex: 0 0 87.5%;
        max-width: 87.5%;
    }

    .col.small-8 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .col.small-order-0 {
        -ms-flex-order: 0;
        order: 0;
    }

    .col.small-order-1 {
        -ms-flex-order: 1;
        order: 1;
    }

    .col.small-order-2 {
        -ms-flex-order: 2;
        order: 2;
    }

    .col.small-order-3 {
        -ms-flex-order: 3;
        order: 3;
    }

    .col.small-order-4 {
        -ms-flex-order: 4;
        order: 4;
    }

    .col.small-order-5 {
        -ms-flex-order: 5;
        order: 5;
    }

    .col.small-order-6 {
        -ms-flex-order: 6;
        order: 6;
    }

    .col.small-order-7 {
        -ms-flex-order: 7;
        order: 7;
    }

    .col.small-order-8 {
        -ms-flex-order: 8;
        order: 8;
    }

    .col.small-offset-1, html[dir="ltr"] .col.small-offset-1, html[dir] .row[dir="ltr"] .col.small-offset-1 {
        margin-left: 12.5%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.small-offset-1, html[dir] .row[dir="rtl"] .col.small-offset-1 {
        margin-left: 0;
        margin-right: 12.5%;
    }

    .col.small-offset-2, html[dir="ltr"] .col.small-offset-2, html[dir] .row[dir="ltr"] .col.small-offset-2 {
        margin-left: 25%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.small-offset-2, html[dir] .row[dir="rtl"] .col.small-offset-2 {
        margin-left: 0;
        margin-right: 25%;
    }

    .col.small-offset-3, html[dir="ltr"] .col.small-offset-3, html[dir] .row[dir="ltr"] .col.small-offset-3 {
        margin-left: 37.5%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.small-offset-3, html[dir] .row[dir="rtl"] .col.small-offset-3 {
        margin-left: 0;
        margin-right: 37.5%;
    }

    .col.small-offset-4, html[dir="ltr"] .col.small-offset-4, html[dir] .row[dir="ltr"] .col.small-offset-4 {
        margin-left: 50%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.small-offset-4, html[dir] .row[dir="rtl"] .col.small-offset-4 {
        margin-left: 0;
        margin-right: 50%;
    }

    .col.small-offset-5, html[dir="ltr"] .col.small-offset-5, html[dir] .row[dir="ltr"] .col.small-offset-5 {
        margin-left: 62.5%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.small-offset-5, html[dir] .row[dir="rtl"] .col.small-offset-5 {
        margin-left: 0;
        margin-right: 62.5%;
    }

    .col.small-offset-6, html[dir="ltr"] .col.small-offset-6, html[dir] .row[dir="ltr"] .col.small-offset-6 {
        margin-left: 75%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.small-offset-6, html[dir] .row[dir="rtl"] .col.small-offset-6 {
        margin-left: 0;
        margin-right: 75%;
    }

    .col.small-offset-7, html[dir="ltr"] .col.small-offset-7, html[dir] .row[dir="ltr"] .col.small-offset-7 {
        margin-left: 87.5%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.small-offset-7, html[dir] .row[dir="rtl"] .col.small-offset-7 {
        margin-left: 0;
        margin-right: 87.5%;
    }
}

/* SMALL-EXTENDED SCREEN SIZE */
@media (min-width: 600px) and (max-width: 719px) {
    .container {
        width: 480px;
    }
}

@media (min-width: 720px) {
    .container, .container-fluid, .col {
        padding: 0 0.75rem;
    }
}

@media (min-width: 720px) and (max-width: 839px) {
    .container {
        width: 600px;
    }
}

@media (min-width: 840px) {
    .col.smallext-1, .col.smallext-2, .col.smallext-3, .col.smallext-4,
    .col.smallext-5, .col.smallext-6, .col.smallext-7, .col.smallext-8,
    .col.smallext-9, .col.smallext-10, .col.smallext-11, .col.smallext-12 {
    }

    .col.smallext-order-first {
        -ms-flex-order: -1;
        order: -1;
    }

    .col.smallext-order-last {
        -ms-flex-order: 13;
        order: 13;
    }

    .col.smallext-auto {
        min-width: 8.33333333%;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
    }

    .col.smallext-fill-space {
        min-width: 8.33333333%;
        -ms-flex: 1 0 0;
        flex: 1 0 0;
        width: auto;
    }

    .col.smallext-1 {
        -ms-flex: 0 0 8.33333333%;
        flex: 0 0 8.33333333%;
        max-width: 8.33333333%;
    }

    .col.smallext-2 {
        -ms-flex: 0 0 16.66666667%;
        flex: 0 0 16.66666667%;
        max-width: 16.66666667%;
    }

    .col.smallext-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col.smallext-4 {
        -ms-flex: 0 0 33.33333333%;
        flex: 0 0 33.33333333%;
        max-width: 33.33333333%;
    }

    .col.smallext-5 {
        -ms-flex: 0 0 41.66666667%;
        flex: 0 0 41.66666667%;
        max-width: 41.66666667%;
    }

    .col.smallext-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col.smallext-7 {
        -ms-flex: 0 0 58.33333333%;
        flex: 0 0 58.33333333%;
        max-width: 58.33333333%;
    }

    .col.smallext-8 {
        -ms-flex: 0 0 66.66666667%;
        flex: 0 0 66.66666667%;
        max-width: 66.66666667%;
    }

    .col.smallext-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col.smallext-10 {
        -ms-flex: 0 0 83.33333333%;
        flex: 0 0 83.33333333%;
        max-width: 83.33333333%;
    }

    .col.smallext-11 {
        -ms-flex: 0 0 91.66666667%;
        flex: 0 0 91.66666667%;
        max-width: 91.66666667%;
    }

    .col.smallext-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .col.smallext-order-0 {
        -ms-flex-order: 0;
        order: 0;
    }

    .col.smallext-order-1 {
        -ms-flex-order: 1;
        order: 1;
    }

    .col.smallext-order-2 {
        -ms-flex-order: 2;
        order: 2;
    }

    .col.smallext-order-3 {
        -ms-flex-order: 3;
        order: 3;
    }

    .col.smallext-order-4 {
        -ms-flex-order: 4;
        order: 4;
    }

    .col.smallext-order-5 {
        -ms-flex-order: 5;
        order: 5;
    }

    .col.smallext-order-6 {
        -ms-flex-order: 6;
        order: 6;
    }

    .col.smallext-order-7 {
        -ms-flex-order: 7;
        order: 7;
    }

    .col.smallext-order-8 {
        -ms-flex-order: 8;
        order: 8;
    }

    .col.smallext-order-9 {
        -ms-flex-order: 9;
        order: 9;
    }

    .col.smallext-order-10 {
        -ms-flex-order: 10;
        order: 10;
    }

    .col.smallext-order-11 {
        -ms-flex-order: 11;
        order: 11;
    }

    .col.smallext-order-12 {
        -ms-flex-order: 12;
        order: 12;
    }

    .col.smallext-offset-1, html[dir="ltr"] .col.smallext-offset-1, html[dir] .row[dir="ltr"] .col.smallext-offset-1 {
        margin-left: 8.33333333%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.smallext-offset-1, html[dir] .row[dir="rtl"] .col.smallext-offset-1 {
        margin-left: 0;
        margin-right: 8.33333333%;
    }

    .col.smallext-offset-2, html[dir="ltr"] .col.smallext-offset-2, html[dir] .row[dir="ltr"] .col.smallext-offset-2 {
        margin-left: 16.66666667%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.smallext-offset-2, html[dir] .row[dir="rtl"] .col.smallext-offset-2 {
        margin-left: 0;
        margin-right: 16.66666667%;
    }

    .col.smallext-offset-3, html[dir="ltr"] .col.smallext-offset-3, html[dir] .row[dir="ltr"] .col.smallext-offset-3 {
        margin-left: 25%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.smallext-offset-3, html[dir] .row[dir="rtl"] .col.smallext-offset-3 {
        margin-left: 0;
        margin-right: 25%;
    }

    .col.smallext-offset-4, html[dir="ltr"] .col.smallext-offset-4, html[dir] .row[dir="ltr"] .col.smallext-offset-4 {
        margin-left: 33.33333333%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.smallext-offset-4, html[dir] .row[dir="rtl"] .col.smallext-offset-4 {
        margin-left: 0;
        margin-right: 33.33333333%;
    }

    .col.smallext-offset-5, html[dir="ltr"] .col.smallext-offset-5, html[dir] .row[dir="ltr"] .col.smallext-offset-5 {
        margin-left: 41.66666667%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.smallext-offset-5, html[dir] .row[dir="rtl"] .col.smallext-offset-5 {
        margin-left: 0;
        margin-right: 41.66666667%;
    }

    .col.smallext-offset-6, html[dir="ltr"] .col.smallext-offset-6, html[dir] .row[dir="ltr"] .col.smallext-offset-6 {
        margin-left: 50%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.smallext-offset-6, html[dir] .row[dir="rtl"] .col.smallext-offset-6 {
        margin-left: 0;
        margin-right: 50%;
    }

    .col.smallext-offset-7, html[dir="ltr"] .col.smallext-offset-7, html[dir] .row[dir="ltr"] .col.smallext-offset-7 {
        margin-left: 58.33333333%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.smallext-offset-7, html[dir] .row[dir="rtl"] .col.smallext-offset-7 {
        margin-left: 0;
        margin-right: 58.33333333%;
    }

    .col.smallext-offset-8, html[dir="ltr"] .col.smallext-offset-8, html[dir] .row[dir="ltr"] .col.smallext-offset-8 {
        margin-left: 66.66666667%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.smallext-offset-8, html[dir] .row[dir="rtl"] .col.smallext-offset-8 {
        margin-left: 0;
        margin-right: 66.66666667%;
    }

    .col.smallext-offset-9, html[dir="ltr"] .col.smallext-offset-9, html[dir] .row[dir="ltr"] .col.smallext-offset-9 {
        margin-left: 75%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.smallext-offset-9, html[dir] .row[dir="rtl"] .col.smallext-offset-9 {
        margin-left: 0;
        margin-right: 75%;
    }

    .col.smallext-offset-10, html[dir="ltr"] .col.smallext-offset-10, html[dir] .row[dir="ltr"] .col.smallext-offset-10 {
        margin-left: 83.33333333%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.smallext-offset-10, html[dir] .row[dir="rtl"] .col.smallext-offset-10 {
        margin-left: 0;
        margin-right: 83.33333333%;
    }

    .col.smallext-offset-11, html[dir="ltr"] .col.smallext-offset-11, html[dir] .row[dir="ltr"] .col.smallext-offset-11 {
        margin-left: 91.66666667%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.smallext-offset-11, html[dir] .row[dir="rtl"] .col.smallext-offset-11 {
        margin-left: 0;
        margin-right: 91.66666667%;
    }
}

@media (min-width: 840px) and (max-width: 959px) {
    .container {
        width: 720px;
    }
}

@media (min-width: 960px) and (max-width: 1023px) {
    .container {
        width: 840px;
    }
}

/* MEDIUM SCREEN SIZE */
@media (min-width: 1024px) {
    .col.medium-1, .col.medium-2, .col.medium-3, .col.medium-4,
    .col.medium-5, .col.medium-6, .col.medium-7, .col.medium-8,
    .col.medium-9, .col.medium-10, .col.medium-11, .col.medium-12 {
    }

    .col.medium-order-first {
        -ms-flex-order: -1;
        order: -1;
    }

    .col.medium-order-last {
        -ms-flex-order: 13;
        order: 13;
    }

    .col.medium-auto {
        min-width: 8.33333333%;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }

    .col.medium-fill-space {
        min-width: 8.33333333%;
        -ms-flex: 1 0 0;
        flex: 1 0 0;
        width: auto;
    }

    .col.medium-1 {
        -ms-flex: 0 0 8.33333333%;
        flex: 0 0 8.33333333%;
        max-width: 8.33333333%;
    }

    .col.medium-2 {
        -ms-flex: 0 0 16.66666667%;
        flex: 0 0 16.66666667%;
        max-width: 16.66666667%;
    }

    .col.medium-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col.medium-4 {
        -ms-flex: 0 0 33.33333333%;
        flex: 0 0 33.33333333%;
        max-width: 33.33333333%;
    }

    .col.medium-5 {
        -ms-flex: 0 0 41.66666667%;
        flex: 0 0 41.66666667%;
        max-width: 41.66666667%;
    }

    .col.medium-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col.medium-7 {
        -ms-flex: 0 0 58.33333333%;
        flex: 0 0 58.33333333%;
        max-width: 58.33333333%;
    }

    .col.medium-8 {
        -ms-flex: 0 0 66.66666667%;
        flex: 0 0 66.66666667%;
        max-width: 66.66666667%;
    }

    .col.medium-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col.medium-10 {
        -ms-flex: 0 0 83.33333333%;
        flex: 0 0 83.33333333%;
        max-width: 83.33333333%;
    }

    .col.medium-11 {
        -ms-flex: 0 0 91.66666667%;
        flex: 0 0 91.66666667%;
        max-width: 91.66666667%;
    }

    .col.medium-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .col.medium-order-0 {
        -ms-flex-order: 0;
        order: 0;
    }

    .col.medium-order-1 {
        -ms-flex-order: 1;
        order: 1;
    }

    .col.medium-order-2 {
        -ms-flex-order: 2;
        order: 2;
    }

    .col.medium-order-3 {
        -ms-flex-order: 3;
        order: 3;
    }

    .col.medium-order-4 {
        -ms-flex-order: 4;
        order: 4;
    }

    .col.medium-order-5 {
        -ms-flex-order: 5;
        order: 5;
    }

    .col.medium-order-6 {
        -ms-flex-order: 6;
        order: 6;
    }

    .col.medium-order-7 {
        -ms-flex-order: 7;
        order: 7;
    }

    .col.medium-order-8 {
        -ms-flex-order: 8;
        order: 8;
    }

    .col.medium-order-9 {
        -ms-flex-order: 9;
        order: 9;
    }

    .col.medium-order-10 {
        -ms-flex-order: 10;
        order: 10;
    }

    .col.medium-order-11 {
        -ms-flex-order: 11;
        order: 11;
    }

    .col.medium-order-12 {
        -ms-flex-order: 12;
        order: 12;
    }

    .col.medium-offset-1, html[dir="ltr"] .col.medium-offset-1, html[dir] .row[dir="ltr"] .col.medium-offset-1 {
        margin-left: 8.33333333%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.medium-offset-1, html[dir] .row[dir="rtl"] .col.medium-offset-1 {
        margin-left: 0;
        margin-right: 8.33333333%;
    }

    .col.medium-offset-2, html[dir="ltr"] .col.medium-offset-2, html[dir] .row[dir="ltr"] .col.medium-offset-2 {
        margin-left: 16.66666667%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.medium-offset-2, html[dir] .row[dir="rtl"] .col.medium-offset-2 {
        margin-left: 0;
        margin-right: 16.66666667%;
    }

    .col.medium-offset-3, html[dir="ltr"] .col.medium-offset-3, html[dir] .row[dir="ltr"] .col.medium-offset-3 {
        margin-left: 25%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.medium-offset-3, html[dir] .row[dir="rtl"] .col.medium-offset-3 {
        margin-left: 0;
        margin-right: 25%;
    }

    .col.medium-offset-4, html[dir="ltr"] .col.medium-offset-4, html[dir] .row[dir="ltr"] .col.medium-offset-4 {
        margin-left: 33.33333333%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.medium-offset-4, html[dir] .row[dir="rtl"] .col.medium-offset-4 {
        margin-left: 0;
        margin-right: 33.33333333%;
    }

    .col.medium-offset-5, html[dir="ltr"] .col.medium-offset-5, html[dir] .row[dir="ltr"] .col.medium-offset-5 {
        margin-left: 41.66666667%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.medium-offset-5, html[dir] .row[dir="rtl"] .col.medium-offset-5 {
        margin-left: 0;
        margin-right: 41.66666667%;
    }

    .col.medium-offset-6, html[dir="ltr"] .col.medium-offset-6, html[dir] .row[dir="ltr"] .col.medium-offset-6 {
        margin-left: 50%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.medium-offset-6, html[dir] .row[dir="rtl"] .col.medium-offset-6 {
        margin-left: 0;
        margin-right: 50%;
    }

    .col.medium-offset-7, html[dir="ltr"] .col.medium-offset-7, html[dir] .row[dir="ltr"] .col.medium-offset-7 {
        margin-left: 58.33333333%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.medium-offset-7, html[dir] .row[dir="rtl"] .col.medium-offset-7 {
        margin-left: 0;
        margin-right: 58.33333333%;
    }

    .col.medium-offset-8, html[dir="ltr"] .col.medium-offset-8, html[dir] .row[dir="ltr"] .col.medium-offset-8 {
        margin-left: 66.66666667%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.medium-offset-8, html[dir] .row[dir="rtl"] .col.medium-offset-8 {
        margin-left: 0;
        margin-right: 66.66666667%;
    }

    .col.medium-offset-9, html[dir="ltr"] .col.medium-offset-9, html[dir] .row[dir="ltr"] .col.medium-offset-9 {
        margin-left: 75%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.medium-offset-9, html[dir] .row[dir="rtl"] .col.medium-offset-9 {
        margin-left: 0;
        margin-right: 75%;
    }

    .col.medium-offset-10, html[dir="ltr"] .col.medium-offset-10, html[dir] .row[dir="ltr"] .col.medium-offset-10 {
        margin-left: 83.33333333%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.medium-offset-10, html[dir] .row[dir="rtl"] .col.medium-offset-10 {
        margin-left: 0;
        margin-right: 83.33333333%;
    }

    .col.medium-offset-11, html[dir="ltr"] .col.medium-offset-11, html[dir] .row[dir="ltr"] .col.medium-offset-11 {
        margin-left: 91.66666667%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.medium-offset-11, html[dir] .row[dir="rtl"] .col.medium-offset-11 {
        margin-left: 0;
        margin-right: 91.66666667%;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .container {
        width: 960px;
    }
}

@media (min-width: 1280px) and (max-width: 1439px) {
    .container {
        width: 1024px;
    }
}

/* LARGE SCREEN SIZE */
@media (min-width: 1440px) {
    .col.large-1, .col.large-2, .col.large-3, .col.large-4,
    .col.large-5, .col.large-6, .col.large-7, .col.large-8,
    .col.large-9, .col.large-10, .col.large-11, .col.large-12 {
    }

    .col.large-order-first {
        -ms-flex-order: -1;
        order: -1;
    }

    .col.large-order-last {
        -ms-flex-order: 13;
        order: 13;
    }

    .col.large-auto {
        min-width: 8.33333333%;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }

    .col.large-fill-space {
        min-width: 8.33333333%;
        -ms-flex: 1 0 0;
        flex: 1 0 0;
        width: auto;
    }

    .col.large-1 {
        -ms-flex: 0 0 8.33333333%;
        flex: 0 0 8.33333333%;
        max-width: 8.33333333%;
    }

    .col.large-2 {
        -ms-flex: 0 0 16.66666667%;
        flex: 0 0 16.66666667%;
        max-width: 16.66666667%;
    }

    .col.large-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col.large-4 {
        -ms-flex: 0 0 33.33333333%;
        flex: 0 0 33.33333333%;
        max-width: 33.33333333%;
    }

    .col.large-5 {
        -ms-flex: 0 0 41.66666667%;
        flex: 0 0 41.66666667%;
        max-width: 41.66666667%;
    }

    .col.large-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col.large-7 {
        -ms-flex: 0 0 58.33333333%;
        flex: 0 0 58.33333333%;
        max-width: 58.33333333%;
    }

    .col.large-8 {
        -ms-flex: 0 0 66.66666667%;
        flex: 0 0 66.66666667%;
        max-width: 66.66666667%;
    }

    .col.large-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col.large-10 {
        -ms-flex: 0 0 83.33333333%;
        flex: 0 0 83.33333333%;
        max-width: 83.33333333%;
    }

    .col.large-11 {
        -ms-flex: 0 0 91.66666667%;
        flex: 0 0 91.66666667%;
        max-width: 91.66666667%;
    }

    .col.large-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .col.large-order-0 {
        -ms-flex-order: 0;
        order: 0;
    }

    .col.large-order-1 {
        -ms-flex-order: 1;
        order: 1;
    }

    .col.large-order-2 {
        -ms-flex-order: 2;
        order: 2;
    }

    .col.large-order-3 {
        -ms-flex-order: 3;
        order: 3;
    }

    .col.large-order-4 {
        -ms-flex-order: 4;
        order: 4;
    }

    .col.large-order-5 {
        -ms-flex-order: 5;
        order: 5;
    }

    .col.large-order-6 {
        -ms-flex-order: 6;
        order: 6;
    }

    .col.large-order-7 {
        -ms-flex-order: 7;
        order: 7;
    }

    .col.large-order-8 {
        -ms-flex-order: 8;
        order: 8;
    }

    .col.large-order-9 {
        -ms-flex-order: 9;
        order: 9;
    }

    .col.large-order-10 {
        -ms-flex-order: 10;
        order: 10;
    }

    .col.large-order-11 {
        -ms-flex-order: 11;
        order: 11;
    }

    .col.large-order-12 {
        -ms-flex-order: 12;
        order: 12;
    }

    .col.large-offset-1, html[dir="ltr"] .col.large-offset-1, html[dir] .row[dir="ltr"] .col.large-offset-1 {
        margin-left: 8.33333333%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.large-offset-1, html[dir] .row[dir="rtl"] .col.large-offset-1 {
        margin-left: 0;
        margin-right: 8.33333333%;
    }

    .col.large-offset-2, html[dir="ltr"] .col.large-offset-2, html[dir] .row[dir="ltr"] .col.large-offset-2 {
        margin-left: 16.66666667%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.large-offset-2, html[dir] .row[dir="rtl"] .col.large-offset-2 {
        margin-left: 0;
        margin-right: 16.66666667%;
    }

    .col.large-offset-3, html[dir="ltr"] .col.large-offset-3, html[dir] .row[dir="ltr"] .col.large-offset-3 {
        margin-left: 25%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.large-offset-3, html[dir] .row[dir="rtl"] .col.large-offset-3 {
        margin-left: 0;
        margin-right: 25%;
    }

    .col.large-offset-4, html[dir="ltr"] .col.large-offset-4, html[dir] .row[dir="ltr"] .col.large-offset-4 {
        margin-left: 33.33333333%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.large-offset-4, html[dir] .row[dir="rtl"] .col.large-offset-4 {
        margin-left: 0;
        margin-right: 33.33333333%;
    }

    .col.large-offset-5, html[dir="ltr"] .col.large-offset-5, html[dir] .row[dir="ltr"] .col.large-offset-5 {
        margin-left: 41.66666667%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.large-offset-5, html[dir] .row[dir="rtl"] .col.large-offset-5 {
        margin-left: 0;
        margin-right: 41.66666667%;
    }

    .col.large-offset-6, html[dir="ltr"] .col.large-offset-6, html[dir] .row[dir="ltr"] .col.large-offset-6 {
        margin-left: 50%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.large-offset-6, html[dir] .row[dir="rtl"] .col.large-offset-6 {
        margin-left: 0;
        margin-right: 50%;
    }

    .col.large-offset-7, html[dir="ltr"] .col.large-offset-7, html[dir] .row[dir="ltr"] .col.large-offset-7 {
        margin-left: 58.33333333%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.large-offset-7, html[dir] .row[dir="rtl"] .col.large-offset-7 {
        margin-left: 0;
        margin-right: 58.33333333%;
    }

    .col.large-offset-8, html[dir="ltr"] .col.large-offset-8, html[dir] .row[dir="ltr"] .col.large-offset-8 {
        margin-left: 66.66666667%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.large-offset-8, html[dir] .row[dir="rtl"] .col.large-offset-8 {
        margin-left: 0;
        margin-right: 66.66666667%;
    }

    .col.large-offset-9, html[dir="ltr"] .col.large-offset-9, html[dir] .row[dir="ltr"] .col.large-offset-9 {
        margin-left: 75%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.large-offset-9, html[dir] .row[dir="rtl"] .col.large-offset-9 {
        margin-left: 0;
        margin-right: 75%;
    }

    .col.large-offset-10, html[dir="ltr"] .col.large-offset-10, html[dir] .row[dir="ltr"] .col.large-offset-10 {
        margin-left: 83.33333333%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.large-offset-10, html[dir] .row[dir="rtl"] .col.large-offset-10 {
        margin-left: 0;
        margin-right: 83.33333333%;
    }

    .col.large-offset-11, html[dir="ltr"] .col.large-offset-11, html[dir] .row[dir="ltr"] .col.large-offset-11 {
        margin-left: 91.66666667%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.large-offset-11, html[dir] .row[dir="rtl"] .col.large-offset-11 {
        margin-left: 0;
        margin-right: 91.66666667%;
    }
}

@media (min-width: 1440px) and (max-width: 1599px) {
    .container {
        width: 1280px;
    }
}

@media (min-width: 1600px) and (max-width: 1919px) {
    .container {
        width: 1440px;
    }
}

/* X-LARGE SCREEN SIZE */
@media (min-width: 1920px) {
    .container {
        width: 1600px;
    }

    .col.xlarge-1, .col.xlarge-2, .col.xlarge-3, .col.xlarge-4,
    .col.xlarge-5, .col.xlarge-6, .col.xlarge-7, .col.xlarge-8,
    .col.xlarge-9, .col.xlarge-10, .col.xlarge-11, .col.xlarge-12 {
    }

    .col.xlarge-order-first {
        -ms-flex-order: -1;
        order: -1;
    }

    .col.xlarge-order-last {
        -ms-flex-order: 13;
        order: 13;
    }

    .col.xlarge-auto {
        min-width: 8.33333333%;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }

    .col.xlarge-fill-space {
        min-width: 8.33333333%;
        -ms-flex: 1 0 0;
        flex: 1 0 0;
        width: auto;
    }

    .col.xlarge-1 {
        -ms-flex: 0 0 8.33333333%;
        flex: 0 0 8.33333333%;
        max-width: 8.33333333%;
    }

    .col.xlarge-2 {
        -ms-flex: 0 0 16.66666667%;
        flex: 0 0 16.66666667%;
        max-width: 16.66666667%;
    }

    .col.xlarge-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col.xlarge-4 {
        -ms-flex: 0 0 33.33333333%;
        flex: 0 0 33.33333333%;
        max-width: 33.33333333%;
    }

    .col.xlarge-5 {
        -ms-flex: 0 0 41.66666667%;
        flex: 0 0 41.66666667%;
        max-width: 41.66666667%;
    }

    .col.xlarge-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col.xlarge-7 {
        -ms-flex: 0 0 58.33333333%;
        flex: 0 0 58.33333333%;
        max-width: 58.33333333%;
    }

    .col.xlarge-8 {
        -ms-flex: 0 0 66.66666667%;
        flex: 0 0 66.66666667%;
        max-width: 66.66666667%;
    }

    .col.xlarge-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col.xlarge-10 {
        -ms-flex: 0 0 83.33333333%;
        flex: 0 0 83.33333333%;
        max-width: 83.33333333%;
    }

    .col.xlarge-11 {
        -ms-flex: 0 0 91.66666667%;
        flex: 0 0 91.66666667%;
        max-width: 91.66666667%;
    }

    .col.xlarge-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .col.xlarge-order-0 {
        -ms-flex-order: 0;
        order: 0;
    }

    .col.xlarge-order-1 {
        -ms-flex-order: 1;
        order: 1;
    }

    .col.xlarge-order-2 {
        -ms-flex-order: 2;
        order: 2;
    }

    .col.xlarge-order-3 {
        -ms-flex-order: 3;
        order: 3;
    }

    .col.xlarge-order-4 {
        -ms-flex-order: 4;
        order: 4;
    }

    .col.xlarge-order-5 {
        -ms-flex-order: 5;
        order: 5;
    }

    .col.xlarge-order-6 {
        -ms-flex-order: 6;
        order: 6;
    }

    .col.xlarge-order-7 {
        -ms-flex-order: 7;
        order: 7;
    }

    .col.xlarge-order-8 {
        -ms-flex-order: 8;
        order: 8;
    }

    .col.xlarge-order-9 {
        -ms-flex-order: 9;
        order: 9;
    }

    .col.xlarge-order-10 {
        -ms-flex-order: 10;
        order: 10;
    }

    .col.xlarge-order-11 {
        -ms-flex-order: 11;
        order: 11;
    }

    .col.xlarge-order-12 {
        -ms-flex-order: 12;
        order: 12;
    }

    .col.xlarge-offset-1, html[dir="ltr"] .col.xlarge-offset-1, html[dir] .row[dir="ltr"] .col.xlarge-offset-1 {
        margin-left: 8.33333333%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.xlarge-offset-1, html[dir] .row[dir="rtl"] .col.xlarge-offset-1 {
        margin-left: 0;
        margin-right: 8.33333333%;
    }

    .col.xlarge-offset-2, html[dir="ltr"] .col.xlarge-offset-2, html[dir] .row[dir="ltr"] .col.xlarge-offset-2 {
        margin-left: 16.66666667%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.xlarge-offset-2, html[dir] .row[dir="rtl"] .col.xlarge-offset-2 {
        margin-left: 0;
        margin-right: 16.66666667%;
    }

    .col.xlarge-offset-3, html[dir="ltr"] .col.xlarge-offset-3, html[dir] .row[dir="ltr"] .col.xlarge-offset-3 {
        margin-left: 25%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.xlarge-offset-3, html[dir] .row[dir="rtl"] .col.xlarge-offset-3 {
        margin-left: 0;
        margin-right: 25%;
    }

    .col.xlarge-offset-4, html[dir="ltr"] .col.xlarge-offset-4, html[dir] .row[dir="ltr"] .col.xlarge-offset-4 {
        margin-left: 33.33333333%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.xlarge-offset-4, html[dir] .row[dir="rtl"] .col.xlarge-offset-4 {
        margin-left: 0;
        margin-right: 33.33333333%;
    }

    .col.xlarge-offset-5, html[dir="ltr"] .col.xlarge-offset-5, html[dir] .row[dir="ltr"] .col.xlarge-offset-5 {
        margin-left: 41.66666667%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.xlarge-offset-5, html[dir] .row[dir="rtl"] .col.xlarge-offset-5 {
        margin-left: 0;
        margin-right: 41.66666667%;
    }

    .col.xlarge-offset-6, html[dir="ltr"] .col.xlarge-offset-6, html[dir] .row[dir="ltr"] .col.xlarge-offset-6 {
        margin-left: 50%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.xlarge-offset-6, html[dir] .row[dir="rtl"] .col.xlarge-offset-6 {
        margin-left: 0;
        margin-right: 50%;
    }

    .col.xlarge-offset-7, html[dir="ltr"] .col.xlarge-offset-7, html[dir] .row[dir="ltr"] .col.xlarge-offset-7 {
        margin-left: 58.33333333%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.xlarge-offset-7, html[dir] .row[dir="rtl"] .col.xlarge-offset-7 {
        margin-left: 0;
        margin-right: 58.33333333%;
    }

    .col.xlarge-offset-8, html[dir="ltr"] .col.xlarge-offset-8, html[dir] .row[dir="ltr"] .col.xlarge-offset-8 {
        margin-left: 66.66666667%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.xlarge-offset-8, html[dir] .row[dir="rtl"] .col.xlarge-offset-8 {
        margin-left: 0;
        margin-right: 66.66666667%;
    }

    .col.xlarge-offset-9, html[dir="ltr"] .col.xlarge-offset-9, html[dir] .row[dir="ltr"] .col.xlarge-offset-9 {
        margin-left: 75%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.xlarge-offset-9, html[dir] .row[dir="rtl"] .col.xlarge-offset-9 {
        margin-left: 0;
        margin-right: 75%;
    }

    .col.xlarge-offset-10, html[dir="ltr"] .col.xlarge-offset-10, html[dir] .row[dir="ltr"] .col.xlarge-offset-10 {
        margin-left: 83.33333333%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.xlarge-offset-10, html[dir] .row[dir="rtl"] .col.xlarge-offset-10 {
        margin-left: 0;
        margin-right: 83.33333333%;
    }

    .col.xlarge-offset-11, html[dir="ltr"] .col.xlarge-offset-11, html[dir] .row[dir="ltr"] .col.xlarge-offset-11 {
        margin-left: 91.66666667%;
        margin-right: 0;
    }
    html[dir="rtl"] .col.xlarge-offset-11, html[dir] .row[dir="rtl"] .col.xlarge-offset-11 {
        margin-left: 0;
        margin-right: 91.66666667%;
    }
}

/* VISIBILITY CLASSES */

.hidden {
    display: none !important;
}

.visible {
    display: block !important;
    display: initial !important; /* for supported browsers */
}

table.visible {
    display: table !important;
}

tr.visible {
    display: table-row !important;
}

th.visible, td.visible {
    display: table-cell !important;
}

.visible-block {
    display: block !important;
}

.visible-inline {
    display: inline !important;
}

.visible-inline-block {
    display: inline-block !important;
}

.visible-xsmall, .visible-xsmall-block, .visible-xsmall-inline, .visible-xsmall-inline-block,
.visible-small, .visible-small-block, .visible-small-inline, .visible-small-inline-block,
.visible-smallext, .visible-smallext-block, .visible-smallext-inline, .visible-smallext-inline-block,
.visible-medium, .visible-medium-block, .visible-medium-inline, .visible-medium-inline-block,
.visible-large, .visible-large-block, .visible-large-inline, .visible-large-inline-block,
.visible-xlarge, .visible-xlarge-block, .visible-xlarge-inline, .visible-xlarge-inline-block {
    display: none !important;
}

/* X-SMALL */
@media (max-width: 599px) {
    .hidden-xsmall {
        display: none !important;
    }
    
    .visible-xsmall {
        display: block !important;
        display: initial !important /* for supported browsers */
    }

    table.visible-xsmall {
        display: table !important;
    }

    tr.visible-xsmall {
        display: table-row !important;
    }

    th.visible-xsmall, td.visible-xsmall {
        display: table-cell !important;
    }

    .visible-xsmall-block {
        display: block !important;
    }

    .visible-xsmall-inline {
        display: inline !important;
    }

    .visible-xsmall-inline-block {
        display: inline-block !important;
    }
}

/* SMALL */
@media (min-width: 600px) and (max-width: 839px) {
    .hidden-small {
        display: none !important;
    }

    .visible-small {
        display: block !important;
        display: initial !important /* for supported browsers */
    }

    table.visible-small {
        display: table !important;
    }

    tr.visible-small {
        display: table-row !important;
    }

    th.visible-small, td.visible-small {
        display: table-cell !important;
    }

    .visible-small-block {
        display: block !important;
    }

    .visible-small-inline {
        display: inline !important;
    }

    .visible-small-inline-block {
        display: inline-block !important;
    }
}

/* SMALL-EXT */
@media (min-width: 840px) and (max-width: 1023px) {
    .hidden-smallext {
        display: none !important;
    }

    .visible-smallext {
        display: block !important;
        display: initial !important /* for supported browsers */
    }

    table.visible-smallext {
        display: table !important;
    }

    tr.visible-smallext {
        display: table-row !important;
    }

    th.visible-smallext, td.visible-smallext {
        display: table-cell !important;
    }

    .visible-smallext-block {
        display: block !important;
    }

    .visible-smallext-inline {
        display: inline !important;
    }

    .visible-smallext-inline-block {
        display: inline-block !important;
    }
}

/* MEDIUM */
@media (min-width: 1024px) and (max-width: 1439px) {
    .hidden-medium {
        display: none !important;
    }

    .visible-medium {
        display: block !important;
        display: initial !important /* for supported browsers */
    }

    table.visible-medium {
        display: table !important;
    }

    tr.visible-medium {
        display: table-row !important;
    }

    th.visible-medium, td.visible-medium {
        display: table-cell !important;
    }

    .visible-medium-block {
        display: block !important;
    }

    .visible-medium-inline {
        display: inline !important;
    }

    .visible-medium-inline-block {
        display: inline-block !important;
    }
}

/* LARGE */
@media (min-width: 1440px) and (max-width: 1919px) {
    .hidden-large {
        display: none !important;
    }

    .visible-large {
        display: block !important;
        display: initial !important /* for supported browsers */
    }

    table.visible-large {
        display: table !important;
    }

    tr.visible-large {
        display: table-row !important;
    }

    th.visible-large, td.visible-large {
        display: table-cell !important;
    }

    .visible-large-block {
        display: block !important;
    }

    .visible-large-inline {
        display: inline !important;
    }

    .visible-large-inline-block {
        display: inline-block !important;
    }
}

/* X-LARGE */
@media (min-width: 1920px) {
    .hidden-xlarge {
        display: none !important;
    }

    .visible-xlarge {
        display: block !important;
        display: initial !important /* for supported browsers */
    }

    table.visible-xlarge {
        display: table !important;
    }

    tr.visible-xlarge {
        display: table-row !important;
    }

    th.visible-xlarge, td.visible-xlarge {
        display: table-cell !important;
    }

    .visible-xlarge-block {
        display: block !important;
    }

    .visible-xlarge-inline {
        display: inline !important;
    }

    .visible-xlarge-inline-block {
        display: inline-block !important;
    }
}

.visible-print, .visible-print-block, .visible-print-inline, .visible-print-inline-block {
    display: none !important;
}

@media print {
    .hidden-print {
        display: none !important;
    }

    .visible-print {
        display: block !important;
    }

    table.visible-print {
        display: table !important;
    }

    tr.visible-print {
        display: table-row !important;
    }

    th.visible-print, td.visible-print {
        display: table-cell !important;
    }

    .visible-print-block {
        display: block !important;
    }

    .visible-print-inline {
        display: inline !important;
    }

    .visible-print-inline-block {
        display: inline-block !important;
    }
}

/* MATERIAL GUIDELINES BREAKPOINTS */

@media (min-width: 1920px) {
}

@media (min-width: 1600px) and (max-width: 1919px) {
}

@media (min-width: 1440px) and (max-width: 1599px) {
}

@media (min-width: 1280px) and (max-width: 1439px) {
}

@media (min-width: 960px) and (max-width: 1279px) {
}

@media (min-width: 840px) and (max-width: 959px) {
}

@media (min-width: 720px) and (max-width: 839px) {
}

@media (min-width: 600px) and (max-width: 719px) {
}

@media (min-width: 480px) and (max-width: 599px) {
}

@media (min-width: 400px) and (max-width: 479px) {
}

@media (min-width: 360px) and (max-width: 399px) {
}

@media (max-width: 359px) {
}