/* Margin & Padding */

.p-10 {
  padding: 2.5rem;
}
.pt-10, .py-10 {
  padding-top: 2.5rem;
}
.pr-10, .px-10 {
  padding-right: 2.5rem;
}
.pb-10, .py-10 {
  padding-bottom: 2.5rem;
}
.pl-10, .px-10 {
  padding-left: 2.5rem;
}

.p-12 {
  padding: 3rem;
}
.pt-12, .py-12 {
  padding-top: 3rem;
}
.pr-12, .px-12 {
  padding-right: 3rem;
}
.pb-12, .py-12 {
  padding-bottom: 3rem;
}
.pl-12, .px-12 {
  padding-left: 3rem;
}


.m-12 {
  margin: 3rem;
}
.mt-12, .my-12 {
  margin-top: 3rem;
}
.mr-12, .mx-12 {
  margin-right: 3rem;
}
.mb-12, .my-12 {
  margin-bottom: 3rem;
}
.ml-12, .mx-12 {
  margin-left: 3rem;
}

.p-20 {
  padding: 5rem;
}
.pt-20, .py-20 {
  padding-top: 5rem;
}
.pr-20, .px-20 {
  padding-right: 5rem;
}
.pb-20, .py-20 {
  padding-bottom: 5rem;
}
.pl-20, .px-20 {
  padding-left: 5rem;
}

.m-20 {
  margin: 5rem;
}
.mt-20, .my-20 {
  margin-top: 5rem;
}
.mr-20, .mx-20 {
  margin-right: 5rem;
}
.mb-20, .my-20 {
  margin-bottom: 5rem;
}
.ml-20, .mx-20 {
  margin-left: 5rem;
}

.p-1\/5 {
  padding: 25%;
}
.py-1\/5 {
  padding-top: 20%;
  padding-bottom: 20%;
}
.pt-1\/5 {
  padding-top: 20%;
}
.pb-1\/5 {
  padding-bottom: 20%;
}
.px-1\/5 {
  padding-left: 20%;
  padding-right: 20%;
}
.pl-1\/5 {
  padding-left: 20%;
}
.pr-1\/5 {
  padding-right: 20%;
}

.p-1\/10 {
  padding: 10%;
}
.py-1\/10 {
  padding-top: 10%;
  padding-bottom: 10%;
}
.pt-1\/10 {
  padding-top: 10%;
}
.pb-1\/10 {
  padding-bottom: 10%;
}
.px-1\/10 {
  padding-left: 10%;
  padding-right: 10%;
}
.pl-1\/10 {
  padding-left: 10%;
}
.pr-1\/10 {
  padding-right: 10%;
}

.p-1\/25 {
  padding: 4%;
}
.py-1\/25 {
  padding-top: 4%;
  padding-bottom: 4%;
}
.pt-1\/25 {
  padding-top: 4%;
}
.pb-1\/25 {
  padding-bottom: 4%;
}
.px-1\/25 {
  padding-left: 4%;
  padding-right: 4%;
}
.pl-1\/25 {
  padding-left: 4%;
}
.pr-1\/25 {
  padding-right: 4%;
}

.p-1\/50 {
  padding: 2%;
}
.py-1\/50 {
  padding-top: 2%;
  padding-bottom: 2%;
}
.pt-1\/50 {
  padding-top: 2%;
}
.pb-1\/50 {
  padding-bottom: 2%;
}
.px-1\/50 {
  padding-left: 2%;
  padding-right: 2%;
}
.pl-1\/50 {
  padding-left: 2%;
}
.pr-1\/50 {
  padding-right: 2%;
}

.-p-1\/50 {
  padding: -2%;
}
.-py-1\/50 {
  padding-top: -2%;
  padding-bottom: -2%;
}
.-pt-1\/50 {
  padding-top: -2%;
}
.-pb-1\/50 {
  padding-bottom: -2%;
}
.-px-1\/50 {
  padding-left: -2%;
  padding-right: -2%;
}
.-pl-1\/50 {
  padding-left: -2%;
}
.-pr-1\/50 {
  padding-right: -2%;
}








.m-1\/5 {
  margin: 20%;
}
.my-1\/5 {
  margin-top: 20%;
  margin-bottom: 20%;
}
.mt-1\/5 {
  margin-top: 20%;
}
.mb-1\/5 {
  margin-bottom: 20%;
}
.mx-1\/5 {
  margin-left: 20%;
  margin-right: 20%;
}
.ml-1\/5 {
  margin-left: 20%;
}
.mr-1\/5 {
  margin-right: 20%;
}

.m-1\/25 {
  margin: 4%;
}
.my-1\/25 {
  margin-top: 4%;
  margin-bottom: 4%;
}
.mt-1\/25 {
  margin-top: 4%;
}
.mb-1\/25 {
  margin-bottom: 4%;
}
.mx-1\/25 {
  margin-left: 4%;
  margin-right: 4%;
}
.ml-1\/25 {
  margin-left: 4%;
}
.mr-1\/25 {
  margin-right: 4%;
}

.m-1\/50 {
  margin: 2%;
}
.my-1\/50 {
  margin-top: 2%;
  margin-bottom: 2%;
}
.mt-1\/50 {
  margin-top: 2%;
}
.mb-1\/50 {
  margin-bottom: 2%;
}
.mx-1\/50 {
  margin-left: 2%;
  margin-right: 2%;
}
.ml-1\/50 {
  margin-left: 2%;
}
.mr-1\/50 {
  margin-right: 2%;
}

.-m-1\/50 {
  margin: -2%;
}
.-my-1\/50 {
  margin-top: -2%;
  margin-bottom: -2%;
}
.-mt-1\/50 {
  margin-top: -2%;
}
.-mb-1\/50 {
  margin-bottom: -2%;
}
.-mx-1\/50 {
  margin-left: -2%;
  margin-right: -2%;
}
.-ml-1\/50 {
  margin-left: -2%;
}
.-mr-1\/50 {
  margin-right: -2%;
}

.-my-24 {
  margin-top: -6rem;
  margin-bottom: -6rem;
}
.-my-12 {
  margin-top: -3rem;
  margin-bottom: -3rem;
}
.-my-18 {
  margin-top: -4.5rem;
  margin-bottom: -4.5rem;
}
.-mb-24 {
  margin-bottom: -6rem;
}

/* Width / Height */

.h-1\/2 {
  height: 50%;
}

.max-w-xxs {
  max-width: 5rem;
}

.min-h-1\/2-screen {
  min-height: 50vh;
}
.min-h-2\/3-screen {
  min-height: 75vh;
}











@media (min-width: 576px) {
  .sm\:p-12 {
    padding: 3rem;
  }
}

@media (min-width: 768px) {
  .md\:m-1\/5 {
    margin: 20%;
  }
  .md\:my-1\/5 {
    margin-top: 20%;
    margin-bottom: 20%;
  }
  .md\:mt-1\/5 {
    margin-top: 20%;
  }
  .md\:mb-1\/5 {
    margin-bottom: 20%;
  }
  .md\:mx-1\/5 {
    margin-left: 20%;
    margin-right: 20%;
  }
  .md\:ml-1\/5 {
    margin-left: 20%;
  }
  .md\:mr-1\/5 {
    margin-right: 20%;
  }
  .md\:px-1\/5 {
    padding-left: 20%;
    padding-right: 20%;
}
}