/* NEW from CSS Tricks */
/* 
MEDIA QUERIES USED as Bootstrap 4.0 as on 26 Feb 2023:
(max-width: 575.98px) >>>>>>>>>>>>>>>>>>>>>>>>>>> font-size 1rem
(min-width: 576px) and (max-width: 767.98px) >>>> font-size 1rem
(min-width: 768px) and (max-width: 991.98px) >>>> font-size 1rem
(min-width: 992px) and (max-width: 1199.98px) >>> font-size 1.1rem
(min-width: 1200px) and (max-width: 1920.98px) >>> font-size 1.1rem
(min-width: 1921px) >>>>>>>>>>>>>>>>>>>>>>>>>>>>>> font-size 1.2rem
*/


@media only screen and (max-width: 575.98px) {

  /* Small screen, non-retina */
  html {
    font-size: 1rem;
  }
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (max-width: 575.98px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (max-width: 575.98px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (max-width: 575.98px),
only screen and (        min-device-pixel-ratio: 2)      and (max-width: 575.98px),
only screen and (                min-resolution: 192dpi) and (max-width: 575.98px),
only screen and (                min-resolution: 2dppx)  and (max-width: 575.98px) { 

  /* Small screen, retina, stuff to override above media query */
  html {
    font-size: 1rem;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767.98px) {

  /* Medium screen, non-retina */
  html {
    font-size: 1rem;
  }
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 576px) and (max-width: 767.98px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 576px) and (max-width: 767.98px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 576px) and (max-width: 767.98px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 576px) and (max-width: 767.98px),
only screen and (                min-resolution: 192dpi) and (min-width: 576px) and (max-width: 767.98px),
only screen and (                min-resolution: 2dppx)  and (min-width: 576px) and (max-width: 767.98px) { 

  /* Medium screen, retina, stuff to override above media query */
  html {
    font-size: 1rem;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991.98px) {

  /* Large screen, non-retina */
  html {
    font-size: 1rem;
  }
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 768px) and (max-width: 991.98px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 768px) and (max-width: 991.98px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 768px) and (max-width: 991.98px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 768px) and (max-width: 991.98px),
only screen and (                min-resolution: 192dpi) and (min-width: 768px) and (max-width: 991.98px),
only screen and (                min-resolution: 2dppx)  and (min-width: 768px) and (max-width: 991.98px) { 

  /* Large screen, retina, stuff to override above media query */
  html {
    font-size: 1rem;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199.98px) {

  /* XL Extra Large screen, non-retina */
  html {
    font-size: 1.1rem;
  }
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 992px) and (max-width: 1199.98px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 992px) and (max-width: 1199.98px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 992px) and (max-width: 1199.98px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 992px) and (max-width: 1199.98px),
only screen and (                min-resolution: 192dpi) and (min-width: 992px) and (max-width: 1199.98px),
only screen and (                min-resolution: 2dppx)  and (min-width: 992px) and (max-width: 1199.98px) { 

  /* XL Extra Large screen, retina, stuff to override above media query */
  html {
    font-size: 1.1rem;
  }
}


@media only screen and (min-width: 1200px) and (max-width: 1920.98px) {

  /* XXL Extra Extra Large screen, non-retina */
  html {
    font-size: 1.1rem;
  }
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1200px) and (max-width: 1920.98px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1200px) and (max-width: 1920.98px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1200px) and (max-width: 1920.98px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1200px) and (max-width: 1920.98px),
only screen and (                min-resolution: 192dpi) and (min-width: 1200px) and (max-width: 1920.98px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1200px) and (max-width: 1920.98px) { 

  /* XXL Extra Extra Large screen, retina, stuff to override above media query */
  html {
    font-size: 1.1rem;
  }
}


@media only screen and (min-width: 1921px) {

  /* XXXL Extra Extra Extra Large screen, non-retina */
  html {
    font-size: 1.2rem;
  }
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1921px) ,
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1921px) ,
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1921px) ,
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1921px) ,
only screen and (                min-resolution: 192dpi) and (min-width: 1921px) ,
only screen and (                min-resolution: 2dppx)  and (min-width: 1921px)  { 

  /* XXXL Extra Extra Extra Large screen, retina, stuff to override above media query */
  html {
    font-size: 1.2rem;
  }
}



/* 
MEDIA QUERIES USED - Older:
300px to 480px
481px to 768px
769px to 991px
992px to 1199px
1200px to 1920px
1921px +++
*/
/* 
@media (min-width: 300px) and (max-width: 767px){
  html {
    font-size: 1rem;
  }
}


@media (min-width: 768px) and (max-width: 991px) {
  html {
    font-size: 1.1rem;
  }
}


@media (min-width: 992px) and (max-width: 1199px) {
  html {
    font-size: 1.2rem;
  }
}


@media (min-width: 1200px) and (max-width: 1920px) {
  html {
    font-size: 1.2rem;
  }
}


@media (min-width: 1921px)  {
  html {
    font-size: 1.4rem;
  }
} */