/* 
Stylesheet: Grid 
Purpose: For grid layout; alignment, spacing 
Created: November 2023 
Version: 1.3.26
*/


/* Containers ---------------------------------------------------------------------------------------------------- Containers */
 .page-wrapper {
  position: relative;
}
 section.section {
   padding: 2rem 0
}
 header.header {
   position: sticky;
   top: 0;
   z-index: 1000;
   background: #222;
}
/* Containers ---------------------------------------------------------------------------------------------------- Containers */



/* Flex ---------------------------------------------------------------------------------------------------------------- Flex */
 .flex {
   display: flex;
}
 .flex--row {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
    /* align-items: stretch;*/
    /* align-content: center;*/
}
 .flex--row_inline {
     display: inline-flex;
}
 .wrap_no-wrap {
     flex-wrap: nowrap;
}
 .wrap_wrap {
     flex-wrap: wrap;
}
 .flex--column {
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
}
 .justify-content_start {
     justify-content: flex-start;
}
 .justify-content_center {
     justify-content: center;
}
 .justify-content_end {
     justify-content: flex-end;
}
 .justify-content_space-between {
     justify-content: space-between;
}
 .justify-content_space-around {
     justify-content: space-around;
}
 .justify-content_space-evenly {
     justify-content: space-evenly;
}
 .align-items_start {
     align-items: flex-start;
}
 .align-items_center {
     align-items: center;
}
 .align-items_end {
     align-items: flex-end;
}
 .align-items_stretch {
     align-items: stretch;
}
 .align-items_base {
     align-items: baseline;
}
 .flex--item {
     padding: 0.5rem;
}
 .align-self_start {
     align-self: flex-start;
}
 .text-align_center {
     text-align: center;
}
 .text-align_left {
     text-align: left;
}
 .align-self_left {
     align-self: left;
}
 .align-self_end {
     align-self: end;
}
 .flex--grow-1 {
     flex-grow: 1;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .flex--row.even {
    flex-direction: column-reverse;
  }
  .flex--row.odd {
    flex-direction: column;
  }
}
/* Flex ---------------------------------------------------------------------------------------------------------------- Flex */



/* Spacers ---------------------------------------------------------------------------------------------------------- Spacers */
 .m-0 {
     margin: 0;
}
 .m-1 {
  margin: 1rem;
}
 .m-half {
     margin: .5rem;
}
 .mt-auto {
     margin: auto 0 0;
}
 .mt-1 {
     margin: 1rem 0 0;
}
 .mt-2 {
     margin: 2rem 0 0;
}
 .mt-05 {
     margin: 0.5rem 0 0;
}
 .mt-5 {
     margin: 5rem 0 0;
}
.m-block-2 {
      margin-block: 2rem;
}

.p-block-2 {
      padding-block: 2rem;
}
.p-block-5 {
      padding-block: 5rem;
}
 .p-1 {
     padding: 1rem;
}
 .px-1 {
     padding: 0 1rem;
}
 .py-1 {
     padding: 1rem 0;
}
 .p-2 {
     padding: 2rem;
}
 .px-2 {
     padding: 0 2rem;
}
 .px-5 {
     padding: 0 5rem;
}
 .py-2 {
     padding: 2rem 0;
}
 .py-5 {
     padding: 5rem 0;
}
 .spacer-20 {
   height: 20px;
}
 .spacer-50 {
   height: 50px;
}
 .spacer-100 {
   height: 100px;
}
 .spacer-150 {
   height: 150px;
}
 .gap-1 {
   gap: 1rem;
}
/* Spacers ---------------------------------------------------------------------------------------------------------- Spacers */


/* Flex Basis -------------------------------------------------------------------------------------------------------------- Width */
 .fb-30 {
  flex-basis: 30%;
 }
/* Width -------------------------------------------------------------------------------------------------------------- Width */

/* Width -------------------------------------------------------------------------------------------------------------- Width */
 .w-100 {
     width: 100%;
}
 .w-95 {
     width: 95%;
}
 .w-90 {
     width: 90%;
}
 .w-85 {
     width: 85%;
}
 .w-80 {
     width: 80%;
}
 .w-75 {
     width: 75%;
}
 .w-70 {
     width: 70%;
}
 .w-65 {
     width: 65%;
}
 .w-60 {
     width: 60%;
}
 .w-55 {
     width: 55%;
}
 .w-50 {
     width: 50%;
}
 .w-45 {
     width: 45%;
}
 .w-40 {
     width: 40%;
}
 .w-35 {
     width: 35%;
}
 .w-33 {
     width: calc(100% / 3);
}
 .w-30 {
     width: 30%;
}
 .w-25 {
     width: 25%;
}
 .sm-100 {
     width: 100%;
}
 .sm-95 {
     width: 95%;
}
 .sm-90 {
     width: 90%;
}
 .sm-85 {
     width: 85%;
}
 .sm-80 {
     width: 80%;
}
 .sm-75 {
     width: 75%;
}
 .sm-70 {
     width: 70%;
}
 .sm-65 {
     width: 65%;
}
 .sm-60 {
     width: 60%;
}
 .sm-55 {
     width: 55%;
}
 .sm-50 {
     width: 50%;
}
 .sm-45 {
     width: 45%;
}
 .sm-40 {
     width: 40%;
}
 .sm-35 {
     width: 35%;
}
 .sm-33 {
     width: 33.3333%;
}
 .sm-30 {
     width: 30%;
}
 .sm-25 {
     width: 25%;
}
 .sm-20 {
     width: 20%;
}
 .sm-15 {
     width: 15%;
}
 .sm-10 {
     width: 10%;
}
 .sm-5 {
     width: 5%;
}
.sm-fb-80 {
  flex-basis: 80%;
} 
.sm-block {
  display: block;
}
.sm-flex {
  display: flex;
}
.sm-grid {
  display: grid;
}
.sm-none {
  display: none;
}
.sm-justify-content_stretch {
   justify-content: stretch;
}
.sm-justify-content_space-between {
   justify-content: space-between;
}
/* md */
 @media only screen and (min-width: 48rem) {
    .md-none {
      display: none;
    }
    .md-grid {
      display: grid;
    }
    .md-block {
      display: block;
    }
    .md-flex {
      display: flex;
    }
     .md-m-0 {
         margin: 0;
    }
     .md-mt-auto {
         margin: auto 0 0;
    }
     .md-mt-1 {
         margin: 1rem 0 0;
    }
     .md-mt-2 {
         margin: 2rem 0 0;
    }
     .md-mt-05 {
         margin: 0.5rem 0 0;
    }
     .md-p-1 {
         padding: 1rem;
    }
     .md-px-1 {
         padding: 0 1rem;
    }
     .md-py-1 {
         padding: 1rem 0;
    }
     .md-p-2 {
         padding: 2rem;
    }
     .md-px-2 {
         padding: 0 2rem;
    }
     .md-py-2 {
         padding: 2rem 0;
    }
     .md-wrap_no-wrap {
         flex-wrap: nowrap;
    }
     .md-wrap_wrap {
         flex-wrap: wrap;
    }
     .md-100 {
         width: 100%;
    }
     .md-95 {
         width: 95%;
    }
     .md-90 {
         width: 90%;
    }
     .md-85 {
         width: 85%;
    }
     .md-80 {
         width: 80%;
    }
     .md-75 {
         width: 75%;
    }
     .md-70 {
         width: 70%;
    }
     .md-65 {
         width: 65%;
    }
     .md-60 {
         width: 60%;
    }
     .md-55 {
         width: 55%;
    }
     .md-50 {
         width: 50%;
    }
     .md-45 {
         width: 45%;
    }
     .md-40 {
         width: 40%;
    }
     .md-35 {
         width: 35%;
    }
     .md-33 {
         width: 33.3333%;
    }
     .md-30 {
         width: 30%;
    }
     .md-25 {
         width: 25%;
    }
     .md-20 {
         width: 20%;
    }
     .md-15 {
         width: 15%;
    }
     .md-10 {
         width: 10%;
    }
     .md-5 {
         width: 5%;
    }
     .md-auto {
         width: auto;
    }
     .md-wrap_no-wrap {
         flex-wrap: nowrap;
    }
    .md-justify-content_space-between {
         justify-content: space-between;
    }
    .md-justify-content_stretch {
         justify-content: stretch;
    }
     .md-justify-content_start {
         justify-content: flex-start;
    }
     .md-justify-content_center {
         justify-content: center;
    }
     .md-justify-content_end {
         justify-content: flex-end;
    }
     .md-align-items_start {
         align-items: flex-start;
    }
     .md-align-items_center {
         align-items: center;
    }
     .md-align-items_end {
         align-items: flex-end;
    }
     .md-align-items_stretch {
         align-items: stretch;
    }
     .md-align-items_base {
         align-items: baseline;
    }
    .md-fb-80 {
         flex-basis: 80%;
    }  
}

/* lg */
 @media only screen and (min-width: 62rem) {
    .lg-none {
      display: none;
    }
    .lg-grid {
      display: grid;
    }
    .lg-block {
      display: block;
    }
    .lg-flex {
      display: flex;
    }
     .lg-m-0 {
         margin: 0;
    }
     .lg-mt-auto {
         margin: auto 0 0;
    }
     .lg-mt-1 {
         margin: 1rem 0 0;
    }
     .lg-mt-2 {
         margin: 2rem 0 0;
    }
     .lg-mt-05 {
         margin: 0.5rem 0 0;
    }
     .lg-p-1 {
         padding: 1rem;
    }
     .lg-px-1 {
         padding: 0 1rem;
    }
     .lg-py-1 {
         padding: 1rem 0;
    }
     .lg-p-2 {
         padding: 2rem;
    }
     .lg-px-2 {
         padding: 0 2rem;
    }
     .lg-py-2 {
         padding: 2rem 0;
    }
     .lg-wrap_no-wrap {
         flex-wrap: nowrap;
    }
     .lg-wrap_no-wrap {
         flex-wrap: nowrap;
    }
     .lg-wrap_wrap {
         flex-wrap: wrap;
    }
     .lg-100 {
         width: 100%;
    }
     .lg-95 {
         width: 95%;
    }
     .lg-90 {
         width: 90%;
    }
     .lg-85 {
         width: 85%;
    }
     .lg-80 {
         width: 80%;
    }
     .lg-75 {
         width: 75%;
    }
     .lg-70 {
         width: 70%;
    }
     .lg-65 {
         width: 65%;
    }
     .lg-60 {
         width: 60%;
    }
     .lg-55 {
         width: 55%;
    }
     .lg-50 {
         width: 50%;
    }
     .lg-45 {
         width: 45%;
    }
     .lg-40 {
         width: 40%;
    }
     .lg-35 {
         width: 35%;
    }
     .lg-33 {
         width: 33.3333%;
    }
     .lg-30 {
         width: 30%;
    }
     .lg-25 {
         width: 25%;
    }
     .lg-20 {
         width: 20%;
    }
     .lg-15 {
         width: 15%;
    }
     .lg-10 {
         width: 10%;
    }
     .lg-5 {
         width: 5%;
    }
     .lg-auto {
         width: auto;
    }
     .lg-wrap_no-wrap {
         flex-wrap: nowrap;
    }
    .lg-justify-content_space-between {
         justify-content: space-between;
    }
    .lg-justify-content_stretch {
         justify-content: stretch;
    }
     .lg-justify-content_start {
         justify-content: flex-start;
    }
     .lg-justify-content_center {
         justify-content: center;
    }
     .lg-justify-content_end {
         justify-content: flex-end;
    }
     .lg-align-items_start {
         align-items: flex-start;
    }
     .lg-align-items_center {
         align-items: center;
    }
     .lg-align-items_end {
         align-items: flex-end;
    }
     .lg-align-items_stretch {
         align-items: stretch;
    }
     .lg-align-items_base {
         align-items: baseline;
    }
     .lg-fb-30 {
         flex-basis: 30%;
    }   
}

/* xl */
 @media only screen and (min-width: 75rem) {
     .wrapper {
        /* max-width: 90rem;
         */
         max-width: 100rem;
    }
    .xl-none {
      display: none;
    }
    .xl-grid {
      display: grid;
    }
    .xl-block {
      display: block;
    }
    .xl-flex {
      display: flex;
    }
     .xl-m-0 {
         margin: 0;
    }
     .xl-mt-auto {
         margin: auto 0 0;
    }
     .xl-mt-1 {
         margin: 1rem 0 0;
    }
     .xl-mt-2 {
         margin: 2rem 0 0;
    }
     .xl-mt-05 {
         margin: 0.5rem 0 0;
    }
     .xl-p-1 {
         padding: 1rem;
    }
     .xl-px-1 {
         padding: 0 1rem;
    }
     .xl-py-1 {
         padding: 1rem 0;
    }
     .xl-p-2 {
         padding: 2rem;
    }
     .xl-px-2 {
         padding: 0 2rem;
    }
     .xl-py-2 {
         padding: 2rem 0;
    }
     .xl-wrap_no-wrap {
         flex-wrap: nowrap;
    }
     .xl-wrap_no-wrap {
         flex-wrap: nowrap;
    }
     .xl-wrap_wrap {
         flex-wrap: wrap;
    }
     .xl-100 {
         width: 100%;
    }
     .xl-95 {
         width: 95%;
    }
     .xl-90 {
         width: 90%;
    }
     .xl-85 {
         width: 85%;
    }
     .xl-80 {
         width: 80%;
    }
     .xl-75 {
         width: 75%;
    }
     .xl-70 {
         width: 70%;
    }
     .xl-65 {
         width: 65%;
    }
     .xl-60 {
         width: 60%;
    }
     .xl-55 {
         width: 55%;
    }
     .xl-50 {
         width: 50%;
    }
     .xl-45 {
         width: 45%;
    }
     .xl-40 {
         width: 40%;
    }
     .xl-35 {
         width: 35%;
    }
     .xl-33 {
         width: 33.3333%;
    }
     .xl-30 {
         width: 30%;
    }
     .xl-25 {
         width: 25%;
    }
     .xl-20 {
         width: 20%;
    }
     .xl-15 {
         width: 15%;
    }
     .xl-10 {
         width: 10%;
    }
     .xl-5 {
         width: 5%;
    }
     .xl-auto {
         width: auto;
    }
     .xl-wrap_no-wrap {
         flex-wrap: nowrap;
    }
    .xl-justify-content_space-between {
         justify-content: space-between;
    }
    .xl-justify-content_stretch {
         justify-content: stretch;
    }
     .xl-justify-content_start {
         justify-content: flex-start;
    }
     .xl-justify-content_center {
         justify-content: center;
    }
     .xl-justify-content_end {
         justify-content: flex-end;
    }
     .xl-align-items_start {
         align-items: flex-start;
    }
     .xl-align-items_center {
         align-items: center;
    }
     .xl-align-items_end {
         align-items: flex-end;
    }
     .xl-align-items_stretch {
         align-items: stretch;
    }
     .xl-align-items_base {
         align-items: baseline;
    }
}

/* xxl */
 @media only screen and (min-width: 90rem) {
}

/* Extra small devices (phones, 600px and down) */
 @media only screen and (max-width: 600px) {
     .flex--row.even {
         flex-direction: column-reverse;
    }
     .flex--row.odd {
         flex-direction: column;
    }
}