1
\$\begingroup\$

Code Review

I have two functions of styleAppend and getCss, which generate and append a style tag to a document.

Would you be so kind and review them and help me to possibly make it faster, simpler or more efficient? I'm hoping it would work with earlier versions of IE and other browsers.

styleAppend

/*style append*/
styleAppend: function(z) {
    var d, e, t, w, f, s, i, q, n, k, j, h, x, y;
    x = window.innerWidth; /*window size*/
    if (z.c == null || z.m == null || z.g == null) {
        return;
    }
    c = JSON.parse(z.c);

    d = '';
    s = '';
    t = '';
    w = '';
    i = 99;
    f = 51; /*font count*/
    q = 20; /*columns size*/
    for (n in c) {
        for (k in c[n]) {
            i++;
            d = d.concat('.r', i, ',r', i, ' a{color:#', c[n][k], '}.b', i, ',.b', i, ' a{background-color:#', c[n][k], '}');
        }
    }
    for (j = 1; j < f; j++) {
        s = s + '.s'.concat(j, '{font-size:', (j * window.e), 'px}');
    } /*font-size*/
    for (i = 1; i <= q; i++) {
        t = t + '.' + window.y + i + ','; /*width calc*/
        w = w + '.' + window.y + i + '{width:' + (100 / (q + 1 - i)) + '%}';
        if (i == q) {
            t = t.substr(0, t.length - 1);
            h = '.ro{margin:0;padding:0;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline-block;}'.concat(t, '{float:left;position:relative;min-height:1px}', w, s, z.g, z.m, d); /*assembled css*/
            break;
        }
    }
    s = document.createElement('style'); /*create style tag*/
    t = document.createTextNode(h); /*create style text*/
    s.appendChild(t); /*append text to tag*/
    document.body.appendChild(s); /*append style to body*/
}

getCss

getCSS: function(z) {
    var w, y, e, ar, x = [];
    Object.keys(z).forEach(function(a, b, c) {
        window[a] = null;
        x[a] = new XMLHttpRequest();
        if (a == 'm') {
            w = window.innerWidth; /*window size*/
            switch (true) {
                case (w < 200):
                    window.y = 'tiny';
                    window.e = 0.8; /*tiny*/
                    break;
                case (w >= 200 && w <= 360):
                    window.y = 'very-small';
                    window.e = 0.9; /*x small*/
                    break;
                case (w > 360 && w <= 480):
                    window.y = 'small';
                    window.e = 1; /*small*/
                    break;
                case (w > 480 && w <= 768):
                    window.y = 'medium';
                    window.e = 1.1; /*medium*/
                    break;
                case (w > 768 && w <= 1280):
                    window.y = 'large';
                    window.e = 1.3; /*large*/
                    break;
                case (w > 1280 && w <= 1920):
                    window.y = 'very-large';
                    window.e = 1.6; /*x large*/
                    break;
                case (w > 1920):
                    window.y = 'largest';
                    window.e = 1.9; /*xx large*/
                    break;
                default:
                    window.y = 'large';
                    window.e = 1.2; /*default size */
                    break;
            }
            url = window.location.origin.concat('/', z[a.toString()], window.y, '.txt');

        } else {
            url = window.location.origin.concat('/', z[a.toString()]);
        }
        x[a].open("GET", url, true);

        x[a].onreadystatechange = function() {
            if (x[a].readyState === 4) {
                if (x[a].status === 200 || x[a].status == 0) {
                    window[a] = x[a].responseText;
                    if (
                        z.g === 'dir/styles/z-css-031019-1000.txt' &&
                        z.m === 'dir/styles/css-' &&
                        z.c === 'dir/styles/color-hex.txt'
                    ) {
                        J.styleAppend({
                            g: window['g'],
                            m: window['m'],
                            c: window['c']
                        }); // style and color
                    }
                }
            }
        }
        x[a].send();
    });
}

color-hex.txt

[
     ["FFFFFF", "F8F8FF", "F7F7F7", "F0F0F0", "F2F2F2", "EDEDED", "EBEBEB", "E5E5E5", "E3E3E3", "E0E0E0"],
     ["858585", "666666", "545454", "4D4D4D", "474747", "363636", "333333", "222222", "1C1C1C", "050505"],
     ["EEEE00", "FFD700", "EEC900", "EAC80D", "FFC125", "FFB90F", "EEAD0E", "DAA520", "BFA30C", "B78A00"],
     ["FFA500", "FF9912", "ED9121", "FF7F00", "FF8000", "EE7600", "EE6A50", "EE5C42", "FF6347", "FF6103"],
     ["32CD32", "00C957", "43CD80", "00C78C", "1ABC9C", "20B2AA", "03A89E", "00C5CD", "00CED1", "48D1CC"],
     ["63B8FF", "00B2EE", "1E90FF", "1C86EE", "1C86EE", "1874CD", "436EEE", "4169E1", "3A5FCD", "014B96"],
     ["EE7AE9", "DA70D6", "BA55D3", "BF3EFF", "B23AEE", "9B30FF", "836FFF", "7A67EE", "9F79EE", "8968CD"],
     ["FF6EB4", "FF69B4", "EE3A8C", "FF34B3", "FF1493", "EE1289", "CD2990", "D02090", "C71585", "CD1076"],
     ["FF4500", "EE4000", "FF4040", "EE3B3B", "EE2C2C", "FF0000", "DC143C", "CD0000", "B0171F", "8B2323"],
     ["FF6A6A", "CD7054", "CD6839", "CD661D", "C76114", "CD5B45", "CD4F39", "CD3333", "CD2626", "CD3700"]
]

css-small.txt for small display (Example)

body {
    font-size: 12px!important;
    line-height: 190%!important
}

h1 {
    font-size: 160%!important
}

h2 {
    font-size: 140%!important
}

h3 {
    font-size: 120%!important
}

h4 {
    font-size: 100%!important
}

h5 {
    font-size: 90%!important
}

h6 {
    font-size: 80%!important
}

.w-0 {
    width: 150px
}

.w-1 {
    width: 200px
}

.w-2 {
    width: 250px
}

.w-3 {
    width: 320px
}

.w-4 {
    width: 350px
}

.w-5 {
    width: 375px
}

.p-1 {
    padding: 1.5px
}

.p-2 {
    padding: 3px
}

.p-3 {
    padding: 5px
}

.p-4 {
    padding: 10px
}

.p-5 {
    padding: 15px
}

.m-1 {
    margin: 1.5px
}

.m-2 {
    margin: 3px
}

.m-3 {
    margin: 5px
}

.m-4 {
    margin: 10px
}

.m-5 {
    margin: 15px
}

.ml-1 {
    margin-left: -3px!important
}

.ml-2 {
    margin-left: -6px!important
}

.ml-3 {
    margin-left: -10px!important
}

.ml-4 {
    margin-left: -20px!important
}

.ml-5 {
    margin-left: -30px!important
}

.fh-1 {
    min-height: 15px;
    max-height: 15px
}

.fh-2 {
    min-height: 20px;
    max-height: 20px
}

.fh-3 {
    min-height: 25px;
    max-height: 25px
}

.fh-4 {
    min-height: 30px;
    max-height: 30px
}

.fh-5 {
    min-height: 35px;
    max-height: 35px
}

.mv-1 {
    margin: 1.5px 0
}

.mv-2 {
    margin: 3px 0
}

.mv-3 {
    margin: 5px 0
}

.mv-4 {
    margin: 10px 0
}

.mv-5 {
    margin: 20px 0
}

.br-1 {
    border-radius: 1.5px
}

.br-2 {
    border-radius: 3px
}

.br-3 {
    border-radius: 5px
}

.br-4 {
    border-radius: 10px
}

.br-5 {
    border-radius: 15px
}

.tg-up:after {
    margin-left: -15px 0 0 -50px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 30px solid #999
}

z-css-031019-1000.txt

* {
    margin: 0;
    padding: 0
}

body,
html {
    height: 100%
}

body {
    font-weight: 400;
    overflow-x: hidden;
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    font-family: "TradeGothic", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 150%
}

body * {
    transition: all 0.4s ease
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Raleway', sans-serif;
    margin-top: 0;
    text-transform: none;
    margin: 0;
    padding: 0;
    font-weight: 600;
    line-height: 200%
}

ul,
li {
    list-style: none;
    padding: 0px;
    margin: 0px
}

a,
a:hover,
a:active,
a:focus {
    color: #DA70D6;
    outline: none;
    border: none;
    text-decoration: none
}

a {
    color: #014B96;
    transition: all 0.4s ease 0s
}

a:focus,
a:hover {
    color: #4c7ff0;
    -webkit-transition: all .3s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s
}

pre {
    background: #eee;
    color: #333;
    padding: 10px;
    border-radius: 5px;
    overflow: scroll
}

article {
    margin: 0;
    display: inline-block;
    min-height: 100%;
    min-width: 100%
}

img {
    vertical-align: middle
}

a,
a:hover,
a:active,
a:focus {
    color: #DA70D6;
    outline: none;
    border: none;
    text-decoration: none
}

a {
    color: #014B96;
    transition: all 0.4s ease 0s
}

a:focus,
a:hover {
    color: #4c7ff0;
    -webkit-transition: all .3s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s
}

ul,
ol {
    padding: 0
}

li {
    list-style: none
}

input,
textarea {
    border: none;
    box-shadow: 0px 1px 2px #999;
    padding: 5px 0
}

u {
    text-decoration: none
}

svg {
    font-size: 250%
}

text {
    text-rendering: optimizeSpeed;
    text-align: justify;
    font-size: 14;
    white-space: normal!important
}

canvas {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none
}

.bn {
    color: white!important;
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 1px 3px;
    line-height: 1.4;
    border-radius: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none
}

.bn:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color
}

.bn:hover,
.bn:focus {
    color: #F7F7F7;
    text-decoration: none
}

.bd {
    color: #cb2027;
    background-color: #f2f2f2;
    margin: 3px
}

.lb {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 90%;
    font-weight: 700;
    line-height: 1;
    color: #f2f2f2;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em
}

.lb[href]:hover,
.lb[href]:focus {
    color: #f2f2f2;
    text-decoration: none;
    cursor: pointer
}

.lb:empty {
    display: none
}

.bn .lb {
    position: relative;
    top: -1px
}

.bd {
    display: inline-block;
    min-width: 10px;
    padding: 4px 8px;
    font-weight: 700;
    color: #f2f2f2;
    line-height: 1;
    vertical-align: baseline;
    white-space: nowrap;
    text-align: center;
    border-radius: 10px
}

.bd:empty {
    display: none
}

.bn .bd {
    position: relative;
    top: -1px
}

.bn-2 .bd {
    top: 0;
    padding: 1px 5px
}

a.bd:hover,
a.bd:focus {
    color: #f2f2f2;
    text-decoration: none;
    cursor: pointer
}

.po-0 {
    float: left!important
}

.po-1 {
    float: center!important
}

.po-2 {
    float: right!important
}

.tx-0 {
    text-align: left!important
}

.tx-1 {
    text-align: center!important
}

.tx-2 {
    text-align: right!important
}

.tx-3 {
    text-align: justify!important
}

.bx-0 {
    box-shadow: none
}

.bx-1 {
    padding: 2px 4px;
    background-color: #f2f2f2;
    box-shadow: 0 1px 2px #000000
}

.bx-2 {
    padding: 2px 4px;
    position: relative;
    box-shadow: 0 1px 4px #A8AFC5
}

.va-b {
    vertical-align: baseline!important
}

.di-0 {
    display: none!important
}

.di-1 {
    display: inline-block
}

.di-2 {
    display: block
}

.di-3 {
    display: grid
}

.t-11 {
    text-shadow: 0 0px 1px #000000
}

.t-12 {
    text-shadow: 1px 1px 0 #777777
}

.t-17 {
    text-shadow: 1px 1px 4px #000000
}

.t-19 {
    text-shadow: 0 2px 0 #000000
}

.t-20 {
    text-shadow: 1px 2px 0 #000000
}

.t-21 {
    text-shadow: 0 0 1px #999
}

.z0 {
    z-index: -1
}

.z1 {
    z-index: 11
}

.z2 {
    z-index: 12
}

.z3 {
    z-index: 13
}

.z4 {
    z-index: 14
}

.z5 {
    z-index: 15
}

.z6 {
    z-index: 16
}

.z7 {
    z-index: 17
}

.z8 {
    z-index: 18
}

.z9 {
    z-index: 19
}

.o0 {
    opacity: 0
}

.o1 {
    opacity: 1
}

.o2 {
    opacity: .12
}

.o3 {
    opacity: .3
}

.o4 {
    opacity: .4
}

.o5 {
    opacity: .5
}

.o6 {
    opacity: .6
}

.o7 {
    opacity: .7
}

.o8 {
    opacity: .8
}

.o9 {
    opacity: .9
}

.o0:hover,
.o1:hover,
.o2:hover,
.o3:hover,
.o4:hover,
.o5:hover,
.o6:hover,
.o7:hover,
.o8:hover,
.o9:hover {
    opacity: 1;
    cursor: pointer
}

.oc {
    opacity: 0
}

.rl:hover .oc {
    opacity: 1;
    border-bottom: 2px solid #eeeeee
}

.cu-no {
    cursor: none!important
}

.cu-po {
    cursor: pointer
}

.cu-cr {
    cursor: crosshair
}

.cu-ce {
    cursor: cell
}

.cu-he {
    cursor: help
}

.cu-mo {
    cursor: move
}

.cu-wr {
    cursor: w-resize
}

.cu-er {
    cursor: e-resize
}

.cu-cm {
    cursor: context-menu
}

.cu-zi {
    cursor: zoom-in;
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in
}

.cu-zo {
    cursor: zoom-out;
    cursor: -webkit-zoom-out;
    cursor: -moz-zoom-out
}

.cu-gg {
    cursor: grabbing
}

.cu-gr {
    cursor: grab
}

.rl {
    position: relative
}

.fx-tp-rt {
    position: fixed;
    right: 0;
    top: 0
}

.fx-tp-lt {
    position: fixed;
    left: 0;
    top: 0
}

.fx-tp-ct {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center
}

.fx-bt-ct {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center
}

.ab {
    position: absolute;
    z-index: 9
}

.ab-bt {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    overflow: scroll
}

.ab-tp {
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    overflow: scroll
}

.fw-1 {
    font-weight: 100
}

.fw-2 {
    font-weight: 200
}

.fw-3 {
    font-weight: 300
}

.fw-4 {
    font-weight: 400
}

.fw-5 {
    font-weight: 500
}

.fw-6 {
    font-weight: 600
}

.fw-7 {
    font-weight: 700
}

.fw-8 {
    font-weight: 800
}

.fw-9 {
    font-weight: 900
}

.sq-1 {
    display: inline-block;
    margin: 0;
    padding: 10px;
    box-shadow: 0 1px 4px #A8AFC5
}

.sq-2 {
    display: inline-block;
    margin: 0 -2px;
    padding: 4px 8px;
    box-shadow: 0 1px 2px #A8AFC5;
    color: #fff;
    text-shadow: 0 0px 1px #000000
}

.of-sc {
    overflow: scroll!important
}

.w-5x {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.mh-30 {
    min-height: 30px;
    max-height: 30px;
    overflow: auto
}

.mh-50 {
    min-height: 50px;
    max-height: 50px;
    overflow: auto
}

.tg-up {
    display: inline-block
}

.tg-up:after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0
}

.vs-hd {
    visibility: hidden
}

.g-3 {
    background: linear-gradient(to right, #CD0000, #EEEE00, #32CD32);
    background-repeat: no-repeat;
    transition: none
}

.g-3:hover {
    background: linear-gradient(to right, #CD0000, #ED9121, #EEEE00, #E0E0E0, #FFF, #F5F5F5, #63B8FF, #4169E1, #32CD32)
}

.img-1 {
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover
}

.img-2 {
    background-repeat: no-repeat;
    background-size: 100%
}

.vc {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden
}

.vc iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}


/*menu*/

.ln,
.ln .cl-bn {
    left: 0
}

.rn,
.rn .cl-bn {
    right: 0
}

.ln,
.rn {
    height: 100%;
    width: 0;
    position: fixed;
    top: 0;
    background-color: #333;
    overflow-x: hidden;
    transition: 0.3s
}

.ln a,
.rn a {
    text-decoration: none;
    color: #f2f2f2;
    display: block;
    transition: 0.2s
}

.ln a:hover,
.rn a:hover {
    color: #fff
}

.ln .cl-bn,
.rn .cl-bn {
    position: absolute;
    top: 0
}


/*google custom search*/

.cse .gsc-search-button input.gsc-search-button-v2,
input.gsc-search-button-v2 {
    height: 26px!important;
    margin-top: 0!important;
    min-width: 13px!important;
    padding: 5px 26px!important;
    width: 68px!important
}

.cse .gsc-search-button-v2,
.gsc-search-button-v2 {
    box-sizing: content-box;
    min-width: 13px!important;
    min-height: 16px!important;
    cursor: pointer;
    border-radius: 20px
}

.gsc-search-button-v2 svg {
    vertical-align: middle
}

.gs-title {
    line-height: normal!important
}

.gsc-search-box-tools .gsc-search-box .gsc-input {
    padding: 5px!important;
    color: #4169E1!important;
    border-radius: 20px
}

.gsc-input-box {
    background: none!important;
    border: none!important
}

@media print {
    @page {
        margin: 0.25in;
    }
    body {
        -webkit-print-color-adjust: exact;
        background-color: #fff
    }
    .pr-no {
        display: none
    }
}

Output

<style>
    .ro {
        margin: 0;
        padding: 0;
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: inline-block;
    }

    .a51,
    .a52,
    .a53,
    .a54,
    .a55,
    .a56,
    .a57,
    .a58,
    .a59,
    .a510,
    .a511,
    .a512,
    .a513,
    .a514,
    .a515,
    .a516,
    .a517,
    .a518,
    .a519,
    .a520 {
        float: left;
        position: relative;
        min-height: 1px
    }

    .a51 {
        width: 5%
    }

    .a52 {
        width: 5.2631578947368425%
    }

    .a53 {
        width: 5.555555555555555%
    }

    .a54 {
        width: 5.882352941176471%
    }

    .a55 {
        width: 6.25%
    }

    .a56 {
        width: 6.666666666666667%
    }

    .a57 {
        width: 7.142857142857143%
    }

    .a58 {
        width: 7.6923076923076925%
    }

    .a59 {
        width: 8.333333333333334%
    }

    .a510 {
        width: 9.090909090909092%
    }

    .a511 {
        width: 10%
    }

    .a512 {
        width: 11.11111111111111%
    }

    .a513 {
        width: 12.5%
    }

    .a514 {
        width: 14.285714285714286%
    }

    .a515 {
        width: 16.666666666666668%
    }

    .a516 {
        width: 20%
    }

    .a517 {
        width: 25%
    }

    .a518 {
        width: 33.333333333333336%
    }

    .a519 {
        width: 50%
    }

    .a520 {
        width: 100%
    }

    .s1 {
        font-size: 1.3px
    }

    .s2 {
        font-size: 2.6px
    }

    .s3 {
        font-size: 3.9000000000000004px
    }

    .s4 {
        font-size: 5.2px
    }

    .s5 {
        font-size: 6.5px
    }

    .s6 {
        font-size: 7.800000000000001px
    }

    .s7 {
        font-size: 9.1px
    }

    .s8 {
        font-size: 10.4px
    }

    .s9 {
        font-size: 11.700000000000001px
    }

    .s10 {
        font-size: 13px
    }

    .s11 {
        font-size: 14.3px
    }

    .s12 {
        font-size: 15.600000000000001px
    }

    .s13 {
        font-size: 16.900000000000002px
    }

    .s14 {
        font-size: 18.2px
    }

    .s15 {
        font-size: 19.5px
    }

    .s16 {
        font-size: 20.8px
    }

    .s17 {
        font-size: 22.1px
    }

    .s18 {
        font-size: 23.400000000000002px
    }

    .s19 {
        font-size: 24.7px
    }

    .s20 {
        font-size: 26px
    }

    .s21 {
        font-size: 27.3px
    }

    .s22 {
        font-size: 28.6px
    }

    .s23 {
        font-size: 29.900000000000002px
    }

    .s24 {
        font-size: 31.200000000000003px
    }

    .s25 {
        font-size: 32.5px
    }

    .s26 {
        font-size: 33.800000000000004px
    }

    .s27 {
        font-size: 35.1px
    }

    .s28 {
        font-size: 36.4px
    }

    .s29 {
        font-size: 37.7px
    }

    .s30 {
        font-size: 39px
    }

    .s31 {
        font-size: 40.300000000000004px
    }

    .s32 {
        font-size: 41.6px
    }

    .s33 {
        font-size: 42.9px
    }

    .s34 {
        font-size: 44.2px
    }

    .s35 {
        font-size: 45.5px
    }

    .s36 {
        font-size: 46.800000000000004px
    }

    .s37 {
        font-size: 48.1px
    }

    .s38 {
        font-size: 49.4px
    }

    .s39 {
        font-size: 50.7px
    }

    .s40 {
        font-size: 52px
    }

    .s41 {
        font-size: 53.300000000000004px
    }

    .s42 {
        font-size: 54.6px
    }

    .s43 {
        font-size: 55.9px
    }

    .s44 {
        font-size: 57.2px
    }

    .s45 {
        font-size: 58.5px
    }

    .s46 {
        font-size: 59.800000000000004px
    }

    .s47 {
        font-size: 61.1px
    }

    .s48 {
        font-size: 62.400000000000006px
    }

    .s49 {
        font-size: 63.7px
    }

    .s50 {
        font-size: 65px
    }

    * {
        margin: 0;
        padding: 0
    }

    body,
    html {
        height: 100%
    }

    body {
        font-weight: 400;
        overflow-x: hidden;
        height: 100%;
        min-height: 100%;
        margin: 0;
        padding: 0;
        background: #fff;
        font-family: "TradeGothic", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
        font-size: 14px;
        line-height: 150%
    }

    body * {
        transition: all 0.4s ease
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: 'Raleway', sans-serif;
        margin-top: 0;
        text-transform: none;
        margin: 0;
        padding: 0;
        font-weight: 600;
        line-height: 200%
    }

    ul,
    li {
        list-style: none;
        padding: 0px;
        margin: 0px
    }

    a,
    a:hover,
    a:active,
    a:focus {
        color: #DA70D6;
        outline: none;
        border: none;
        text-decoration: none
    }

    a {
        color: #014B96;
        transition: all 0.4s ease 0s
    }

    a:focus,
    a:hover {
        color: #4c7ff0;
        -webkit-transition: all .3s ease 0s;
        -moz-transition: all 0.4s ease 0s;
        -o-transition: all 0.4s ease 0s;
        transition: all 0.4s ease 0s
    }

    pre {
        background: #eee;
        color: #333;
        padding: 10px;
        border-radius: 5px;
        overflow: scroll
    }

    article {
        margin: 0;
        display: inline-block;
        min-height: 100%;
        min-width: 100%
    }

    img {
        vertical-align: middle
    }

    a,
    a:hover,
    a:active,
    a:focus {
        color: #DA70D6;
        outline: none;
        border: none;
        text-decoration: none
    }

    a {
        color: #014B96;
        transition: all 0.4s ease 0s
    }

    a:focus,
    a:hover {
        color: #4c7ff0;
        -webkit-transition: all .3s ease 0s;
        -moz-transition: all 0.4s ease 0s;
        -o-transition: all 0.4s ease 0s;
        transition: all 0.4s ease 0s
    }

    ul,
    ol {
        padding: 0
    }

    li {
        list-style: none
    }

    input,
    textarea {
        border: none;
        box-shadow: 0px 1px 2px #999;
        padding: 5px 0
    }

    u {
        text-decoration: none
    }

    svg {
        font-size: 250%
    }

    text {
        text-rendering: optimizeSpeed;
        text-align: justify;
        font-size: 14;
        white-space: normal!important
    }

    canvas {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none
    }

    .bn {
        color: white!important;
        display: inline-block;
        margin-bottom: 0;
        font-weight: 400;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        background-image: none;
        border: 1px solid transparent;
        white-space: nowrap;
        padding: 1px 3px;
        line-height: 1.4;
        border-radius: 3px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none
    }

    .bn:focus {
        outline: thin dotted;
        outline: 5px auto -webkit-focus-ring-color
    }

    .bn:hover,
    .bn:focus {
        color: #F7F7F7;
        text-decoration: none
    }

    .bd {
        color: #cb2027;
        background-color: #f2f2f2;
        margin: 3px
    }

    .lb {
        display: inline;
        padding: .2em .6em .3em;
        font-size: 90%;
        font-weight: 700;
        line-height: 1;
        color: #f2f2f2;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: .25em
    }

    .lb[href]:hover,
    .lb[href]:focus {
        color: #f2f2f2;
        text-decoration: none;
        cursor: pointer
    }

    .lb:empty {
        display: none
    }

    .bn .lb {
        position: relative;
        top: -1px
    }

    .bd {
        display: inline-block;
        min-width: 10px;
        padding: 4px 8px;
        font-weight: 700;
        color: #f2f2f2;
        line-height: 1;
        vertical-align: baseline;
        white-space: nowrap;
        text-align: center;
        border-radius: 10px
    }

    .bd:empty {
        display: none
    }

    .bn .bd {
        position: relative;
        top: -1px
    }

    .bn-2 .bd {
        top: 0;
        padding: 1px 5px
    }

    a.bd:hover,
    a.bd:focus {
        color: #f2f2f2;
        text-decoration: none;
        cursor: pointer
    }

    .po-0 {
        float: left!important
    }

    .po-1 {
        float: center!important
    }

    .po-2 {
        float: right!important
    }

    .tx-0 {
        text-align: left!important
    }

    .tx-1 {
        text-align: center!important
    }

    .tx-2 {
        text-align: right!important
    }

    .tx-3 {
        text-align: justify!important
    }

    .bx-0 {
        box-shadow: none
    }

    .bx-1 {
        padding: 2px 4px;
        background-color: #f2f2f2;
        box-shadow: 0 1px 2px #000000
    }

    .bx-2 {
        padding: 2px 4px;
        position: relative;
        box-shadow: 0 1px 4px #A8AFC5
    }

    .va-b {
        vertical-align: baseline!important
    }

    .di-0 {
        display: none!important
    }

    .di-1 {
        display: inline-block
    }

    .di-2 {
        display: block
    }

    .di-3 {
        display: grid
    }

    .t-11 {
        text-shadow: 0 0px 1px #000000
    }

    .t-12 {
        text-shadow: 1px 1px 0 #777777
    }

    .t-17 {
        text-shadow: 1px 1px 4px #000000
    }

    .t-19 {
        text-shadow: 0 2px 0 #000000
    }

    .t-20 {
        text-shadow: 1px 2px 0 #000000
    }

    .t-21 {
        text-shadow: 0 0 1px #999
    }

    .z0 {
        z-index: -1
    }

    .z1 {
        z-index: 11
    }

    .z2 {
        z-index: 12
    }

    .z3 {
        z-index: 13
    }

    .z4 {
        z-index: 14
    }

    .z5 {
        z-index: 15
    }

    .z6 {
        z-index: 16
    }

    .z7 {
        z-index: 17
    }

    .z8 {
        z-index: 18
    }

    .z9 {
        z-index: 19
    }

    .o0 {
        opacity: 0
    }

    .o1 {
        opacity: 1
    }

    .o2 {
        opacity: .12
    }

    .o3 {
        opacity: .3
    }

    .o4 {
        opacity: .4
    }

    .o5 {
        opacity: .5
    }

    .o6 {
        opacity: .6
    }

    .o7 {
        opacity: .7
    }

    .o8 {
        opacity: .8
    }

    .o9 {
        opacity: .9
    }

    .o0:hover,
    .o1:hover,
    .o2:hover,
    .o3:hover,
    .o4:hover,
    .o5:hover,
    .o6:hover,
    .o7:hover,
    .o8:hover,
    .o9:hover {
        opacity: 1;
        cursor: pointer
    }

    .oc {
        opacity: 0
    }

    .rl:hover .oc {
        opacity: 1;
        border-bottom: 2px solid #eeeeee
    }

    .cu-no {
        cursor: none!important
    }

    .cu-po {
        cursor: pointer
    }

    .cu-cr {
        cursor: crosshair
    }

    .cu-ce {
        cursor: cell
    }

    .cu-he {
        cursor: help
    }

    .cu-mo {
        cursor: move
    }

    .cu-wr {
        cursor: w-resize
    }

    .cu-er {
        cursor: e-resize
    }

    .cu-cm {
        cursor: context-menu
    }

    .cu-zi {
        cursor: zoom-in;
        cursor: -webkit-zoom-in;
        cursor: -moz-zoom-in
    }

    .cu-zo {
        cursor: zoom-out;
        cursor: -webkit-zoom-out;
        cursor: -moz-zoom-out
    }

    .cu-gg {
        cursor: grabbing
    }

    .cu-gr {
        cursor: grab
    }

    .rl {
        position: relative
    }

    .fx-tp-rt {
        position: fixed;
        right: 0;
        top: 0
    }

    .fx-tp-lt {
        position: fixed;
        left: 0;
        top: 0
    }

    .fx-tp-ct {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        text-align: center
    }

    .fx-bt-ct {
        position: fixed;
        left: 0;
        bottom: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        text-align: center
    }

    .ab {
        position: absolute;
        z-index: 9
    }

    .ab-bt {
        position: absolute;
        right: 0;
        left: 0;
        bottom: 0;
        overflow: scroll
    }

    .ab-tp {
        position: absolute;
        right: 0;
        left: 0;
        top: 0;
        overflow: scroll
    }

    .fw-1 {
        font-weight: 100
    }

    .fw-2 {
        font-weight: 200
    }

    .fw-3 {
        font-weight: 300
    }

    .fw-4 {
        font-weight: 400
    }

    .fw-5 {
        font-weight: 500
    }

    .fw-6 {
        font-weight: 600
    }

    .fw-7 {
        font-weight: 700
    }

    .fw-8 {
        font-weight: 800
    }

    .fw-9 {
        font-weight: 900
    }

    .sq-1 {
        display: inline-block;
        margin: 0;
        padding: 10px;
        box-shadow: 0 1px 4px #A8AFC5
    }

    .sq-2 {
        display: inline-block;
        margin: 0 -2px;
        padding: 4px 8px;
        box-shadow: 0 1px 2px #A8AFC5;
        color: #fff;
        text-shadow: 0 0px 1px #000000
    }

    .of-sc {
        overflow: scroll!important
    }

    .w-5x {
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
    }

    .mh-30 {
        min-height: 30px;
        max-height: 30px;
        overflow: auto
    }

    .mh-50 {
        min-height: 50px;
        max-height: 50px;
        overflow: auto
    }

    .tg-up {
        display: inline-block
    }

    .tg-up:after {
        content: "";
        display: inline-block;
        width: 0;
        height: 0
    }

    .vs-hd {
        visibility: hidden
    }

    .g-3 {
        background: linear-gradient(to right, #CD0000, #EEEE00, #32CD32);
        background-repeat: no-repeat;
        transition: none
    }

    .g-3:hover {
        background: linear-gradient(to right, #CD0000, #ED9121, #EEEE00, #E0E0E0, #FFF, #F5F5F5, #63B8FF, #4169E1, #32CD32)
    }

    .img-1 {
        background-position: center center;
        background-repeat: no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover
    }

    .img-2 {
        background-repeat: no-repeat;
        background-size: 100%
    }

    .vc {
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 30px;
        height: 0;
        overflow: hidden
    }

    .vc iframe,
    .video-container object,
    .video-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }


    /*menu*/

    .ln,
    .ln .cl-bn {
        left: 0
    }

    .rn,
    .rn .cl-bn {
        right: 0
    }

    .ln,
    .rn {
        height: 100%;
        width: 0;
        position: fixed;
        top: 0;
        background-color: #333;
        overflow-x: hidden;
        transition: 0.3s
    }

    .ln a,
    .rn a {
        text-decoration: none;
        color: #f2f2f2;
        display: block;
        transition: 0.2s
    }

    .ln a:hover,
    .rn a:hover {
        color: #fff
    }

    .ln .cl-bn,
    .rn .cl-bn {
        position: absolute;
        top: 0
    }


    /*google custom search*/

    .cse .gsc-search-button input.gsc-search-button-v2,
    input.gsc-search-button-v2 {
        height: 26px!important;
        margin-top: 0!important;
        min-width: 13px!important;
        padding: 5px 26px!important;
        width: 68px!important
    }

    .cse .gsc-search-button-v2,
    .gsc-search-button-v2 {
        box-sizing: content-box;
        min-width: 13px!important;
        min-height: 16px!important;
        cursor: pointer;
        border-radius: 20px
    }

    .gsc-search-button-v2 svg {
        vertical-align: middle
    }

    .gs-title {
        line-height: normal!important
    }

    .gsc-search-box-tools .gsc-search-box .gsc-input {
        padding: 5px!important;
        color: #4169E1!important;
        border-radius: 20px
    }

    .gsc-input-box {
        background: none!important;
        border: none!important
    }

    @media print {
        @page {
            margin: 0.25in;
        }
        body {
            -webkit-print-color-adjust: exact;
            background-color: #fff
        }
        .pr-no {
            display: none
        }
    }

    body {
        font-size: 14px!important;
        line-height: 220%!important
    }

    h1 {
        font-size: 180%!important
    }

    h2 {
        font-size: 160%!important
    }

    h3 {
        font-size: 140%!important
    }

    h4 {
        font-size: 120%!important
    }

    h5 {
        font-size: 100%!important
    }

    h6 {
        font-size: 75%!important
    }

    .w-0 {
        width: 200px
    }

    .w-1 {
        width: 250px
    }

    .w-2 {
        width: 300px
    }

    .w-3 {
        width: 375px
    }

    .w-4 {
        width: 410px
    }

    .w-5 {
        width: 420px
    }

    .p-1 {
        padding: 3px
    }

    .p-2 {
        padding: 5px
    }

    .p-3 {
        padding: 8px
    }

    .p-4 {
        padding: 12px
    }

    .p-5 {
        padding: 20px
    }

    .m-1 {
        margin: 3px
    }

    .m-2 {
        margin: 5px
    }

    .m-3 {
        margin: 8px
    }

    .m-4 {
        margin: 12px
    }

    .m-5 {
        margin: 20px
    }

    .ml-1 {
        margin-left: -6px!important
    }

    .ml-2 {
        margin-left: -10px!important
    }

    .ml-3 {
        margin-left: -16px!important
    }

    .ml-4 {
        margin-left: -24px!important
    }

    .ml-5 {
        margin-left: -36px!important
    }

    .fh-1 {
        min-height: 20px;
        max-height: 20px
    }

    .fh-2 {
        min-height: 25px;
        max-height: 25px
    }

    .fh-3 {
        min-height: 30px;
        max-height: 30px
    }

    .fh-4 {
        min-height: 35px;
        max-height: 35px
    }

    .fh-5 {
        min-height: 40px;
        max-height: 40px
    }

    .mv-1 {
        margin: 3px 0
    }

    .mv-2 {
        margin: 5px 0
    }

    .mv-3 {
        margin: 8px 0
    }

    .mv-4 {
        margin: 12px 0
    }

    .mv-5 {
        margin: 25px 0
    }

    .br-1 {
        border-radius: 3px
    }

    .br-2 {
        border-radius: 5px
    }

    .br-3 {
        border-radius: 8px
    }

    .br-4 {
        border-radius: 12px
    }

    .br-5 {
        border-radius: 20px
    }

    .tg-up:after {
        margin-left: -15px 0 0 -50px;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 45px solid #999
    }

    .r100,
    r100 a {
        color: #FFFFFF
    }

    .b100,
    .b100 a {
        background-color: #FFFFFF
    }

    .r101,
    r101 a {
        color: #F8F8FF
    }

    .b101,
    .b101 a {
        background-color: #F8F8FF
    }

    .r102,
    r102 a {
        color: #F7F7F7
    }

    .b102,
    .b102 a {
        background-color: #F7F7F7
    }

    .r103,
    r103 a {
        color: #F0F0F0
    }

    .b103,
    .b103 a {
        background-color: #F0F0F0
    }

    .r104,
    r104 a {
        color: #F2F2F2
    }

    .b104,
    .b104 a {
        background-color: #F2F2F2
    }

    .r105,
    r105 a {
        color: #EDEDED
    }

    .b105,
    .b105 a {
        background-color: #EDEDED
    }

    .r106,
    r106 a {
        color: #EBEBEB
    }

    .b106,
    .b106 a {
        background-color: #EBEBEB
    }

    .r107,
    r107 a {
        color: #E5E5E5
    }

    .b107,
    .b107 a {
        background-color: #E5E5E5
    }

    .r108,
    r108 a {
        color: #E3E3E3
    }

    .b108,
    .b108 a {
        background-color: #E3E3E3
    }

    .r109,
    r109 a {
        color: #E0E0E0
    }

    .b109,
    .b109 a {
        background-color: #E0E0E0
    }

    .r110,
    r110 a {
        color: #858585
    }

    .b110,
    .b110 a {
        background-color: #858585
    }

    .r111,
    r111 a {
        color: #666666
    }

    .b111,
    .b111 a {
        background-color: #666666
    }

    .r112,
    r112 a {
        color: #545454
    }

    .b112,
    .b112 a {
        background-color: #545454
    }

    .r113,
    r113 a {
        color: #4D4D4D
    }

    .b113,
    .b113 a {
        background-color: #4D4D4D
    }

    .r114,
    r114 a {
        color: #474747
    }

    .b114,
    .b114 a {
        background-color: #474747
    }

    .r115,
    r115 a {
        color: #363636
    }

    .b115,
    .b115 a {
        background-color: #363636
    }

    .r116,
    r116 a {
        color: #333333
    }

    .b116,
    .b116 a {
        background-color: #333333
    }

    .r117,
    r117 a {
        color: #222222
    }

    .b117,
    .b117 a {
        background-color: #222222
    }

    .r118,
    r118 a {
        color: #1C1C1C
    }

    .b118,
    .b118 a {
        background-color: #1C1C1C
    }

    .r119,
    r119 a {
        color: #050505
    }

    .b119,
    .b119 a {
        background-color: #050505
    }

    .r120,
    r120 a {
        color: #EEEE00
    }

    .b120,
    .b120 a {
        background-color: #EEEE00
    }

    .r121,
    r121 a {
        color: #FFD700
    }

    .b121,
    .b121 a {
        background-color: #FFD700
    }

    .r122,
    r122 a {
        color: #EEC900
    }

    .b122,
    .b122 a {
        background-color: #EEC900
    }

    .r123,
    r123 a {
        color: #EAC80D
    }

    .b123,
    .b123 a {
        background-color: #EAC80D
    }

    .r124,
    r124 a {
        color: #FFC125
    }

    .b124,
    .b124 a {
        background-color: #FFC125
    }

    .r125,
    r125 a {
        color: #FFB90F
    }

    .b125,
    .b125 a {
        background-color: #FFB90F
    }

    .r126,
    r126 a {
        color: #EEAD0E
    }

    .b126,
    .b126 a {
        background-color: #EEAD0E
    }

    .r127,
    r127 a {
        color: #DAA520
    }

    .b127,
    .b127 a {
        background-color: #DAA520
    }

    .r128,
    r128 a {
        color: #BFA30C
    }

    .b128,
    .b128 a {
        background-color: #BFA30C
    }

    .r129,
    r129 a {
        color: #B78A00
    }

    .b129,
    .b129 a {
        background-color: #B78A00
    }

    .r130,
    r130 a {
        color: #FFA500
    }

    .b130,
    .b130 a {
        background-color: #FFA500
    }

    .r131,
    r131 a {
        color: #FF9912
    }

    .b131,
    .b131 a {
        background-color: #FF9912
    }

    .r132,
    r132 a {
        color: #ED9121
    }

    .b132,
    .b132 a {
        background-color: #ED9121
    }

    .r133,
    r133 a {
        color: #FF7F00
    }

    .b133,
    .b133 a {
        background-color: #FF7F00
    }

    .r134,
    r134 a {
        color: #FF8000
    }

    .b134,
    .b134 a {
        background-color: #FF8000
    }

    .r135,
    r135 a {
        color: #EE7600
    }

    .b135,
    .b135 a {
        background-color: #EE7600
    }

    .r136,
    r136 a {
        color: #EE6A50
    }

    .b136,
    .b136 a {
        background-color: #EE6A50
    }

    .r137,
    r137 a {
        color: #EE5C42
    }

    .b137,
    .b137 a {
        background-color: #EE5C42
    }

    .r138,
    r138 a {
        color: #FF6347
    }

    .b138,
    .b138 a {
        background-color: #FF6347
    }

    .r139,
    r139 a {
        color: #FF6103
    }

    .b139,
    .b139 a {
        background-color: #FF6103
    }

    .r140,
    r140 a {
        color: #32CD32
    }

    .b140,
    .b140 a {
        background-color: #32CD32
    }

    .r141,
    r141 a {
        color: #00C957
    }

    .b141,
    .b141 a {
        background-color: #00C957
    }

    .r142,
    r142 a {
        color: #43CD80
    }

    .b142,
    .b142 a {
        background-color: #43CD80
    }

    .r143,
    r143 a {
        color: #00C78C
    }

    .b143,
    .b143 a {
        background-color: #00C78C
    }

    .r144,
    r144 a {
        color: #1ABC9C
    }

    .b144,
    .b144 a {
        background-color: #1ABC9C
    }

    .r145,
    r145 a {
        color: #20B2AA
    }

    .b145,
    .b145 a {
        background-color: #20B2AA
    }

    .r146,
    r146 a {
        color: #03A89E
    }

    .b146,
    .b146 a {
        background-color: #03A89E
    }

    .r147,
    r147 a {
        color: #00C5CD
    }

    .b147,
    .b147 a {
        background-color: #00C5CD
    }

    .r148,
    r148 a {
        color: #00CED1
    }

    .b148,
    .b148 a {
        background-color: #00CED1
    }

    .r149,
    r149 a {
        color: #48D1CC
    }

    .b149,
    .b149 a {
        background-color: #48D1CC
    }

    .r150,
    r150 a {
        color: #63B8FF
    }

    .b150,
    .b150 a {
        background-color: #63B8FF
    }

    .r151,
    r151 a {
        color: #00B2EE
    }

    .b151,
    .b151 a {
        background-color: #00B2EE
    }

    .r152,
    r152 a {
        color: #1E90FF
    }

    .b152,
    .b152 a {
        background-color: #1E90FF
    }

    .r153,
    r153 a {
        color: #1C86EE
    }

    .b153,
    .b153 a {
        background-color: #1C86EE
    }

    .r154,
    r154 a {
        color: #1C86EE
    }

    .b154,
    .b154 a {
        background-color: #1C86EE
    }

    .r155,
    r155 a {
        color: #1874CD
    }

    .b155,
    .b155 a {
        background-color: #1874CD
    }

    .r156,
    r156 a {
        color: #436EEE
    }

    .b156,
    .b156 a {
        background-color: #436EEE
    }

    .r157,
    r157 a {
        color: #4169E1
    }

    .b157,
    .b157 a {
        background-color: #4169E1
    }

    .r158,
    r158 a {
        color: #3A5FCD
    }

    .b158,
    .b158 a {
        background-color: #3A5FCD
    }

    .r159,
    r159 a {
        color: #014B96
    }

    .b159,
    .b159 a {
        background-color: #014B96
    }

    .r160,
    r160 a {
        color: #EE7AE9
    }

    .b160,
    .b160 a {
        background-color: #EE7AE9
    }

    .r161,
    r161 a {
        color: #DA70D6
    }

    .b161,
    .b161 a {
        background-color: #DA70D6
    }

    .r162,
    r162 a {
        color: #BA55D3
    }

    .b162,
    .b162 a {
        background-color: #BA55D3
    }

    .r163,
    r163 a {
        color: #BF3EFF
    }

    .b163,
    .b163 a {
        background-color: #BF3EFF
    }

    .r164,
    r164 a {
        color: #B23AEE
    }

    .b164,
    .b164 a {
        background-color: #B23AEE
    }

    .r165,
    r165 a {
        color: #9B30FF
    }

    .b165,
    .b165 a {
        background-color: #9B30FF
    }

    .r166,
    r166 a {
        color: #836FFF
    }

    .b166,
    .b166 a {
        background-color: #836FFF
    }

    .r167,
    r167 a {
        color: #7A67EE
    }

    .b167,
    .b167 a {
        background-color: #7A67EE
    }

    .r168,
    r168 a {
        color: #9F79EE
    }

    .b168,
    .b168 a {
        background-color: #9F79EE
    }

    .r169,
    r169 a {
        color: #8968CD
    }

    .b169,
    .b169 a {
        background-color: #8968CD
    }

    .r170,
    r170 a {
        color: #FF6EB4
    }

    .b170,
    .b170 a {
        background-color: #FF6EB4
    }

    .r171,
    r171 a {
        color: #FF69B4
    }

    .b171,
    .b171 a {
        background-color: #FF69B4
    }

    .r172,
    r172 a {
        color: #EE3A8C
    }

    .b172,
    .b172 a {
        background-color: #EE3A8C
    }

    .r173,
    r173 a {
        color: #FF34B3
    }

    .b173,
    .b173 a {
        background-color: #FF34B3
    }

    .r174,
    r174 a {
        color: #FF1493
    }

    .b174,
    .b174 a {
        background-color: #FF1493
    }

    .r175,
    r175 a {
        color: #EE1289
    }

    .b175,
    .b175 a {
        background-color: #EE1289
    }

    .r176,
    r176 a {
        color: #CD2990
    }

    .b176,
    .b176 a {
        background-color: #CD2990
    }

    .r177,
    r177 a {
        color: #D02090
    }

    .b177,
    .b177 a {
        background-color: #D02090
    }

    .r178,
    r178 a {
        color: #C71585
    }

    .b178,
    .b178 a {
        background-color: #C71585
    }

    .r179,
    r179 a {
        color: #CD1076
    }

    .b179,
    .b179 a {
        background-color: #CD1076
    }

    .r180,
    r180 a {
        color: #FF4500
    }

    .b180,
    .b180 a {
        background-color: #FF4500
    }

    .r181,
    r181 a {
        color: #EE4000
    }

    .b181,
    .b181 a {
        background-color: #EE4000
    }

    .r182,
    r182 a {
        color: #FF4040
    }

    .b182,
    .b182 a {
        background-color: #FF4040
    }

    .r183,
    r183 a {
        color: #EE3B3B
    }

    .b183,
    .b183 a {
        background-color: #EE3B3B
    }

    .r184,
    r184 a {
        color: #EE2C2C
    }

    .b184,
    .b184 a {
        background-color: #EE2C2C
    }

    .r185,
    r185 a {
        color: #FF0000
    }

    .b185,
    .b185 a {
        background-color: #FF0000
    }

    .r186,
    r186 a {
        color: #DC143C
    }

    .b186,
    .b186 a {
        background-color: #DC143C
    }

    .r187,
    r187 a {
        color: #CD0000
    }

    .b187,
    .b187 a {
        background-color: #CD0000
    }

    .r188,
    r188 a {
        color: #B0171F
    }

    .b188,
    .b188 a {
        background-color: #B0171F
    }

    .r189,
    r189 a {
        color: #8B2323
    }

    .b189,
    .b189 a {
        background-color: #8B2323
    }

    .r190,
    r190 a {
        color: #FF6A6A
    }

    .b190,
    .b190 a {
        background-color: #FF6A6A
    }

    .r191,
    r191 a {
        color: #CD7054
    }

    .b191,
    .b191 a {
        background-color: #CD7054
    }

    .r192,
    r192 a {
        color: #CD6839
    }

    .b192,
    .b192 a {
        background-color: #CD6839
    }

    .r193,
    r193 a {
        color: #CD661D
    }

    .b193,
    .b193 a {
        background-color: #CD661D
    }

    .r194,
    r194 a {
        color: #C76114
    }

    .b194,
    .b194 a {
        background-color: #C76114
    }

    .r195,
    r195 a {
        color: #CD5B45
    }

    .b195,
    .b195 a {
        background-color: #CD5B45
    }

    .r196,
    r196 a {
        color: #CD4F39
    }

    .b196,
    .b196 a {
        background-color: #CD4F39
    }

    .r197,
    r197 a {
        color: #CD3333
    }

    .b197,
    .b197 a {
        background-color: #CD3333
    }

    .r198,
    r198 a {
        color: #CD2626
    }

    .b198,
    .b198 a {
        background-color: #CD2626
    }

    .r199,
    r199 a {
        color: #CD3700
    }

    .b199,
    .b199 a {
        background-color: #CD3700
    }

</style>
\$\endgroup\$
3
\$\begingroup\$
var d, e, t, w, f, s, i, q, n, k, j, h, x, y;

It's impossible to write fast code if you can't understand it.

My advice would be to focus on understandable code, then optimize the bottlenecks as needed. If you need to reduce the size of the script, you can use a minifier/uglifier for that.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.