@import url('https://fonts.googleapis.com/css2?family=REM:wght@200;300;400;500;600;700;800;900&display=swap');
:root {
  

    --primary-dark: #1A120B;
    --secondary-dark: #3C2A21;
    --primary-light: #D5CEA3;
    --secondary-light: #E5E5CB;
  }
  
  body {
      margin: 0;
      font-family: 'REM', sans-serif;
  }
  
  .w-auto {width: auto;}
  .w-fill-available {width: -webkit-fill-available;}
  .w-10 {width: 10%}
  .w-15 {width: 15%}
  .w-20 {width: 20%}
  .w-25 {width: 25%}
  .w-30 {width: 30%}
  .w-33 {width: 33%}
  .w-40 {width: 40%;}
  .w-50 {width: 50%;}
  .w-60 {width: 60%;}
  .w-65 {width: 65%;}
  .w-70 {width: 70%}
  .w-75 {width: 75%}
  .w-73 {width: 73% !important;}
  .w-100 {width: 100%}
  
  .font-small { font-size: small; }
  .font-smaller { font-size: smaller; }
  .font-medium { font-size: medium; }
  .font-large { font-size: large; }
  .font-larger { font-size: larger; }
  .font-x-large {font-size: x-large}
  .font-xx-large {font-size: xx-large}

  .fw-bold {font-weight: bold;}
  .fw-bolder {font-weight: bolder;}
  
  
  
  .gap-5 { gap: 5px;  }
  .gap-10 { gap: 10px;  }
  .gap-15 { gap: 15px;  }
  .gap-20 { gap: 20px;  }
  .gap-30 { gap: 30px;  }
  .gap-40 { gap: 40px;  }
  .gap-50 { gap: 50px;  }

  .d-flex {display: flex}
  .flex-row {flex-direction: row}
  .flex-column {flex-direction: column}
  .flex-1 {flex: 1}
  
  .align-items-center {align-items: center}

  .flex-wrap-w {flex-wrap: wrap;}
  .d-block {display: block;}

  .justify-content-center {justify-content: center}
  .justify-content-space-evenly { justify-content: space-evenly;}
  .justify-content-space-around { justify-content: space-around;}
  .justify-content-space-between { justify-content: space-between;}
  .justify-content-space-end { justify-content: end;}
  
  .position-relative {position: relative;}
  .position-absolute {position: absolute;}
  
  
  .t-center {display: table; margin: 0 auto}
  .b-center {display: block; margin: 0 auto}
  .text-center {text-align: center;}
  .text-white {color: white}

  .text-secondary-light {
    color: var(--secondary-light);
  }
  
  .p-0 {padding: .5rem;}
  .p-1 {padding: 1rem}
  .p-2 {padding: 1.5rem}
  .p-3 {padding: 2rem}
  .p-4 {padding: 2.5rem}
  .p-5 {padding: 3rem}
  
  .pt-0 {padding-top: .5rem}
  .pt-1 {padding-top: 1rem}
  .pt-2 {padding-top: 1.5rem}
  .pt-3 {padding-top: 2rem}
  .pt-4 {padding-top: 2.5rem}
  .pt-5 {padding-top: 3rem}
  .pt-6 {padding-top: 3.5rem}
  .pt-7 {padding-top: 4rem}

  .pl-0 {padding-left: .5rem}
  .pl-1 {padding-left: 1rem}
  .pl-2 {padding-left: 1.5rem}
  .pl-3 {padding-left: 2rem}
  .pl-4 {padding-left: 2.5rem}
  .pl-5 {padding-left: 3rem}
  .pl-6 {padding-left: 3.5rem}
  .pl-7 {padding-left: 4rem}

  .pr-0 {padding-right: .5rem}
  .pr-1 {padding-right: 1rem}
  .pr-2 {padding-right: 1.5rem}
  .pr-3 {padding-right: 2rem}
  .pr-4 {padding-right: 2.5rem}
  .pr-5 {padding-right: 3rem}
  .pr-6 {padding-right: 3.5rem}
  .pr-7 {padding-right: 4rem}

  .pb-0 {padding-bottom: .5rem}
  .pb-1 {padding-bottom: 1rem}
  .pb-2 {padding-bottom: 1.5rem}
  .pb-3 {padding-bottom: 2rem}
  .pb-4 {padding-bottom: 2.5rem}
  .pb-5 {padding-bottom: 3rem}
  .pb-6 {padding-bottom: 3.5rem}
  .pb-7 {padding-bottom: 4rem}
  
  .m-auto {margin:auto;}
  .m-1 {margin: 1rem}
  .m-2 {margin: 1.5rem}
  .m-3 {margin: 2rem}
  .m-4 {margin: 2.5rem}
  .m-5 {margin: 3rem}
  
  
  .mt-1 {margin-top: 1rem}
/*  .mt-2 {margin-top: 1.5rem}*/
  .mt-3 {margin-top: 2rem}
  .mt-4 {margin-top: 2.5rem}
  .mt-5 {margin-top: 3rem}
  .mt-6 {margin-top: 3.5rem}
  .mt-7 {margin-top: 4rem}
  
  
  .mb-1 {margin-bottom: 0.3rem}
  .mb-2 {margin-bottom: 1.5rem}
  .mb-3 {margin-bottom: 2rem}
  .mb-4 {margin-bottom: 2.5rem}
  .mb-5 {margin-bottom: 3rem}
  .mb-6 {margin-bottom: 3.5rem}
  .mb-7 {margin-bottom: 4rem}
  
  
  .mr-1 {margin-right: 1rem}
  .mr-2 {margin-right: 1.5rem}
  .mr-3 {margin-right: 2rem}
  .mr-4 {margin-right: 2.5rem}
  .mr-5 {margin-right: 3rem}
  .mr-6 {margin-right: 3.5rem}
  .mr-7 {margin-right: 4rem}

  .ml-1 {margin-left: 1rem}
  .ml-2 {margin-left: 1.5rem}
  .ml-3 {margin-left: 2rem}
  .ml-4 {margin-left: 2.5rem}
  .ml-5 {margin-left: 3rem}
  .ml-6 {margin-left: 3.5rem}
  .ml-7 {margin-left: 4rem}
  
  .float-right {float: right;}

  .cursor-pointer {cursor: pointer;}

@media only screen and (max-width: 600px) {
  .flex-row-m {
    flex-direction: row !important;
  }
  .flex-column-m {
    flex-direction: column !important;
  }
  .w-auto-m {
    width: auto !important;
  }
  .h-auto-m {
    height: auto !important;
  }
  .hide-m {
    display: none !important;
  }
}