/*----------------------------------------------------*/

/*             custom margin and paddings             */

/*----------------------------------------------------*/

/* bootstrap default size are: 
    1 : 4px
    2 : 8px
    3 : 16px
    4 : 24px
    5 : 48px
*/

.px-2-5 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

.py-2-5 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

.p-2-5 {
    padding: 0.75rem !important;
}

.mt-2-5 {
  margin-top: 12px;
}

.pt-2-5 {
  padding-top: 12px;
}

.mb-2-5 {
  margin-bottom: 12px;
}

.pb-2-5 {
  padding-bottom: 12px;
}

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

.py-2-5 {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* margin-10 */

.m-10 {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
}

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

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

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

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

/* padding-10 */

.p-10 {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

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

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

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

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

/* margin-20 */

.m-20 {
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
}

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

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

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

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

/* padding-20 */

.p-20 {
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
}

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

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

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

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

/* margin-28 */

.m-28 {
  margin-top: 28px;
  margin-bottom: 28px;
  margin-left: 28px;
  margin-right: 28px;
}

.mt-28 {
  margin-top: 28px;
}

.mb-28 {
  margin-bottom: 28px;
}

.ml-28 {
  margin-left: 28px;
}

.mr-28 {
  margin-right: 28px;
}

/* padding-28 */

.p-28 {
  padding-top: 28px;
  padding-bottom: 28px;
  padding-left: 28px;
  padding-right: 28px;
}

.pt-28 {
  padding-top: 28px;
}

.pb-28 {
  padding-bottom: 28px;
}

.pl-28 {
  padding-left: 28px;
}

.pr-28 {
  padding-right: 28px;
}

/* margin-32 */

.m-32 {
  margin-top: 32px;
  margin-bottom: 32px;
  margin-left: 32px;
  margin-right: 32px;
}

.my-32 {
  margin-top: 32px;
  margin-bottom: 32px;
}

.mx-32 {
  margin-left: 32px;
  margin-right: 32px;
}

.mt-32 {
  margin-top: 32px;
}

.mb-32 {
  margin-bottom: 32px;
}

.ml-32 {
  margin-left: 32px;
}

.mr-32 {
  margin-right: 32px;
}

/* padding-32 */
.p-2-5 {
  padding: 12px;
}

.p-32 {
  padding-top: 32px;
  padding-bottom: 32px;
  padding-left: 32px;
  padding-right: 32px;
}

.py-32 {
  padding-top: 32px;
  padding-bottom: 32px;
}

.px-32 {
  padding-left: 32px;
  padding-right: 32px;
}

.pt-32 {
  padding-top: 32px;
}

.pb-32 {
  padding-bottom: 32px;
}

.pl-32 {
  padding-left: 32px;
}

.pr-32 {
  padding-right: 32px;
}

/* margin-40 */

.mt-40 {
  margin-top: 40px !important;
}

.mb-40 {
  margin-bottom: 40px !important;
}

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

/* padding-40 */

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

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

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

.mt-60{
    margin-top: 60px !important;
}

.mt-80 {
    margin-top: 80px !important;
}

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

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

@media screen and (min-width: 768px) {
  .m-md-10 {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
  }

  .mt-md-10 {
    margin-top: 10px !important;
  }

  .mb-md-10 {
    margin-bottom: 10px !important;
  }

  .ml-md-10 {
    margin-left: 10px !important;
  }

  .mr-md-10 {
    margin-right: 10px !important;
  }

  .p-md-10 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .pt-md-10 {
    padding-top: 10px !important;
  }

  .pb-md-10 {
    padding-bottom: 10px !important;
  }

  .pl-md-10 {
    padding-left: 10px !important;
  }

  .pr-md-10 {
    padding-right: 10px !important;
  }
  .m-md-20 {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
  }

  .mt-md-20 {
    margin-top: 20px !important;
  }

  .mb-md-20 {
    margin-bottom: 20px !important;
  }

  .ml-md-20 {
    margin-left: 20px !important;
  }

  .mr-md-20 {
    margin-right: 20px !important;
  }

  .p-md-20 {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .pt-md-20 {
    padding-top: 20px !important;
  }

  .pb-md-20 {
    padding-bottom: 20px !important;
  }

  .pl-md-20 {
    padding-left: 20px !important;
  }

  .pr-md-20 {
    padding-right: 20px !important;
  }

  .m-md-28 {
    margin-top: 28px !important;
    margin-bottom: 28px !important;
    margin-left: 28px !important;
    margin-right: 28px !important;
  }

  .mt-md-28 {
    margin-top: 28px !important;
  }

  .mb-md-28 {
    margin-bottom: 28px !important;
  }

  .ml-md-28 {
    margin-left: 28px !important;
  }

  .mr-md-28 {
    margin-right: 28px !important;
  }

  .p-md-28 {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  .pt-md-28 {
    padding-top: 28px !important;
  }

  .pb-md-28 {
    padding-bottom: 28px !important;
  }

  .pl-md-28 {
    padding-left: 28px !important;
  }

  .pr-md-28 {
    padding-right: 28px !important;
  }

  .m-md-32 {
    margin-top: 32px !important;
    margin-bottom: 32px !important;
    margin-left: 32px !important;
    margin-right: 32px !important;
  }

  .my-md-32 {
    margin-top: 32px !important;
    margin-bottom: 32px !important;
  }

  .my-md-32 {
    margin-left: 32px !important;
    margin-right: 32px !important;
  }

  .mt-md-32 {
    margin-top: 32px !important;
  }

  .mb-md-32 {
    margin-bottom: 32px !important;
  }

  .ml-md-32 {
    margin-left: 32px !important;
  }

  .mr-md-32 {
    margin-right: 32px !important;
  }

  .p-md-32 {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  .py-md-32 {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  .px-md-32 {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  .pt-md-32 {
    padding-top: 32px !important;
  }

  .pb-md-32 {
    padding-bottom: 32px !important;
  }

  .pl-md-32 {
    padding-left: 32p !important;
  }

  .pr-md-32 {
    padding-right: 32px !important;
  }

  /* margin 40 */
  .mt-md-40 {
    margin-top: 40px;
  }

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

  /* padding 40 */

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

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