/* @@@@@@@@@@@@@  Extend Property CSS start here  @@@@@@@@@@@@@@ */
%d-flex {
  @include display(flex);
}
%d-inline-flex {
  display: inline-flex;
}
%flex-col {
  @include flex-direction(column);
}
%flex-col-reverse {
  @include flex-direction(column-reverse);
}
%flex-row {
  @include flex-direction(row);
}
%flex-row-reverse {
  @include flex-direction(row-reverse);
}
%shrink-0 {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
%flex-row {
  flex-direction: row;
}
%flex-wrap {
  flex-wrap: wrap;
}
%flex-grow-1 {
  @include flex-grow(1);
}
%no-wrap {
  flex-wrap: nowrap;
}

%p-fixed {
  position: fixed;
}
%p-relative {
  position: relative;
}

%p-absolute {
  position: absolute;
  content: "";
}

%mp-0 {
  padding: 0;
  margin: 0;
}

%of-hidden {
  overflow: hidden;
}

%c-pointer {
  cursor: pointer;
}

%w-100 {
  width: 100%;
}

%h-100 {
  height: 100%;
}
%text-thin {
  font-weight: 100;
}
%text-extra-light {
  font-weight: 200;
}
%text-light {
  font-weight: 300;
}
%text-regular {
  font-weight: 400;
}
%text-medium {
  font-weight: 500;
}
%text-semi-bold {
  font-weight: 600;
}
%text-bold {
  font-weight: 700;
}
%text-extra-bold {
  font-weight: 800;
}
%text-black {
  font-weight: 900;
}
%text-extra-black {
  font-weight: 950;
}

%p-center {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

%justify-left {
  @include justify-content(left);
}
%justify-center {
  @include justify-content(center);
}

%justify-between {
  @include justify-content(space-between);
}

%justify-start {
  @include justify-content(flex-start);
}

%justify-end {
  @include justify-content(flex-end);
}

%justify-around {
  @include justify-content(space-around);
}

%justify-evenly {
  @include justify-content(space-evenly);
}

%place-center {
  place-content: center;
}

%item-start {
  @include align-items(start);
}
%item-center {
  @include align-items(center);
}
%item-end {
  @include align-items(end);
}
%item-baseline {
  @include align-items(baseline);
}
%content-center {
  align-content: center;
}

%items-start {
  @include align-items(flex-start);
}

%items-end {
  @include align-items(flex-end);
}

%d-none {
  @include display(none);
}
%d-block {
  @include display(block);
}

%d-inline {
  @include display(inline);
}
%d-inline-block {
  @include display(inline-block);
}

%d-grid {
  @include display(grid);
}

%border-radius-2 {
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
}
%border-radius-3 {
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
}

/* @@@@@@@@@@@@@  Extend Property CSS Writing Now  @@@@@@@@@@@@@@ */

%text-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  @extend %of-hidden;
  text-overflow: ellipsis;
}

%text-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  @extend %of-hidden;
  text-overflow: ellipsis;
}

%text-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  @extend %of-hidden;
  text-overflow: ellipsis;
}
%w-content {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}
%flex-0 {
  -webkit-box-flex: 0;
  -ms-flex: 0;
  flex: 0;
}
%flex-1 {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

%text-uppercase {
  text-transform: uppercase;
}
%text-capitalize {
  text-transform: capitalize;
}
%text-lowercase {
  text-transform: lowercase;
}

/* @@@@@@@@@@@@@  Extend Property CSS Writing Now  @@@@@@@@@@@@@@ */
%white-color {
  color: $color-white;
}

%black-color {
  color: $color-black;
}

%bg-white {
  background-color: $color-white;
}

//  border
// %border {
//   border: 1px solid $border-color !important;
// }
// %border-0 {
//   border: none !important;
// }
// %border-t {
//   border-top: 1px solid $border-color !important;
// }
// %border-t0 {
//   border-top: none !important;
// }
// %border-b {
//   border-bottom: 1px solid $border-color !important;
// }
// %border-b0 {
//   border-bottom: none !important;
// }
// %border-l {
//   border-left: 1px solid $border-color !important;
// }
// %border-l0 {
//   border-left: none !important;
// }
// %border-r {
//   border-right: 1px solid $border-color !important;
// }
// %border-r0 {
//   border-right: none !important;
// }

%text-center {
  text-align: center;
}

%text-right {
  text-align: right;
}

%text-left {
  text-align: left;
}

%list-none {
  list-style: none;
}
%text-justify {
  text-align: justify;
}

/* @@@@@@@@@@@@@  Extend Property Margin 0 - 50 CSS Writing Now  @@@@@@@@@@@@@@ */
%m-0 {
  margin: 0;
}
%m-1 {
  margin: 1px;
}
%m-2 {
  margin: 2px;
}
%m-3 {
  margin: 3px;
}
%m-4 {
  margin: 4px;
}
%m-5 {
  margin: 5px;
}
%m-6 {
  margin: 6px;
}
%m-7 {
  margin: 7px;
}
%m-8 {
  margin: 8px;
}
%m-9 {
  margin: 9px;
}
%m-10 {
  margin: 10px;
}
%m-11 {
  margin: 11px;
}
%m-12 {
  margin: 12px;
}
%m-13 {
  margin: 13px;
}
%m-14 {
  margin: 14px;
}
%m-15 {
  margin: 15px;
}
%m-16 {
  margin: 16px;
}
%m-17 {
  margin: 17px;
}
%m-18 {
  margin: 18px;
}
%m-19 {
  margin: 19px;
}
%m-20 {
  margin: 20px;
}
%m-21 {
  margin: 21px;
}
%m-22 {
  margin: 22px;
}
%m-23 {
  margin: 23px;
}
%m-24 {
  margin: 24px;
}
%m-25 {
  margin: 25px;
}
%m-26 {
  margin: 26px;
}
%m-27 {
  margin: 27px;
}
%m-28 {
  margin: 28px;
}
%m-29 {
  margin: 29px;
}
%m-30 {
  margin: 30px;
}
%m-31 {
  margin: 31px;
}
%m-32 {
  margin: 32px;
}
%m-33 {
  margin: 33px;
}
%m-34 {
  margin: 34px;
}
%m-35 {
  margin: 35px;
}
%m-36 {
  margin: 36px;
}
%m-37 {
  margin: 37px;
}
%m-38 {
  margin: 38px;
}
%m-39 {
  margin: 39px;
}
%m-40 {
  margin: 40px;
}
%m-41 {
  margin: 41px;
}
%m-42 {
  margin: 42px;
}
%m-43 {
  margin: 43px;
}
%m-44 {
  margin: 44px;
}
%m-45 {
  margin: 45px;
}
%m-46 {
  margin: 46px;
}
%m-47 {
  margin: 47px;
}
%m-48 {
  margin: 48px;
}
%m-49 {
  margin: 49px;
}
%m-50 {
  margin: 50px;
}

// margin bottom start
%mb-0 {
  margin-bottom: 0;
}
%mb-1 {
  margin-bottom: 1px;
}
%mb-2 {
  margin-bottom: 2px;
}
%mb-3 {
  margin-bottom: 3px;
}
%mb-4 {
  margin-bottom: 4px;
}
%mb-5 {
  margin-bottom: 5px;
}
%mb-6 {
  margin-bottom: 6px;
}
%mb-7 {
  margin-bottom: 7px;
}
%mb-8 {
  margin-bottom: 8px;
}
%mb-9 {
  margin-bottom: 9px;
}
%mb-10 {
  margin-bottom: 10px;
}
%mb-11 {
  margin-bottom: 11px;
}
%mb-12 {
  margin-bottom: 12px;
}
%mb-13 {
  margin-bottom: 13px;
}
%mb-14 {
  margin-bottom: 14px;
}
%mb-15 {
  margin-bottom: 15px;
}
%mb-16 {
  margin-bottom: 16px;
}
%mb-17 {
  margin-bottom: 17px;
}
%mb-18 {
  margin-bottom: 18px;
}
%mb-19 {
  margin-bottom: 19px;
}
%mb-20 {
  margin-bottom: 20px;
}
%mb-21 {
  margin-bottom: 21px;
}
%mb-22 {
  margin-bottom: 22px;
}
%mb-23 {
  margin-bottom: 23px;
}
%mb-24 {
  margin-bottom: 24px;
}
%mb-25 {
  margin-bottom: 25px;
}
%mb-26 {
  margin-bottom: 26px;
}
%mb-27 {
  margin-bottom: 27px;
}
%mb-28 {
  margin-bottom: 28px;
}
%mb-29 {
  margin-bottom: 29px;
}
%mb-30 {
  margin-bottom: 30px;
}
%mb-31 {
  margin-bottom: 31px;
}
%mb-32 {
  margin-bottom: 32px;
}
%mb-33 {
  margin-bottom: 33px;
}
%mb-34 {
  margin-bottom: 34px;
}
%mb-35 {
  margin-bottom: 35px;
}
%mb-36 {
  margin-bottom: 36px;
}
%mb-37 {
  margin-bottom: 37px;
}
%mb-38 {
  margin-bottom: 38px;
}
%mb-39 {
  margin-bottom: 39px;
}
%mb-40 {
  margin-bottom: 40px;
}
%mb-41 {
  margin-bottom: 41px;
}
%mb-42 {
  margin-bottom: 42px;
}
%mb-43 {
  margin-bottom: 43px;
}
%mb-44 {
  margin-bottom: 44px;
}
%mb-45 {
  margin-bottom: 45px;
}
%mb-46 {
  margin-bottom: 46px;
}
%mb-47 {
  margin-bottom: 47px;
}
%mb-48 {
  margin-bottom: 48px;
}
%mb-49 {
  margin-bottom: 49px;
}
%mb-50 {
  margin-bottom: 50px;
}

// margin top start

%mt-0 {
  margin-top: 0;
}
%mt-1 {
  margin-top: 1px;
}
%mt-2 {
  margin-top: 2px;
}
%mt-3 {
  margin-top: 3px;
}
%mt-4 {
  margin-top: 4px;
}
%mt-5 {
  margin-top: 5px;
}
%mt-6 {
  margin-top: 6px;
}
%mt-7 {
  margin-top: 7px;
}
%mt-8 {
  margin-top: 8px;
}
%mt-9 {
  margin-top: 9px;
}
%mt-10 {
  margin-top: 10px;
}
%mt-11 {
  margin-top: 11px;
}
%mt-12 {
  margin-top: 12px;
}
%mt-13 {
  margin-top: 13px;
}
%mt-14 {
  margin-top: 14px;
}
%mt-15 {
  margin-top: 15px;
}
%mt-16 {
  margin-top: 16px;
}
%mt-17 {
  margin-top: 17px;
}
%mt-18 {
  margin-top: 18px;
}
%mt-19 {
  margin-top: 19px;
}
%mt-20 {
  margin-top: 20px;
}
%mt-21 {
  margin-top: 21px;
}
%mt-22 {
  margin-top: 22px;
}
%mt-23 {
  margin-top: 23px;
}
%mt-24 {
  margin-top: 24px;
}
%mt-25 {
  margin-top: 25px;
}
%mt-26 {
  margin-top: 26px;
}
%mt-27 {
  margin-top: 27px;
}
%mt-28 {
  margin-top: 28px;
}
%mt-29 {
  margin-top: 29px;
}
%mt-30 {
  margin-top: 30px;
}
%mt-31 {
  margin-top: 31px;
}
%mt-32 {
  margin-top: 32px;
}
%mt-33 {
  margin-top: 33px;
}
%mt-34 {
  margin-top: 34px;
}
%mt-35 {
  margin-top: 35px;
}
%mt-36 {
  margin-top: 36px;
}
%mt-37 {
  margin-top: 37px;
}
%mt-38 {
  margin-top: 38px;
}
%mt-39 {
  margin-top: 39px;
}
%mt-40 {
  margin-top: 40px;
}
%mt-41 {
  margin-top: 41px;
}
%mt-42 {
  margin-top: 42px;
}
%mt-43 {
  margin-top: 43px;
}
%mt-44 {
  margin-top: 44px;
}
%mt-45 {
  margin-top: 45px;
}
%mt-46 {
  margin-top: 46px;
}
%mt-47 {
  margin-top: 47px;
}
%mt-48 {
  margin-top: 48px;
}
%mt-49 {
  margin-top: 49px;
}
%mt-50 {
  margin-top: 50px;
}

// margin left start

%ml-0 {
  margin-left: 0;
}
%ml-1 {
  margin-left: 1px;
}
%ml-2 {
  margin-left: 2px;
}
%ml-3 {
  margin-left: 3px;
}
%ml-4 {
  margin-left: 4px;
}
%ml-5 {
  margin-left: 5px;
}
%ml-6 {
  margin-left: 6px;
}
%ml-7 {
  margin-left: 7px;
}
%ml-8 {
  margin-left: 8px;
}
%ml-9 {
  margin-left: 9px;
}
%ml-10 {
  margin-left: 10px;
}
%ml-11 {
  margin-left: 11px;
}
%ml-12 {
  margin-left: 12px;
}
%ml-13 {
  margin-left: 13px;
}
%ml-14 {
  margin-left: 14px;
}
%ml-15 {
  margin-left: 15px;
}
%ml-16 {
  margin-left: 16px;
}
%ml-17 {
  margin-left: 17px;
}
%ml-18 {
  margin-left: 18px;
}
%ml-19 {
  margin-left: 19px;
}
%ml-20 {
  margin-left: 20px;
}
%ml-21 {
  margin-left: 21px;
}
%ml-22 {
  margin-left: 22px;
}
%ml-23 {
  margin-left: 23px;
}
%ml-24 {
  margin-left: 24px;
}
%ml-25 {
  margin-left: 25px;
}
%ml-26 {
  margin-left: 26px;
}
%ml-27 {
  margin-left: 27px;
}
%ml-28 {
  margin-left: 28px;
}
%ml-29 {
  margin-left: 29px;
}
%ml-30 {
  margin-left: 30px;
}
%ml-31 {
  margin-left: 31px;
}
%ml-32 {
  margin-left: 32px;
}
%ml-33 {
  margin-left: 33px;
}
%ml-34 {
  margin-left: 34px;
}
%ml-35 {
  margin-left: 35px;
}
%ml-36 {
  margin-left: 36px;
}
%ml-37 {
  margin-left: 37px;
}
%ml-38 {
  margin-left: 38px;
}
%ml-39 {
  margin-left: 39px;
}
%ml-40 {
  margin-left: 40px;
}
%ml-41 {
  margin-left: 41px;
}
%ml-42 {
  margin-left: 42px;
}
%ml-43 {
  margin-left: 43px;
}
%ml-44 {
  margin-left: 44px;
}
%ml-45 {
  margin-left: 45px;
}
%ml-46 {
  margin-left: 46px;
}
%ml-47 {
  margin-left: 47px;
}
%ml-48 {
  margin-left: 48px;
}
%ml-49 {
  margin-left: 49px;
}
%ml-50 {
  margin-left: 50px;
}

// margin right start

%mr-0 {
  margin-right: 0;
}
%mr-1 {
  margin-right: 1px;
}
%mr-2 {
  margin-right: 2px;
}
%mr-3 {
  margin-right: 3px;
}
%mr-4 {
  margin-right: 4px;
}
%mr-5 {
  margin-right: 5px;
}
%mr-6 {
  margin-right: 6px;
}
%mr-7 {
  margin-right: 7px;
}
%mr-8 {
  margin-right: 8px;
}
%mr-9 {
  margin-right: 9px;
}
%mr-10 {
  margin-right: 10px;
}
%mr-11 {
  margin-right: 11px;
}
%mr-12 {
  margin-right: 12px;
}
%mr-13 {
  margin-right: 13px;
}
%mr-14 {
  margin-right: 14px;
}
%mr-15 {
  margin-right: 15px;
}
%mr-16 {
  margin-right: 16px;
}
%mr-17 {
  margin-right: 17px;
}
%mr-18 {
  margin-right: 18px;
}
%mr-19 {
  margin-right: 19px;
}
%mr-20 {
  margin-right: 20px;
}
%mr-21 {
  margin-right: 21px;
}
%mr-22 {
  margin-right: 22px;
}
%mr-23 {
  margin-right: 23px;
}
%mr-24 {
  margin-right: 24px;
}
%mr-25 {
  margin-right: 25px;
}
%mr-26 {
  margin-right: 26px;
}
%mr-27 {
  margin-right: 27px;
}
%mr-28 {
  margin-right: 28px;
}
%mr-29 {
  margin-right: 29px;
}
%mr-30 {
  margin-right: 30px;
}
%mr-31 {
  margin-right: 31px;
}
%mr-32 {
  margin-right: 32px;
}
%mr-33 {
  margin-right: 33px;
}
%mr-34 {
  margin-right: 34px;
}
%mr-35 {
  margin-right: 35px;
}
%mr-36 {
  margin-right: 36px;
}
%mr-37 {
  margin-right: 37px;
}
%mr-38 {
  margin-right: 38px;
}
%mr-39 {
  margin-right: 39px;
}
%mr-40 {
  margin-right: 40px;
}
%mr-41 {
  margin-right: 41px;
}
%mr-42 {
  margin-right: 42px;
}
%mr-43 {
  margin-right: 43px;
}
%mr-44 {
  margin-right: 44px;
}
%mr-45 {
  margin-right: 45px;
}
%mr-46 {
  margin-right: 46px;
}
%mr-47 {
  margin-right: 47px;
}
%mr-48 {
  margin-right: 48px;
}
%mr-49 {
  margin-right: 49px;
}
%mr-50 {
  margin-right: 50px;
}

//Marzine X axis

%mx-0 {
  margin-left: 0;
  margin-right: 0;
}
%mx-1 {
  margin-left: 1px;
  margin-right: 1px;
}
%mx-2 {
  margin-left: 2px;
  margin-right: 2px;
}
%mx-3 {
  margin-left: 3px;
  margin-right: 3px;
}
%mx-4 {
  margin-left: 4px;
  margin-right: 4px;
}
%mx-5 {
  margin-left: 5px;
  margin-right: 5px;
}
%mx-6 {
  margin-left: 6px;
  margin-right: 6px;
}
%mx-7 {
  margin-left: 7px;
  margin-right: 7px;
}
%mx-8 {
  margin-left: 8px;
  margin-right: 8px;
}
%mx-9 {
  margin-left: 9px;
  margin-right: 9px;
}
%mx-10 {
  margin-left: 10px;
  margin-right: 10px;
}
%mx-11 {
  margin-left: 11px;
  margin-right: 11px;
}
%mx-12 {
  margin-left: 12px;
  margin-right: 12px;
}
%mx-13 {
  margin-left: 13px;
  margin-right: 13px;
}
%mx-14 {
  margin-left: 14px;
  margin-right: 14px;
}
%mx-15 {
  margin-left: 15px;
  margin-right: 15px;
}
%mx-16 {
  margin-left: 16px;
  margin-right: 16px;
}
%mx-17 {
  margin-left: 17px;
  margin-right: 17px;
}
%mx-18 {
  margin-left: 18px;
  margin-right: 18px;
}
%mx-19 {
  margin-left: 19px;
  margin-right: 19px;
}
%mx-20 {
  margin-left: 20px;
  margin-right: 20px;
}
%mx-21 {
  margin-left: 21px;
  margin-right: 21px;
}
%mx-22 {
  margin-left: 22px;
  margin-right: 22px;
}
%mx-23 {
  margin-left: 23px;
  margin-right: 23px;
}
%mx-24 {
  margin-left: 24px;
  margin-right: 24px;
}
%mx-25 {
  margin-left: 25px;
  margin-right: 25px;
}
%mx-26 {
  margin-left: 26px;
  margin-right: 26px;
}
%mx-27 {
  margin-left: 27px;
  margin-right: 27px;
}
%mx-28 {
  margin-left: 28px;
  margin-right: 28px;
}
%mx-29 {
  margin-left: 29px;
  margin-right: 29px;
}
%mx-30 {
  margin-left: 30px;
  margin-right: 30px;
}
%mx-31 {
  margin-left: 31px;
  margin-right: 31px;
}
%mx-32 {
  margin-left: 32px;
  margin-right: 32px;
}
%mx-33 {
  margin-left: 33px;
  margin-right: 33px;
}
%mx-34 {
  margin-left: 34px;
  margin-right: 34px;
}
%mx-35 {
  margin-left: 35px;
  margin-right: 35px;
}
%mx-36 {
  margin-left: 36px;
  margin-right: 36px;
}
%mx-37 {
  margin-left: 37px;
  margin-right: 37px;
}
%mx-38 {
  margin-left: 38px;
  margin-right: 38px;
}
%mx-39 {
  margin-left: 39px;
  margin-right: 39px;
}
%mx-40 {
  margin-left: 40px;
  margin-right: 40px;
}
%mx-41 {
  margin-left: 41px;
  margin-right: 41px;
}
%mx-42 {
  margin-left: 42px;
  margin-right: 42px;
}
%mx-43 {
  margin-left: 43px;
  margin-right: 43px;
}
%mx-44 {
  margin-left: 44px;
  margin-right: 44px;
}
%mx-45 {
  margin-left: 45px;
  margin-right: 45px;
}
%mx-46 {
  margin-left: 46px;
  margin-right: 46px;
}
%mx-47 {
  margin-left: 47px;
  margin-right: 47px;
}
%mx-48 {
  margin-left: 48px;
  margin-right: 48px;
}
%mx-49 {
  margin-left: 49px;
  margin-right: 49px;
}
%mx-50 {
  margin-left: 50px;
  margin-right: 50px;
}

//Marzine X axis

%my-0 {
  margin-left: 0;
  margin-right: 0;
}
%my-1 {
  margin-left: 1px;
  margin-right: 1px;
}
%my-2 {
  margin-left: 2px;
  margin-right: 2px;
}
%my-3 {
  margin-left: 3px;
  margin-right: 3px;
}
%my-4 {
  margin-left: 4px;
  margin-right: 4px;
}
%my-5 {
  margin-left: 5px;
  margin-right: 5px;
}
%my-6 {
  margin-left: 6px;
  margin-right: 6px;
}
%my-7 {
  margin-left: 7px;
  margin-right: 7px;
}
%my-8 {
  margin-left: 8px;
  margin-right: 8px;
}
%my-9 {
  margin-left: 9px;
  margin-right: 9px;
}
%my-10 {
  margin-left: 10px;
  margin-right: 10px;
}
%my-11 {
  margin-left: 11px;
  margin-right: 11px;
}
%my-12 {
  margin-left: 12px;
  margin-right: 12px;
}
%my-13 {
  margin-left: 13px;
  margin-right: 13px;
}
%my-14 {
  margin-left: 14px;
  margin-right: 14px;
}
%my-15 {
  margin-left: 15px;
  margin-right: 15px;
}
%my-16 {
  margin-left: 16px;
  margin-right: 16px;
}
%my-17 {
  margin-left: 17px;
  margin-right: 17px;
}
%my-18 {
  margin-left: 18px;
  margin-right: 18px;
}
%my-19 {
  margin-left: 19px;
  margin-right: 19px;
}
%my-20 {
  margin-left: 20px;
  margin-right: 20px;
}
%my-21 {
  margin-left: 21px;
  margin-right: 21px;
}
%my-22 {
  margin-left: 22px;
  margin-right: 22px;
}
%my-23 {
  margin-left: 23px;
  margin-right: 23px;
}
%my-24 {
  margin-left: 24px;
  margin-right: 24px;
}
%my-25 {
  margin-left: 25px;
  margin-right: 25px;
}
%my-26 {
  margin-left: 26px;
  margin-right: 26px;
}
%my-27 {
  margin-left: 27px;
  margin-right: 27px;
}
%my-28 {
  margin-left: 28px;
  margin-right: 28px;
}
%my-29 {
  margin-left: 29px;
  margin-right: 29px;
}
%my-30 {
  margin-left: 30px;
  margin-right: 30px;
}
%my-31 {
  margin-left: 31px;
  margin-right: 31px;
}
%my-32 {
  margin-left: 32px;
  margin-right: 32px;
}
%my-33 {
  margin-left: 33px;
  margin-right: 33px;
}
%my-34 {
  margin-left: 34px;
  margin-right: 34px;
}
%my-35 {
  margin-left: 35px;
  margin-right: 35px;
}
%my-36 {
  margin-left: 36px;
  margin-right: 36px;
}
%my-37 {
  margin-left: 37px;
  margin-right: 37px;
}
%my-38 {
  margin-left: 38px;
  margin-right: 38px;
}
%my-39 {
  margin-left: 39px;
  margin-right: 39px;
}
%my-40 {
  margin-left: 40px;
  margin-right: 40px;
}
%my-41 {
  margin-left: 41px;
  margin-right: 41px;
}
%my-42 {
  margin-left: 42px;
  margin-right: 42px;
}
%my-43 {
  margin-left: 43px;
  margin-right: 43px;
}
%my-44 {
  margin-left: 44px;
  margin-right: 44px;
}
%my-45 {
  margin-left: 45px;
  margin-right: 45px;
}
%my-46 {
  margin-left: 46px;
  margin-right: 46px;
}
%my-47 {
  margin-left: 47px;
  margin-right: 47px;
}
%my-48 {
  margin-left: 48px;
  margin-right: 48px;
}
%my-49 {
  margin-left: 49px;
  margin-right: 49px;
}
%my-50 {
  margin-left: 50px;
  margin-right: 50px;
}

/* @@@@@@@@@@@@@  Extend Property padding 0 - 50 CSS Writing Now  @@@@@@@@@@@@@@ */
%p-0 {
  padding: 0;
}
%p-1 {
  padding: 1px;
}
%p-2 {
  padding: 2px;
}
%p-3 {
  padding: 3px;
}
%p-4 {
  padding: 4px;
}
%p-5 {
  padding: 5px;
}
%p-6 {
  padding: 6px;
}
%p-7 {
  padding: 7px;
}
%p-8 {
  padding: 8px;
}
%p-9 {
  padding: 9px;
}
%p-10 {
  padding: 10px;
}
%p-11 {
  padding: 11px;
}
%p-12 {
  padding: 12px;
}
%p-13 {
  padding: 13px;
}
%p-14 {
  padding: 14px;
}
%p-15 {
  padding: 15px;
}
%p-16 {
  padding: 16px;
}
%p-17 {
  padding: 17px;
}
%p-18 {
  padding: 18px;
}
%p-19 {
  padding: 19px;
}
%p-20 {
  padding: 20px;
}
%p-21 {
  padding: 21px;
}
%p-22 {
  padding: 22px;
}
%p-23 {
  padding: 23px;
}
%p-24 {
  padding: 24px;
}
%p-25 {
  padding: 25px;
}
%p-26 {
  padding: 26px;
}
%p-27 {
  padding: 27px;
}
%p-28 {
  padding: 28px;
}
%p-29 {
  padding: 29px;
}
%p-30 {
  padding: 30px;
}
%p-31 {
  padding: 31px;
}
%p-32 {
  padding: 32px;
}
%p-33 {
  padding: 33px;
}
%p-34 {
  padding: 34px;
}
%p-35 {
  padding: 35px;
}
%p-36 {
  padding: 36px;
}
%p-37 {
  padding: 37px;
}
%p-38 {
  padding: 38px;
}
%p-39 {
  padding: 39px;
}
%p-40 {
  padding: 40px;
}
%p-41 {
  padding: 41px;
}
%p-42 {
  padding: 42px;
}
%p-43 {
  padding: 43px;
}
%p-44 {
  padding: 44px;
}
%p-45 {
  padding: 45px;
}
%p-46 {
  padding: 46px;
}
%p-47 {
  padding: 47px;
}
%p-48 {
  padding: 48px;
}
%p-49 {
  padding: 49px;
}
%p-50 {
  padding: 50px;
}

// padding bottom start
%pb-0 {
  padding-bottom: 0;
}
%pb-1 {
  padding-bottom: 1px;
}
%pb-2 {
  padding-bottom: 2px;
}
%pb-3 {
  padding-bottom: 3px;
}
%pb-4 {
  padding-bottom: 4px;
}
%pb-5 {
  padding-bottom: 5px;
}
%pb-6 {
  padding-bottom: 6px;
}
%pb-7 {
  padding-bottom: 7px;
}
%pb-8 {
  padding-bottom: 8px;
}
%pb-9 {
  padding-bottom: 9px;
}
%pb-10 {
  padding-bottom: 10px;
}
%pb-11 {
  padding-bottom: 11px;
}
%pb-12 {
  padding-bottom: 12px;
}
%pb-13 {
  padding-bottom: 13px;
}
%pb-14 {
  padding-bottom: 14px;
}
%pb-15 {
  padding-bottom: 15px;
}
%pb-16 {
  padding-bottom: 16px;
}
%pb-17 {
  padding-bottom: 17px;
}
%pb-18 {
  padding-bottom: 18px;
}
%pb-19 {
  padding-bottom: 19px;
}
%pb-20 {
  padding-bottom: 20px;
}
%pb-21 {
  padding-bottom: 21px;
}
%pb-22 {
  padding-bottom: 22px;
}
%pb-23 {
  padding-bottom: 23px;
}
%pb-24 {
  padding-bottom: 24px;
}
%pb-25 {
  padding-bottom: 25px;
}
%pb-26 {
  padding-bottom: 26px;
}
%pb-27 {
  padding-bottom: 27px;
}
%pb-28 {
  padding-bottom: 28px;
}
%pb-29 {
  padding-bottom: 29px;
}
%pb-30 {
  padding-bottom: 30px;
}
%pb-31 {
  padding-bottom: 31px;
}
%pb-32 {
  padding-bottom: 32px;
}
%pb-33 {
  padding-bottom: 33px;
}
%pb-34 {
  padding-bottom: 34px;
}
%pb-35 {
  padding-bottom: 35px;
}
%pb-36 {
  padding-bottom: 36px;
}
%pb-37 {
  padding-bottom: 37px;
}
%pb-38 {
  padding-bottom: 38px;
}
%pb-39 {
  padding-bottom: 39px;
}
%pb-40 {
  padding-bottom: 40px;
}
%pb-41 {
  padding-bottom: 41px;
}
%pb-42 {
  padding-bottom: 42px;
}
%pb-43 {
  padding-bottom: 43px;
}
%pb-44 {
  padding-bottom: 44px;
}
%pb-45 {
  padding-bottom: 45px;
}
%pb-46 {
  padding-bottom: 46px;
}
%pb-47 {
  padding-bottom: 47px;
}
%pb-48 {
  padding-bottom: 48px;
}
%pb-49 {
  padding-bottom: 49px;
}
%pb-50 {
  padding-bottom: 50px;
}

// padding top start

%pt-0 {
  padding-top: 0;
}
%pt-1 {
  padding-top: 1px;
}
%pt-2 {
  padding-top: 2px;
}
%pt-3 {
  padding-top: 3px;
}
%pt-4 {
  padding-top: 4px;
}
%pt-5 {
  padding-top: 5px;
}
%pt-6 {
  padding-top: 6px;
}
%pt-7 {
  padding-top: 7px;
}
%pt-8 {
  padding-top: 8px;
}
%pt-9 {
  padding-top: 9px;
}
%pt-10 {
  padding-top: 10px;
}
%pt-11 {
  padding-top: 11px;
}
%pt-12 {
  padding-top: 12px;
}
%pt-13 {
  padding-top: 13px;
}
%pt-14 {
  padding-top: 14px;
}
%pt-15 {
  padding-top: 15px;
}
%pt-16 {
  padding-top: 16px;
}
%pt-17 {
  padding-top: 17px;
}
%pt-18 {
  padding-top: 18px;
}
%pt-19 {
  padding-top: 19px;
}
%pt-20 {
  padding-top: 20px;
}
%pt-21 {
  padding-top: 21px;
}
%pt-22 {
  padding-top: 22px;
}
%pt-23 {
  padding-top: 23px;
}
%pt-24 {
  padding-top: 24px;
}
%pt-25 {
  padding-top: 25px;
}
%pt-26 {
  padding-top: 26px;
}
%pt-27 {
  padding-top: 27px;
}
%pt-28 {
  padding-top: 28px;
}
%pt-29 {
  padding-top: 29px;
}
%pt-30 {
  padding-top: 30px;
}
%pt-31 {
  padding-top: 31px;
}
%pt-32 {
  padding-top: 32px;
}
%pt-33 {
  padding-top: 33px;
}
%pt-34 {
  padding-top: 34px;
}
%pt-35 {
  padding-top: 35px;
}
%pt-36 {
  padding-top: 36px;
}
%pt-37 {
  padding-top: 37px;
}
%pt-38 {
  padding-top: 38px;
}
%pt-39 {
  padding-top: 39px;
}
%pt-40 {
  padding-top: 40px;
}
%pt-41 {
  padding-top: 41px;
}
%pt-42 {
  padding-top: 42px;
}
%pt-43 {
  padding-top: 43px;
}
%pt-44 {
  padding-top: 44px;
}
%pt-45 {
  padding-top: 45px;
}
%pt-46 {
  padding-top: 46px;
}
%pt-47 {
  padding-top: 47px;
}
%pt-48 {
  padding-top: 48px;
}
%pt-49 {
  padding-top: 49px;
}
%pt-50 {
  padding-top: 50px;
}

// padding left start

%pl-0 {
  padding-left: 0;
}
%pl-1 {
  padding-left: 1px;
}
%pl-2 {
  padding-left: 2px;
}
%pl-3 {
  padding-left: 3px;
}
%pl-4 {
  padding-left: 4px;
}
%pl-5 {
  padding-left: 5px;
}
%pl-6 {
  padding-left: 6px;
}
%pl-7 {
  padding-left: 7px;
}
%pl-8 {
  padding-left: 8px;
}
%pl-9 {
  padding-left: 9px;
}
%pl-10 {
  padding-left: 10px;
}
%pl-11 {
  padding-left: 11px;
}
%pl-12 {
  padding-left: 12px;
}
%pl-13 {
  padding-left: 13px;
}
%pl-14 {
  padding-left: 14px;
}
%pl-15 {
  padding-left: 15px;
}
%pl-16 {
  padding-left: 16px;
}
%pl-17 {
  padding-left: 17px;
}
%pl-18 {
  padding-left: 18px;
}
%pl-19 {
  padding-left: 19px;
}
%pl-20 {
  padding-left: 20px;
}
%pl-21 {
  padding-left: 21px;
}
%pl-22 {
  padding-left: 22px;
}
%pl-23 {
  padding-left: 23px;
}
%pl-24 {
  padding-left: 24px;
}
%pl-25 {
  padding-left: 25px;
}
%pl-26 {
  padding-left: 26px;
}
%pl-27 {
  padding-left: 27px;
}
%pl-28 {
  padding-left: 28px;
}
%pl-29 {
  padding-left: 29px;
}
%pl-30 {
  padding-left: 30px;
}
%pl-31 {
  padding-left: 31px;
}
%pl-32 {
  padding-left: 32px;
}
%pl-33 {
  padding-left: 33px;
}
%pl-34 {
  padding-left: 34px;
}
%pl-35 {
  padding-left: 35px;
}
%pl-36 {
  padding-left: 36px;
}
%pl-37 {
  padding-left: 37px;
}
%pl-38 {
  padding-left: 38px;
}
%pl-39 {
  padding-left: 39px;
}
%pl-40 {
  padding-left: 40px;
}
%pl-41 {
  padding-left: 41px;
}
%pl-42 {
  padding-left: 42px;
}
%pl-43 {
  padding-left: 43px;
}
%pl-44 {
  padding-left: 44px;
}
%pl-45 {
  padding-left: 45px;
}
%pl-46 {
  padding-left: 46px;
}
%pl-47 {
  padding-left: 47px;
}
%pl-48 {
  padding-left: 48px;
}
%pl-49 {
  padding-left: 49px;
}
%pl-50 {
  padding-left: 50px;
}

// padding right start

%pr-0 {
  padding-right: 0;
}
%pr-1 {
  padding-right: 1px;
}
%pr-2 {
  padding-right: 2px;
}
%pr-3 {
  padding-right: 3px;
}
%pr-4 {
  padding-right: 4px;
}
%pr-5 {
  padding-right: 5px;
}
%pr-6 {
  padding-right: 6px;
}
%pr-7 {
  padding-right: 7px;
}
%pr-8 {
  padding-right: 8px;
}
%pr-9 {
  padding-right: 9px;
}
%pr-10 {
  padding-right: 10px;
}
%pr-11 {
  padding-right: 11px;
}
%pr-12 {
  padding-right: 12px;
}
%pr-13 {
  padding-right: 13px;
}
%pr-14 {
  padding-right: 14px;
}
%pr-15 {
  padding-right: 15px;
}
%pr-16 {
  padding-right: 16px;
}
%pr-17 {
  padding-right: 17px;
}
%pr-18 {
  padding-right: 18px;
}
%pr-19 {
  padding-right: 19px;
}
%pr-20 {
  padding-right: 20px;
}
%pr-21 {
  padding-right: 21px;
}
%pr-22 {
  padding-right: 22px;
}
%pr-23 {
  padding-right: 23px;
}
%pr-24 {
  padding-right: 24px;
}
%pr-25 {
  padding-right: 25px;
}
%pr-26 {
  padding-right: 26px;
}
%pr-27 {
  padding-right: 27px;
}
%pr-28 {
  padding-right: 28px;
}
%pr-29 {
  padding-right: 29px;
}
%pr-30 {
  padding-right: 30px;
}
%pr-31 {
  padding-right: 31px;
}
%pr-32 {
  padding-right: 32px;
}
%pr-33 {
  padding-right: 33px;
}
%pr-34 {
  padding-right: 34px;
}
%pr-35 {
  padding-right: 35px;
}
%pr-36 {
  padding-right: 36px;
}
%pr-37 {
  padding-right: 37px;
}
%pr-38 {
  padding-right: 38px;
}
%pr-39 {
  padding-right: 39px;
}
%pr-40 {
  padding-right: 40px;
}
%pr-41 {
  padding-right: 41px;
}
%pr-42 {
  padding-right: 42px;
}
%pr-43 {
  padding-right: 43px;
}
%pr-44 {
  padding-right: 44px;
}
%pr-45 {
  padding-right: 45px;
}
%pr-46 {
  padding-right: 46px;
}
%pr-47 {
  padding-right: 47px;
}
%pr-48 {
  padding-right: 48px;
}
%pr-49 {
  padding-right: 49px;
}
%pr-50 {
  padding-right: 50px;
}

//Marzine X axis

%px-0 {
  padding-left: 0;
  padding-right: 0;
}
%px-1 {
  padding-left: 1px;
  padding-right: 1px;
}
%px-2 {
  padding-left: 2px;
  padding-right: 2px;
}
%px-3 {
  padding-left: 3px;
  padding-right: 3px;
}
%px-4 {
  padding-left: 4px;
  padding-right: 4px;
}
%px-5 {
  padding-left: 5px;
  padding-right: 5px;
}
%px-6 {
  padding-left: 6px;
  padding-right: 6px;
}
%px-7 {
  padding-left: 7px;
  padding-right: 7px;
}
%px-8 {
  padding-left: 8px;
  padding-right: 8px;
}
%px-9 {
  padding-left: 9px;
  padding-right: 9px;
}
%px-10 {
  padding-left: 10px;
  padding-right: 10px;
}
%px-11 {
  padding-left: 11px;
  padding-right: 11px;
}
%px-12 {
  padding-left: 12px;
  padding-right: 12px;
}
%px-13 {
  padding-left: 13px;
  padding-right: 13px;
}
%px-14 {
  padding-left: 14px;
  padding-right: 14px;
}
%px-15 {
  padding-left: 15px;
  padding-right: 15px;
}
%px-16 {
  padding-left: 16px;
  padding-right: 16px;
}
%px-17 {
  padding-left: 17px;
  padding-right: 17px;
}
%px-18 {
  padding-left: 18px;
  padding-right: 18px;
}
%px-19 {
  padding-left: 19px;
  padding-right: 19px;
}
%px-20 {
  padding-left: 20px;
  padding-right: 20px;
}
%px-21 {
  padding-left: 21px;
  padding-right: 21px;
}
%px-22 {
  padding-left: 22px;
  padding-right: 22px;
}
%px-23 {
  padding-left: 23px;
  padding-right: 23px;
}
%px-24 {
  padding-left: 24px;
  padding-right: 24px;
}
%px-25 {
  padding-left: 25px;
  padding-right: 25px;
}
%px-26 {
  padding-left: 26px;
  padding-right: 26px;
}
%px-27 {
  padding-left: 27px;
  padding-right: 27px;
}
%px-28 {
  padding-left: 28px;
  padding-right: 28px;
}
%px-29 {
  padding-left: 29px;
  padding-right: 29px;
}
%px-30 {
  padding-left: 30px;
  padding-right: 30px;
}
%px-31 {
  padding-left: 31px;
  padding-right: 31px;
}
%px-32 {
  padding-left: 32px;
  padding-right: 32px;
}
%px-33 {
  padding-left: 33px;
  padding-right: 33px;
}
%px-34 {
  padding-left: 34px;
  padding-right: 34px;
}
%px-35 {
  padding-left: 35px;
  padding-right: 35px;
}
%px-36 {
  padding-left: 36px;
  padding-right: 36px;
}
%px-37 {
  padding-left: 37px;
  padding-right: 37px;
}
%px-38 {
  padding-left: 38px;
  padding-right: 38px;
}
%px-39 {
  padding-left: 39px;
  padding-right: 39px;
}
%px-40 {
  padding-left: 40px;
  padding-right: 40px;
}
%px-41 {
  padding-left: 41px;
  padding-right: 41px;
}
%px-42 {
  padding-left: 42px;
  padding-right: 42px;
}
%px-43 {
  padding-left: 43px;
  padding-right: 43px;
}
%px-44 {
  padding-left: 44px;
  padding-right: 44px;
}
%px-45 {
  padding-left: 45px;
  padding-right: 45px;
}
%px-46 {
  padding-left: 46px;
  padding-right: 46px;
}
%px-47 {
  padding-left: 47px;
  padding-right: 47px;
}
%px-48 {
  padding-left: 48px;
  padding-right: 48px;
}
%px-49 {
  padding-left: 49px;
  padding-right: 49px;
}
%px-50 {
  padding-left: 50px;
  padding-right: 50px;
}

//Marzine X axis

%py-0 {
  padding-left: 0;
  padding-right: 0;
}
%py-1 {
  padding-left: 1px;
  padding-right: 1px;
}
%py-2 {
  padding-left: 2px;
  padding-right: 2px;
}
%py-3 {
  padding-left: 3px;
  padding-right: 3px;
}
%py-4 {
  padding-left: 4px;
  padding-right: 4px;
}
%py-5 {
  padding-left: 5px;
  padding-right: 5px;
}
%py-6 {
  padding-left: 6px;
  padding-right: 6px;
}
%py-7 {
  padding-left: 7px;
  padding-right: 7px;
}
%py-8 {
  padding-left: 8px;
  padding-right: 8px;
}
%py-9 {
  padding-left: 9px;
  padding-right: 9px;
}
%py-10 {
  padding-left: 10px;
  padding-right: 10px;
}
%py-11 {
  padding-left: 11px;
  padding-right: 11px;
}
%py-12 {
  padding-left: 12px;
  padding-right: 12px;
}
%py-13 {
  padding-left: 13px;
  padding-right: 13px;
}
%py-14 {
  padding-left: 14px;
  padding-right: 14px;
}
%py-15 {
  padding-left: 15px;
  padding-right: 15px;
}
%py-16 {
  padding-left: 16px;
  padding-right: 16px;
}
%py-17 {
  padding-left: 17px;
  padding-right: 17px;
}
%py-18 {
  padding-left: 18px;
  padding-right: 18px;
}
%py-19 {
  padding-left: 19px;
  padding-right: 19px;
}
%py-20 {
  padding-left: 20px;
  padding-right: 20px;
}
%py-21 {
  padding-left: 21px;
  padding-right: 21px;
}
%py-22 {
  padding-left: 22px;
  padding-right: 22px;
}
%py-23 {
  padding-left: 23px;
  padding-right: 23px;
}
%py-24 {
  padding-left: 24px;
  padding-right: 24px;
}
%py-25 {
  padding-left: 25px;
  padding-right: 25px;
}
%py-26 {
  padding-left: 26px;
  padding-right: 26px;
}
%py-27 {
  padding-left: 27px;
  padding-right: 27px;
}
%py-28 {
  padding-left: 28px;
  padding-right: 28px;
}
%py-29 {
  padding-left: 29px;
  padding-right: 29px;
}
%py-30 {
  padding-left: 30px;
  padding-right: 30px;
}
%py-31 {
  padding-left: 31px;
  padding-right: 31px;
}
%py-32 {
  padding-left: 32px;
  padding-right: 32px;
}
%py-33 {
  padding-left: 33px;
  padding-right: 33px;
}
%py-34 {
  padding-left: 34px;
  padding-right: 34px;
}
%py-35 {
  padding-left: 35px;
  padding-right: 35px;
}
%py-36 {
  padding-left: 36px;
  padding-right: 36px;
}
%py-37 {
  padding-left: 37px;
  padding-right: 37px;
}
%py-38 {
  padding-left: 38px;
  padding-right: 38px;
}
%py-39 {
  padding-left: 39px;
  padding-right: 39px;
}
%py-40 {
  padding-left: 40px;
  padding-right: 40px;
}
%py-41 {
  padding-left: 41px;
  padding-right: 41px;
}
%py-42 {
  padding-left: 42px;
  padding-right: 42px;
}
%py-43 {
  padding-left: 43px;
  padding-right: 43px;
}
%py-44 {
  padding-left: 44px;
  padding-right: 44px;
}
%py-45 {
  padding-left: 45px;
  padding-right: 45px;
}
%py-46 {
  padding-left: 46px;
  padding-right: 46px;
}
%py-47 {
  padding-left: 47px;
  padding-right: 47px;
}
%py-48 {
  padding-left: 48px;
  padding-right: 48px;
}
%py-49 {
  padding-left: 49px;
  padding-right: 49px;
}
%py-50 {
  padding-left: 50px;
  padding-right: 50px;
}

// ????

%text-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

%text-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
%text-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
%text-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
%text-5 {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
%text-6 {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
// get image by css
