/* #region Font Size */
.font-0 {
    font-size: 0;
}

.font-10 {
    font-size: 10px;
}

.font-12 {
    font-size: 12px;
}

.font-14 {
    font-size: 14px;
}

.font-16 {
    font-size: 16px;
}

.font-18 {
    font-size: 18px;
}

.font-19 {
    font-size: 19px;
}

.font-20 {
    font-size: 20px;
}

.font-21 {
    font-size: 20px;
}

.font-22 {
    font-size: 22px;
}

.font-24 {
    font-size: 24px;
}

.font-26 {
    font-size: 26px;
}

.font-28 {
    font-size: 28px;
}

.font-30 {
    font-size: 30px;
}

.font-32 {
    font-size: 32px;
}

.font-34 {
    font-size: 34px;
}

.font-36 {
    font-size: 36px;
}

.font-40 {
    font-size: 40px;
}

.font-45 {
    font-size: 45px;
}

body {
    font-size: 18px;
    font-weight: 400;
}

h1 {
    font-size: 60px;
    font-weight: 500;
    line-height: normal !important;
}

h2 {
    font-size: 34px;
    font-weight: 400;
    line-height: normal !important;
}

h3 {
    font-size: 28px;
    font-weight: 500;
    line-height: normal !important;
}


h3 {
    font-size: 24px;
    font-weight: 500;
    line-height: normal !important;
}

button {
    font-size: 14px;
    font-weight: 500;
}

.caption {
    font-size: 12px;
    font-weight: 500;
    margin-block-start: 1em;
    margin-block-end: 1em;
}

/* #endregion Font Size */

/* #region Font Weight */
.font-weight-100 {
    font-weight: 100;
}

.font-weight-200 {
    font-weight: 200;
}

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

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

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

.font-weight-600 {
    font-weight: 600;
}

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

.font-weight-800 {
    font-weight: 800;
}

.font-weight-900 {
    font-weight: 900;
}

/* #endregion Font Weight */

/* #region Line height */
.lh-1 {
    line-height: 1;
}

.lh-11 {
    line-height: 1.1;
}

.lh-12 {
    line-height: 1.2;
}

.lh-13 {
    line-height: 1.3;
}

.lh-14 {
    line-height: 1.4;
}

.lh-15 {
    line-height: 1.5;
}

.lh-2 {
    line-height: 2;
}

/* #endregion Line height */

/* #region Transform */
.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.capitalize {
    text-transform: capitalize;
}

/* #endregion Transform */

/* #region Text Decorations */
.underline {
    text-decoration: underline;
}

.no-decoration {
    text-decoration: none;
}

/* #endregion Text Decorations */

/* #region Opacity */
.opacity-0 {
    opacity: 0;
}

.opacity-1 {
    opacity: 1;
}

.opacity-2 {
    opacity: 0.2;
}

.opacity-3 {
    opacity: 0.3;
}

.opacity-4 {
    opacity: 0.4;
}

.opacity-5 {
    opacity: 0.5;
}

.opacity-6 {
    opacity: 0.6;
}

.opacity-7 {
    opacity: 0.7;
}

.opacity-8 {
    opacity: 0.8;
}

.opacity-9 {
    opacity: 0.9;
}

/* #endregion Opacity */

/* #region Cursors */
.c-pointer {
    cursor: pointer;
}

.c-text {
    cursor: text;
}

.c-default {
    cursor: default;
}

.c-move {
    cursor: move;
}

/* #endregion Cursors */

/* #region borders */
.border {
    border: 1px solid #dee2e6;
}

.border-top {
    border-top: 1px solid #dee2e6;
}

.border-right {
    border-right: 1px solid #dee2e6;
}

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

.border-left {
    border-left: 1px solid #dee2e6;
}

.border-0 {
    border: 0;
}

.border-top-0 {
    border-top: 0;
}

.border-right-0 {
    border-right: 0;
}

.border-bottom-0 {
    border-bottom: 0;
}

.border-left-0 {
    border-left: 0;
}

.rounded {
    border-radius: .25rem;
}

.rounded-top {
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
}

.rounded-right {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
}

.rounded-bottom {
    border-bottom-right-radius: .25rem;
    border-bottom-left-radius: .25rem;
}

.rounded-left {
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
}

.circled {
    border-radius: 50%;
}

.rounded-pill {
    border-radius: 50rem;
}

.rounded-0 {
    border-radius: 0;
}

.rounded-sm {
    border-radius: .2rem;
}

.rounded-lg {
    border-radius: .3rem;
}

.rounded-xl {
    border-radius: .5rem;
}

/* #endregion borders */

/* #region Floats */
.f-left {
    float: left;
}

.f-right {
    float: right;
}

.f-none {
    float: none;
}

/* #endregion Floats */

/* #region Overflow */
.overflow-hidden {
    overflow: hidden;
}

.overflow-scroll {
    overflow: scroll;
}

.overflow-visible {
    overflow: visible;
}

/* #endregion Overflow */

/* #region Z-Index */
.z-index-n {
    z-index: -1;
}

.z-index-0 {
    z-index: 0;
}

.z-index-1 {
    z-index: 1;
}

.z-index-2 {
    z-index: 2;
}

.z-index-999 {
    z-index: 999;
}

/* #endregion Z-Index */

/* #region shadows */
.shadow-none {
    box-shadow: none;
}

.shadow-sm {
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .2);
}

.shadow {
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .4);
}
.shadow-md {
    -webkit-box-shadow: 0px 5px 15px 3px rgba(184,182,184,1);
            box-shadow: 0px 5px 15px 3px rgba(184,182,184,1);
}
.shadow-light {
    box-shadow: 0 17px 50px 0 rgba(224, 224, 228, 0.66);
}

.shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .3);
}

.shadow-md {
    -webkit-box-shadow: 0px 5px 15px -4px rgba(184,182,184,1);
            box-shadow: 0px 5px 15px -4px rgba(184,182,184,1);
}
/* #endregion shadows */

/* #region Font weigth & italic */
.font-weight-bold {
    font-weight: bold;
}

.font-weight-bolder {
    font-weight: bolder;
}

.font-weight-normal {
    font-weight: normal;
}

.font-weight-lighter {
    font-weight: lighter;
}

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

/* #endregion Font weigth & italic */

/* #region containers */
.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

/* #endregion container */

/* #region grid system */
.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    width: auto;
}

/* #endregion grid system */

/* #region columns  */
.col,
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-auto,
.col-lg,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-auto,
.col-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-auto,
.col-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-auto,
.col-xs,
.col-xs-1,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-auto {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

[class^=col-] {
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}

/* #endregion grid system */

/* #region color palette */
.bg-white {
    background: white;
}

.bg-blue {
    background: #2F93DA;
}

.bg-dark-blue {
    background: #313E5A;
}

.bg-orange {
    background: #F98E4C;
}

.bg-gray {
    background: #F6F6F9;
}

.bg-green {
    background: #7ED321;
}

.bg-gradient {
    background: rgba(49, 62, 90, 1);
    background: -moz-linear-gradient(left, rgba(49, 62, 90, 1) 0%, rgba(53, 77, 128, 1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(49, 62, 90, 1)), color-stop(100%, rgba(53, 77, 128, 1)));
    background: -webkit-linear-gradient(left, rgba(49, 62, 90, 1) 0%, rgba(53, 77, 128, 1) 100%);
    background: -o-linear-gradient(left, rgba(49, 62, 90, 1) 0%, rgba(53, 77, 128, 1) 100%);
    background: -ms-linear-gradient(left, rgba(49, 62, 90, 1) 0%, rgba(53, 77, 128, 1) 100%);
    background: linear-gradient(to right, rgba(49, 62, 90, 1) 0%, rgba(53, 77, 128, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#313e5a', endColorstr='#354d80', GradientType=1);
}

/* #endregion color palette */

/* #region color text */
.text-blue {
    color: #2F93DA;
}

.text-dark-blue {
    color: #313E5A;
}

.text-orange {
    color: #F98E4C;
}

.text-gray {
    color: #F6F6F9;
}

.text-white {
    color: #fff;
}

.text-green {
    color: #7ED321;
}

.text-dark-gray {
    color: #818997;
}

.text-mid-gray {
    color: #D8D8D8;
}

/* #endregion color text */

/* #region Margins */
/* # general margin */
.m-all-auto {
    margin: auto;
}

.m-all-0-auto {
    margin: 0 auto;
}

.m-all-initial {
    margin: initial;
}

/* #end general margin */

/* # top margin */
.mt-all-0 {
    margin-top: 0;
}

.mt-all-5 {
    margin-top: 5px;
}

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

.mt-all-15 {
    margin-top: 15px;
}

.mt-all-20 {
    margin-top: 20px;
}

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

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

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

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

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

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

.mt-all-90 {
    margin-top: 90px;
}

.mt-all-100 {
    margin-top: 100px;
}

.mt-all-150 {
    margin-top: 150px;
}

.mt-all-250 {
    margin-top: 250px;
}

/* # endtop margin */

/* # rigth margin */

.mr-all-0 {
    margin-right: 0;
}

.mr-all-5 {
    margin-right: 5px;
}

.mr-all-10 {
    margin-right: 10px;
}

.mr-all-20 {
    margin-right: 20px;
}

.mr-all-30 {
    margin-right: 30px;
}

.mr-all-40 {
    margin-right: 40px;
}

.mr-all-50 {
    margin-right: 50px;
}

.mr-all-60 {
    margin-right: 60px;
}

/* # end rigth margin */

/* # bottom margin */
.mb-all-0 {
    margin-bottom: 0;
}

.mb-all-5 {
    margin-bottom: 5px;
}

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

.mb-all-15 {
    margin-bottom: 15px;
}

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

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

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

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

.mb-all-60 {
    margin-bottom: 60px;
}

.mb-all-70 {
    margin-bottom: 70px;
}

.mb-all-80 {
    margin-bottom: 80px;
}

.mb-all-90 {
    margin-bottom: 90px;
}

.mb-all-100 {
    margin-bottom: 100px;
}

.mb-all-130 {
    margin-bottom: 130px;
}

.mb-all-150 {
    margin-bottom: 150px;
}

.mb-all-250 {
    margin-bottom: 250px;
}

/* # end bottom margin */

/* # left  margin */
.ml-all-0 {
    margin-left: 0;
}

.ml-all-5 {
    margin-left: 5px;
}

.ml-all-10 {
    margin-left: 10px;
}

.ml-all-20 {
    margin-left: 20px;
}

.ml-all-30 {
    margin-left: 30px;
}

.ml-all-40 {
    margin-left: 40px;
}

.ml-all-50 {
    margin-left: 50px;
}

.ml-all-60 {
    margin-left: 60px;
}

/* # end left margin */

/* # full margin */
.m-all-0 {
    margin: 0;
}

.m-all-5 {
    margin: 5px;
}

.m-all-10 {
    margin: 10px;
}

.m-all-20 {
    margin: 20px;
}

.m-all-30 {
    margin: 30px;
}

.m-all-40 {
    margin: 40px;
}

.m-all-50 {
    margin: 50px;
}

.m-all-60 {
    margin: 60px;
}

/* # full margin */

/* margin axis y */
.my-all-0 {
    margin-bottom: 0;
    margin-top: 0;
}

.my-all-5 {
    margin-bottom: 5px;
    margin-top: 5px;
}

.my-all-10 {
    margin-bottom: 10px;
    margin-top: 10px;
}

.my-all-15 {
    margin-bottom: 15px;
    margin-top: 15px;
}

.my-all-20 {
    margin-bottom: 20px;
    margin-top: 20px;
}

.my-all-30 {
    margin-bottom: 30px;
    margin-top: 30px;
}

.my-all-40 {
    margin-bottom: 40px;
    margin-top: 40px;
}

.my-all-50 {
    margin-bottom: 50px;
    margin-top: 50px;
}

.my-all-60 {
    margin-bottom: 60px;
    margin-top: 60px;
}

.my-all-70 {
    margin-bottom: 70px;
    margin-top: 70px;
}

.my-all-80 {
    margin-bottom: 80px;
    margin-top: 80px;
}

.my-all-90 {
    margin-bottom: 90px;
    margin-top: 90px;
}

.my-all-100 {
    margin-bottom: 100px;
    margin-top: 100px;
}

/* margin axis y */

/* # margin axis x */
.mx-all-0 {
    margin-left: 0;
    margin-right: 0;
}

.mx-all-5 {
    margin-left: 5px;
    margin-right: 5px;
}

.mx-all-10 {
    margin-left: 10px;
    margin-right: 10px;
}

.mx-all-20 {
    margin-left: 20px;
    margin-right: 20px;
}

.mx-all-30 {
    margin-left: 30px;
    margin-right: 30px;
}

.mx-all-40 {
    margin-left: 40px;
    margin-right: 40px;
}

.mx-all-50 {
    margin-left: 50px;
    margin-right: 50px;
}

.mx-all-60 {
    margin-left: 60px;
    margin-right: 60px;
}

/* # end margin axis x*/
/* #endregion Margins */

/* #region Paddings */
/* #padding top region */
.pt-all-0 {
    padding-top: 0;
}

.pt-all-10 {
    padding-top: 10px;
}

.pt-all-15 {
    padding-top: 15px;
}

.pt-all-20 {
    padding-top: 20px;
}

.pt-all-30 {
    padding-top: 30px;
}

.pt-all-40 {
    padding-top: 40px;
}

.pt-all-50 {
    padding-top: 50px;
}

.pt-all-60 {
    padding-top: 60px;
}

.pt-all-70 {
    padding-top: 70px;
}

.pt-all-80 {
    padding-top: 80px;
}

.pt-all-90 {
    padding-top: 90px;
}

.pt-all-100 {
    padding-top: 100px;
}

/* #end padding top region */

/* #padding rigth region */
.pr-all-0 {
    padding-right: 0;
}

.pr-all-10 {
    padding-right: 10px;
}

.pr-all-15 {
    padding-right: 15px;
}

.pr-all-20 {
    padding-right: 20px;
}

.pr-all-30 {
    padding-right: 30px;
}

.pr-all-40 {
    padding-right: 40px;
}

.pr-all-50 {
    padding-right: 50px;
}

.pr-all-60 {
    padding-right: 60px;
}

.pr-all-70 {
    padding-right: 70px;
}

.pr-all-80 {
    padding-right: 80px;
}

.pr-all-90 {
    padding-right: 90px;
}

.pr-all-100 {
    padding-right: 100px;
}

/* #end padding rigth region */

/* #padding bottom region */
.pb-all-0 {
    padding-bottom: 0;
}

.pb-all-10 {
    padding-bottom: 10px;
}

.pb-all-15 {
    padding-bottom: 15px;
}

.pb-all-20 {
    padding-bottom: 20px;
}

.pb-all-30 {
    padding-bottom: 30px;
}

.pb-all-40 {
    padding-bottom: 40px;
}

.pb-all-50 {
    padding-bottom: 50px;
}

.pb-all-60 {
    padding-bottom: 60px;
}

.pb-all-70 {
    padding-bottom: 70px;
}

.pb-all-80 {
    padding-bottom: 80px;
}

.pb-all-90 {
    padding-bottom: 90px;
}

.pb-all-100 {
    padding-bottom: 100px;
}

/* #end padding bottom region */

/* #padding left region */
.pl-all-0 {
    padding-left: 0;
}

.pl-all-10 {
    padding-left: 10px;
}

.pl-all-20 {
    padding-left: 20px;
}

.pl-all-30 {
    padding-left: 30px;
}

.pl-all-40 {
    padding-left: 40px;
}

.pl-all-50 {
    padding-left: 50px;
}

.pl-all-60 {
    padding-left: 60px;
}

.pl-all-70 {
    padding-left: 70px;
}

.pl-all-80 {
    padding-left: 80px;
}

.pl-all-90 {
    padding-left: 90px;
}

.pl-all-100 {
    padding-left: 100px;
}

/* #end padding left region */

/* #padding full region */
.p-all-0 {
    padding: 0;
}

.p-all-10 {
    padding: 10px;
}

.p-all-15 {
    padding: 15px;
}

.p-all-20 {
    padding: 20px;
}

.p-all-30 {
    padding: 30px;
}

.p-all-40 {
    padding: 40px;
}

.p-all-50 {
    padding: 50px;
}

.p-all-60 {
    padding: 60px;
}

.p-all-70 {
    padding: 70px;
}

.p-all-80 {
    padding: 80px;
}

.p-all-90 {
    padding: 90px;
}

.p-all-100 {
    padding: 100px;
}

/* #padding full region */

/* #padding axis y region */
.py-all-0 {
    padding-bottom: 0;
    padding-top: 0
}

.py-all-10 {
    padding-bottom: 10px;
    padding-top: 10px
}

.py-all-15 {
    padding-bottom: 15px;
    padding-top: 15px
}

.py-all-20 {
    padding-bottom: 20px;
    padding-top: 20px
}

.py-all-30 {
    padding-bottom: 30px;
    padding-top: 30px
}

.py-all-40 {
    padding-bottom: 40px;
    padding-top: 40px
}

.py-all-50 {
    padding-bottom: 50px;
    padding-top: 50px
}

.py-all-60 {
    padding-bottom: 60px;
    padding-top: 60px
}

.py-all-70 {
    padding-bottom: 70px;
    padding-top: 70px
}

.py-all-80 {
    padding-bottom: 80px;
    padding-top: 80px
}

.py-all-90 {
    padding-bottom: 90px;
    padding-top: 90px
}

.py-all-100 {
    padding-bottom: 100px;
    padding-top: 100px
}

/* #endpadding axis y region */

/* #padding left region */
.px-all-0 {
    padding-left: 0;
    padding-right: 0;
}

.px-all-10 {
    padding-left: 10px;
    padding-right: 10px;
}

.px-all-15 {
    padding-left: 15px;
    padding-right: 15px;
}

.px-all-20 {
    padding-left: 20px;
    padding-right: 20px;
}

.px-all-30 {
    padding-left: 30px;
    padding-right: 30px;
}

.px-all-40 {
    padding-left: 40px;
    padding-right: 40px;
}

.px-all-50 {
    padding-left: 50px;
    padding-right: 50px;
}

.px-all-60 {
    padding-left: 60px;
    padding-right: 60px;
}

.px-all-70 {
    padding-left: 70px;
    padding-right: 70px;
}

.px-all-80 {
    padding-left: 80px;
    padding-right: 80px;
}

.px-all-90 {
    padding-left: 90px;
    padding-right: 90px;
}

.px-all-100 {
    padding-left: 100px;
    padding-right: 100px;
}

/* #end padding left region */
/* #endregion Paddings */

/* #region Flex */
.flex-all-row {
    flex-direction: row;
}

.flex-all-row-reverse {
    flex-direction: row-reverse;
}

.flex-all-column {
    flex-direction: column;
}

.flex-all-column-reverse {
    flex-direction: column-reverse;
    -ms-flex-direction: inherit;
    -ms-flex-wrap: wrap-reverse;
    -webkit-flex-direction: inherit;
    -webkit-flex-wrap: wrap-reverse
}

.flex-all-self-start {
    align-self: flex-start;
}

.flex-all-start {
    justify-content: flex-start;
    text-align: start;
}

.flex-all-center {
    justify-content: center;
}

.flex-all-evenly {
    justify-content: space-evenly;
}

.flex-all-around {
    justify-content: space-around;
}

.flex-all-end {
    justify-content: flex-end;
}

.flex-all-top {
    align-items: top;
}

.flex-all-middle {
    align-items: center;
}

.flex-all-bottom {
    align-items: flex-end;
}

.flex-all-between {
    justify-content: space-between;
}

.flex-all-1 {
    flex: 1;
}

.flex-all-wrap {
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
}

.flex-all-grow-1 {
    flex-grow: 1;
}

.flex-all-basis-0 {
    flex-basis: 0;
}

/* #endregion Flex */

/* #region Displays */
.d-all-block {
    display: block;
}

.d-all-flex {
    display: flex;
    display: -ms-flexbox;
}

.d-all-flex-inline {
    display: inline-flex;
}

.d-all-inline {
    display: inline;
}

.d-all-inline-block {
    display: inline-block;
    vertical-align: top;
}

.d-all-none {
    display: none;
}

.vertical-all-top {
    vertical-align: top;
}

.vertical-all-middle {
    vertical-align: middle;
    vertical-align: -webkit-baseline-middle;
}

.vertical-all-bottom {
    vertical-align: bottom;
}

/* #endregion Displays */

/* #region Positions */
.relative-all {
    position: relative;
}

.absolute-all {
    position: absolute;
}

.fixed-all {
    position: fixed;
}

.absolute-all-h-center {
    left: 0;
    right: 0;
    margin: auto;
}

.absolute-all-v-center {
    top: 0;
    bottom: 0;
    margin: auto;
}

/* Left */
.pos-all-left {
    left: 0;
    right: auto;
}

.left-all-10 {
    left: 10%;
}

.left-all-20 {
    left: 20%;
}

.left-all-30 {
    left: 30%;
}

.left-all-40 {
    left: 40%;
}

.left-all-50 {
    left: 50%;
}

/* .Left */

/* Right */
.pos-all-right {
    left: auto;
    right: 0;
}

.right-all-10 {
    right: 10%;
}

.right-all-20 {
    right: 20%;
}

.right-all-30 {
    right: 30%;
}

.right-all-40 {
    right: 40%;
}

.right-all-50 {
    right: 50%;
}

/*. Right */

/* Top */
.pos-all-top {
    top: 0;
    bottom: auto;
}

.top-all-10 {
    top: 10%;
}

.top-all-20 {
    top: 20%;
}

.top-all-30 {
    top: 30%;
}

.top-all-40 {
    top: 40%;
}

.top-all-50 {
    top: 50%;
}

/* .Top */

/* Bottom */
.pos-all-bottom {
    top: auto;
    bottom: 0;
}

.bottom-all-10 {
    bottom: 10%;
}

.bottom-all-20 {
    bottom: 20%;
}

.bottom-all-30 {
    bottom: 30%;
}

.bottom-all-40 {
    bottom: 40%;
}

.bottom-all-50 {
    bottom: 50%;
}

/* .Bottom */

/*  Vertical center */
.vertical-all-center {
    top: 0;
    bottom: 0;
    margin: auto;
}

/*  Vertical center */
/* #endregion Positions */

/* #region width adn heigth */
.w-all-10 {
    width: 10%;
}

.w-all-20 {
    width: 20%;
}

.w-all-25 {
    width: 25%;
}

.w-all-30 {
    width: 30%;
}

.w-all-33 {
    width: 33.333333%;
}

.w-all-40 {
    width: 40%;
}

.w-all-50 {
    width: 50%;
}

.w-all-60 {
    width: 60%;
}

.w-all-70 {
    width: 70%;
}

.w-all-80 {
    width: 80%;
}

.w-all-90 {
    width: 90%;
}

.w-all-100 {
    width: 100%;
}

.h-all-10 {
    height: 10%;
}

.h-all-20 {
    height: 20%;
}

.h-all-25 {
    height: 25%;
}

.h-all-30 {
    height: 30%;
}

.h-all-33 {
    height: 33.333333%;
}

.h-all-40 {
    height: 40%;
}

.h-all-50 {
    height: 50%;
}

.h-all-60 {
    height: 60%;
}

.h-all-70 {
    height: 70%;
}

.h-all-80 {
    height: 80%;
}

.h-all-90 {
    height: 90%;
}

.h-all-100 {
    height: 100%;
}

/* #endregion width and heigth */

/* #region text alignment */
.text-all-justify {
    text-align: justify;
}

.text-all-left {
    text-align: left;
}

.text-all-center {
    text-align: center;
}

.text-all-right {
    text-align: right;
}

.text-all-nowrap {
    white-space: nowrap;
}

.text-all-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-all-break {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* #endregion text alignment */

/* #region Vertical alignment */
.align-all-baseline {
    vertical-align: baseline;
}

.align-all-top {
    vertical-align: top;
}

.align-all-middle {
    vertical-align: middle;
    vertical-align: -webkit-baseline-middle;
}

.align-all-bottom {
    vertical-align: bottom;
}

.align-all-text-top {
    vertical-align: text-top;
}

.align-all-text-bottom {
    vertical-align: text-bottom;
}


.max-870{
    max-width: 870px !important;
}

.w-320{
    width: 320px;
}

/* #endregion Vertical alignment */

/*  Extra small devices (landscape phones, 576px and up) (SM) */
@media (max-width: 575px) {

    /* #region fonts sizes */
    body {
        font-size: 16px;
        font-weight: 400;
        line-height: 22px !important;
    }

    h1 {
        font-size: 40px;
        font-weight: 500;
        line-height: 41px !important;
    }

    h2 {
        font-size: 28px;
        font-weight: 400;
        line-height: normal !important;
    }

    h3 {
        font-size: 20px;
        font-weight: 500;
    }

    button {
        font-size: 14px;
        font-weight: 500;
    }

    .caption {
        font-size: 12px;
        font-weight: 500;
        margin-block-start: 1em;
        margin-block-end: 1em;
    }

    /* #endregion fonts sizes */

    /* #region Margins */
    /* # general margin */
    .m-xs-auto {
        margin: auto;
    }

    .m-xs-0-auto {
        margin: 0 auto;
    }

    .m-xs-initial {
        margin: initial;
    }

    /* #end general margin */

    /* # top margin */
    .mt-xs-0 {
        margin-top: 0;
    }

    .mt-xs-5 {
        margin-top: 5px;
    }

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

    .mt-xs-15 {
        margin-top: 15px;
    }

    .mt-xs-20 {
        margin-top: 20px;
    }

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

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

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

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

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

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

    .mt-xs-90 {
        margin-top: 90px;
    }

    .mt-xs-100 {
        margin-top: 100px;
    }

    .mt-xs-150 {
        margin-top: 150px;
    }

    .mt-xs-250 {
        margin-top: 250px;
    }

    /* # endtop margin */

    /* # rigth margin */

    .mr-xs-0 {
        margin-right: 0;
    }

    .mr-xs-5 {
        margin-right: 5px;
    }

    .mr-xs-10 {
        margin-right: 10px;
    }

    .mr-xs-20 {
        margin-right: 20px;
    }

    .mr-xs-30 {
        margin-right: 30px;
    }

    .mr-xs-40 {
        margin-right: 40px;
    }

    .mr-xs-50 {
        margin-right: 50px;
    }

    .mr-xs-60 {
        margin-right: 60px;
    }

    /* # end rigth margin */

    /* # bottom margin */
    .mb-xs-0 {
        margin-bottom: 0;
    }

    .mb-xs-5 {
        margin-bottom: 5px;
    }

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

    .mb-xs-15 {
        margin-bottom: 15px;
    }

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

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

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

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

    .mb-xs-60 {
        margin-bottom: 60px;
    }

    .mb-xs-70 {
        margin-bottom: 70px;
    }

    .mb-xs-80 {
        margin-bottom: 80px;
    }

    .mb-xs-90 {
        margin-bottom: 90px;
    }

    .mb-xs-100 {
        margin-bottom: 100px;
    }

    .mb-xs-140 {
        margin-bottom: 140px;
    }

    .mb-xs-150 {
        margin-bottom: 150px;
    }

    .mb-xs-250 {
        margin-bottom: 250px;
    }

    /* # end bottom margin */

    /* # left  margin */
    .ml-xs-0 {
        margin-left: 0;
    }

    .ml-xs-5 {
        margin-left: 5px;
    }

    .ml-xs-10 {
        margin-left: 10px;
    }

    .ml-xs-20 {
        margin-left: 20px;
    }

    .ml-xs-30 {
        margin-left: 30px;
    }

    .ml-xs-40 {
        margin-left: 40px;
    }

    .ml-xs-50 {
        margin-left: 50px;
    }

    .ml-xs-60 {
        margin-left: 60px;
    }

    /* # end left margin */

    /* # full margin */
    .m-xs-0 {
        margin: 0;
    }

    .m-xs-5 {
        margin: 5px;
    }

    .m-xs-10 {
        margin: 10px;
    }

    .m-xs-20 {
        margin: 20px;
    }

    .m-xs-30 {
        margin: 30px;
    }

    .m-xs-40 {
        margin: 40px;
    }

    .m-xs-50 {
        margin: 50px;
    }

    .m-xs-60 {
        margin: 60px;
    }

    /* # full margin */

    /* margin axis y */
    .my-xs-0 {
        margin-bottom: 0;
        margin-top: 0;
    }

    .my-xs-5 {
        margin-bottom: 5px;
        margin-top: 5px;
    }

    .my-xs-10 {
        margin-bottom: 10px;
        margin-top: 10px;
    }

    .my-xs-15 {
        margin-bottom: 15px;
        margin-top: 15px;
    }

    .my-xs-20 {
        margin-bottom: 20px;
        margin-top: 20px;
    }

    .my-xs-30 {
        margin-bottom: 30px;
        margin-top: 30px;
    }

    .my-xs-40 {
        margin-bottom: 40px;
        margin-top: 40px;
    }

    .my-xs-50 {
        margin-bottom: 50px;
        margin-top: 50px;
    }

    .my-xs-60 {
        margin-bottom: 60px;
        margin-top: 60px;
    }

    .my-xs-70 {
        margin-bottom: 70px;
        margin-top: 70px;
    }

    .my-xs-80 {
        margin-bottom: 80px;
        margin-top: 80px;
    }

    .my-xs-90 {
        margin-bottom: 90px;
        margin-top: 90px;
    }

    .my-xs-100 {
        margin-bottom: 100px;
        margin-top: 100px;
    }

    /* margin axis y */

    /* # margin axis x */
    .mx-xs-0 {
        margin-left: 0;
        margin-right: 0;
    }

    .mx-xs-5 {
        margin-left: 5px;
        margin-right: 5px;
    }

    .mx-xs-10 {
        margin-left: 10px;
        margin-right: 10px;
    }

    .mx-xs-20 {
        margin-left: 20px;
        margin-right: 20px;
    }

    .mx-xs-30 {
        margin-left: 30px;
        margin-right: 30px;
    }

    .mx-xs-40 {
        margin-left: 40px;
        margin-right: 40px;
    }

    .mx-xs-50 {
        margin-left: 50px;
        margin-right: 50px;
    }

    .mx-xs-60 {
        margin-left: 60px;
        margin-right: 60px;
    }

    /* # end margin axis x*/
    /* #endregion Margins */

    /* #region Paddings */
    /* #padding top region */
    .pt-xs-0 {
        padding-top: 0;
    }

    .pt-xs-10 {
        padding-top: 10px;
    }

    .pt-xs-15 {
        padding-top: 15px;
    }

    .pt-xs-20 {
        padding-top: 20px;
    }

    .pt-xs-30 {
        padding-top: 30px;
    }

    .pt-xs-40 {
        padding-top: 40px;
    }

    .pt-xs-50 {
        padding-top: 50px;
    }

    .pt-xs-60 {
        padding-top: 60px;
    }

    .pt-xs-70 {
        padding-top: 70px;
    }

    .pt-xs-80 {
        padding-top: 80px;
    }

    .pt-xs-90 {
        padding-top: 90px;
    }

    .pt-xs-100 {
        padding-top: 100px;
    }

    /* #end padding top region */

    /* #padding rigth region */
    .pr-xs-0 {
        padding-right: 0;
    }

    .pr-xs-10 {
        padding-right: 10px;
    }

    .pr-xs-15 {
        padding-right: 15px;
    }

    .pr-xs-20 {
        padding-right: 20px;
    }

    .pr-xs-30 {
        padding-right: 30px;
    }

    .pr-xs-40 {
        padding-right: 40px;
    }

    .pr-xs-50 {
        padding-right: 50px;
    }

    .pr-xs-60 {
        padding-right: 60px;
    }

    .pr-xs-70 {
        padding-right: 70px;
    }

    .pr-xs-80 {
        padding-right: 80px;
    }

    .pr-xs-90 {
        padding-right: 90px;
    }

    .pr-xs-100 {
        padding-right: 100px;
    }

    /* #end padding rigth region */

    /* #padding bottom region */
    .pb-xs-0 {
        padding-bottom: 0;
    }

    .pb-xs-10 {
        padding-bottom: 10px;
    }

    .pb-xs-15 {
        padding-bottom: 15px;
    }

    .pb-xs-20 {
        padding-bottom: 20px;
    }

    .pb-xs-30 {
        padding-bottom: 30px;
    }

    .pb-xs-40 {
        padding-bottom: 40px;
    }

    .pb-xs-50 {
        padding-bottom: 50px;
    }

    .pb-xs-60 {
        padding-bottom: 60px;
    }

    .pb-xs-70 {
        padding-bottom: 70px;
    }

    .pb-xs-80 {
        padding-bottom: 80px;
    }

    .pb-xs-90 {
        padding-bottom: 90px;
    }

    .pb-xs-100 {
        padding-bottom: 100px;
    }

    /* #end padding bottom region */

    /* #padding left region */
    .pl-xs-0 {
        padding-left: 0;
    }

    .pl-xs-10 {
        padding-left: 10px;
    }

    .pl-xs-20 {
        padding-left: 20px;
    }

    .pl-xs-30 {
        padding-left: 30px;
    }

    .pl-xs-40 {
        padding-left: 40px;
    }

    .pl-xs-50 {
        padding-left: 50px;
    }

    .pl-xs-60 {
        padding-left: 60px;
    }

    .pl-xs-70 {
        padding-left: 70px;
    }

    .pl-xs-80 {
        padding-left: 80px;
    }

    .pl-xs-90 {
        padding-left: 90px;
    }

    .pl-xs-100 {
        padding-left: 100px;
    }

    /* #end padding left region */

    /* #padding full region */
    .p-xs-0 {
        padding: 0;
    }

    .p-xs-10 {
        padding: 10px;
    }

    .p-xs-15 {
        padding: 15px;
    }

    .p-xs-20 {
        padding: 20px;
    }

    .p-xs-30 {
        padding: 30px;
    }

    .p-xs-40 {
        padding: 40px;
    }

    .p-xs-50 {
        padding: 50px;
    }

    .p-xs-60 {
        padding: 60px;
    }

    .p-xs-70 {
        padding: 70px;
    }

    .p-xs-80 {
        padding: 80px;
    }

    .p-xs-90 {
        padding: 90px;
    }

    .p-xs-100 {
        padding: 100px;
    }

    /* #padding full region */

    /* #padding axis y region */
    .py-xs-0 {
        padding-bottom: 0;
        padding-top: 0
    }

    .py-xs-10 {
        padding-bottom: 10px;
        padding-top: 10px
    }

    .py-xs-15 {
        padding-bottom: 15px;
        padding-top: 15px
    }

    .py-xs-20 {
        padding-bottom: 20px;
        padding-top: 20px
    }

    .py-xs-30 {
        padding-bottom: 30px;
        padding-top: 30px
    }

    .py-xs-40 {
        padding-bottom: 40px;
        padding-top: 40px
    }

    .py-xs-50 {
        padding-bottom: 50px;
        padding-top: 50px
    }

    .py-xs-60 {
        padding-bottom: 60px;
        padding-top: 60px
    }

    .py-xs-70 {
        padding-bottom: 70px;
        padding-top: 70px
    }

    .py-xs-80 {
        padding-bottom: 80px;
        padding-top: 80px
    }

    .py-xs-90 {
        padding-bottom: 90px;
        padding-top: 90px
    }

    .py-xs-100 {
        padding-bottom: 100px;
        padding-top: 100px
    }

    /* #end padding axis y region */

    /* #padding left region */
    .px-xs-0 {
        padding-left: 0;
        padding-right: 0;
    }

    .px-xs-10 {
        padding-left: 10px;
        padding-right: 10px;
    }

    .px-xs-15 {
        padding-left: 15px;
        padding-right: 15px;
    }

    .px-xs-20 {
        padding-left: 20px;
        padding-right: 20px;
    }

    .px-xs-30 {
        padding-left: 30px;
        padding-right: 30px;
    }

    .px-xs-40 {
        padding-left: 40px;
        padding-right: 40px;
    }

    .px-xs-50 {
        padding-left: 50px;
        padding-right: 50px;
    }

    .px-xs-60 {
        padding-left: 60px;
        padding-right: 60px;
    }

    .px-xs-70 {
        padding-left: 70px;
        padding-right: 70px;
    }

    .px-xs-80 {
        padding-left: 80px;
        padding-right: 80px;
    }

    .px-xs-90 {
        padding-left: 90px;
        padding-right: 90px;
    }

    .px-xs-100 {
        padding-left: 100px;
        padding-right: 100px;
    }

    /* #end padding left region */
    /* #endregion Paddings */

    /* #region Flex */
    .flex-xs-row {
        flex-direction: row;
    }

    .flex-xs-row-reverse {
        flex-direction: row-reverse;
    }

    .flex-xs-column {
        flex-direction: column;
    }

    .flex-xs-column-reverse {
        flex-direction: column-reverse;
        -ms-flex-direction: inherit;
        -ms-flex-wrap: wrap-reverse;
        -webkit-flex-direction: inherit;
        -webkit-flex-wrap: wrap-reverse
    }

    .flex-xs-self-start {
        align-self: flex-start;
    }

    .flex-xs-start {
        justify-content: flex-start;
        text-align: start;
    }

    .flex-xs-center {
        justify-content: center;
    }

    .flex-xs-evenly {
        justify-content: space-evenly;
    }

    .flex-xs-around {
        justify-content: space-around;
    }

    .flex-xs-end {
        justify-content: flex-end;
    }

    .flex-xs-top {
        align-items: top;
    }

    .flex-xs-middle {
        align-items: center;
    }

    .flex-xs-bottom {
        align-items: flex-end;
    }

    .flex-xs-between {
        justify-content: space-between;
    }

    .flex-xs-1 {
        flex: 1;
    }

    .flex-xs-wrap {
        flex-wrap: wrap;
        -ms-flex-wrap: wrap;
    }

    .flex-xs-grow-1 {
        flex-grow: 1;
    }

    .flex-xs-basis-0 {
        flex-basis: 0;
    }

    /* #endregion Flex */

    /* #region Displays */
    .d-xs-block {
        display: block;
    }

    .d-xs-flex {
        display: flex;
        display: -ms-flexbox;
    }

    .d-xs-flex-inline {
        display: inline-flex;
    }

    .d-xs-inline {
        display: inline;
    }

    .d-xs-inline-block {
        display: inline-block;
        vertical-align: top;
    }

    .d-xs-none {
        display: none;
    }

    .vertical-xs-top {
        vertical-align: top;
    }

    .vertical-xs-middle {
        vertical-align: middle;
        vertical-align: -webkit-baseline-middle;
    }

    .vertical-xs-bottom {
        vertical-align: bottom;
    }

    /* #endregion Displays */

    /* #region Positions */
    .relative-xs {
        position: relative;
    }

    .absolute-xs {
        position: absolute;
    }

    .fixed-xs {
        position: fixed;
    }

    .absolute-xs-h-center {
        left: 0;
        right: 0;
        margin: auto;
    }

    .absolute-xs-v-center {
        top: 0;
        bottom: 0;
        margin: auto;
    }

    /* Left */
    .pos-xs-left {
        left: 0;
        right: auto;
    }

    .left-xs-10 {
        left: 10%;
    }

    .left-xs-20 {
        left: 20%;
    }

    .left-xs-30 {
        left: 30%;
    }

    .left-xs-40 {
        left: 40%;
    }

    .left-xs-50 {
        left: 50%;
    }

    /* .Left */

    /* Right */
    .pos-xs-right {
        left: auto;
        right: 0;
    }

    .right-xs-10 {
        right: 10%;
    }

    .right-xs-20 {
        right: 20%;
    }

    .right-xs-30 {
        right: 30%;
    }

    .right-xs-40 {
        right: 40%;
    }

    .right-xs-50 {
        right: 50%;
    }

    /*. Right */

    /* Top */
    .pos-xs-top {
        top: 0;
        bottom: auto;
    }

    .top-xs-10 {
        top: 10%;
    }

    .top-xs-20 {
        top: 20%;
    }

    .top-xs-30 {
        top: 30%;
    }

    .top-xs-40 {
        top: 40%;
    }

    .top-xs-50 {
        top: 50%;
    }

    /* .Top */

    /* Bottom */
    .pos-xs-bottom {
        top: auto;
        bottom: 0;
    }

    .bottom-xs-10 {
        bottom: 10%;
    }

    .bottom-xs-20 {
        bottom: 20%;
    }

    .bottom-xs-30 {
        bottom: 30%;
    }

    .bottom-xs-40 {
        bottom: 40%;
    }

    .bottom-xs-50 {
        bottom: 50%;
    }

    /* .Bottom */

    /*  Vertical center */
    .vertical-xs-center {
        top: 0;
        bottom: 0;
        margin: auto;
    }

    /*  Vertical center */

    /* #endregion Positions */

    /* #region width and height*/
    .w-xs-10 {
        width: 10%;
    }

    .w-xs-20 {
        width: 20%;
    }

    .w-xs-25 {
        width: 25%;
    }

    .w-xs-30 {
        width: 30%;
    }

    .w-xs-33 {
        width: 33.333333%;
    }

    .w-xs-40 {
        width: 40%;
    }

    .w-xs-50 {
        width: 50%;
    }

    .w-xs-60 {
        width: 60%;
    }

    .w-xs-70 {
        width: 70%;
    }

    .w-xs-80 {
        width: 80%;
    }

    .w-xs-90 {
        width: 90%;
    }

    .w-xs-100 {
        width: 100%;
    }

    .h-xs-10 {
        height: 10%;
    }

    .h-xs-20 {
        height: 20%;
    }

    .h-xs-25 {
        height: 25%;
    }

    .h-xs-30 {
        height: 30%;
    }

    .h-xs-33 {
        height: 33.333333%;
    }

    .h-xs-40 {
        height: 40%;
    }

    .h-xs-50 {
        height: 50%;
    }

    .h-xs-60 {
        height: 60%;
    }

    .h-xs-70 {
        height: 70%;
    }

    .h-xs-80 {
        height: 80%;
    }

    .h-xs-90 {
        height: 90%;
    }

    .h-xs-100 {
        height: 100%;
    }

    /* #endregion width and height*/

    /* #region text alignment */
    .text-xs-justify {
        text-align: justify;
    }

    .text-xs-left {
        text-align: left;
    }

    .text-xs-center {
        text-align: center;
    }

    .text-xs-right {
        text-align: right;
    }

    .text-xs-nowrap {
        white-space: nowrap;
    }

    .text-xs-truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .text-xs-break {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* #endregion text alignment */

    /* #region Vertical alignment */
    .align-xs-baseline {
        vertical-align: baseline;
    }

    .align-xs-top {
        vertical-align: top;
    }

    .align-xs-middle {
        vertical-align: middle;
        vertical-align: -webkit-baseline-middle;
    }

    .align-xs-bottom {
        vertical-align: bottom;
    }

    .align-xs-text-top {
        vertical-align: text-top;
    }

    .align-xs-text-bottom {
        vertical-align: text-bottom;
    }

    /* #endregion Vertical alignment */

    /* #region columns */

    .col-xs-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .col-xs {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }

    .col-xs-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-xs-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-xs-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-xs-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-xs-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-xs-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-xs-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-xs-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-xs-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-xs-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-xs-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-xs-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* #endregion columns */

    /* #region containers */
    .container {
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    /* #endregion containers */

    /* #Container Blog Detail */
    .containerBlogDetail {
        max-width: 100%;
    }

    .containerBlogDetailMore {
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }
}

/*  Small devices (landscape phones, 576px and up) (SM) */
@media (min-width: 576px) and (max-width: 767px) {

    /* #region fonts sizes */
    body {
        font-size: 16px;
        font-weight: 400;
        line-height: 22px !important;
    }

    h1 {
        font-size: 40px;
        font-weight: 500;
        line-height: 41px !important;
    }

    h2 {
        font-size: 28px;
        font-weight: 400;
        line-height: normal !important;
    }

    h3 {
        font-size: 20px;
        font-weight: 500;
    }

    button {
        font-size: 14px;
        font-weight: 500;
    }

    .caption {
        font-size: 12px;
        font-weight: 500;
        margin-block-start: 1em;
        margin-block-end: 1em;
    }

    /* #endregion fonts sizes */

    /* #region Margins */
    /* # general margin */
    .m-sm-auto {
        margin: auto;
    }

    .m-sm-0-auto {
        margin: 0 auto;
    }

    .m-sm-initial {
        margin: initial;
    }

    /* #end general margin */

    /* # top margin */
    .mt-sm-0 {
        margin-top: 0;
    }

    .mt-sm-5 {
        margin-top: 5px;
    }

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

    .mt-sm-15 {
        margin-top: 15px;
    }

    .mt-sm-20 {
        margin-top: 20px;
    }

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

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

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

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

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

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

    .mt-sm-90 {
        margin-top: 90px;
    }

    .mt-sm-100 {
        margin-top: 100px;
    }

    .mt-sm-150 {
        margin-top: 150px;
    }

    .mt-sm-250 {
        margin-top: 250px;
    }

    /* # endtop margin */

    /* # rigth margin */

    .mr-sm-0 {
        margin-right: 0;
    }

    .mr-sm-5 {
        margin-right: 5px;
    }

    .mr-sm-10 {
        margin-right: 10px;
    }

    .mr-sm-20 {
        margin-right: 20px;
    }

    .mr-sm-30 {
        margin-right: 30px;
    }

    .mr-sm-40 {
        margin-right: 40px;
    }

    .mr-sm-50 {
        margin-right: 50px;
    }

    .mr-sm-60 {
        margin-right: 60px;
    }

    /* # end rigth margin */

    /* # bottom margin */
    .mb-sm-0 {
        margin-bottom: 0;
    }

    .mb-sm-5 {
        margin-bottom: 5px;
    }

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

    .mb-sm-15 {
        margin-bottom: 15px;
    }

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

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

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

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

    .mb-sm-60 {
        margin-bottom: 60px;
    }

    .mb-sm-70 {
        margin-bottom: 70px;
    }

    .mb-sm-80 {
        margin-bottom: 80px;
    }

    .mb-sm-90 {
        margin-bottom: 90px;
    }

    .mb-sm-100 {
        margin-bottom: 100px;
    }

    .mb-sm-140 {
        margin-bottom: 140px;
    }

    .mb-sm-150 {
        margin-bottom: 150px;
    }

    .mb-sm-250 {
        margin-bottom: 250px;
    }

    /* # end bottom margin */

    /* # left  margin */
    .ml-sm-0 {
        margin-left: 0;
    }

    .ml-sm-5 {
        margin-left: 5px;
    }

    .ml-sm-10 {
        margin-left: 10px;
    }

    .ml-sm-20 {
        margin-left: 20px;
    }

    .ml-sm-30 {
        margin-left: 30px;
    }

    .ml-sm-40 {
        margin-left: 40px;
    }

    .ml-sm-50 {
        margin-left: 50px;
    }

    .ml-sm-60 {
        margin-left: 60px;
    }

    /* # end left margin */

    /* # full margin */
    .m-sm-0 {
        margin: 0;
    }

    .m-sm-5 {
        margin: 5px;
    }

    .m-sm-10 {
        margin: 10px;
    }

    .m-sm-20 {
        margin: 20px;
    }

    .m-sm-30 {
        margin: 30px;
    }

    .m-sm-40 {
        margin: 40px;
    }

    .m-sm-50 {
        margin: 50px;
    }

    .m-sm-60 {
        margin: 60px;
    }

    /* # full margin */

    /* margin axis y */
    .my-sm-0 {
        margin-bottom: 0;
        margin-top: 0;
    }

    .my-sm-5 {
        margin-bottom: 5px;
        margin-top: 5px;
    }

    .my-sm-10 {
        margin-bottom: 10px;
        margin-top: 10px;
    }

    .my-sm-15 {
        margin-bottom: 15px;
        margin-top: 15px;
    }

    .my-sm-20 {
        margin-bottom: 20px;
        margin-top: 20px;
    }

    .my-sm-30 {
        margin-bottom: 30px;
        margin-top: 30px;
    }

    .my-sm-40 {
        margin-bottom: 40px;
        margin-top: 40px;
    }

    .my-sm-50 {
        margin-bottom: 50px;
        margin-top: 50px;
    }

    .my-sm-60 {
        margin-bottom: 60px;
        margin-top: 60px;
    }

    .my-sm-70 {
        margin-bottom: 70px;
        margin-top: 70px;
    }

    .my-sm-80 {
        margin-bottom: 80px;
        margin-top: 80px;
    }

    .my-sm-90 {
        margin-bottom: 90px;
        margin-top: 90px;
    }

    .my-sm-100 {
        margin-bottom: 100px;
        margin-top: 100px;
    }

    /* margin axis y */

    /* # margin axis x */
    .mx-sm-0 {
        margin-left: 0;
        margin-right: 0;
    }

    .mx-sm-5 {
        margin-left: 5px;
        margin-right: 5px;
    }

    .mx-sm-10 {
        margin-left: 10px;
        margin-right: 10px;
    }

    .mx-sm-20 {
        margin-left: 20px;
        margin-right: 20px;
    }

    .mx-sm-30 {
        margin-left: 30px;
        margin-right: 30px;
    }

    .mx-sm-40 {
        margin-left: 40px;
        margin-right: 40px;
    }

    .mx-sm-50 {
        margin-left: 50px;
        margin-right: 50px;
    }

    .mx-sm-60 {
        margin-left: 60px;
        margin-right: 60px;
    }

    /* # end margin axis x*/
    /* #endregion Margins */

    /* #region Paddings */
    /* #padding top region */
    .pt-sm-0 {
        padding-top: 0;
    }

    .pt-sm-10 {
        padding-top: 10px;
    }

    .pt-sm-15 {
        padding-top: 15px;
    }

    .pt-sm-20 {
        padding-top: 20px;
    }

    .pt-sm-30 {
        padding-top: 30px;
    }

    .pt-sm-40 {
        padding-top: 40px;
    }

    .pt-sm-50 {
        padding-top: 50px;
    }

    .pt-sm-60 {
        padding-top: 60px;
    }

    .pt-sm-70 {
        padding-top: 70px;
    }

    .pt-sm-80 {
        padding-top: 80px;
    }

    .pt-sm-90 {
        padding-top: 90px;
    }

    .pt-sm-100 {
        padding-top: 100px;
    }

    /* #end padding top region */

    /* #padding rigth region */
    .pr-sm-0 {
        padding-right: 0;
    }

    .pr-sm-10 {
        padding-right: 10px;
    }

    .pr-sm-15 {
        padding-right: 15px;
    }

    .pr-sm-20 {
        padding-right: 20px;
    }

    .pr-sm-30 {
        padding-right: 30px;
    }

    .pr-sm-40 {
        padding-right: 40px;
    }

    .pr-sm-50 {
        padding-right: 50px;
    }

    .pr-sm-60 {
        padding-right: 60px;
    }

    .pr-sm-70 {
        padding-right: 70px;
    }

    .pr-sm-80 {
        padding-right: 80px;
    }

    .pr-sm-90 {
        padding-right: 90px;
    }

    .pr-sm-100 {
        padding-right: 100px;
    }

    /* #end padding rigth region */

    /* #padding bottom region */
    .pb-sm-0 {
        padding-bottom: 0;
    }

    .pb-sm-10 {
        padding-bottom: 10px;
    }

    .pb-sm-15 {
        padding-bottom: 15px;
    }

    .pb-sm-20 {
        padding-bottom: 20px;
    }

    .pb-sm-30 {
        padding-bottom: 30px;
    }

    .pb-sm-40 {
        padding-bottom: 40px;
    }

    .pb-sm-50 {
        padding-bottom: 50px;
    }

    .pb-sm-60 {
        padding-bottom: 60px;
    }

    .pb-sm-70 {
        padding-bottom: 70px;
    }

    .pb-sm-80 {
        padding-bottom: 80px;
    }

    .pb-sm-90 {
        padding-bottom: 90px;
    }

    .pb-sm-100 {
        padding-bottom: 100px;
    }

    /* #end padding bottom region */

    /* #padding left region */
    .pl-sm-0 {
        padding-left: 0;
    }

    .pl-sm-10 {
        padding-left: 10px;
    }

    .pl-sm-20 {
        padding-left: 20px;
    }

    .pl-sm-30 {
        padding-left: 30px;
    }

    .pl-sm-40 {
        padding-left: 40px;
    }

    .pl-sm-50 {
        padding-left: 50px;
    }

    .pl-sm-60 {
        padding-left: 60px;
    }

    .pl-sm-70 {
        padding-left: 70px;
    }

    .pl-sm-80 {
        padding-left: 80px;
    }

    .pl-sm-90 {
        padding-left: 90px;
    }

    .pl-sm-100 {
        padding-left: 100px;
    }

    /* #end padding left region */

    /* #padding full region */
    .p-sm-0 {
        padding: 0;
    }

    .p-sm-10 {
        padding: 10px;
    }

    .p-sm-15 {
        padding: 15px;
    }

    .p-sm-20 {
        padding: 20px;
    }

    .p-sm-30 {
        padding: 30px;
    }

    .p-sm-40 {
        padding: 40px;
    }

    .p-sm-50 {
        padding: 50px;
    }

    .p-sm-60 {
        padding: 60px;
    }

    .p-sm-70 {
        padding: 70px;
    }

    .p-sm-80 {
        padding: 80px;
    }

    .p-sm-90 {
        padding: 90px;
    }

    .p-sm-100 {
        padding: 100px;
    }

    /* #padding full region */

    /* #padding axis y region */
    .py-sm-0 {
        padding-bottom: 0;
        padding-top: 0
    }

    .py-sm-10 {
        padding-bottom: 10px;
        padding-top: 10px
    }

    .py-sm-15 {
        padding-bottom: 15px;
        padding-top: 15px
    }

    .py-sm-20 {
        padding-bottom: 20px;
        padding-top: 20px
    }

    .py-sm-30 {
        padding-bottom: 30px;
        padding-top: 30px
    }

    .py-sm-40 {
        padding-bottom: 40px;
        padding-top: 40px
    }

    .py-sm-50 {
        padding-bottom: 50px;
        padding-top: 50px
    }

    .py-sm-60 {
        padding-bottom: 60px;
        padding-top: 60px
    }

    .py-sm-70 {
        padding-bottom: 70px;
        padding-top: 70px
    }

    .py-sm-80 {
        padding-bottom: 80px;
        padding-top: 80px
    }

    .py-sm-90 {
        padding-bottom: 90px;
        padding-top: 90px
    }

    .py-sm-100 {
        padding-bottom: 100px;
        padding-top: 100px
    }

    /* #end padding axis y region */

    /* #padding left region */
    .px-sm-0 {
        padding-left: 0;
        padding-right: 0;
    }

    .px-sm-10 {
        padding-left: 10px;
        padding-right: 10px;
    }

    .px-sm-15 {
        padding-left: 15px;
        padding-right: 15px;
    }

    .px-sm-20 {
        padding-left: 20px;
        padding-right: 20px;
    }

    .px-sm-30 {
        padding-left: 30px;
        padding-right: 30px;
    }

    .px-sm-40 {
        padding-left: 40px;
        padding-right: 40px;
    }

    .px-sm-50 {
        padding-left: 50px;
        padding-right: 50px;
    }

    .px-sm-60 {
        padding-left: 60px;
        padding-right: 60px;
    }

    .px-sm-70 {
        padding-left: 70px;
        padding-right: 70px;
    }

    .px-sm-80 {
        padding-left: 80px;
        padding-right: 80px;
    }

    .px-sm-90 {
        padding-left: 90px;
        padding-right: 90px;
    }

    .px-sm-100 {
        padding-left: 100px;
        padding-right: 100px;
    }

    /* #end padding left region */
    /* #endregion Paddings */

    /* #region Flex */
    .flex-sm-row {
        flex-direction: row;
    }

    .flex-sm-row-reverse {
        flex-direction: row-reverse;
    }

    .flex-sm-column {
        flex-direction: column;
    }

    .flex-sm-column-reverse {
        flex-direction: column-reverse;
        -ms-flex-direction: inherit;
        -ms-flex-wrap: wrap-reverse;
        -webkit-flex-direction: inherit;
        -webkit-flex-wrap: wrap-reverse
    }

    .flex-sm-self-start {
        align-self: flex-start;
    }

    .flex-sm-start {
        justify-content: flex-start;
        text-align: start;
    }

    .flex-sm-center {
        justify-content: center;
    }

    .flex-sm-evenly {
        justify-content: space-evenly;
    }

    .flex-sm-around {
        justify-content: space-around;
    }

    .flex-sm-end {
        justify-content: flex-end;
    }

    .flex-sm-top {
        align-items: top;
    }

    .flex-sm-middle {
        align-items: center;
    }

    .flex-sm-bottom {
        align-items: flex-end;
    }

    .flex-sm-between {
        justify-content: space-between;
    }

    .flex-sm-1 {
        flex: 1;
    }

    .flex-sm-wrap {
        flex-wrap: wrap;
        -ms-flex-wrap: wrap;
    }

    .flex-sm-grow-1 {
        flex-grow: 1;
    }

    .flex-sm-basis-0 {
        flex-basis: 0;
    }

    /* #endregion Flex */

    /* #region Displays */
    .d-sm-block {
        display: block;
    }

    .d-sm-flex {
        display: flex;
        display: -ms-flexbox;
    }

    .d-sm-flex-inline {
        display: inline-flex;
    }

    .d-sm-inline {
        display: inline;
    }

    .d-sm-inline-block {
        display: inline-block;
        vertical-align: top;
    }

    .d-sm-none {
        display: none;
    }

    .vertical-sm-top {
        vertical-align: top;
    }

    .vertical-sm-middle {
        vertical-align: middle;
        vertical-align: -webkit-baseline-middle;
    }

    .vertical-sm-bottom {
        vertical-align: bottom;
    }

    /* #endregion Displays */

    /* #region Positions */
    .relative-sm {
        position: relative;
    }

    .absolute-sm {
        position: absolute;
    }

    .fixed-sm {
        position: fixed;
    }

    .absolute-sm-h-center {
        left: 0;
        right: 0;
        margin: auto;
    }

    .absolute-sm-v-center {
        top: 0;
        bottom: 0;
        margin: auto;
    }

    /* Left */
    .pos-sm-left {
        left: 0;
        right: auto;
    }

    .left-sm-10 {
        left: 10%;
    }

    .left-sm-20 {
        left: 20%;
    }

    .left-sm-30 {
        left: 30%;
    }

    .left-sm-40 {
        left: 40%;
    }

    .left-sm-50 {
        left: 50%;
    }

    /* .Left */

    /* Right */
    .pos-sm-right {
        left: auto;
        right: 0;
    }

    .right-sm-10 {
        right: 10%;
    }

    .right-sm-20 {
        right: 20%;
    }

    .right-sm-30 {
        right: 30%;
    }

    .right-sm-40 {
        right: 40%;
    }

    .right-sm-50 {
        right: 50%;
    }

    /*. Right */

    /* Top */
    .pos-sm-top {
        top: 0;
        bottom: auto;
    }

    .top-sm-10 {
        top: 10%;
    }

    .top-sm-20 {
        top: 20%;
    }

    .top-sm-30 {
        top: 30%;
    }

    .top-sm-40 {
        top: 40%;
    }

    .top-sm-50 {
        top: 50%;
    }

    /* .Top */

    /* Bottom */
    .pos-sm-bottom {
        top: auto;
        bottom: 0;
    }

    .bottom-sm-10 {
        bottom: 10%;
    }

    .bottom-sm-20 {
        bottom: 20%;
    }

    .bottom-sm-30 {
        bottom: 30%;
    }

    .bottom-sm-40 {
        bottom: 40%;
    }

    .bottom-sm-50 {
        bottom: 50%;
    }

    /* .Bottom */
    /*  Vertical center */
    .vertical-sm-center {
        top: 0;
        bottom: 0;
        margin: auto;
    }

    /*  Vertical center */
    /* #endregion Positions */

    /* #region width and height*/
    .w-sm-10 {
        width: 10%;
    }

    .w-sm-20 {
        width: 20%;
    }

    .w-sm-25 {
        width: 25%;
    }

    .w-sm-30 {
        width: 30%;
    }

    .w-sm-33 {
        width: 33.333333%;
    }

    .w-sm-40 {
        width: 40%;
    }

    .w-sm-50 {
        width: 50%;
    }

    .w-sm-55 {
        width: 55%;
    }

    .w-sm-60 {
        width: 60%;
    }

    .w-sm-70 {
        width: 70%;
    }

    .w-sm-80 {
        width: 80%;
    }

    .w-sm-90 {
        width: 90%;
    }

    .w-sm-100 {
        width: 100%;
    }

    .h-sm-10 {
        height: 10%;
    }

    .h-sm-20 {
        height: 20%;
    }

    .h-sm-25 {
        height: 25%;
    }

    .h-sm-30 {
        height: 30%;
    }

    .h-sm-33 {
        height: 33.333333%;
    }

    .h-sm-40 {
        height: 40%;
    }

    .h-sm-50 {
        height: 50%;
    }

    .h-sm-60 {
        height: 60%;
    }

    .h-sm-70 {
        height: 70%;
    }

    .h-sm-80 {
        height: 80%;
    }

    .h-sm-90 {
        height: 90%;
    }

    .h-sm-100 {
        height: 100%;
    }

    /* #endregion width and height*/

    /* #region text alignment */
    .text-sm-justify {
        text-align: justify;
    }

    .text-sm-left {
        text-align: left;
    }

    .text-sm-center {
        text-align: center;
    }

    .text-sm-right {
        text-align: right;
    }

    .text-sm-nowrap {
        white-space: nowrap;
    }

    .text-sm-truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .text-sm-break {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* #endregion text alignment */

    /* #region Vertical alignment */
    .align-sm-baseline {
        vertical-align: baseline;
    }

    .align-sm-top {
        vertical-align: top;
    }

    .align-sm-middle {
        vertical-align: middle;
        vertical-align: -webkit-baseline-middle;
    }

    .align-sm-bottom {
        vertical-align: bottom;
    }

    .align-sm-text-top {
        vertical-align: text-top;
    }

    .align-sm-text-bottom {
        vertical-align: text-bottom;
    }

    /* #endregion Vertical alignment */

    /* #region columns */

    .col-sm-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .col-sm {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }

    .col-sm-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-sm-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-sm-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-sm-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-sm-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-sm-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-sm-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-sm-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-sm-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-sm-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-sm-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-sm-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* #endregion columns */

    /* #region containers */
    .container {
        max-width: 540px;
    }

    /* #endregion containers */

    /* #Container Blog Detail */
    .containerBlogDetail {
        max-width: 540px;
        margin-right: auto;
        margin-left: auto;
    }

    .containerBlogDetailMore {
        max-width: 511px;
        margin-right: auto;
        margin-left: auto;
    }
}

/*  Medium devices (tablets, 768px and up) (MD) */
@media (min-width: 768px) and (max-width: 991px) {

    /* #region fonts sizes */
    body {
        font-size: 16px;
        font-weight: 400;
        line-height: 22px !important;
    }

    h1 {
        font-size: 40px;
        font-weight: 500;
        line-height: normal;
    }

    h2 {
        font-size: 28px;
        font-weight: 400;
        line-height: normal;
    }

    h3 {
        font-size: 20px;
        font-weight: 500;
        line-height: normal;
    }

    button {
        font-size: 14px;
        font-weight: 500;
        line-height: normal;
    }

    .caption {
        font-size: 12px;
        font-weight: 500;
        line-height: normal;
        margin-block-start: 1em;
        margin-block-end: 1em;
    }

    /* #endregion fonts sizes */

    /* #region Margins */
    /* # general margin */
    .m-md-auto {
        margin: auto;
    }

    .m-md-0-auto {
        margin: 0 auto;
    }

    .m-md-initial {
        margin: initial;
    }

    /* #end general margin */

    /* # top margin */
    .mt-md-0 {
        margin-top: 0;
    }

    .mt-md-5 {
        margin-top: 5px;
    }

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

    .mt-md-15 {
        margin-top: 15px;
    }

    .mt-md-20 {
        margin-top: 20px;
    }

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

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

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

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

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

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

    .mt-md-90 {
        margin-top: 90px;
    }

    .mt-md-100 {
        margin-top: 100px;
    }

    .mt-md-150 {
        margin-top: 150px;
    }

    .mt-md-250 {
        margin-top: 250px;
    }

    /* # endtop margin */

    /* # rigth margin */

    .mr-md-0 {
        margin-right: 0;
    }

    .mr-md-5 {
        margin-right: 5px;
    }

    .mr-md-10 {
        margin-right: 10px;
    }

    .mr-md-20 {
        margin-right: 20px;
    }

    .mr-md-30 {
        margin-right: 30px;
    }

    .mr-md-40 {
        margin-right: 40px;
    }

    .mr-md-50 {
        margin-right: 50px;
    }

    .mr-md-60 {
        margin-right: 60px;
    }

    /* # end rigth margin */

    /* # bottom margin */
    .mb-md-0 {
        margin-bottom: 0;
    }

    .mb-md-5 {
        margin-bottom: 5px;
    }

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

    .mb-md-15 {
        margin-bottom: 15px;
    }

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

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

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

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

    .mb-md-60 {
        margin-bottom: 60px;
    }

    .mb-md-70 {
        margin-bottom: 70px;
    }

    .mb-md-80 {
        margin-bottom: 80px;
    }

    .mb-md-90 {
        margin-bottom: 90px;
    }

    .mb-md-100 {
        margin-bottom: 100px;
    }

    .mb-md-140 {
        margin-bottom: 140px;
    }

    .mb-md-150 {
        margin-bottom: 150px;
    }

    .mb-md-250 {
        margin-bottom: 250px;
    }

    /* # end bottom margin */

    /* # left  margin */
    .ml-md-0 {
        margin-left: 0;
    }

    .ml-md-5 {
        margin-left: 5px;
    }

    .ml-md-10 {
        margin-left: 10px;
    }

    .ml-md-20 {
        margin-left: 20px;
    }

    .ml-md-30 {
        margin-left: 30px;
    }

    .ml-md-40 {
        margin-left: 40px;
    }

    .ml-md-50 {
        margin-left: 50px;
    }

    .ml-md-60 {
        margin-left: 60px;
    }

    /* # end left margin */

    /* # full margin */
    .m-md-0 {
        margin: 0;
    }

    .m-md-5 {
        margin: 5px;
    }

    .m-md-10 {
        margin: 10px;
    }

    .m-md-20 {
        margin: 20px;
    }

    .m-md-30 {
        margin: 30px;
    }

    .m-md-40 {
        margin: 40px;
    }

    .m-md-50 {
        margin: 50px;
    }

    .m-md-60 {
        margin: 60px;
    }

    /* # full margin */

    /* margin axis y */
    .my-md-0 {
        margin-bottom: 0;
        margin-top: 0;
    }

    .my-md-5 {
        margin-bottom: 5px;
        margin-top: 5px;
    }

    .my-md-10 {
        margin-bottom: 10px;
        margin-top: 10px;
    }

    .my-md-15 {
        margin-bottom: 15px;
        margin-top: 15px;
    }

    .my-md-20 {
        margin-bottom: 20px;
        margin-top: 20px;
    }

    .my-md-30 {
        margin-bottom: 30px;
        margin-top: 30px;
    }

    .my-md-40 {
        margin-bottom: 40px;
        margin-top: 40px;
    }

    .my-md-50 {
        margin-bottom: 50px;
        margin-top: 50px;
    }

    .my-md-60 {
        margin-bottom: 60px;
        margin-top: 60px;
    }

    .my-md-70 {
        margin-bottom: 70px;
        margin-top: 70px;
    }

    .my-md-80 {
        margin-bottom: 80px;
        margin-top: 80px;
    }

    .my-md-90 {
        margin-bottom: 90px;
        margin-top: 90px;
    }

    .my-md-100 {
        margin-bottom: 100px;
        margin-top: 100px;
    }

    /* margin axis y */

    /* # margin axis x */
    .mx-md-0 {
        margin-left: 0;
        margin-right: 0;
    }

    .mx-md-5 {
        margin-left: 5px;
        margin-right: 5px;
    }

    .mx-md-10 {
        margin-left: 10px;
        margin-right: 10px;
    }

    .mx-md-20 {
        margin-left: 20px;
        margin-right: 20px;
    }

    .mx-md-30 {
        margin-left: 30px;
        margin-right: 30px;
    }

    .mx-md-40 {
        margin-left: 40px;
        margin-right: 40px;
    }

    .mx-md-50 {
        margin-left: 50px;
        margin-right: 50px;
    }

    .mx-md-60 {
        margin-left: 60px;
        margin-right: 60px;
    }

    /* # end margin axis x*/
    /* #endregion Margins */

    /* #region Paddings */
    /* #padding top region */
    .pt-md-0 {
        padding-top: 0;
    }

    .pt-md-10 {
        padding-top: 10px;
    }

    .pt-md-15 {
        padding-top: 15px;
    }

    .pt-md-20 {
        padding-top: 20px;
    }

    .pt-md-30 {
        padding-top: 30px;
    }

    .pt-md-40 {
        padding-top: 40px;
    }

    .pt-md-50 {
        padding-top: 50px;
    }

    .pt-md-60 {
        padding-top: 60px;
    }

    .pt-md-70 {
        padding-top: 70px;
    }

    .pt-md-80 {
        padding-top: 80px;
    }

    .pt-md-90 {
        padding-top: 90px;
    }

    .pt-md-100 {
        padding-top: 100px;
    }

    /* #end padding top region */

    /* #padding rigth region */
    .pr-md-0 {
        padding-right: 0;
    }

    .pr-md-10 {
        padding-right: 10px;
    }

    .pr-md-15 {
        padding-right: 15px;
    }

    .pr-md-20 {
        padding-right: 20px;
    }

    .pr-md-30 {
        padding-right: 30px;
    }

    .pr-md-40 {
        padding-right: 40px;
    }

    .pr-md-50 {
        padding-right: 50px;
    }

    .pr-md-60 {
        padding-right: 60px;
    }

    .pr-md-70 {
        padding-right: 70px;
    }

    .pr-md-80 {
        padding-right: 80px;
    }

    .pr-md-90 {
        padding-right: 90px;
    }

    .pr-md-100 {
        padding-right: 100px;
    }

    /* #end padding rigth region */

    /* #padding bottom region */
    .pb-md-0 {
        padding-bottom: 0;
    }

    .pb-md-10 {
        padding-bottom: 10px;
    }

    .pb-md-15 {
        padding-bottom: 15px;
    }

    .pb-md-20 {
        padding-bottom: 20px;
    }

    .pb-md-30 {
        padding-bottom: 30px;
    }

    .pb-md-40 {
        padding-bottom: 40px;
    }

    .pb-md-50 {
        padding-bottom: 50px;
    }

    .pb-md-60 {
        padding-bottom: 60px;
    }

    .pb-md-70 {
        padding-bottom: 70px;
    }

    .pb-md-80 {
        padding-bottom: 80px;
    }

    .pb-md-90 {
        padding-bottom: 90px;
    }

    .pb-md-100 {
        padding-bottom: 100px;
    }

    /* #end padding bottom region */

    /* #padding left region */
    .pl-md-0 {
        padding-left: 0;
    }

    .pl-md-10 {
        padding-left: 10px;
    }

    .pl-md-20 {
        padding-left: 20px;
    }

    .pl-md-30 {
        padding-left: 30px;
    }

    .pl-md-40 {
        padding-left: 40px;
    }

    .pl-md-50 {
        padding-left: 50px;
    }

    .pl-md-60 {
        padding-left: 60px;
    }

    .pl-md-70 {
        padding-left: 70px;
    }

    .pl-md-80 {
        padding-left: 80px;
    }

    .pl-md-90 {
        padding-left: 90px;
    }

    .pl-md-100 {
        padding-left: 100px;
    }

    /* #end padding left region */

    /* #padding full region */
    .p-md-0 {
        padding: 0;
    }

    .p-md-10 {
        padding: 10px;
    }

    .p-md-15 {
        padding: 15px;
    }

    .p-md-20 {
        padding: 20px;
    }

    .p-md-30 {
        padding: 30px;
    }

    .p-md-40 {
        padding: 40px;
    }

    .p-md-50 {
        padding: 50px;
    }

    .p-md-60 {
        padding: 60px;
    }

    .p-md-70 {
        padding: 70px;
    }

    .p-md-80 {
        padding: 80px;
    }

    .p-md-90 {
        padding: 90px;
    }

    .p-md-100 {
        padding: 100px;
    }

    /* #padding full region */

    /* #padding axis y region */
    .py-md-0 {
        padding-bottom: 0;
        padding-top: 0
    }

    .py-md-10 {
        padding-bottom: 10px;
        padding-top: 10px
    }

    .py-md-15 {
        padding-bottom: 15px;
        padding-top: 15px
    }

    .py-md-20 {
        padding-bottom: 20px;
        padding-top: 20px
    }

    .py-md-30 {
        padding-bottom: 30px;
        padding-top: 30px
    }

    .py-md-40 {
        padding-bottom: 40px;
        padding-top: 40px
    }

    .py-md-50 {
        padding-bottom: 50px;
        padding-top: 50px
    }

    .py-md-60 {
        padding-bottom: 60px;
        padding-top: 60px
    }

    .py-md-70 {
        padding-bottom: 70px;
        padding-top: 70px
    }

    .py-md-80 {
        padding-bottom: 80px;
        padding-top: 80px
    }

    .py-md-90 {
        padding-bottom: 90px;
        padding-top: 90px
    }

    .py-md-100 {
        padding-bottom: 100px;
        padding-top: 100px
    }

    /* #end padding axis y region */

    /* #padding left region */
    .px-md-0 {
        padding-left: 0;
        padding-right: 0;
    }

    .px-md-10 {
        padding-left: 10px;
        padding-right: 10px;
    }

    .px-md-15 {
        padding-left: 15px;
        padding-right: 15px;
    }

    .px-md-20 {
        padding-left: 20px;
        padding-right: 20px;
    }

    .px-md-30 {
        padding-left: 30px;
        padding-right: 30px;
    }

    .px-md-40 {
        padding-left: 40px;
        padding-right: 40px;
    }

    .px-md-50 {
        padding-left: 50px;
        padding-right: 50px;
    }

    .px-md-60 {
        padding-left: 60px;
        padding-right: 60px;
    }

    .px-md-70 {
        padding-left: 70px;
        padding-right: 70px;
    }

    .px-md-80 {
        padding-left: 80px;
        padding-right: 80px;
    }

    .px-md-90 {
        padding-left: 90px;
        padding-right: 90px;
    }

    .px-md-100 {
        padding-left: 100px;
        padding-right: 100px;
    }

    /* #end padding left region */
    /* #endregion Paddings */

    /* #region Flex */
    .flex-md-row {
        flex-direction: row;
    }

    .flex-md-row-reverse {
        flex-direction: row-reverse;
    }

    .flex-md-column {
        flex-direction: column;
    }

    .flex-md-column-reverse {
        flex-direction: column-reverse;
        -ms-flex-direction: inherit;
        -ms-flex-wrap: wrap-reverse;
        -webkit-flex-direction: inherit;
        -webkit-flex-wrap: wrap-reverse
    }

    .flex-md-self-start {
        align-self: flex-start;
    }

    .flex-md-start {
        justify-content: flex-start;
        text-align: start;
    }

    .flex-md-center {
        justify-content: center;
    }

    .flex-md-evenly {
        justify-content: space-evenly;
    }

    .flex-md-around {
        justify-content: space-around;
    }

    .flex-md-end {
        justify-content: flex-end;
    }

    .flex-md-top {
        align-items: top;
    }

    .flex-md-middle {
        align-items: center;
    }

    .flex-md-bottom {
        align-items: flex-end;
    }

    .flex-md-between {
        justify-content: space-between;
    }

    .flex-md-1 {
        flex: 1;
    }

    .flex-md-wrap {
        flex-wrap: wrap;
        -ms-flex-wrap: wrap;
    }

    .flex-md-grow-1 {
        flex-grow: 1;
    }

    .flex-md-basis-0 {
        flex-basis: 0;
    }

    /* #endregion Flex */

    /* #region Displays */
    .d-md-block {
        display: block;
    }

    .d-md-flex {
        display: flex;
        display: -ms-flexbox;
    }

    .d-md-flex-inline {
        display: inline-flex;
    }

    .d-md-inline {
        display: inline;
    }

    .d-md-inline-block {
        display: inline-block;
        vertical-align: top;
    }

    .d-md-none {
        display: none;
    }

    .vertical-md-top {
        vertical-align: top;
    }

    .vertical-md-middle {
        vertical-align: middle;
        vertical-align: -webkit-baseline-middle;
    }

    .vertical-md-bottom {
        vertical-align: bottom;
    }

    /* #endregion Displays */

    /* #region Positions */
    .relative-md {
        position: relative;
    }

    .absolute-md {
        position: absolute;
    }

    .fixed-md {
        position: fixed;
    }

    .absolute-md-h-center {
        left: 0;
        right: 0;
        margin: auto;
    }

    .absolute-md-v-center {
        top: 0;
        bottom: 0;
        margin: auto;
    }

    /* Left */
    .pos-md-left {
        left: 0;
        right: auto;
    }

    .left-md-10 {
        left: 10%;
    }

    .left-md-20 {
        left: 20%;
    }

    .left-md-30 {
        left: 30%;
    }

    .left-md-40 {
        left: 40%;
    }

    .left-md-50 {
        left: 50%;
    }

    /* .Left */

    /* Right */
    .pos-md-right {
        left: auto;
        right: 0;
    }

    .right-md-10 {
        right: 10%;
    }

    .right-md-20 {
        right: 20%;
    }

    .right-md-30 {
        right: 30%;
    }

    .right-md-40 {
        right: 40%;
    }

    .right-md-50 {
        right: 50%;
    }

    /*. Right */

    /* Top */
    .pos-md-top {
        top: 0;
        bottom: auto;
    }

    .top-md-10 {
        top: 10%;
    }

    .top-md-20 {
        top: 20%;
    }

    .top-md-30 {
        top: 30%;
    }

    .top-md-40 {
        top: 40%;
    }

    .top-md-50 {
        top: 50%;
    }

    /* .Top */

    /* Bottom */
    .pos-md-bottom {
        top: auto;
        bottom: 0;
    }

    .bottom-md-10 {
        bottom: 10%;
    }

    .bottom-md-20 {
        bottom: 20%;
    }

    .bottom-md-30 {
        bottom: 30%;
    }

    .bottom-md-40 {
        bottom: 40%;
    }

    .bottom-md-50 {
        bottom: 50%;
    }

    /* .Bottom */

    /*  Vertical center */
    .vertical-md-center {
        top: 0;
        bottom: 0;
        margin: auto;
    }

    /*  Vertical center */
    /* #endregion Positions */

    /* #region width and height*/
    .w-md-10 {
        width: 10%;
    }

    .w-md-20 {
        width: 20%;
    }

    .w-md-25 {
        width: 25%;
    }

    .w-md-30 {
        width: 30%;
    }

    .w-md-33 {
        width: 33.333333%;
    }

    .w-md-40 {
        width: 40%;
    }

    .w-md-50 {
        width: 50%;
    }

    .w-md-60 {
        width: 60%;
    }

    .w-md-70 {
        width: 70%;
    }

    .w-md-80 {
        width: 80%;
    }

    .w-md-90 {
        width: 90%;
    }

    .w-md-100 {
        width: 100%;
    }

    .h-md-10 {
        height: 10%;
    }

    .h-md-20 {
        height: 20%;
    }

    .h-md-25 {
        height: 25%;
    }

    .h-md-30 {
        height: 30%;
    }

    .h-md-33 {
        height: 33.333333%;
    }

    .h-md-40 {
        height: 40%;
    }

    .h-md-50 {
        height: 50%;
    }

    .h-md-60 {
        height: 60%;
    }

    .h-md-70 {
        height: 70%;
    }

    .h-md-80 {
        height: 80%;
    }

    .h-md-90 {
        height: 90%;
    }

    .h-md-100 {
        height: 100%;
    }

    /* #endregion width and height*/

    /* #region text alignment */
    .text-md-justify {
        text-align: justify;
    }

    .text-md-left {
        text-align: left;
    }

    .text-md-center {
        text-align: center;
    }

    .text-md-right {
        text-align: right;
    }

    .text-md-nowrap {
        white-space: nowrap;
    }

    .text-md-truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .text-md-break {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* #endregion text alignment */

    /* #region Vertical alignment */
    .align-md-baseline {
        vertical-align: baseline;
    }

    .align-md-top {
        vertical-align: top;
    }

    .align-md-middle {
        vertical-align: middle;
        vertical-align: -webkit-baseline-middle;
    }

    .align-md-bottom {
        vertical-align: bottom;
    }

    .align-md-text-top {
        vertical-align: text-top;
    }

    .align-md-text-bottom {
        vertical-align: text-bottom;
    }

    /* #endregion Vertical alignment */

    /* #region columns */

    .col-md-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .col-md {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }

    .col-md-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-md-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-md-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-md-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-md-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-md-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-md-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-md-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-md-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-md-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-md-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-md-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* #endregion columns */

    /* #region containers */
    .container {
        max-width: 720px;
    }

    /* #endregion containers */

    /* #Container Blog Detail */
    .containerBlogDetail {
        max-width: 720px;
        margin-right: auto;
        margin-left: auto;
    }

    .containerBlogDetailMore {
        max-width: 692px;
        margin-right: auto;
        margin-left: auto;
    }

}

@media (max-width: 813px) and (orientation: landscape) {
    .d-xs-none {
        display: none;
    }

    .mb-xs-70 {
        margin-bottom: 70px;
    }
}

/*  Large devices (desktops, 992px and up) (Lg) */
@media (min-width: 992px) and (max-width: 1199px) {

    /* #region Margins */
    /* # general margin */
    .m-lg-auto {
        margin: auto;
    }

    .m-lg-0-auto {
        margin: 0 auto;
    }

    .m-lg-initial {
        margin: initial;
    }

    /* #end general margin */

    /* # top margin */
    .mt-lg-0 {
        margin-top: 0;
    }

    .mt-lg-5 {
        margin-top: 5px;
    }

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

    .mt-lg-15 {
        margin-top: 15px;
    }

    .mt-lg-20 {
        margin-top: 20px;
    }

    .mt-lg-25 {
        margin-top: 25px;
    }

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

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

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

    .mt-lg-55 {
        margin-top: 55px;
    }

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

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

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

    .mt-lg-90 {
        margin-top: 90px;
    }

    .mt-lg-100 {
        margin-top: 100px;
    }

    .mt-lg-150 {
        margin-top: 150px;
    }

    .mt-lg-250 {
        margin-top: 250px;
    }

    /* # endtop margin */

    /* # rigth margin */

    .mr-lg-0 {
        margin-right: 0;
    }

    .mr-lg-5 {
        margin-right: 5px;
    }

    .mr-lg-10 {
        margin-right: 10px;
    }

    .mr-lg-20 {
        margin-right: 20px;
    }

    .mr-lg-30 {
        margin-right: 30px;
    }

    .mr-lg-40 {
        margin-right: 40px;
    }

    .mr-lg-50 {
        margin-right: 50px;
    }

    .mr-lg-60 {
        margin-right: 60px;
    }

    /* # end rigth margin */

    /* # bottom margin */
    .mb-lg-0 {
        margin-bottom: 0;
    }

    .mb-lg-5 {
        margin-bottom: 5px;
    }

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

    .mb-lg-15 {
        margin-bottom: 15px;
    }

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

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

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

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

    .mb-lg-60 {
        margin-bottom: 60px;
    }

    .mb-lg-70 {
        margin-bottom: 70px;
    }

    .mb-lg-80 {
        margin-bottom: 80px;
    }

    .mb-lg-90 {
        margin-bottom: 90px;
    }

    .mb-lg-100 {
        margin-bottom: 100px;
    }

    .mb-lg-130 {
        margin-bottom: 130px;
    }

    .mb-lg-140 {
        margin-bottom: 140px;
    }

    .mb-lg-150 {
        margin-bottom: 150px;
    }

    .mb-lg-250 {
        margin-bottom: 250px;
    }

    /* # end bottom margin */

    /* # left  margin */
    .ml-lg-0 {
        margin-left: 0;
    }

    .ml-lg-5 {
        margin-left: 5px;
    }

    .ml-lg-10 {
        margin-left: 10px;
    }

    .ml-lg-20 {
        margin-left: 20px;
    }

    .ml-lg-30 {
        margin-left: 30px;
    }

    .ml-lg-40 {
        margin-left: 40px;
    }

    .ml-lg-50 {
        margin-left: 50px;
    }

    .ml-lg-60 {
        margin-left: 60px;
    }

    /* # end left margin */

    /* # full margin */
    .m-lg-0 {
        margin: 0;
    }

    .m-lg-5 {
        margin: 5px;
    }

    .m-lg-10 {
        margin: 10px;
    }

    .m-lg-20 {
        margin: 20px;
    }

    .m-lg-30 {
        margin: 30px;
    }

    .m-lg-40 {
        margin: 40px;
    }

    .m-lg-50 {
        margin: 50px;
    }

    .m-lg-60 {
        margin: 60px;
    }

    /* # full margin */

    /* margin axis y */
    .my-lg-0 {
        margin-bottom: 0;
        margin-top: 0;
    }

    .my-lg-5 {
        margin-bottom: 5px;
        margin-top: 5px;
    }

    .my-lg-10 {
        margin-bottom: 10px;
        margin-top: 10px;
    }

    .my-lg-15 {
        margin-bottom: 15px;
        margin-top: 15px;
    }

    .my-lg-20 {
        margin-bottom: 20px;
        margin-top: 20px;
    }

    .my-lg-30 {
        margin-bottom: 30px;
        margin-top: 30px;
    }

    .my-lg-40 {
        margin-bottom: 40px;
        margin-top: 40px;
    }

    .my-lg-50 {
        margin-bottom: 50px;
        margin-top: 50px;
    }

    .my-lg-60 {
        margin-bottom: 60px;
        margin-top: 60px;
    }

    .my-lg-70 {
        margin-bottom: 70px;
        margin-top: 70px;
    }

    .my-lg-80 {
        margin-bottom: 80px;
        margin-top: 80px;
    }

    .my-lg-90 {
        margin-bottom: 90px;
        margin-top: 90px;
    }

    .my-lg-100 {
        margin-bottom: 100px;
        margin-top: 100px;
    }

    /* margin axis y */

    /* # margin axis x */
    .mx-lg-0 {
        margin-left: 0;
        margin-right: 0;
    }

    .mx-lg-5 {
        margin-left: 5px;
        margin-right: 5px;
    }

    .mx-lg-10 {
        margin-left: 10px;
        margin-right: 10px;
    }

    .mx-lg-20 {
        margin-left: 20px;
        margin-right: 20px;
    }

    .mx-lg-30 {
        margin-left: 30px;
        margin-right: 30px;
    }

    .mx-lg-40 {
        margin-left: 40px;
        margin-right: 40px;
    }

    .mx-lg-50 {
        margin-left: 50px;
        margin-right: 50px;
    }

    .mx-lg-60 {
        margin-left: 60px;
        margin-right: 60px;
    }

    /* # end margin axis x*/
    /* #endregion Margins */

    /* #region Paddings */
    /* #padding top region */
    .pt-lg-0 {
        padding-top: 0;
    }

    .pt-lg-10 {
        padding-top: 10px;
    }

    .pt-lg-15 {
        padding-top: 15px;
    }

    .pt-lg-20 {
        padding-top: 20px;
    }

    .pt-lg-30 {
        padding-top: 30px;
    }

    .pt-lg-40 {
        padding-top: 40px;
    }

    .pt-lg-50 {
        padding-top: 50px;
    }

    .pt-lg-55 {
        padding-top: 50px;
    }

    .pt-lg-60 {
        padding-top: 60px;
    }

    .pt-lg-70 {
        padding-top: 70px;
    }

    .pt-lg-80 {
        padding-top: 80px;
    }

    .pt-lg-90 {
        padding-top: 90px;
    }

    .pt-lg-100 {
        padding-top: 100px;
    }

    .pt-lg-110 {
        padding-top: 100px;
    }

    .pt-lg-120 {
        padding-top: 120px;
    }

    /* #end padding top region */

    /* #padding rigth region */
    .pr-lg-0 {
        padding-right: 0;
    }

    .pr-lg-10 {
        padding-right: 10px;
    }

    .pr-lg-15 {
        padding-right: 15px;
    }

    .pr-lg-20 {
        padding-right: 20px;
    }

    .pr-lg-30 {
        padding-right: 30px;
    }

    .pr-lg-40 {
        padding-right: 40px;
    }

    .pr-lg-50 {
        padding-right: 50px;
    }

    .pr-lg-60 {
        padding-right: 60px;
    }

    .pr-lg-70 {
        padding-right: 70px;
    }

    .pr-lg-80 {
        padding-right: 80px;
    }

    .pr-lg-90 {
        padding-right: 90px;
    }

    .pr-lg-100 {
        padding-right: 100px;
    }

    /* #end padding rigth region */

    /* #padding bottom region */
    .pb-lg-0 {
        padding-bottom: 0;
    }

    .pb-lg-10 {
        padding-bottom: 10px;
    }

    .pb-lg-15 {
        padding-bottom: 15px;
    }

    .pb-lg-20 {
        padding-bottom: 20px;
    }

    .pb-lg-30 {
        padding-bottom: 30px;
    }

    .pb-lg-40 {
        padding-bottom: 40px;
    }

    .pb-lg-50 {
        padding-bottom: 50px;
    }

    .pb-lg-60 {
        padding-bottom: 60px;
    }

    .pb-lg-70 {
        padding-bottom: 70px;
    }

    .pb-lg-80 {
        padding-bottom: 80px;
    }

    .pb-lg-90 {
        padding-bottom: 90px;
    }

    .pb-lg-100 {
        padding-bottom: 100px;
    }

    .pb-lg-110 {
        padding-bottom: 110px;
    }

    .pb-lg-130 {
        padding-bottom: 130px;
    }

    /* #end padding bottom region */

    /* #padding left region */
    .pl-lg-0 {
        padding-left: 0;
    }

    .pl-lg-10 {
        padding-left: 10px;
    }

    .pl-lg-20 {
        padding-left: 20px;
    }

    .pl-lg-30 {
        padding-left: 30px;
    }

    .pl-lg-40 {
        padding-left: 40px;
    }

    .pl-lg-50 {
        padding-left: 50px;
    }

    .pl-lg-60 {
        padding-left: 60px;
    }

    .pl-lg-70 {
        padding-left: 70px;
    }

    .pl-lg-80 {
        padding-left: 80px;
    }

    .pl-lg-90 {
        padding-left: 90px;
    }

    .pl-lg-100 {
        padding-left: 100px;
    }

    /* #end padding left region */

    /* #padding full region */
    .p-lg-0 {
        padding: 0;
    }

    .p-lg-10 {
        padding: 10px;
    }

    .p-lg-15 {
        padding: 15px;
    }

    .p-lg-20 {
        padding: 20px;
    }

    .p-lg-30 {
        padding: 30px;
    }

    .p-lg-40 {
        padding: 40px;
    }

    .p-lg-50 {
        padding: 50px;
    }

    .p-lg-60 {
        padding: 60px;
    }

    .p-lg-70 {
        padding: 70px;
    }

    .p-lg-80 {
        padding: 80px;
    }

    .p-lg-90 {
        padding: 90px;
    }

    .p-lg-100 {
        padding: 100px;
    }

    /* #padding full region */

    /* #padding axis y region */
    .py-lg-0 {
        padding-bottom: 0;
        padding-top: 0
    }

    .py-lg-10 {
        padding-bottom: 10px;
        padding-top: 10px
    }

    .py-lg-15 {
        padding-bottom: 15px;
        padding-top: 15px
    }

    .py-lg-20 {
        padding-bottom: 20px;
        padding-top: 20px
    }

    .py-lg-30 {
        padding-bottom: 30px;
        padding-top: 30px
    }

    .py-lg-40 {
        padding-bottom: 40px;
        padding-top: 40px
    }

    .py-lg-50 {
        padding-bottom: 50px;
        padding-top: 50px
    }

    .py-lg-60 {
        padding-bottom: 60px;
        padding-top: 60px
    }

    .py-lg-70 {
        padding-bottom: 70px;
        padding-top: 70px
    }

    .py-lg-80 {
        padding-bottom: 80px;
        padding-top: 80px
    }

    .py-lg-90 {
        padding-bottom: 90px;
        padding-top: 90px
    }

    .py-lg-100 {
        padding-bottom: 100px;
        padding-top: 100px
    }

    /* #end padding axis y region */

    /* #padding left region */
    .px-lg-0 {
        padding-left: 0;
        padding-right: 0;
    }

    .px-lg-10 {
        padding-left: 10px;
        padding-right: 10px;
    }

    .px-lg-15 {
        padding-left: 15px;
        padding-right: 15px;
    }

    .px-lg-20 {
        padding-left: 20px;
        padding-right: 20px;
    }

    .px-lg-30 {
        padding-left: 30px;
        padding-right: 30px;
    }

    .px-lg-40 {
        padding-left: 40px;
        padding-right: 40px;
    }

    .px-lg-50 {
        padding-left: 50px;
        padding-right: 50px;
    }

    .px-lg-60 {
        padding-left: 60px;
        padding-right: 60px;
    }

    .px-lg-70 {
        padding-left: 70px;
        padding-right: 70px;
    }

    .px-lg-80 {
        padding-left: 80px;
        padding-right: 80px;
    }

    .px-lg-90 {
        padding-left: 90px;
        padding-right: 90px;
    }

    .px-lg-100 {
        padding-left: 100px;
        padding-right: 100px;
    }

    /* #end padding left region */
    /* #endregion Paddings */

    /* #region Flex */
    .flex-lg-row {
        flex-direction: row;
    }

    .flex-lg-row-reverse {
        flex-direction: row-reverse;
    }

    .flex-lg-column {
        flex-direction: column;
    }

    .flex-lg-column-reverse {
        flex-direction: column-reverse;
        -ms-flex-direction: inherit;
        -ms-flex-wrap: wrap-reverse;
        -webkit-flex-direction: inherit;
        -webkit-flex-wrap: wrap-reverse
    }

    .flex-lg-self-start {
        align-self: flex-start;
    }

    .flex-lg-start {
        justify-content: flex-start;
        text-align: start;
    }

    .flex-lg-center {
        justify-content: center;
    }

    .flex-lg-evenly {
        justify-content: space-evenly;
    }

    .flex-lg-around {
        justify-content: space-around;
    }

    .flex-lg-end {
        justify-content: flex-end;
    }

    .flex-lg-top {
        align-items: top;
    }

    .flex-lg-middle {
        align-items: center;
    }

    .flex-lg-bottom {
        align-items: flex-end;
    }

    .flex-lg-between {
        justify-content: space-between;
    }

    .flex-lg-1 {
        flex: 1;
    }

    .flex-lg-wrap {
        flex-wrap: wrap;
        -ms-flex-wrap: wrap;
    }

    .flex-lg-grow-1 {
        flex-grow: 1;
    }

    .flex-lg-basis-0 {
        flex-basis: 0;
    }

    /* #endregion Flex */

    /* #region Displays */
    .d-lg-block {
        display: block;
    }

    .d-lg-flex {
        display: flex;
        display: -ms-flexbox;
    }

    .d-lg-flex-inline {
        display: inline-flex;
    }

    .d-lg-inline {
        display: inline;
    }

    .d-lg-inline-block {
        display: inline-block;
        vertical-align: top;
    }

    .d-lg-none {
        display: none;
    }

    .vertical-lg-top {
        vertical-align: top;
    }

    .vertical-lg-middle {
        vertical-align: middle;
        vertical-align: -webkit-baseline-middle;
    }

    .vertical-lg-bottom {
        vertical-align: bottom;
    }

    /* #endregion Displays */

    /* #region Positions */
    .relative-lg {
        position: relative;
    }

    .absolute-lg {
        position: absolute;
    }

    .fixed-lg {
        position: fixed;
    }

    .absolute-lg-h-center {
        left: 0;
        right: 0;
        margin: auto;
    }

    .absolute-lg-v-center {
        top: 0;
        bottom: 0;
        margin: auto;
    }

    /* Left */
    .pos-lg-left {
        left: 0;
        right: auto;
    }

    .left-lg-10 {
        left: 10%;
    }

    .left-lg-20 {
        left: 20%;
    }

    .left-lg-30 {
        left: 30%;
    }

    .left-lg-40 {
        left: 40%;
    }

    .left-lg-50 {
        left: 50%;
    }

    /* .Left */

    /* Right */
    .pos-lg-right {
        left: auto;
        right: 0;
    }

    .right-lg-10 {
        right: 10%;
    }

    .right-lg-20 {
        right: 20%;
    }

    .right-lg-30 {
        right: 30%;
    }

    .right-lg-40 {
        right: 40%;
    }

    .right-lg-50 {
        right: 50%;
    }

    /*. Right */

    /* Top */
    .pos-lg-top {
        top: 0;
        bottom: auto;
    }

    .top-lg-10 {
        top: 10%;
    }

    .top-lg-20 {
        top: 20%;
    }

    .top-lg-30 {
        top: 30%;
    }

    .top-lg-40 {
        top: 40%;
    }

    .top-lg-50 {
        top: 50%;
    }

    /* .Top */

    /* Bottom */
    .pos-lg-bottom {
        top: auto;
        bottom: 0;
    }

    .bottom-lg-10 {
        bottom: 10%;
    }

    .bottom-lg-20 {
        bottom: 20%;
    }

    .bottom-lg-30 {
        bottom: 30%;
    }

    .bottom-lg-40 {
        bottom: 40%;
    }

    .bottom-lg-50 {
        bottom: 50%;
    }

    /* .Bottom */

    /*  Vertical center */
    .vertical-lg-center {
        top: 0;
        bottom: 0;
        margin: auto;
    }

    /*  Vertical center */
    /* #endregion Positions */

    /* #region width and height*/
    .w-lg-10 {
        width: 10%;
    }

    .w-lg-20 {
        width: 20%;
    }

    .w-lg-25 {
        width: 25%;
    }

    .w-lg-30 {
        width: 30%;
    }

    .w-lg-33 {
        width: 33.333333%;
    }

    .w-lg-40 {
        width: 40%;
    }

    .w-lg-50 {
        width: 50%;
    }

    .w-lg-60 {
        width: 60%;
    }

    .w-lg-70 {
        width: 70%;
    }

    .w-lg-80 {
        width: 80%;
    }

    .w-lg-90 {
        width: 90%;
    }

    .w-lg-100 {
        width: 100%;
    }

    .h-lg-10 {
        height: 10%;
    }

    .h-lg-20 {
        height: 20%;
    }

    .h-lg-25 {
        height: 25%;
    }

    .h-lg-30 {
        height: 30%;
    }

    .h-lg-33 {
        height: 33.333333%;
    }

    .h-lg-40 {
        height: 40%;
    }

    .h-lg-50 {
        height: 50%;
    }

    .h-lg-60 {
        height: 60%;
    }

    .h-lg-70 {
        height: 70%;
    }

    .h-lg-80 {
        height: 80%;
    }

    .h-lg-90 {
        height: 90%;
    }

    .h-lg-100 {
        height: 100%;
    }

    /* #endregion width and height */

    /* #region text alignment */
    .text-lg-justify {
        text-align: justify;
    }

    .text-lg-left {
        text-align: left;
    }

    .text-lg-center {
        text-align: center;
    }

    .text-lg-right {
        text-align: right;
    }

    .text-lg-nowrap {
        white-space: nowrap;
    }

    .text-lg-truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .text-lg-break {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* #endregion text alignment */

    /* #region Vertical alignment */
    .align-lg-baseline {
        vertical-align: baseline;
    }

    .align-lg-top {
        vertical-align: top;
    }

    .align-lg-middle {
        vertical-align: middle;
        vertical-align: -webkit-baseline-middle;
    }

    .align-lg-bottom {
        vertical-align: bottom;
    }

    .align-lg-text-top {
        vertical-align: text-top;
    }

    .align-lg-text-bottom {
        vertical-align: text-bottom;
    }

    /* #endregion Vertical alignment */

    /* #region columns */

    .col-lg-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .col-lg {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }

    .col-lg-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-lg-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-lg-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-lg-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-lg-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-lg-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-lg-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-lg-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-lg-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-lg-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-lg-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-lg-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* #endregion columns */

    /* #region containers */
    .container {
        max-width: 960px;
    }

    /* #endregion containers */

    /* #Container Blog Detail */
    .containerBlogDetail {
        max-width: 702px;
        margin-right: auto;
        margin-left: auto;
    }

    .containerBlogDetailMore {
        max-width: 760px;
        margin-right: auto;
        margin-left: auto;
    }

    /* #endContainer Blog Detail */
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

    /* #region Margins */
    /* # general margin */
    .m-auto {
        margin: auto;
    }

    .m-0-auto {
        margin: 0 auto;
    }

    .m-initial {
        margin: initial;
    }

    /* #end general margin */

    /* # top margin */
    .mt-0 {
        margin-top: 0;
    }

    .mt-5 {
        margin-top: 5px;
    }

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

    .mt-15 {
        margin-top: 15px;
    }

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

    .mt-25 {
        margin-top: 25px;
    }

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

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

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

    .mt-55 {
        margin-top: 55px;
    }

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

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

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

    .mt-90 {
        margin-top: 90px;
    }

    .mt-100 {
        margin-top: 100px;
    }

    .mt-150 {
        margin-top: 150px;
    }

    .mt-250 {
        margin-top: 250px;
    }

    /* # endtop margin */

    /* # rigth margin */

    .mr-0 {
        margin-right: 0;
    }

    .mr-5 {
        margin-right: 5px;
    }

    .mr-10 {
        margin-right: 10px;
    }

    .mr-20 {
        margin-right: 20px;
    }

    .mr-30 {
        margin-right: 30px;
    }

    .mr-40 {
        margin-right: 40px;
    }

    .mr-50 {
        margin-right: 50px;
    }

    .mr-60 {
        margin-right: 60px;
    }

    /* # end rigth margin */

    /* # bottom margin */
    .mb-0 {
        margin-bottom: 0;
    }

    .mb-5 {
        margin-bottom: 5px;
    }

    .mb-8 {
        margin-bottom: 8px;
    }

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

    .mb-15 {
        margin-bottom: 15px;
    }

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

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

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

    .mb-42 {
        margin-bottom: 42px;
    }

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

    .mb-60 {
        margin-bottom: 60px;
    }

    .mb-70 {
        margin-bottom: 70px;
    }

    .mb-80 {
        margin-bottom: 80px;
    }

    .mb-90 {
        margin-bottom: 90px;
    }

    .mb-100 {
        margin-bottom: 100px;
    }

    .mb-130 {
        margin-bottom: 130px;
    }

    .mb-150 {
        margin-bottom: 150px;
    }

    .mb-250 {
        margin-bottom: 250px;
    }

    /* # end bottom margin */

    /* # left  margin */
    .ml-0 {
        margin-left: 0;
    }

    .ml-5 {
        margin-left: 5px;
    }

    .ml-10 {
        margin-left: 10px;
    }

    .ml-20 {
        margin-left: 20px;
    }

    .ml-30 {
        margin-left: 30px;
    }

    .ml-40 {
        margin-left: 40px;
    }

    .ml-50 {
        margin-left: 50px;
    }

    .ml-60 {
        margin-left: 60px;
    }

    /* # end left margin */

    /* # full margin */
    .m-0 {
        margin: 0;
    }

    .m-5 {
        margin: 5px;
    }

    .m-10 {
        margin: 10px;
    }

    .m-20 {
        margin: 20px;
    }

    .m-30 {
        margin: 30px;
    }

    .m-40 {
        margin: 40px;
    }

    .m-50 {
        margin: 50px;
    }

    .m-60 {
        margin: 60px;
    }

    /* # full margin */

    /* margin axis y */
    .my-0 {
        margin-bottom: 0;
        margin-top: 0;
    }

    .my-5 {
        margin-bottom: 5px;
        margin-top: 5px;
    }

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

    .my-15 {
        margin-bottom: 15px;
        margin-top: 15px;
    }

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

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

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

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

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

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

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

    .my-90 {
        margin-bottom: 90px;
        margin-top: 90px;
    }

    .my-100 {
        margin-bottom: 100px;
        margin-top: 100px;
    }

    /* margin axis y */

    /* # margin axis x */
    .mx-0 {
        margin-left: 0;
        margin-right: 0;
    }

    .mx-5 {
        margin-left: 5px;
        margin-right: 5px;
    }

    .mx-10 {
        margin-left: 10px;
        margin-right: 10px;
    }

    .mx-20 {
        margin-left: 20px;
        margin-right: 20px;
    }

    .mx-30 {
        margin-left: 30px;
        margin-right: 30px;
    }

    .mx-40 {
        margin-left: 40px;
        margin-right: 40px;
    }

    .mx-50 {
        margin-left: 50px;
        margin-right: 50px;
    }

    .mx-60 {
        margin-left: 60px;
        margin-right: 60px;
    }

    /* # end margin axis x*/
    /* #endregion Margins */

    /* #region Paddings */
    /* #padding top region */
    .pt-0 {
        padding-top: 0;
    }

    .pt-10 {
        padding-top: 10px;
    }

    .pt-15 {
        padding-top: 15px;
    }

    .pt-20 {
        padding-top: 20px;
    }

    .pt-30 {
        padding-top: 30px;
    }

    .pt-33 {
        padding-top: 33px;
    }

    .pt-40 {
        padding-top: 40px;
    }

    .pt-50 {
        padding-top: 50px;
    }

    .pt-55 {
        padding-top: 55px;
    }

    .pt-60 {
        padding-top: 60px;
    }

    .pt-70 {
        padding-top: 70px;
    }

    .pt-80 {
        padding-top: 80px;
    }

    .pt-90 {
        padding-top: 90px;
    }

    .pt-100 {
        padding-top: 100px;
    }

    .pt-110 {
        padding-top: 110px;
    }

    .pt-120 {
        padding-top: 120px;
    }

    .pt-140 {
        padding-top: 140px;
    }

    /* #end padding top region */

    /* #padding rigth region */
    .pr-0 {
        padding-right: 0;
    }

    .pr-10 {
        padding-right: 10px;
    }

    .pr-15 {
        padding-right: 15px;
    }

    .pr-20 {
        padding-right: 20px;
    }

    .pr-28 {
        padding-right: 28px;
    }

    .pr-30 {
        padding-right: 30px;
    }

    .pr-40 {
        padding-right: 40px;
    }

    .pr-50 {
        padding-right: 50px;
    }

    .pr-60 {
        padding-right: 60px;
    }

    .pr-70 {
        padding-right: 70px;
    }

    .pr-80 {
        padding-right: 80px;
    }

    .pr-90 {
        padding-right: 90px;
    }

    .pr-100 {
        padding-right: 100px;
    }

    /* #end padding rigth region */

    /* #padding bottom region */
    .pb-0 {
        padding-bottom: 0;
    }

    .pb-10 {
        padding-bottom: 10px;
    }

    .pb-15 {
        padding-bottom: 15px;
    }

    .pb-20 {
        padding-bottom: 20px;
    }

    .pb-30 {
        padding-bottom: 30px;
    }

    .pb-40 {
        padding-bottom: 40px;
    }

    .pb-50 {
        padding-bottom: 50px;
    }

    .pb-60 {
        padding-bottom: 60px;
    }

    .pb-70 {
        padding-bottom: 70px;
    }

    .pb-80 {
        padding-bottom: 80px;
    }

    .pb-90 {
        padding-bottom: 90px;
    }

    .pb-100 {
        padding-bottom: 100px;
    }

    .pb-110 {
        padding-bottom: 110px;
    }

    .pb-130 {
        padding-bottom: 120px;
    }

    /* #end padding bottom region */

    /* #padding left region */
    .pl-0 {
        padding-left: 0;
    }

    .pl-10 {
        padding-left: 10px;
    }

    .pl-20 {
        padding-left: 20px;
    }

    .pl-28 {
        padding-left: 28px;
    }

    .pl-30 {
        padding-left: 30px;
    }

    .pl-40 {
        padding-left: 40px;
    }

    .pl-50 {
        padding-left: 50px;
    }

    .pl-60 {
        padding-left: 60px;
    }

    .pl-70 {
        padding-left: 70px;
    }

    .pl-80 {
        padding-left: 80px;
    }

    .pl-90 {
        padding-left: 90px;
    }

    .pl-100 {
        padding-left: 100px;
    }

    /* #end padding left region */

    /* #padding full region */
    .p-0 {
        padding: 0;
    }

    .p-10 {
        padding: 10px;
    }

    .p-15 {
        padding: 15px;
    }

    .p-20 {
        padding: 20px;
    }

    .p-30 {
        padding: 30px;
    }

    .p-40 {
        padding: 40px;
    }

    .p-50 {
        padding: 50px;
    }

    .p-60 {
        padding: 60px;
    }

    .p-70 {
        padding: 70px;
    }

    .p-80 {
        padding: 80px;
    }

    .p-90 {
        padding: 90px;
    }

    .p-100 {
        padding: 100px;
    }

    /* #padding full region */

    /* #padding axis y region */
    .py-0 {
        padding-bottom: 0;
        padding-top: 0
    }

    .py-10 {
        padding-bottom: 10px;
        padding-top: 10px
    }

    .py-15 {
        padding-bottom: 15px;
        padding-top: 15px
    }

    .py-20 {
        padding-bottom: 20px;
        padding-top: 20px
    }

    .py-30 {
        padding-bottom: 30px;
        padding-top: 30px
    }

    .py-40 {
        padding-bottom: 40px;
        padding-top: 40px
    }

    .py-50 {
        padding-bottom: 50px;
        padding-top: 50px
    }

    .py-60 {
        padding-bottom: 60px;
        padding-top: 60px
    }

    .py-70 {
        padding-bottom: 70px;
        padding-top: 70px
    }

    .py-80 {
        padding-bottom: 80px;
        padding-top: 80px
    }

    .py-90 {
        padding-bottom: 90px;
        padding-top: 90px
    }

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

    /* #endpadding axis y region */

    /* #padding left region */
    .px-0 {
        padding-left: 0;
        padding-right: 0;
    }

    .px-10 {
        padding-left: 10px;
        padding-right: 10px;
    }

    .px-15 {
        padding-left: 15px;
        padding-right: 15px;
    }

    .px-20 {
        padding-left: 20px;
        padding-right: 20px;
    }

    .px-30 {
        padding-left: 30px;
        padding-right: 30px;
    }

    .px-40 {
        padding-left: 40px;
        padding-right: 40px;
    }

    .px-50 {
        padding-left: 50px;
        padding-right: 50px;
    }

    .px-60 {
        padding-left: 60px;
        padding-right: 60px;
    }

    .px-70 {
        padding-left: 70px;
        padding-right: 70px;
    }

    .px-80 {
        padding-left: 80px;
        padding-right: 80px;
    }

    .px-90 {
        padding-left: 90px;
        padding-right: 90px;
    }

    .px-100 {
        padding-left: 100px;
        padding-right: 100px;
    }

    /* #end padding left region */
    /* #endregion Paddings */

    /* #region Flex */
    .flex-row {
        flex-direction: row;
    }

    .flex-row-reverse {
        flex-direction: row-reverse;
    }

    .flex-column {
        flex-direction: column;
    }

    .flex-column-reverse {
        flex-direction: column-reverse;
        -ms-flex-direction: inherit;
        -ms-flex-wrap: wrap-reverse;
        -webkit-flex-direction: inherit;
        -webkit-flex-wrap: wrap-reverse
    }

    .flex-self-start {
        align-self: flex-start;
    }

    .flex-start {
        justify-content: flex-start;
        text-align: start;
    }

    .flex-center {
        justify-content: center;
    }

    .flex-evenly {
        justify-content: space-evenly;
    }

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

    .flex-end {
        justify-content: flex-end;
    }

    .flex-top {
        align-items: top;
    }

    .flex-middle {
        align-items: center;
    }

    .flex-bottom {
        align-items: flex-end;
    }

    .flex-between {
        justify-content: space-between;
    }

    .flex-1 {
        flex: 1;
    }

    .flex-wrap {
        flex-wrap: wrap;
        -ms-flex-wrap: wrap;
    }

    .flex-grow-1 {
        flex-grow: 1;
    }

    .flex-basis-0 {
        flex-basis: 0;
    }

    /* #endregion Flex */

    /* #region Displays */
    .d-block {
        display: block;
    }

    .d-flex {
        display: flex;
        display: -ms-flexbox;
    }

    .d-flex-inline {
        display: inline-flex;
    }

    .d-inline {
        display: inline;
    }

    .d-inline-block {
        display: inline-block;
        vertical-align: top;
    }

    .d-none {
        display: none;
    }

    .vertical-top {
        vertical-align: top;
    }

    .vertical-middle {
        vertical-align: middle;
        vertical-align: -webkit-baseline-middle;
    }

    .vertical-bottom {
        vertical-align: bottom;
    }

    /* #endregion Displays */

    /* #region Positions */
    .relative {
        position: relative;
    }

    .absolute {
        position: absolute;
    }

    .fixed {
        position: fixed;
    }

    .absolute-h-center {
        left: 0;
        right: 0;
        margin: auto;
    }

    .absolute-v-center {
        top: 0;
        bottom: 0;
        margin: auto;
    }

    /* Left */
    .pos-left {
        left: 0;
        right: auto;
    }

    .left-10 {
        left: 10%;
    }

    .left-20 {
        left: 20%;
    }

    .left-30 {
        left: 30%;
    }

    .left-40 {
        left: 40%;
    }

    .left-50 {
        left: 50%;
    }

    /* .Left */

    /* Right */
    .pos-right {
        left: auto;
        right: 0;
    }

    .right-10 {
        right: 10%;
    }

    .right-20 {
        right: 20%;
    }

    .right-30 {
        right: 30%;
    }

    .right-40 {
        right: 40%;
    }

    .right-50 {
        right: 50%;
    }

    /*. Right */

    /* Top */
    .pos-top {
        top: 0;
        bottom: auto;
    }

    .top-10 {
        top: 10%;
    }

    .top-20 {
        top: 20%;
    }

    .top-30 {
        top: 30%;
    }

    .top-40 {
        top: 40%;
    }

    .top-50 {
        top: 50%;
    }

    /* .Top */

    /* Bottom */
    .pos-bottom {
        top: auto;
        bottom: 0;
    }

    .bottom-10 {
        bottom: 10%;
    }

    .bottom-20 {
        bottom: 20%;
    }

    .bottom-30 {
        bottom: 30%;
    }

    .bottom-40 {
        bottom: 40%;
    }

    .bottom-50 {
        bottom: 50%;
    }

    /* .Bottom */

    /*  Vertical center */
    .vertical-center {
        top: 0;
        bottom: 0;
        margin: auto;
    }

    /*  Vertical center */
    /* #endregion Positions */

    /* #region width and height */
    .w-10 {
        width: 10%;
    }

    .w-20 {
        width: 20%;
    }

    .w-25 {
        width: 25%;
    }

    .w-30 {
        width: 30%;
    }

    .w-33 {
        width: 33.333333%;
    }

    .w-40 {
        width: 40%;
    }

    .w-50 {
        width: 50%;
    }

    .w-60 {
        width: 60%;
    }

    .w-62 {
        width: 62%;
    }

    .w-65 {
        width: 65%;
    }

    .w-70 {
        width: 70%;
    }

    .w-80 {
        width: 80%;
    }

    .w-90 {
        width: 90%;
    }

    .w-100 {
        width: 100%;
    }

    .h-10 {
        height: 10%;
    }

    .h-20 {
        height: 20%;
    }

    .h-25 {
        height: 25%;
    }

    .h-30 {
        height: 30%;
    }

    .h-33 {
        height: 33.333333%;
    }

    .h-40 {
        height: 40%;
    }

    .h-50 {
        height: 50%;
    }

    .h-60 {
        height: 60%;
    }

    .h-70 {
        height: 70%;
    }

    .h-80 {
        height: 80%;
    }

    .h-90 {
        height: 90%;
    }

    .h-100 {
        height: 100%;
    }

    /* #endregion width and height */

    /* #region text alignment */
    .text-justify {
        text-align: justify;
    }

    .text-left {
        text-align: left;
    }

    .text-center {
        text-align: center;
    }

    .text-right {
        text-align: right;
    }

    .text-nowrap {
        white-space: nowrap;
    }

    .text-truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .text-break {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* #endregion text alignment */

    /* #region Vertical alignment */
    .align-baseline {
        vertical-align: baseline;
    }

    .align-top {
        vertical-align: top;
    }

    .align-middle {
        vertical-align: middle;
        vertical-align: -webkit-baseline-middle;
    }

    .align-bottom {
        vertical-align: bottom;
    }

    .align-text-top {
        vertical-align: text-top;
    }

    .align-text-bottom {
        vertical-align: text-bottom;
    }

    /* #endregion Vertical alignment */

    /* #region columns */

    .col-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .col {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }

    .col-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* #endregion columns */

    /* #region containers */
    .container {
        max-width: 1034px;
    }

    /* #endregion containers */

    /* #Container Blog Detail */
    .containerBlogDetail {
        max-width: 702px;
        margin-right: auto;
        margin-left: auto;
    }

    .containerBlogDetailMore {
        max-width: 760px;
        margin-right: auto;
        margin-left: auto;
    }

    /* #endContainer Blog Detail */

}