/* Positioning */
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.top-0 {
  top: 0;
}
.top-8p {
  top: 8%;
}
.top-10p {
  top: 10%;
}
.top-12p {
  top: 12%;
}
.top-50p {
  top: 50%;
}
.left-8p {
  left: 8%;
}
.bottom-0 {
  bottom: 0;
}
.transform-y-50 {
  transform: translateY(-50%);
}

/* Display & Flexbox */
.flex-col {
  flex-direction: column;
}
.flex-col-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.align-items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}

/* Width & Height */
.w-full {
  width: 100%;
}
.w-10 {
  width: 10px;
}
.w-15 {
  width: 15px;
}
.w-20 {
  width: 20px;
}
.w-50 {
  width: 50px;
}
.w-1p {
  width: 1%;
}
.w-2p {
  width: 2%;
}
.w-25p {
  width: 25%;
}
.w-48p {
  width: 48%;
}
.w-75p {
  width: 75%;
}
.w-85p {
  width: 85%;
}
.max-w-20p {
  max-width: 20%;
}
.max-w-30p {
  max-width: 30%;
}
.h-auto {
  height: auto;
}
.h-60 {
  height: 60px;
}
.h-full {
  height: 100%;
}

/* Margin & Padding */
.mt-2p {
  margin-top: 2%;
}
.mt-3p {
  margin-top: 3%;
}
.mt-4p {
  margin-top: 4%;
}
.mt-5p {
  margin-top: 5%;
}
.mt-20 {
  margin-top: 20px;
}
.mt-30 {
  margin-top: 30px;
}
.mt-50 {
  margin-top: 50px;
}
.mb-20 {
  margin-bottom: 20px;
}
.mb-25 {
  margin-bottom: 25px;
}
.mb-50 {
  margin-bottom: 50px;
}
.mr-10 {
  margin-right: 10px;
}
.mr-30 {
  margin-right: 30px;
}
.mx-10 {
  margin-left: 10px;
  margin-right: 10px;
}
.px-10 {
  padding-left: 10px;
  padding-right: 10px;
}
.px-40 {
  padding-left: 40px;
  padding-right: 40px;
}

/* Text & Font */
.text-black {
  color: black;
}
.text-white {
  color: white;
}
.text-gray-333 {
  color: #333333;
}
.text-gray-666 {
  color: #666666;
}
.text-blue-3571FF {
  color: #3571FF;
}
.text-blue-4C6FFF {
  color: #4C6FFF;
}
.text-0-5em {
  font-size: 0.5em;
}
.text-1em {
  font-size: 1em;
}
.text-1-1em {
  font-size: 1.1em;
}
.text-1-2em {
  font-size: 1.2em;
}
.text-2-5em {
  font-size: 2.5em;
}
.text-14px {
  font-size: 14px;
}
.text-16px {
  font-size: 16px;
}
.text-20px {
  font-size: 20px;
}
.text-26px {
  font-size: 26px;
}
.indent-2em {
  text-indent: 2em;
}
.lh-28 {
  line-height: 28px;
}

/* Z-index */
.z-0 {
  z-index: 0;
}
.z-2 {
  z-index: 2;
}
.font-bold {
  font-weight: bold;
}
.bg-dark-blue {
  background-color: #092646;
}
.bg-blue-4C6FFF {
  background-color: #4C6FFF;
}
.bg-transparent-text {
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 5px 0;
  font-size: 18px;
}
.w-75p {
  width: 75%;
}
.text-13px {
  font-size: 13px;
}
.text-15px {
  font-size: 15px;
}
.flex{
  display: flex;
}