@font-face {
    font-family: "Roboto";
    src: url(https://prd.cemexgo.com/cdn/fonts/Roboto-Thin.ttf);
    font-weight: 100;
}

@font-face {
    font-family: "Roboto";
    src: url(https://prd.cemexgo.com/cdn/fonts/Roboto-Light.ttf);
    font-weight: 300;
}

@font-face {
    font-family: "Roboto";
    src: url(https://prd.cemexgo.com/cdn/fonts/Roboto-Regular.ttf);
    font-weight: 400;
}

@font-face {
    font-family: "Roboto";
    src: url(https://prd.cemexgo.com/cdn/fonts/Roboto-Italic.ttf);
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "Roboto";
    src: url(https://prd.cemexgo.com/cdn/fonts/Roboto-Medium.ttf);
    font-weight: 500;
}

@font-face {
    font-family: "Roboto";
    src: url(https://prd.cemexgo.com/cdn/fonts/Roboto-Bold.ttf);
    font-weight: 700;
}

@font-face {
    font-family: "Roboto";
    src: url(https://prd.cemexgo.com/cdn/fonts/Roboto-Black.ttf);
    font-weight: 800;
}

.roboto-bold {
    font-family: "Roboto";
    font-weight: 700;
}

.roboto-medium {
    font-family: "Roboto";
    font-weight: 500;
}

.roboto-regular {
    font-family: "Roboto";
    font-weight: 400;
}

.roboto-light {
    font-family: "Roboto";
    font-weight: 300;
}

.roboto-thin {
    font-family: "Roboto";
    font-weight: 100;
}

.roboto-italic {
    font-family: "Roboto";
    font-style: italic;
}

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

.font-medium {
    font-weight: 500;
}

.font-regular {
    font-weight: 400;
}

.font-light {
    font-weight: 300;
}

.font-thin {
    font-weight: 100;
}

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

body {
    font-family: "Roboto", sans-serif;
}

h1, .h1-role {
    font-family: "Roboto", sans-serif;
    font-size: 1.875rem;
    line-height: 1.875rem;
    font-weight: 700;
    color: #001B3A;
}

h2, .h2-role {
    font-family: "Roboto", sans-serif;
    font-size: 1.5rem;
    line-height: 1.5rem;
    font-weight: 500;
    color: #001B3A;
}

h3, .h3-role {
    font-family: "Roboto", sans-serif;
    font-size: 1.125rem;
    line-height: 1.125rem;
    font-weight: 400;
    color: #001B3A;
}

h4, .h4-role {
    font-family: "Roboto", sans-serif;
    font-size: 1rem;
    line-height: 1rem;
    font-weight: 400;
    color: #001B3A;
}

h5, .h5-role {
    font-family: "Roboto", sans-serif;
    font-size: 0.875rem;
    line-height: 1rem;
    font-weight: 500;
    color: #001B3A;
    text-transform: uppercase;
}

h6, .h6-role {
    font-family: "Roboto", sans-serif;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    color: #001B3A;
}

.table-entry {
    font-family: "Roboto", sans-serif;
    font-size: 0.875rem;
    line-height: 1rem;
    color: #333;
}

.table-entry-strong {
    font-family: "Roboto", sans-serif;
    font-size: 0.875rem;
    line-height: 1rem;
    color: #333;
    font-weight: 700;
}

.cmx-breadcrumb {
    font-family: "Roboto", sans-serif;
    font-size: 1.125rem;
    color: #001B3A;
}

.input-placeholder {
    font-family: "Roboto", sans-serif;
    font-size: 0.875rem;
    line-height: 1rem;
    color: #666;
}

.input-text {
    font-family: "Roboto", sans-serif;
    font-size: 0.875rem;
    line-height: 1rem;
    color: #333;
}

/*noto*/

@font-face {
    font-family: "NotoSans";
    src: url(https://prd.cemexgo.com/cdn/fonts/NotoSans-Regular.ttf);
    font-weight: 400;
}

@font-face {
    font-family: "NotoSans";
    src: url(https://prd.cemexgo.com/cdn/fonts/NotoSans-Bold.ttf);
    font-weight: 700;
}

.noto-bold {
    font-family: "NotoSans";
    font-weight: 700;
}

.noto-regular {
    font-family: "NotoSans";
    font-weight: 400;
}

[dir="rtl"] h1, [dir="rtl"] .h1-role {
    font-family: "NotoSans", sans-serif;
    font-size: 1.875rem;
    line-height: 1.875rem;
    font-weight: 700;
    color: #001B3A;
}

[dir="rtl"] h2, [dir="rtl"] .h2-role {
    font-family: "NotoSans", sans-serif;
    font-size: 1.5rem;
    line-height: 1.5rem;
    font-weight: 500;
    color: #001B3A;
}

[dir="rtl"] h3, [dir="rtl"] .h3-role {
    font-family: "NotoSans", sans-serif;
    font-size: 1.125rem;
    line-height: 1.125rem;
    font-weight: 400;
    color: #001B3A;
}

[dir="rtl"] h4, [dir="rtl"] .h4-role {
    font-family: "NotoSans", sans-serif;
    font-size: 1rem;
    line-height: 1rem;
    font-weight: 400;
    color: #001B3A;
}

[dir="rtl"] h5, [dir="rtl"] .h5-role {
    font-family: "NotoSans", sans-serif;
    font-size: 0.875rem;
    line-height: 1rem;
    font-weight: 500;
    color: #001B3A;
    text-transform: uppercase;
}

[dir="rtl"] h6, [dir="rtl"] .h6-role {
    font-family: "NotoSans", sans-serif;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    color: #001B3A;
}

[dir="rtl"] .table-entry {
    font-family: "NotoSans", sans-serif;
    font-size: 0.875rem;
    line-height: 1rem;
    color: #333;
}

[dir="rtl"] .table-entry-strong {
    font-family: "NotoSans", sans-serif;
    font-size: 0.875rem;
    line-height: 1rem;
    color: #333;
    font-weight: 700;
}

[dir="rtl"] .breadcrumb {
    font-family: "NotoSans", sans-serif;
    font-size: 1.125rem;
    color: #001B3A;
}

[dir="rtl"] .table-entry {
    font-size: 0.875rem;
    color: #333;
}

[dir="rtl"] .input-placeholder {
    font-family: "NotoSans", sans-serif;
    font-size: 0.875rem;
    line-height: 1rem;
    color: #666;
}

[dir="rtl"] .input-text {
    font-family: "NotoSans", sans-serif;
    font-size: 0.875rem;
    line-height: 1rem;
    color: #333;
}

[dir="rtl"] body {
    font-family: "NotoSans", sans-serif;
}