@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap");
* {
  margin: 0;
  padding: 0;
  outline: none;
  border: none;
  resize: none;
  text-decoration: none;
  box-sizing: border-box;
  transition: all 0.2s ease;
  font-family: "Poppins", sans-serif;
}

/* Colors root */
:root {
  --white: #ffffff;
  --whitef1f1f1: #f1f1f1;
  --whitef3f3f3: #f3f3f3;
  --whitef5f5f5: #f5f5f5;
  --whitef8f8f8: #f8f8f8;
  --whitee6e5e5: #e6e5e5;
  --whitedddddd: #dddddd;
  --whiteeeeeee: #eeeeee;
  --whited9d9d9: #d9d9d9;
  --whitef8f9fa: #f8f9fa;
  --graycccccc: #cccccc;
  --grayc5c5c5: #c5c5c5;
  --graybfbfbf: #bfbfbf;
  --graya6a6a6: #a6a6a6;
  --gray707070: #707070;
  --gray333333: #333333;
  --gray555555: #555555;
  --gray3f3f3f: #3f3f3f;
  --gray3a3b3c: #3A3B3C;
  --gray4d4c4c: #4D4C4C;
  --gray3a3b3c: #3A3B3C;
  --gray6e6b6b: #6e6b6b;
  --gray666666: #666666;
  --gray888888: #888888;
  --gray999999: #999999;
  --gray3a3b3c: #3A3B3C;
  --gray2b2f32: #2b2f32;
  --gray363232: #363232;
  --grayb0b0b0: #b0b0b0;
  --violete7d1fc: #E7D1FC;
  --violet6c7293: #6c7293;
  --violet5c6bc0: #5c6bc0;
  --violet512da8: #512da8;
  --violet7e5bef: #7e5bef;
  --black: #000000;
  --black111111: #111111;
  --black222222: #222222;
  --black1a1a1a: #1a1a1a;
  --black202020: #202020;
  --black242526: #242526;
  --black212529: #212529;
  --green1a2419: #1a2419;
  --green13ce66: #13ce66;
  --green38d39f: #38d39f;
  --green2cb386: #2cb386;
  --green35660c: #35660c;
  --green225042: #225042;
  --green34c496: #34c496;
  --green99cc33: #99cc33;
  --green059669: #059669;
  --green249c74: #249c74;
  --green198754: #198754;
  --green13653f: #13653f;
  --green0a3622: #0a3622;
  --green055160: #055160;
  --green9eeaf9: #9eeaf9;
  --yellowffc82c: #ffc82c;
  --yellowfedd58: #fedd58;
  --yellowffe6ac: #ffe6ac;
  --yellowf5b301: #f5b301;
  --yellowdfe20b: #dfe20b;
  --yellowe8b52a: #e8b52a;
  --yellowffc107: #ffc107;
  --yellow664d03: #664d03;
  --yellowfff3cd: #fff3cd;
  --yellowffe69c: #ffe69c;
  --yellowf0c82a: #f0c82a;
  --redf12828: #f12828;
  --redf05151: #f05151;
  --redeb1616: #EB1616;
  --rede64a35: #E64a35;
  --redc1260b: #c1260b;
  --reddc3545: #dc3545;
  --red58151c: #58151c;
  --blue: blue;
  --blue4da3ff: #4DA3FF;
  --blue009fe9: #009fe9;
  --blue1d8ca8: #1d8ca8;
  --blue136a80: #136a80;
  --blue003366: #003366;
  --blue1974d2: #1974d2;
  --blue1fb6ff: #1fb6ff;
  --blue0d6efd: #0d6efd;
  --blue0dcaf0: #0dcaf0;
  --blue052c65: #052c65;
  --blue9ec5fe: #9ec5fe;
  --blue1e3a5f: #1e3a5f;
  --blue4a7dab: #4a7dab;
  --pinkff49db: #ff49db;
  --pinkf1aeb5: #f1aeb5;
  --pinkd63384: #d63384;
  --brown: brown;
  --orange: orange;
  --orangeff7849: #ff7849;
  --orangef39c12: #f39c12;
  --orangee67e22: #e67e22;
  --orangeff8516: #ff8516;
  --rgba01: rgba(0,0,0,0.1);
  --rgba02: rgba(0,0,0,0.2);
  --rgba05: rgba(0,0,0,0.5);
  --rgba24501: rgba(245, 245, 245, 0.1);
  --rgba24502: rgba(245, 245, 245, 0.2);
  --rgbagreen: rgba(177, 177, 18, 0.63);
  --rgba25507: rgba(255, 255, 255, 0.774);
  --rgba25505: rgba(255, 255, 255, 0.5);
  --rgba25502: rgba(255, 255, 255, 0.2);
}

body {
  min-height: 100vh;
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
}

/* button */
button {
  cursor: pointer;
  border-radius: 0;
}

/* table */
table {
  caption-side: bottom;
  border-collapse: collapse;
}

/* h */
h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
}

/* ul and li */
ul {
  list-style: none;
}

.ls-none {
  list-style: none;
}

/* overflow */
.ov-auto {
  overflow: auto;
}

.ov-hidden {
  overflow: hidden;
}

.ov-x-auto {
  overflow-x: auto;
}

.ov-y-auto {
  overflow-y: auto;
}

.ov-x-hidden {
  overflow-x: hidden;
}

.ov-y-hidden {
  overflow-y: hidden;
}

/* margin */
.mg-0 {
  margin: 0;
}

.mg-0-auto {
  margin: 0 auto;
}

.mg-5px {
  margin: 5px;
}

.mg-10px {
  margin: 10px;
}

.mg-15px {
  margin: 15px;
}

.mg-50px {
  margin: 50px;
}

.mg-10px-auto {
  margin: 10px auto;
}

/* margin-top */
.mgt-10px {
  margin-top: 10px;
}

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

/* margin-right */
.mgr-10px {
  margin-right: 10px;
}

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

/* margin-bottom */
.mgb-10px {
  margin-bottom: 10px;
}

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

.mgb-25px {
  margin-bottom: 25px;
}

/* margin-left */
.mgl-10px {
  margin-left: 10px;
}

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

.mgl-70px {
  margin-left: 70px;
}

/* margin-x-y */
.mg-0-5px {
  margin: 0 5px;
}

.mg-0-10px {
  margin: 0 10px;
}

.mg-0-50px {
  margin: 0 50px;
}

.mg-5px-0 {
  margin: 5px 0;
}

.mg-10px-0 {
  margin: 10px 0;
}

.mg-10px-5px {
  margin: 10px 5px;
}

.mg-10px-50px {
  margin: 10px 50px;
}

.mg-15px-0 {
  margin: 15px 0;
}

.mg-20px-0 {
  margin: 20px 0;
}

.mg-25px-0 {
  margin: 25px 0;
}

.mg-25px-50px {
  margin: 25px 50px;
}

.mg-15px-25px {
  margin: 15px 25px;
}

/* margin-x-y-z */
.mg-30px-0-5px {
  margin: 30px 0 5px;
}

/* padding */
.pd-0 {
  padding: 0;
}

.pd-5px {
  padding: 5px;
}

.pd-7px {
  padding: 7px;
}

.pd-8px {
  padding: 8px;
}

.pd-10px {
  padding: 10px;
}

.pd-15px {
  padding: 15px;
}

.pd-20px {
  padding: 20px;
}

.pd-30px {
  padding: 30px;
}

.pd-50px {
  padding: 50px;
}

.pd-100px {
  padding: 100px;
}

.pd-150px {
  padding: 150px;
}

.pd-200px {
  padding: 200px;
}

.pd-2prc {
  padding: 2%;
}

/* padding-bottom */
.pdb-15px {
  padding-bottom: 15px;
}

/* padding-x-y */
.pd-3px-7px {
  padding: 3px 7px;
}

.pd-5px-0 {
  padding: 5px 0;
}

.pd-5px-10px {
  padding: 5px 10px;
}

.pd-10px-15px {
  padding: 10px 15px;
}

.pd-20px-50px {
  padding: 20px 50px;
}

.pd-40px-30px {
  padding: 40px 30px;
}

/* border */
/* border-radius */
.border-radius-5px {
  border-radius: 5px;
}

.border-radius-8px {
  border-radius: 8px;
}

.border-radius-10px {
  border-radius: 10px;
}

.border-radius-20px {
  border-radius: 20px;
}

.border-radius-30px {
  border-radius: 30px;
}

.border-radius-50prc {
  border-radius: 50%;
}

.border-tlr-trr-8px {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.border-tlr-trr-5px {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.border-blr-brr-8px {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.border-tr-br-50px {
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}

/* border solid */
.border-1px-s-black {
  border: 1px solid var(--black);
}

.border-1px-s-white {
  border: 1px solid var(--white);
}

.border-1px-s-202020 {
  border: 1px solid var(--black202020);
}

.border-1px-s-f5f5f5 {
  border: 1px solid var(--whitef5f5f5);
}

.border-2px-s-202020 {
  border: 2px solid var(--black202020);
}

.border-2px-s-f3f3f3 {
  border: 2px solid var(--whitef3f3f3);
}

.border-2px-s-f0c82a {
  border: 2px solid var(--yellowf0c82a);
}

.border-3px-s-f0c82a {
  border: 3px solid var(--yellowf0c82a);
}

.border-2px-s-0a3622 {
  border: 2px solid var(--green0a3622);
}

.border-2px-s-4da3ff {
  border: 2px solid var(--blue4da3ff);
}

.border-3px-s-202020 {
  border: 3px solid var(--black202020);
}

.border-t-1px-s-f0c82a {
  border-top: 1px solid var(--yellowf0c82a);
}

.border-t-1px-s-4da3ff {
  border-top: 1px solid var(--blue4da3ff);
}

.border-t-1px-s-202020 {
  border-top: 1px solid var(--black202020);
}

.border-b-1px-s-202020 {
  border-bottom: 1px solid #202020;
}

.border-b-2px-s-white {
  border-bottom: 2px solid var(--white);
}

.border-b-2px-s-f5f5f5 {
  border-bottom: 2px solid var(--whitef5f5f5);
}

.border-b-2px-s-f0c82a {
  border-bottom: 2px solid var(--yellowf0c82a);
}

.border-b-2px-s-0a3622 {
  border-bottom: 2px solid var(--green0a3622);
}

.border-b-2px-s-4da3ff {
  border-bottom: 2px solid var(--blue4da3ff);
}

.border-t-r-l-1px-s-f3f3f3 {
  border-top: 1px solid var(--whitef3f3f3);
  border-right: 1px solid var(--whitef3f3f3);
  border-left: 1px solid var(--whitef3f3f3);
}

.border-t-b-1px-s-f0c28a {
  border-top: 1px solid var(--yellowf0c82a);
  border-bottom: 1px solid var(--yellowf0c82a);
}

.border-t-b-2px-s-f0c28a {
  border-top: 2px solid var(--yellowf0c82a);
  border-bottom: 2px solid var(--yellowf0c82a);
}

.border-t-b-2px-s-4da3ff {
  border-top: 2px solid var(--blue4da3ff);
  border-bottom: 2px solid var(--blue4da3ff);
}

/* border letter */
.border-letter-1px-f0c82a {
  -webkit-text-stroke: 1px var(--yellowf0c82a);
}

.border-letter-3px-0a3622 {
  -webkit-text-stroke: 3px var(--green0a3622);
}

/* height */
.h-full {
  height: 100%;
}

.h-auto {
  height: auto;
}

.h-50px {
  height: 50px;
}

.h-55px {
  height: 55px;
}

.h-70px {
  height: 70px;
}

.h-75px {
  height: 75px;
}

.h-100px {
  height: 100px;
}

.h-125px {
  height: 125px;
}

.h-140px {
  height: 140px;
}

.h-148px {
  height: 148px;
}

.h-175px {
  height: 175px;
}

.h-200px {
  height: 200px;
}

.h-225px {
  height: 225px;
}

.h-250px {
  height: 250px;
}

.h-275px {
  height: 275px;
}

.h-300px {
  height: 300px;
}

.h-375px {
  height: 375px;
}

.h-400px {
  height: 400px;
}

.h-450px {
  height: 450px;
}

.h-20vh {
  height: 20vh;
}

.h-25vh {
  height: 25vh;
}

.h-30vh {
  height: 30vh;
}

.h-40vh {
  height: 40vh;
}

.h-45vh {
  height: 45vh;
}

.h-50vh {
  height: 50vh;
}

.h-55vh {
  height: 55vh;
}

.h-60vh {
  height: 60vh;
}

.h-70vh {
  height: 70vh;
}

.h-80vh {
  height: 80vh;
}

.h-100vh {
  height: 100vh;
}

.max-h-250px {
  max-height: 250px;
}

.min-h-100vh {
  min-height: 100vh;
}

.min-h-full {
  min-height: 100%;
}

.line-h-50px {
  line-height: 50px;
}

.line-h-100px {
  line-height: 100px;
}

/* display_and_all */
.dis-block {
  display: block;
}

.dis-none {
  display: none;
}

.dis-grid {
  display: grid;
}

.dis-flex {
  display: flex;
}

/* flex */
.flex-1 {
  flex: 1;
}

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

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-d-col {
  flex-direction: column;
}

.flex-d-row {
  flex-direction: row;
}

.flex-d-row-r {
  flex-direction: row-reverse;
}

/* align */
.ali-items-center {
  align-items: center;
}

.ali-items-stretch {
  align-items: stretch;
}

.jus-content-start {
  justify-content: start;
}

.jus-content-center {
  justify-content: center;
}

.jus-content-between {
  justify-content: space-between;
}

.jus-content-space-around {
  justify-content: space-around;
}

/* gap */
.gap-5px {
  gap: 5px;
}

.gap-10px {
  gap: 10px;
}

.gap-16px {
  gap: 16px;
}

.gap-30px {
  gap: 30px;
}

/* background */
.bg-transparent {
  background: transparent;
}

.bg-white {
  background-color: var(--white);
}

.bg-black {
  background-color: var(--black);
}

.bg-fedd58 {
  background-color: var(--yellowfedd58);
}

.bg-f5f5f5 {
  background-color: var(--whitef5f5f5);
}

.bg-f3f3f3 {
  background-color: var(--whitef3f3f3);
}

.bg-202020 {
  background-color: var(--black202020);
}

.bg-f0c82a {
  background-color: var(--yellowf0c82a);
}

.bg-f05151 {
  background-color: var(--redf05151);
}

.bg-38d39f {
  background-color: var(--green38d39f);
}

.bg-0a3622 {
  background-color: var(--green0a3622);
}

.bg-4da3ff {
  background-color: var(--blue4da3ff);
}

/* rgba */
.bg-rgba05 {
  background-color: var(--rgba05);
}

.bg-rgba24508 {
  background-color: var(--rgba24508);
}

.bg-rgba25507 {
  background-color: var(--rgba25507);
}

.bg-rgba25502 {
  background-color: var(--rgba25502);
}

/* background linear-gradient */
.bg-lg-45deg-rgba25507-0a3622 {
  background: linear-gradient(45deg, var(--rgba25502), var(--green0a3622));
}

/* bacground... */
.bgp-center {
  background-position: center;
}

.bgr-nor {
  background-repeat: no-repeat;
}

.bgs-cover {
  background-size: cover;
}

.bga-fixed {
  background-attachment: fixed;
}

.bgc-text {
  background-clip: text;
}

/* width */
.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.w-50px {
  width: 50px;
}

.w-75px {
  width: 75px;
}

.w-100px {
  width: 100px;
}

.w-125px {
  width: 125px;
}

.w-140px {
  width: 140px;
}

.w-148px {
  width: 148px;
}

.w-175px {
  width: 175px;
}

.w-200px {
  width: 200px;
}

.w-250px {
  width: 250px;
}

.w-275px {
  width: 275px;
}

.w-300px {
  width: 300px;
}

.w-350px {
  width: 350px;
}

.w-375px {
  width: 375px;
}

.w-400px {
  width: 400px;
}

.w-450px {
  width: 450px;
}

.w-500px {
  width: 500px;
}

.w-600px {
  width: 600px;
}

.w-700px {
  width: 700px;
}

.w-750px {
  width: 750px;
}

.w-800px {
  width: 800px;
}

.w-850px {
  width: 850px;
}

.w-900px {
  width: 900px;
}

.w-1100px {
  width: 1100px;
}

.w-1400px {
  width: 1400px;
}

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

.w-35prc {
  width: 35%;
}

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

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

.w-55prc {
  width: 55%;
}

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

.w-48prc {
  width: 48%;
}

.w-75prc {
  width: 75%;
}

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

.w-95prc {
  width: 95%;
}

.w-100vw {
  width: 100vw;
}

.max-w-100px {
  max-width: 100px;
}

.max-w-200px {
  max-width: 200px;
}

.max-w-300px {
  max-width: 300px;
}

.max-w-350px {
  max-width: 350px;
}

.max-w-400px {
  max-width: 400px;
}

.max-w-450px {
  max-width: 450px;
}

.max-w-500px {
  max-width: 500px;
}

.max-w-600px {
  max-width: 600px;
}

.max-w-700px {
  max-width: 700px;
}

.max-w-750px {
  max-width: 750px;
}

.max-w-800px {
  max-width: 800px;
}

.max-w-850px {
  max-width: 850px;
}

.max-w-900px {
  max-width: 900px;
}

.max-w-1000px {
  max-width: 1000px;
}

.max-w-1100px {
  max-width: 1100px;
}

.max-w-1200px {
  max-width: 1200px;
}

.max-w-1400px {
  max-width: 1400px;
}

.min-w-full {
  min-width: 100%;
}

/* box-shadow */
.b-shadow-0-0-2px-0-f3f3f3 {
  box-shadow: 0 0 2px 0 var(--whitef3f3f3);
}

.b-shadow-0-0-2px-0-363232 {
  box-shadow: 0 0 2px 0 var(--gray363232);
}

.b-shadow-0-0-2px-0-202020 {
  box-shadow: 0 0 2px 0 var(--black202020);
}

.b-shadow-0-0-3px-0-black {
  box-shadow: 0 0 3px 0 var(--black);
}

.b-shadow-0-0-5px-0-202020 {
  box-shadow: 0 0 5px 0 var(--black202020);
}

.b-shadow-0-5px-10px-rgba02 {
  box-shadow: 0 5px 10px var(--rgba02);
}

.box-shadow-m5px-5px-10px-rgba05 {
  box-shadow: -5px 5px 10px var(--rgba05);
}

.b-shadow-inset-0-0-50px-0-black {
  box-shadow: inset 0 0 50px 0 var(--black);
}

/* color */
.color-transparent {
  color: transparent;
}

.color-black {
  color: var(--black);
}

.color-white {
  color: var(--white);
}

.color-f5f5f5 {
  color: var(--whitef5f5f5);
}

.color-f3f3f3 {
  color: var(--whitef3f3f3);
}

.color-fedd58 {
  color: var(--yellowfedd58);
}

.color-202020 {
  color: var(--black202020);
}

.color-f05151 {
  color: var(--redf05151);
}

.color-f0c82a {
  color: var(--yellowf0c82a);
}

.color-38d39f {
  color: var(--green38d39f);
}

.color-0a3622 {
  color: var(--green0a3622);
}

.color-99cc33 {
  color: var(--green99cc33);
}

.color-0d6efd {
  color: var(--blue0d6efd);
}

.color-4a7dab {
  color: var(--blue4a7dab);
}

.color-4da3ff {
  color: var(--blue4da3ff);
}

/* font-size */
.fs-12px {
  font-size: 12px;
}

.fs-13px {
  font-size: 13px;
}

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

.fs-15px {
  font-size: 15px;
}

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

.fs-17px {
  font-size: 17px;
}

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

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

.fs-25px {
  font-size: 25px;
}

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

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

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

.fs-50px {
  font-size: 50px;
}

.fs-75px {
  font-size: 75px;
}

.fs-100px {
  font-size: 100px;
}

.fs-125px {
  font-size: 125px;
}

.fs-150px {
  font-size: 150px;
}

.fs-200px {
  font-size: 200px;
}

/* font-weight */
.fw-500 {
  font-weight: 500;
}

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

.fw-bold {
  font-weight: bold;
}

/* text */
.txt-center {
  text-align: center;
}

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

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

.txt-under {
  text-decoration: underline;
}

.txt-under-202020 {
  text-decoration: underline var(--black202020);
}

.txt-under-0a3622 {
  text-decoration: underline var(--green0a3622);
}

.txt-upper {
  text-transform: uppercase;
}

/* cursor */
.cr-pointer {
  cursor: pointer;
}

/* position and all */
.po-absolute {
  position: absolute;
}

.po-relative {
  position: relative;
}

.po-fixed {
  position: fixed;
}

.inset-0 {
  inset: 0;
}

.top-0 {
  top: 0;
}

.right-0 {
  right: 0;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

/* scale */
.scale12 {
  transform: scale(1.2);
}

/* transition */
.transition-transform-01-linear {
  transition: transform 0.1s linear;
}

/* hover */
/* hover background */
.hover-bg-f5f5f5:hover {
  background-color: var(--whitef5f5f5);
}

.hover-bg-f3f3f3:hover {
  background-color: var(--whitef3f3f3);
}

.hover-bg-fedd58:hover {
  background-color: var(--yellowfedd58);
}

.hover-bg-f0c82a:hover {
  background-color: var(--yellowf0c82a);
}

.hover-bg-0a3622:hover {
  background-color: var(--green0a3622);
}

.hover-bg-4da3ff:hover {
  background-color: var(--blue4da3ff);
}

.hover-bg-202020:hover {
  background-color: var(--black202020);
}

/* hover box-shadow */
.hover-b-shadow-inset-0-0-3px-0-black:hover {
  box-shadow: inset 0 0 50px 0 var(--black);
}

/* hover font-size */
.hover-fs-30px:hover {
  font-size: 30px;
}

/* hover color */
.hover-color-white:hover {
  color: var(--white);
}

.hover-color-f3f3f3:hover {
  color: var(--whitef3f3f3);
}

.hover-color-f5f5f5:hover {
  color: var(--whitef5f5f5);
}

.hover-color-4da3ff:hover {
  color: var(--blue4da3ff);
}

.hover-color-f0c82a:hover {
  color: var(--yellowf0c82a);
}

.hover-color-202020:hover {
  color: var(--black202020);
}

/* hover padding */
.hover-pd-12px:hover {
  padding: 12px;
}

/* hover scale */
.hover-scale09:hover {
  transform: scale(0.9);
}

.hover-scale11:hover {
  transform: scale(1.1);
}

.hover-scale12:hover {
  transform: scale(1.2);
}

/* active */
.active-translate-y-m-50prc-scale085:active {
  transform: translateY(-50%) scale(0.85);
}

/* focus */
/* focus scale */
.focus-scale08:focus {
  transform: scale(0.8);
}

.focus-scale09:focus {
  transform: scale(0.9);
}

/* focus color */
.focus-color-f5f5f5:focus {
  color: var(--whitef5f5f5);
}

.focus-color-white:focus {
  color: var(--white);
}

.focus-color-4da3ff:focus {
  color: var(--blue4da3ff);
}

/* focus background-color */
.focus-bg-4da3ff:focus {
  background-color: var(--blue4da3ff);
}

/* Animations */
.animation-slideFromTop {
  animation: slideTop 1.25s ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes slideTop {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.animation-slideFromBottom {
  animation: slideBottom 1.25s ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes slideBottom {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.animation-slideFront {
  animation: slideFront 0.3s ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes slideFront {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.animation-slideFront125 {
  animation: slideFront 1.25s ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes slideFront {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.animation-slideLeft {
  animation: slideLeft 1.5s ease-in-out;
}

@keyframes slideLeft {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.animation-slideRight {
  animation: slideRight 1.5s ease-out;
}

@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.animation-img-body {
  height: 100vh;
  width: 100%;
  overflow-x: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  animation: backgroundAnimation 30s infinite;
  -webkit-animation: backgroundAnimation 30s infinite;
  -moz-animation: backgroundAnimation 30s infinite;
  -o-animation: backgroundAnimation 30s infinite;
  -ms-animation: backgroundAnimation 30s infinite;
}

@keyframes backgroundAnimation {
  0% {
    background-image: url("/path_to_your_images");
  }
  25% {
    background-image: url("/path_to_your_images");
  }
  50% {
    background-image: url("/path_to_your_images");
  }
  75% {
    background-image: url("/path_to_your_images");
  }
  100% {
    background-image: url("/path_to_your_images");
  }
}
.animation-color-body {
  background: linear-gradient(45deg, blue, orange);
  background-size: 400% 400%;
  animation: back-animation 10s ease infinite;
  min-height: 100vh;
}

@keyframes back-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.animation-x-out {
  margin: 15px 0 0 0;
  animation: borderTransitionOut 1s ease-in-out;
}

@keyframes borderTransitionOut {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.animation-x-in {
  margin: 0 0 15px 0;
  animation: borderTransitionIn 1s ease-in-out;
}

@keyframes borderTransitionIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.animation-bounce {
  animation: bounce 1s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
.animation-hover-rotate360-scale12:hover {
  rotate: 360deg;
  transform: scale(1.2);
}

@media all and (max-width: 1100px) {
  .animation-media-max-w-1100px-slideRight {
    animation: media-max-w-1100px-slideRight 0.2s ease-out;
  }
  @keyframes media-max-w-1100px-slideRight {
    from {
      opacity: 0;
      transform: translateX(100%);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  .animation-media-max-w-1100px-slideBottom {
    animation: media-max-w-1100px-slideBottom 0.2s ease-out;
  }
  @keyframes media-max-w-1100px-slideBottom {
    from {
      opacity: 0;
      transform: translateY(-100%);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
.animation-RotateY {
  animation: RotateY 1.5s ease-out;
}

@keyframes RotateY {
  from {
    opacity: 0;
    transform: scale(0) rotate(0);
  }
  to {
    opacity: 1;
    transform: scale(1) rotateY(360deg);
  }
}
/* Responsive */
@media all and (min-width: 1100px) {
  .media-min-w-1100px-dis-none {
    display: none;
  }
}
@media all and (max-width: 1350px) {
  .media-max-w-1350px-w-400px {
    width: 400px;
  }
  .media-max-w-1350px-h-400px {
    height: 400px;
  }
}
@media all and (max-width: 1175px) {
  .media-max-w-1175px-w-full {
    width: 100%;
  }
  .media-max-w-1175px-w-45prc {
    width: 45%;
  }
}
@media all and (max-width: 1100px) {
  .media-max-w-1100px-ov-x-hidden {
    overflow-x: hidden;
  }
  .media-max-w-1100px-h-40px {
    height: 40px;
  }
  .media-max-w-1100px-pd-0 {
    padding: 0;
  }
  .media-max-w-1100px-pd-5px {
    padding: 5px;
  }
  .media-max-w-1100px-mg-10px {
    margin: 10px;
  }
  .media-max-w-1100px-mgr-10px {
    margin-right: 10px;
  }
  .media-max-w-1100px-fs-13px {
    font-size: 13px;
  }
  .media-max-w-1100px-fs-14px {
    font-size: 14px;
  }
  .media-max-w-1100px-fs-15px {
    font-size: 15px;
  }
  .media-max-w-1100px-fs-35px {
    font-size: 35px;
  }
  .media-max-w-1100px-dis-flex {
    display: flex;
  }
  .media-max-w-1100px-dis-none {
    display: none;
  }
  .media-max-w-1100px-flex-wrap {
    flex-wrap: wrap;
  }
  .media-max-w-1100px-flex-d-col {
    flex-direction: column;
  }
  .media-max-w-1100px-flex-d-row {
    flex-direction: row;
  }
  .media-max-w-1100px-bg-202020 {
    background-color: var(--black202020);
  }
  .media-max-w-1100px-bg-f3f3f3 {
    background-color: var(--whitef3f3f3);
  }
  .media-max-w-1100px-color-f3f3f3 {
    color: var(--whitef3f3f3);
  }
  .media-max-w-1100px-cr-pointer {
    cursor: pointer;
  }
  .media-max-w-1100px-po-fixed {
    position: fixed;
  }
  .media-max-w-1100px-top-40px {
    top: 40px;
  }
  .media-max-w-1100px-right-0 {
    right: 0;
  }
  .media-max-w-1100px-bottom-0 {
    bottom: 0;
  }
  .media-max-w-1100px-left-0 {
    left: 0;
  }
  .media-max-w-1100px-mg-0 {
    margin: 0;
  }
  .media-max-w-1100px-w-auto {
    width: auto;
  }
  .media-max-w-1100px-border-r-b-l-1px-s-202020 {
    border-right: 1px solid var(--black202020);
    border-bottom: 1px solid var(--black202020);
    border-left: 1px solid var(--black202020);
  }
  .media-max-w-1100px-border-t-l-1px-s-202020 {
    border-top: 1px solid var(--black202020);
    border-left: 1px solid var(--black202020);
  }
  .media-max-w-1100px-border-t-b-1px-s-202020 {
    border-top: 1px solid var(--black202020);
    border-bottom: 1px solid var(--black202020);
  }
  .media-max-w-1100px-border-l-1px-s-202020 {
    border-left: 1px solid var(--black202020);
  }
  .media-max-w-1100px-pd-10px {
    padding: 10px;
  }
  .media-max-w-1100px-pd-50px {
    padding: 50px;
  }
  .media-max-w-1100px-h-300px {
    height: 300px;
  }
  .media-max-w-1100px-w-300px {
    width: 300px;
  }
  .media-max-w-1100px-h-115px {
    height: 115px;
  }
  .media-max-w-1100px-w-115px {
    width: 115px;
  }
  .media-max-w-1100px-hover-color-f0c82a:hover {
    color: var(--yellowf0c82a);
  }
  .media-max-w-1100px-txt-center {
    text-align: center;
  }
  .media-max-w-1100px-w-full {
    width: 100%;
  }
}
@media all and (max-width: 991px) {
  .media-max-w-991px-pd-75px {
    padding: 75px;
  }
  .media-max-w-991px-w-full {
    width: 100%;
  }
  .media-max-w-991px-w-300px {
    width: 300px;
  }
  .media-max-w-991px-mg-0-10px {
    margin: 0 10px;
  }
  .media-max-w-991px-flex-wrap {
    flex-wrap: wrap;
  }
}
@media all and (max-width: 825px) {
  .media-max-w-825px-h-250px {
    height: 250px;
  }
  .media-max-w-825px-w-250px {
    width: 250px;
  }
  .media-max-w-825px-h-300px {
    height: 300px;
  }
  .media-max-w-825px-w-300px {
    width: 300px;
  }
  .media-max-w-825px-w-full {
    width: 100%;
  }
  .media-max-w-825px-flex-d-col {
    flex-direction: column;
  }
}
@media all and (max-width: 800px) {
  .media-max-w-800px-dis-none {
    display: none;
  }
  .media-max-w-800px-dis-flex {
    display: flex;
  }
  .media-max-w-800px-mg-15px-0 {
    margin: 15px 0;
  }
}
@media all and (max-width: 768px) {
  .media-max-w-768px-flex-wrap {
    flex-wrap: wrap;
  }
  .media-max-w-768px-dis-flex {
    display: flex;
  }
  .media-max-w-768px-dis-none {
    display: none;
  }
  .media-max-w-768px-mg-15px-0 {
    margin: 15px 0;
  }
  .media-max-w-768px-pd-75px {
    padding: 75px;
  }
  .media-max-w-768px-w-full {
    width: 100%;
  }
  .media-max-w-768px-w-300px {
    width: 300px;
  }
  .media-max-w-768px-mg-0-10px {
    margin: 0 10px;
  }
  .media-max-w-768px-h-175px {
    height: 150px;
  }
  .media-max-w-768px-w-175px {
    width: 150px;
  }
}
@media all and (max-width: 675px) {
  .media-max-w-675px-w-80prc {
    width: 80%;
  }
  .media-max-w-675px-w-85prc {
    width: 85%;
  }
  .media-max-w-675px-w-90prc {
    width: 90%;
  }
  .media-max-w-675px-w-full {
    width: 100%;
  }
  .media-max-w-675px-h-150px {
    height: 150px;
  }
  .media-max-w-675px-h-200px {
    height: 200px;
  }
  .media-max-w-675px-fs-12px {
    font-size: 12px;
  }
  .media-max-w-675px-fs-13px {
    font-size: 13px;
  }
  .media-max-w-675px-fs-15px {
    font-size: 15px;
  }
  .media-max-w-675px-fs-17px {
    font-size: 17px;
  }
}
@media all and (max-width: 585px) {
  .media-max-w-585px-fs-12px {
    font-size: 12px;
  }
  .media-max-w-585px-fs-14px {
    font-size: 14px;
  }
  .media-max-w-585px-fs-25px {
    font-size: 25px;
  }
  .media-max-w-585px-pd-20px {
    padding: 20px;
  }
  .media-max-w-585px-pd-25px {
    padding: 25px;
  }
  .media-max-w-585px-pd-0 {
    padding: 0;
  }
  .media-max-w-585px-mgt-50px {
    margin-top: 50px;
  }
  .media-max-w-585px-h-75px {
    height: 75px;
  }
  .media-max-w-585px-w-75px {
    width: 75px;
  }
  .media-max-w-585px-h-250px {
    height: 250px;
  }
  .media-max-w-585px-w-250px {
    width: 250px;
  }
  .media-max-w-585px-w-95prc {
    width: 95%;
  }
  .media-max-w-585px-w-full {
    width: 100%;
  }
  .media-max-w-585px-flex-d-col-r {
    flex-direction: column-reverse;
  }
  .media-max-w-585px-txt-center {
    text-align: center;
  }
}
@media all and (max-width: 450px) {
  .media-max-w-450px-pd-5px {
    padding: 5px;
  }
  .media-max-w-450px-pd-10px {
    padding: 10px;
  }
  .media-max-w-450px-mgt-75px {
    margin-top: 75px;
  }
  .media-max-w-450px-h-225px {
    height: 225px;
  }
  .media-max-w-450px-w-225px {
    width: 225px;
  }
  .media-max-w-450px-fs-14px {
    font-size: 14px;
  }
  .media-max-w-450px-h-60px {
    height: 60px;
  }
  .media-max-w-450px-w-60px {
    width: 60px;
  }
  .media-max-w-450px-w-95prc {
    width: 95%;
  }
}
@media all and (max-width: 290px) {
  .media-max-w-290px-fs-20px {
    font-size: 20px;
  }
}

/*# sourceMappingURL=style.css.map */