@import url('https://fonts.googleapis.com/css2?family=REM:wght@200;300;400;500;600;700;800;900&display=swap');
:root {
  
 --primary-dark: #2196F3;
    --secondary-dark: #00BCD4;
    --primary-light: #00bcd41f;
    --secondary-light: #ffffff;
  }
  
  body {
      margin: 0;
      font-family: 'REM', sans-serif;
  }
  
  .w-10 {width: 10%}
  .w-15 {width: 15%}
  .w-20 {width: 20%}
  .w-25 {width: 25%}
  .w-30 {width: 30%}
  .w-50 {width: 50%;}
  .w-70 {width: 70%}
  .w-75 {width: 75%}
  .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}
  
  
  
  .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}
  .justify-content-center {justify-content: center}
  .justify-content-space-between {    justify-content: space-between;}
  .align-items-center {align-items: center}
  .flex-wrap-w {flex-wrap: wrap;}
  .d-block {display: block;}
  .order-1 {order: 1}
  
  .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}

  .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}
  
  .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-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}
  
  .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}
  
  .float-right {float: right;}