/* --------- GENERAL SETTINGS --------- */
/* --------- GENERAL SETTINGS --------- */
/* --------- GENERAL SETTINGS --------- */

/* 1 - Margins *//* 1 - Margins *//* 1 - Margins */


    /* 1.1 - Margin-Top */
        .mt10{
            margin-top: 10px;
        }
        .mt20{
            margin-top: 20px;
        }
        .mt30{
            margin-top: 30px;
        }
        .mt40{
            margin-top: 40px;
        }
        .mt50{
            margin-top: 50px;
        }

     /* 1.2 - Margin-Right */
        .mr10{
            margin-right: 10px;
        }
        .mr20{
            margin-right: 20px;
        }
        .mr30{
            margin-right: 30px;
        }
        .mr40{
            margin-right: 40px;
        }
        .mr50{
            margin-right: 50px;
        }

        /* 1.3 - Margin-Bottom */
        .mb10{
            margin-bottom: 10px;
        }
        .mb20{
            margin-bottom: 20px;
        }
        .mb30{
            margin-bottom: 30px;
        }
        .mb40{
            margin-bottom: 40px;
        }
        .mb50{
            margin-bottom: 50px;
        }

         /* 1.4 - Margin-Bottom */
        .ml10{
            margin-left: 10px;
        }
        .ml20{
            margin-left: 20px;
        }
        .ml30{
            margin-left: 30px;
        }
        .ml40{
            margin-left: 40px;
        }
        .ml50{
            margin-left: 50px;
        }

        /* 1.5 - Margin */

        .no-margin{
                margin:0;
        }

        .m-a{
            margin:  auto;
        }


/* 2 - Paddings  *//* 2 - Paddings  *//* 2 - Paddings  */

    /* 2.1 - Padding-Top  */
        .pt10{
            padding-top: 10px;
        }
        .pt20{
            padding-top: 20px;
        }
        .pt30{
            padding-top: 30px;
        }
        .pt40{
            padding-top: 40px;
        }
        .pt50{
            padding-top: 50px;
        }

    /* 2.2 - Padding-Right  */
        .pr10{
            padding-right: 10px;
        }
        .pr20{
            padding-right: 20px;
        }
        .pr30{
            padding-right: 30px;
        }
        .pr40{
            padding-right: 40px;
        }
        .pr50{
            padding-right: 50px;
        }

    /* 2.3 - Padding-Bottom  */
        .pb10{
            padding-bottom: 10px;
        }
        .pb20{
            padding-bottom: 20px;
        }
        .pb30{
            padding-bottom: 30px;
        }
        .pb40{
            padding-bottom: 40px;
        }
        .pb50{
            padding-bottom: 50px;
        }

    /* 2.4 - Padding-Left  */
        .pl10{
            padding-left: 10px;
        }
        .pl20{
            padding-left: 20px;
        }
        .pl30{
            padding-left: 30px;
        }
        .pl40{
            padding-left: 40px;
        }
        .pl50{
            padding-left: 50px;
        }

    /* 2.5 - Padding */
        .no-padding{
            padding: 0;
        }

        .full-padding{
            padding-top: 100px;
            padding-bottom: 100px;
        }

/* 3 - Position & Display  */

.pos-a{
    position: absolute;
}

.pos-r{
    position: relative;
}

.pos-f{
    position: fixed;
}

.d-b{
    display: block;
}

.d-ib{
    display: inline-block;
}

.d-n{
    display: none;
}

/* 4 - Transition;  */

.no-transition{
    -webkit-transition:  none;
    -o-transition:  none;
    transition:  none;
}

.transition-1-5{
    -webkit-transition:  all 0.2s ease;
    -o-transition:  all 0.2s ease;
    transition:  all 0.2s ease;
}

.transition-1-3{
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.transition-3-5{
    -webkit-transition:  all 0.6s ease;
    -o-transition:  all 0.6s ease;
    transition:  all 0.6s ease;
}

/* 5- Color;  */
.blk-10{
    color:rgba(0,0,0,0.1);
}
.blk-20{
    color:rgba(0,0,0,0.2);
}
.blk-30{
    color:rgba(0,0,0,0.3);
}
.blk-40{
    color:rgba(0,0,0,0.4);
}
.blk-50{
    color:rgba(0,0,0,0.5);
}
.blk-60{
    color:rgba(0,0,0,0.6);
}

.bg-blk-5{
    background-color:rgba(0,155,221,0.05);
}

.bg-blk-10{
    background-color:rgba(0,0,0,0.1);
}
.bg-blk-20{
    background-color:rgba(0,0,0,0.2);
}
.bg-blk-30{
    background-color:rgba(0,0,0,0.3);
}
.bg-blk-40{
    background-color:rgba(0,0,0,0.4);
}
.bg-blk-50{
    background-color:rgba(0,0,0,0.5);
}
.bg-blk-60{
    background-color:rgba(0,0,0,0.6);
}

.white{
    color: #fff;
}
.black{
    color: #000;
}
.dark-blue{
    color:#162667;
}
.light-blue{
    color: #009bdb;
}
.bg-dark-blue{
    background-color:#162667;
}
.bg-darker-blue{
    background-color:#111d4d;
}
.bg-light-blue{
    background-color: #009bdb;
}

/* 6 - Typography;  */

.light{
    font-weight:  300;
}

.regular{
    font-weight: 400;
}

.semi-bold{
    font-weight: 500;
}

.bold{
    font-weight: 600;
}