.u-border-bottom {
    border-bottom: 1px solid #bbb;
}

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

.u-center {
    margin: 0 auto !important;
}

.u-space-around {
    justify-content: space-around;
}

.u-space-between {
    justify-content: space-between;
}
.u-relative {
    position: relative;
}

.u-flex {
    display: flex;
}

.u-flex-grow {
    flex-grow: 1.0;
    flex-basis: 0;
}

.u-hbox {
    display: flex;
    flex-direction: row;
    flex-flow: row wrap;
}

.u-vbox {
    display: flex;
    flex-direction: column;
}

.u-half-width {
    width: 45%;
    margin-right: 2em;
}
.u-items-end {
    align-items: flex-end;
}

.u-justify-end {
    justify-content: flex-end;
}
.u-items-center {
    align-items: center;
}
.u-items-stretch {
    align-items: stretch;
}

.u-items-start {
    align-items: flex-start;
}
.u-justify-center {
    justify-content: center;
}
.u-justify-space-between {
    justify-content: space-between;
}

.u-hskip-half { width: 0.5rem; height:0; }
.u-hskip   { width: 1rem; height:0; }
.u-hskip-2 { width: 2rem; height:0; }
.u-hskip-3 { width: 3rem; height:0; }
.u-vskip-half { height: 0.5rem; width:0; }
.u-vskip   { height: 1rem; width:0; }
.u-vskip-2 { height: 2rem; width:0; }
.u-vskip-3 { height: 3rem; width:0; }

.u-button {
    color: #fff;
    padding: 0.333em 1em;
    outline: none;
    border-radius: 4px;
    min-width: 128px;
    text-align: center;
    background: #272822;
}
.u-button:hover {
    background: #555;
    color: #fff;
}

.u-input {
    border: none;
    color: #444;
    padding: 0.333em 1em;
    border-radius: 4px;
    min-width: 128px;
    outline:none;
}

.u-gray-3 {
    color: #333;
}

.u-bordered {
    border: 1px solid #888;
}

.u-flip {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

.u-hline {
    height:0;
    border-bottom: 1px solid #fff;
    width: 100%;
}

.u-vline {
    width:0;
    border-right: 1px solid #fff;
    align-self: stretch;
}
.u-self-stretch {
    align-self: stretch;
}

.u-self-end {
    align-self: flex-end;
}

.u-slab {
    font-family: "Roboto Slab";
}

.u-fit-background {
    background-size: cover;
    -moz-background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.u-relative {
    position: relative;
}

.u-kern-2 {
  letter-spacing: 2px;
}

.u-bottom {
    position: absolute;
    bottom: 0;
}
.u-zero-margins {
    margin: 0 !important;
}

/*New Utils. Begins*/

/*Typo sizes, spacing, kerning, colors. Begins*/
/*l-h stands for line height. Begins*/
.l-h-20 { line-height: 20px; }
.l-h-22 { line-height: 22px; }
.l-h-24 { line-height: 24px; }
.l-h-26 { line-height: 26px; }
.l-h-28 { line-height: 28px; }
.l-h-30 { line-height: 30px; }
.l-h-32 { line-height: 32px; }
.l-h-36 { line-height: 36px; }
.l-h-40 { line-height: 40px; }
.l-h-42 { line-height: 42px; }
.l-h-50 { line-height: 50px; }
.l-h-55 { line-height: 55px; }
.l-h-56 { line-height: 56px; }
.l-h-58 { line-height: 58px; }
.l-h-86 { line-height: 86px; }
/*l-h stands for line height. Ends*/
/*ft stands for font. Begins*/
.ft-9 { font-size: 9pt; }
.ft-10 { font-size: 10px; }
.ft-12 { font-size: 12px; }
.ft-16 { font-size: 16px; }
.ft-18 { font-size: 18px; }
.ft-20 { font-size: 20px; }
.ft-21 { font-size: 21px; }
.ft-22 { font-size: 22px; }
.ft-23 { font-size: 23px; }
.ft-24 { font-size: 24px; }
.ft-26 { font-size: 26px; }
.ft-28 { font-size: 28px; }
.ft-30 { font-size: 30px; }
.ft-32 { font-size: 32px; }
.ft-33 { font-size: 33px; }
.ft-37 { font-size: 37px; }
.ft-40 { font-size: 40px; }
.ft-42 { font-size: 42px; }
.ft-46 { font-size: 46px; }
.ft-48 { font-size: 48px; }
.ft-49 { font-size: 49px; }
.ft-50 { font-size: 50px; }
.ft-52 { font-size: 52px; }
.ft-54 { 
    font-size: 54px; 
    line-height: normal
}
.ft-76 { font-size: 76px; }
.ft-80 { font-size: 80px; }
.ft-99 { font-size: 99px; }
/*ft stands for font. Ends*/
/*p - padding, t - top, b - bottom so on. Begins*/
.pt-6 { padding-top: 6rem; }
.pb-6 { padding-bottom: 6rem; }
.pt-01 { padding-top: 1px; }
.pt-04 { padding-top: 4px; }
.pt-10 { padding-top: 10px; }
.pt-15 { padding-top: 15px; }
.pt-16 { padding-top: 16px; }
.pt-18 { padding-top: 18px; }
.pt-20 { padding-top: 20px; }
.pt-21 { padding-top: 21px; }
.pt-23 { padding-top: 23px; }
.pt-24 { padding-top: 24px; }
.pt-25 { padding-top: 25px; }
.pt-26 { padding-top: 26px; }
.pt-27 { padding-top: 27px; }
.pt-28 { padding-top: 28px; }
.pt-30 { padding-top: 30px; }
.pt-32 { padding-top: 32px; }
.pt-33 { padding-top: 33px; }
.pt-39 { padding-top: 39px; }
.pt-40 { padding-top: 40px; }
.pt-45 { padding-top: 45px; }
.pt-46 { padding-top: 46px; }
.pt-50 { padding-top: 50px; }
.pt-52 { padding-top: 52px; }
.pt-60 { padding-top: 60px; }
.pt-65 { padding-top: 65px; }
.pt-66 { padding-top: 66px; }
.pt-75 { padding-top: 75px; }
.pt-80 { padding-top: 80px; }
.pt-85 { padding-top: 85px; }
.pt-86 { padding-top: 86px; }
.pt-87 { padding-top: 87px; }
.pt-88 { padding-top: 88px; }
.pt-100 { padding-top: 100px; }
.pt-120 { padding-top: 120px; }
.pb-1-7r { padding-bottom: 1.7rem; }
.pb-2r { padding-bottom: 2rem; }
.pt-4-8r { padding-top: 4.82rem; }
.p-3r { padding: 3.5rem; }
.pt-2r { padding-top: 2rem; }
.p-4r { padding: 4rem; }
.ptb-4-rl-3 { padding: 4rem 3rem; }
.ptb-rltb-4-1-4-3 { padding: 4rem 1rem 4rem 3rem; }
.pt-2-3r { padding-top: 2.32rem; }
.pb-2-3r { padding-bottom: 2.32rem; }
.p-5r { padding: 5rem; }
.ptrl-5r { padding: 5rem 5rem 0 5rem; }
/*p - padding, t - top, b - bottom so on. Ends*/
/*m - margin, t - top, l - left so on. Begins*/
.mt-10 { margin-top: 10px; }
.ml-13 { margin-left: 13px; }
.ml-33 { margin-left: 33px; }
.mt-1r { margin-top: 1rem; }
.mt-2r { margin-top: 2rem; }
.mt-3r { margin-top: 3rem; }
.mt-4r { margin-top: 4rem; }
.mt-5r { margin-top: 5rem; }
.mt-5-4r { margin-top: 5.4rem; }
.mt-6r { margin-top: 6rem; }
.mt-8r { margin-top: 8rem; }
.mt-9r { margin-top: 9rem; }
.mt-9-5r { margin-top: 9.5rem; }
.mt-5-17r { margin-top: 5.17rem; }
.mb-4r { margin-bottom: 4rem; }
.mb-5r { margin-bottom: 5rem; }
.mt-2r { margin-top: 2rem; }
.mb-2-5r { margin-bottom: 2.5rem; }
.ml-12r { margin-left: 12rem; }
.-mt-25 { margin-top: -25px; }
.mr-3-6r { margin-right: 3.6rem; }
.mr-4r { margin-right: 4rem; }
.-ml-50 { margin-left: -50px; }
.-ml-4r { margin-left: -4rem; }
/*m - margin, t - top, l - left so on. Ends*/
.l-30 { left:30px; }
/*Font colors. Begins*/
.ft-white { color: rgba(255, 255, 255, 1); }
.ft-black { color: #231f20; }
.ft-gray { color: #969696; }
.ft-red { color: #d44e30; }
.ft-blue { color: #2a455c; }
.ft-blue-1 { color: #426e93; }
.ft-blue-2 { color: #5a80d7 !important;}
.ft-blue-3 { color: #2C6FB4 !important;}
.ft-blue-jp { color: #5a80d7;}
.ft-light-blue { color: #48779e; }
.ft-orange { color: #f58220; }
.ft-purple { color: #771b95; }
.ft-light-black { color: #575757; }
.ft-light-gray { color: #505050; }
.jl-gray-ft { color: #939598; }
.jl-blue-ft {
    color: #2a455c;
    text-transform: capitalize;
    font-size: 20px;
    line-height: 30px;
}
.fl-blue-1 {color: #3484CD}
/* Non capitalised verson of the above font*/
.jl-blue-ft-nc {
    color: #2a455c;
    font-size: 20px;
    line-height: 30px;
}
/*Font colors. Ends*/
/*Minimum height controls. Begins*/
.mh-20 { min-height: 20px; }
.mh-30 { min-height: 30px; }
.mh-40 { min-height: 40px; }
.mh-50 { min-height: 50px; }
.mh-59 { min-height: 59px; }
.mh-70 { min-height: 70px; }
.mh-100 { min-height: 100px; }
.mh-125 { min-height: 125px; }
.mh-130 { min-height: 130px; }
.mh-150 { min-height: 150px; }
.mh-180 { min-height: 180px; }
.mh-250 { min-height: 250px; }
.mh-259 { min-height: 259px; }
.mh-290 { min-height: 290px; }
.mh-300 { min-height: 300px; }
.mh-350 { min-height: 350px; }
.mh-370 { min-height: 370px; }
.mh-384 { min-height: 384px; }
.mh-400 { min-height: 400px; }
.mh-480 { min-height: 480px; }
.mh-485 { min-height: 485px; }
/*Minimum height controls. Ends*/
/*Typo sizes, spacing, kerning, colors. Ends*/
.w-100 { width: 100%; }
.w-12 { width: 12%; }
.w-78 { width: 78%; }
.w-10 { width: 10%; }

/*New Utils. Ends*/