/* VARIABLES GLOBALES */
  
  :root {
    font-size: 10px;
    --ff-haas-grotesk: neue-haas-grotesk-display, sans-serif;
    --ff-helvetica: 'Helvetica', sans-serif;
    --ff-lexia: 'Lexia', sans-serif;
    --ff-poppins: 'Poppins', sans-serif;
    --ff-roboto-slab: 'Roboto Slab', serif;
    --letter-spacing: 1px;
    --fw-400: 400;
    --fw-500: 500;
    --fw-600: 600;
    --fw-700: 700;
    --font-size-60: 6rem;
    --font-size-50: 5rem;
    --font-size-45: 4.5rem;
    --font-size-40: 4rem;
    --font-size-36: 3.6rem;
    --font-size-30: 3rem;
    --font-size-25: 2.5rem;
    --font-size-20: 2rem;
    --font-size-18: 1.8rem;
    --font-size-16: 1.6rem;
    --font-size-14: 1.4rem;
    --font-size-12: 1.2rem;
    --line-height-2: 2;
    --line-height-1-75: 1.75;
    --line-height-1-5: 1.5;
    --line-height-1-25: 1.25;
    --line-height-1: 1;
    --line-height-0-75: 0.75;
    --padding-sm: 1rem;
    --max-width: 1200px;
    --padding-spacing-5: 5rem;
    --padding-spacing-8: 8rem;
    --padding-spacing-10: 10rem;
    }

    /*COLOR FONT*/
    .txt-black { color: var(--color-black); }
    .txt-aqua { color: var(--color-aqua); }
    .txt-aqua-dark { color: var(--color-aqua-dark); }
    .txt-yellow { color: var(--color-yellow); }
    .txt-white { color: var(--color-white); }
    .txt-wine { color: var(--color-wine); }
    .txt-grey { color: var(--color-grey); }
    .txt-dark-grey { color: var(--color-dark-grey); }
    .txt-dark-grey-2 { color: var(--color-dark-grey-2); }
    .txt-dark-grey-3 { color: var(--color-dark-grey-3); }

    /*BACKGROUNDS*/
    .bg-black { background-color: var(--color-black); }
    .bg-wine { background-color: var(--color-wine); }
    .bg-yellow { background-color: var(--color-yellow); }
    .bg-aqua { background-color: var(--color-aqua); }
    .bg-aqua-dark { background-color: var(--color-aqua-dark); }
    .bg-light-grey { background-color: var(--color-light-grey); }
    .bg-dark-grey-3 { background-color: var(--color-dark-grey-3); }

    /*BORDER RADIUS*/
    .border-none { border: 1px solid var(--color-wine); }
    .border-1-wine { border: 1px solid var(--color-wine); }
    .border-2-wine { border: 2px solid var(--color-wine); }

    .txt-left { text-align: left; }
    .txt-right { text-align: right; }
    .txt-center { text-align: center; }
    .txt-uppercase { text-transform: uppercase; }
    .txt-fw-300 { font-weight: 300; }
    .txt-fw-600 { font-weight: 600; }
    .txt-fw-700 { font-weight: 700; }
    .txt-fw-900 { font-weight: 900; }
    .txt-fs-12 { font-size: var(--font-size-12); }
    .txt-fs-14 { font-size: var(--font-size-14); }
    .txt-fs-16 { font-size: var(--font-size-16); }
    .txt-fs-18 { font-size: var(--font-size-18); }
    .txt-fs-20 { font-size: var(--font-size-20); }
    .txt-fs-25 { font-size: var(--font-size-25); }
    .txt-fs-30 { font-size: var(--font-size-30); }
    .txt-fs-36 { font-size: var(--font-size-36); }
    .txt-fs-40 { font-size: var(--font-size-40); }
    .txt-lh-2 { line-height: var(--line-height-2); }
    .txt-lh-1-75 { line-height: var(--line-height-1-75); }
    .txt-lh-1-5 { line-height: var(--line-height-1-5); }
    .txt-lh-1-25 { line-height: var(--line-height-1-25); }
    .txt-lh-1 { line-height: var(--line-height-1); }
    .txt-lh-0-75 { line-height: var(--line-height-0-75); }

    .m-auto { margin: auto; }
    .m-0 { margin: 0px; }
    .m-10 { margin: 10px; }
    .m-20 { margin: 20px; }
    .m-30 { margin: 30px; }
    .m-y-10 { margin-top: 10px; margin-bottom: 10px; }
    .m-y-20 { margin-top: 20px; margin-bottom: 20px; }
    .m-y-30 { margin-top: 30px; margin-bottom: 30px; }
    .m-y-40 { margin-top: 40px; margin-bottom: 40px; }
    .m-y-50 { margin-top: 50px; margin-bottom: 40px; }
    .mt-10 { margin-top: 10px; }
    .mt-20 { margin-top: 20px; }
    .mt-30 { margin-top: 30px; }
    .mt-40 { margin-top: 40px; }
    .mt-50 { margin-top: 50px; }
    .mt-60 { margin-top: 60px; }
    .mt-70 { margin-top: 70px; }
    .mt-80 { margin-top: 80px; }
    .mt-90 { margin-top: 90px; }
    .mt-100 { margin-top: 100px; }
    .mb-10 { margin-bottom: 10px; }
    .mb-20 { margin-bottom: 20px; }
    .mb-30 { margin-bottom: 30px; }
    .mb-40 { margin-bottom: 40px; }
    .mb-50 { margin-bottom: 50px; }
    .mb-60 { margin-bottom: 60px; }
    .mb-70 { margin-bottom: 70px; }
    .mb-80 { margin-bottom: 80px; }
    .mb-90 { margin-bottom: 90px; }
    .mb-100 { margin-bottom: 100px; }

    /*PADDING*/
    .p-0 { padding: 0px; }
    .p-10 { padding: 10px; }
    .p-20 { padding: 20px; }
    .p-30 { padding: 30px; }
    .p-40 { padding: 40px; }
    .p-50 { padding: 50px; }
    .p-60 { padding: 60px; }
    .p-70 { padding: 70px; }
    .p-80 { padding: 80px; }
    .p-90 { padding: 90px; }
    .p-100 { padding: 100px; }
    .p-x-10 { padding-right: 10px; padding-left: 10px; }
    .p-x-15 { padding-right: 15px; padding-left: 15px; }
    .p-x-20 { padding-right: 20px; padding-left: 20px; }
    .p-x-30 { padding-right: 30px; padding-left: 30px; }
    .p-x-40 { padding-right: 40px; padding-left: 40px; }
    .p-x-50 { padding-right: 50px; padding-left: 50px; }
    .p-x-60 { padding-right: 60px; padding-left: 60px; }
    .p-x-70 { padding-right: 70px; padding-left: 70px; }
    .p-x-80 { padding-right: 80px; padding-left: 80px; }
    .p-x-90 { padding-right: 90px; padding-left: 90px; }
    .p-x-100 { padding-right: 100px; padding-left: 100px; }
    .p-y-10 { padding-top: 10px; padding-bottom: 10px; }
    .p-y-15 { padding-top: 15px; padding-bottom: 15px; }
    .p-y-20 { padding-top: 20px; padding-bottom: 20px; }
    .p-y-30 { padding-top: 30px; padding-bottom: 30px; }
    .p-y-40 { padding-top: 40px; padding-bottom: 40px; }
    .p-y-50 { padding-top: 50px; padding-bottom: 50px; }
    .p-y-60 { padding-top: 60px; padding-bottom: 60px; }
    .p-y-70 { padding-top: 70px; padding-bottom: 70px; }
    .p-y-80 { padding-top: 80px; padding-bottom: 80px; }
    .p-y-90 { padding-top: 90px; padding-bottom: 90px; }
    .p-y-100 { padding-top: 100px; padding-bottom: 100px; }
    .pt-10 { padding-top: 10px; }
    .pt-20 { padding-top: 20px; }
    .pt-30 { padding-top: 30px; }
    .pt-40 { padding-top: 40px; }
    .pt-50 { padding-top: 50px; }
    .pt-60 { padding-top: 60px; }
    .pt-70 { padding-top: 70px; }
    .pt-80 { padding-top: 80px; }
    .pt-90 { padding-top: 90px; }
    .pt-100 { padding-top: 100px; }
    .pr-10 { padding-right: 10px; }
    .pr-20 { padding-right: 20px; }
    .pr-30 { padding-right: 30px; }
    .pr-40 { padding-right: 40px; }
    .pr-50 { padding-right: 50px; }
    .pr-60 { padding-right: 60px; }
    .pr-70 { padding-right: 70px; }
    .pr-80 { padding-right: 80px; }
    .pr-90 { padding-right: 90px; }
    .pr-100 { padding-right: 100px; }
    .pb-10 { padding-bottom: 10px; }
    .pb-20 { padding-bottom: 20px; }
    .pb-30 { padding-bottom: 30px; }
    .pb-40 { padding-bottom: 40px; }
    .pb-50 { padding-bottom: 50px; }
    .pb-60 { padding-bottom: 60px; }
    .pb-70 { padding-bottom: 70px; }
    .pb-80 { padding-bottom: 80px; }
    .pb-90 { padding-bottom: 90px; }
    .pb-100 { padding-bottom: 100px; }
    .pl-10 { padding-left: 10px; }
    .pl-20 { padding-left: 20px; }
    .pl-30 { padding-left: 30px; }
    .pl-40 { padding-left: 40px; }
    .pl-50 { padding-left: 50px; }
    .pl-60 { padding-left: 60px; }
    .pl-70 { padding-left: 70px; }
    .pl-80 { padding-left: 80px; }
    .pl-90 { padding-left: 90px; }
    .pl-100 { padding-left: 100px; }

    .br-0 { border-radius: 0px; }
    .br-2 { border-radius: 2px; }
    .br-4 { border-radius: 4px; }
    .br-6 { border-radius: 6px; }
    .br-8 { border-radius: 8px; }
    .br-10 { border-radius: 10px; }
    .br-15 { border-radius: 15px; }
    .br-20 { border-radius: 20px; }
    .br-30 { border-radius: 30px; }
    
    .hidden-overflow { overflow: hidden; }

    .txt-ff-helvetica { font-family: var(--ff-helvetica); }
    .txt-ff-lexia { font-family: var(--ff-lexia); }
    .txt-ff-poppins { font-family: var(--ff-poppins); }
    .txt-ff-roboto-slab { font-family: var(--ff-roboto-slab); }
    
    .spacer-10 { height: 10px; }
    .spacer-20 { height: 20px; }
    .spacer-30 { height: 30px; }
    .spacer-40 { height: 40px; }
    .spacer-50 { height: 50px; }
    .spacer-60 { height: 60px; }
    .spacer-70 { height: 70px; }
    .spacer-80 { height: 80px; }
    .spacer-90 { height: 90px; }
    .spacer-100 { height: 100px; }
    .spacer-120 { height: 120px; }
    .spacer-150 { height: 150px; }

    /* WIDTH / MAX-WIDTH */
    .w-30 { width: 30%; }
    .w-40 { width: 40%; }
    .w-50 { width: 50%; }
    .w-60 { width: 60%; }
    .w-70 { width: 70%; }
    .w-80 { width: 80%; }
    .w-90 { width: 90%; }
    .w-100 { width: 100%; }
    .max-w-100 { max-width: 100%; }
    .max-w-90 { max-width: 90%; }
    .max-w-80 { max-width: 80%; }
    .max-w-70 { max-width: 70%; }
    .max-w-60 { max-width: 60%; }
    .max-w-50 { max-width: 50%; }
    .max-w-40 { max-width: 40%; }
    .max-w-30 { max-width: 30%; }
    .max-w-20 { max-width: 20%; }
    .max-w-10 { max-width: 10%; }

    /*=============================================*/
    .d-block { display: block; }
    .d-flex { display: flex; }
    .d-flex-col { flex-direction: column; }
    .d-flex-center {justify-content: center; align-items: center;}
    .gap-15{ gap: 15px; }
    .flex-col-20{ flex: 0 0 20%; }
    .flex-col-25{ flex: 0 0 25%; }
    .flex-col-50{ flex: 0 0 50%; }
    .flex-col-75{ flex: 0 0 75%; }
    .flex-col-80{ flex: 0 0 80%; }
    .d-grid {
      display: grid;
      gap: 15px;
      grid-template-columns: 1fr;
    }
    /*=============================================*/

/* Img */
img {
  width: 100%;
}

figure {
  margin: 0
}

/* Container */
.az-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-inline: 20px;
}

/* fonts */
.fw-400 {font-weight: var(--fw-400);}
.fw-500 {font-weight: var(--fw-500);}
.fw-600 {font-weight: var(--fw-600);}
.fw-700 {font-weight: var(--fw-700);}

/* SWITCH SHOW-HIDE - MOBILE DESKTOP */
.show-on-mobile-only { display: none; }
.show-on-desktop-only { display: block; }

@media screen and (max-width: 767px) {
  .show-on-mobile-only {
    display: block;
  }
  .show-on-desktop-only {
    display: none;
  }
}