/**!  colors **/

.black {
    color: #000 !important;
}

.white {
    color: #fff !important;
}

.dark-1 {
    color: #505254 !important;
}

.dark-2 {
    color: #616161 !important;
}

.dark-3 {
    color: #757575 !important;
}

.dark-4 {
    color: #424242 !important;
}

.pink-1 {
    color: #e91e63 !important;
}

.pink-2 {
    color: #ec407a !important;
}

.pink-3 {
    color: #ff4081 !important;
}

.pink-4 {
    color: #f50057 !important;
}

.purple-1 {
    color: #311b92 !important;
}

.purple-2 {
    color: #512da8 !important;
}

.purple-3 {
    color: #673ab7 !important;
}

.purple-4 {
    color: #9575cd !important;
}

.indigo-1 {
    color: #1a237e !important;
}

.indigo-2 {
    color: #303f9f !important;
}

.indigo-3 {
    color: #3f51b5 !important;
}

.indigo-4 {
    color: #7986cb !important;
}

.blue-1 {
    color: #2962ff !important;
}

.blue-2 {
    color: #2979ff !important;
}

.blue-3 {
    color: #448aff !important;
}

.blue-4 {
    color: #2196f3 !important;
}

.orange-1 {
    color: #ff6d00 !important;
}

.orange-2 {
    color: #ff9100 !important;
}

.orange-3 {
    color: #ffab40 !important;
}

.orange-4 {
    color: #ffb74d !important;
}

.bluegrey-1 {
    color: #263238 !important;
}

.bluegrey-2 {
    color: #455a64 !important;
}

.bluegrey-3 {
    color: #607d8b !important;
}

.bluegrey-4 {
    color: #37474f !important;
}

.grey-1 {
    color: #424242 !important;
}

.grey-2 {
    color: #616161 !important;
}

.grey-3 {
    color: #757575 !important;
}

.grey-4 {
    color: #9e9e9e !important;
}


/* FONT WEIGHT */

.font-weight-light {
    font-weight: 100 !important;
}

.font-weight-normal {
    font-weight: 400 !important;
}

.font-weight-semibold {
    font-weight: 600 !important;
}

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

.font-weight-boldblack {
    font-weight: 800 !important;
}


/* LETTER SPACING IN FONTs */

.no-letter-spacing {
    letter-spacing: 0 !important;
}

.letter-spacing-1 {
    letter-spacing: 1px !important;
}

.letter-spacing-2 {
    letter-spacing: 2px !important;
}

.letter-spacing-3 {
    letter-spacing: 3px !important;
}

.letter-spacing-4 {
    letter-spacing: 4px !important;
}

.letter-spacing-5 {
    letter-spacing: 5px !important;
}

.letter-spacing-6 {
    letter-spacing: 6px !important;
}

.letter-spacing-7 {
    letter-spacing: 7px !important;
}

.letter-spacing-8 {
    letter-spacing: 8px !important;
}

.letter-spacing-9 {
    letter-spacing: 9px !important;
}

.letter-spacing-10 {
    letter-spacing: 10px !important;
}

.letter-spacing_1 {
    letter-spacing: -1px !important;
}

.letter-spacing_2 {
    letter-spacing: -2px !important;
}

.letter-spacing_3 {
    letter-spacing: -3px !important;
}

.letter-spacing_4 {
    letter-spacing: -4px !important;
}

.letter-spacing_5 {
    letter-spacing: -5px !important;
}

.letter-spacing_6 {
    letter-spacing: -6px !important;
}

.letter-spacing_7 {
    letter-spacing: -7px !important;
}

.letter-spacing_8 {
    letter-spacing: -8px !important;
}

.letter-spacing_9 {
    letter-spacing: -9px !important;
}

.letter-spacing_10 {
    letter-spacing: -10px !important;
}


/* line height */

.line-height-18 {
    line-height: 18px !important;
}

.line-height-20 {
    line-height: 20px !important;
}

.line-height-21 {
    line-height: 21px !important;
}

.line-height-22 {
    line-height: 22px !important;
}

.margin-one {
    margin: 1% !important;
}

.margin-two {
    margin: 2% !important;
}

.margin-three {
    margin: 3% !important;
}

.margin-four {
    margin: 4% !important;
}

.margin-five {
    margin: 5% !important;
}

.margin-six {
    margin: 6% !important;
}

.margin-seven {
    margin: 7% !important;
}

.margin-eight {
    margin: 8% !important;
}

.margin-nine {
    margin: 9% !important;
}

.margin-ten {
    margin: 10% !important;
}

.margin-eleven {
    margin: 11% !important;
}

.margin-twelve {
    margin: 12% !important;
}

.no-margin {
    margin: 0 !important;
}

.no-margin-rl {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.no-margin-tb {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.no-margin-top {
    margin-top: 0 !important;
}

.no-margin-bottom {
    margin-bottom: 0 !important;
}

.no-margin-left {
    margin-left: 0 !important;
}

.no-margin-right {
    margin-right: 0 !important;
}

.margin-rl-auto {
    margin-right: auto !important;
    margin-left: auto !important;
}

.margin-top-10 {
    margin-top: 10px;
}

.margin-top20 {
    margin-top: 20px;
}

.margin-top-30 {
    margin-top: 30px;
}

.margin-top-40 {
    margin-top: 40px;
}

.margin-top-50 {
    margin-top: 50px;
}

.margin-top-60 {
    margin-top: 60px;
}

.margin-top-70 {
    margin-top: 70px;
}

.margin-top-80 {
    margin-top: 80px;
}

.margin-bottom-10 {
    margin-bottom: 10px;
}

.margin-bottom-20 {
    margin-bottom: 20px;
}

.margin-bottom-30 {
    margin-bottom: 30px;
}

.margin-bottom-40 {
    margin-bottom: 40px;
}

.margin-bottom-50 {
    margin-bottom: 50px;
}


/* padding */

.padding-one {
    padding: 1% !important;
}

.padding-two {
    padding: 2% !important;
}

.padding-three {
    padding: 3% !important;
}

.padding-four {
    padding: 4% !important;
}

.padding-five {
    padding: 5% !important;
}

.padding-six {
    padding: 6% !important;
}

.padding-seven {
    padding: 7% !important;
}

.padding-eight {
    padding: 8% !important;
}

.padding-nine {
    padding: 9% !important;
}

.padding-ten {
    padding: 10% !important;
}

.padding-eleven {
    padding: 11% !important;
}

.padding-twelve {
    padding: 12% !important;
}

.no-padding {
    padding: 0 !important;
}

.no-padding-rl {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.no-padding-tb {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.no-padding-top {
    padding-top: 0 !important;
}

.no-padding-bottom {
    padding-bottom: 0 !important;
}

.no-padding-left {
    padding-left: 0 !important;
}

.no-padding-right {
    padding-right: 0 !important;
}

.padding-tb-10 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.padding-tb-20 {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

.padding-tb-30 {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

.padding-tb-40 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

.padding-tb-50 {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
}

.padding-tb-60 {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

.padding-tb-70 {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
}

.padding-tb-80 {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

.padding-tb-90 {
    padding-top: 90px !important;
    padding-bottom: 90px !important;
}

.padding-tb-100 {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}

.padding-tb-110 {
    padding-top: 110px !important;
    padding-bottom: 110px !important;
}

.padding-tb-120 {
    padding-top: 120px !important;
    padding-bottom: 120px !important;
}

.padding-tb-130 {
    padding-top: 130px !important;
    padding-bottom: 130px !important;
}

.padding-tb-140 {
    padding-top: 140px !important;
    padding-bottom: 140px !important;
}

.padding-tb-150 {
    padding-top: 150px !important;
    padding-bottom: 150px !important;
}

.padding-rl-5 {
    padding-right: 5px !important;
    padding-left: 5px !important;
}

.padding-rl-10 {
    padding-right: 10px !important;
    padding-left: 10px !important;
}

.padding-rl-15 {
    padding-right: 15px !important;
    padding-left: 15px !important;
}

.padding-rl-20 {
    padding-right: 20px !important;
    padding-left: 20px !important;
}

.padding-rl-25 {
    padding-right: 25px !important;
    padding-left: 25px !important;
}

.padding-rl-30 {
    padding-right: 30px !important;
    padding-left: 30px !important;
}

.padding-rl-35 {
    padding-right: 35px !important;
    padding-left: 35px !important;
}

.padding-rl-40 {
    padding-right: 40px !important;
    padding-left: 40px !important;
}

.padding-rl-45 {
    padding-right: 45px !important;
    padding-left: 45px !important;
}

.padding-rl-50 {
    padding-right: 50px !important;
    padding-left: 50px !important;
}


/* width */

.width-20 {
    width: 20% !important;
}

.width-30 {
    width: 30% !important;
}

.width-40 {
    width: 40% !important;
}

.width-50 {
    width: 50% !important;
}

.width-60 {
    width: 60% !important;
}

.width-70 {
    width: 70% !important;
}

.width-80 {
    width: 80% !important;
}

.width-90 {
    width: 90% !important;
}

.width-100 {
    width: 100% !important;
}

.width-auto {
    width: auto !important;
}