/*
.col-sm for larger mobile phones (devices with resolutions ≥ 576px);
.col-md for tablets (≥768px);
.col-lg for laptops (≥992px);
.col-xl for desktops (≥1200px)
*/

.mtop10 { margin-top: 10px; }
.mtop20 { margin-top: 20px; }
.mtop30 { margin-top: 30px; }
.mtop60 { margin-top: 60px; }
.mtop120 { margin-top: 120px; }
.mtop180 { margin-top: 180px; }
.mbtm10 { margin-bottom: 10px; }
.mbtm20 { margin-bottom: 20px; }
.mbtm30 { margin-bottom: 30px; }
.mbtm60 { margin-bottom: 60px; }
.mbtm120 { margin-bottom: 120px; }
.mbtm180 { margin-bottom: 180px; }
.ptop10 { padding-top: 10px; }
.ptop20 { padding-top: 20px; }
.ptop30 { padding-top: 30px; }
.ptop60 { padding-top: 60px; }
.ptop120 { padding-top: 120px; }
.ptop180 { padding-top: 180px; }
.pbtm10 { padding-bottom: 10px; }
.pbtm20 { padding-bottom: 20px; }
.pbtm30 { padding-bottom: 30px; }
.pbtm60 { padding-bottom: 60px; }
.pbtm120 { padding-bottom: 120px; }
.pbtm180 { padding-bottom: 180px; }
.p10 { padding: 10px; }
.p20 { padding: 20px; }
.p30 { padding: 30px; }
.p60 { padding: 60px; }
.p120 { padding: 120px; }
.p180 { padding: 180px; }






/* EXTRA SMALL devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  main p, main li { font-size: 13px; line-height: 160%;}
  h1 { font-size: 20px; }
  h2 { font-size: 18px; }
  h3 { font-size: 16px; }
  h4 { font-size: 14px; }
  .mtop10 { margin-top: 5px; }
  .mtop20 { margin-top: 10px; }
  .mtop30 { margin-top: 15px; }
  .mtop60 { margin-top: 30px; }
  .mtop120 { margin-top: 60px; }
  .mtop180 { margin-top: 90px; }

  .mbtm10 { margin-bottom: 5px; }
  .mbtm20 { margin-bottom: 10px; }
  .mbtm30 { margin-bottom: 15px; }
  .mbtm60 { margin-bottom: 30px; }
  .mbtm120 { margin-bottom: 60px; }
  .mbtm180 { margin-bottom: 90px; }


  .ptop10 { padding-top: 5px; }
  .ptop20 { padding-top: 10px; }
  .ptop30 { padding-top: 15px; }
  .ptop60 { padding-top: 30px; }
  .ptop120 { padding-top: 60px; }
  .ptop180 { padding-top: 90px; }

  .pbtm10 { padding-bottom: 5px; }
  .pbtm20 { padding-bottom: 10px; }
  .pbtm30 { padding-bottom: 15px; }
  .pbtm60 { padding-bottom: 30px; }
  .pbtm120 { padding-bottom: 60px; }
  .pbtm180 { padding-bottom: 90px; }

  .pad30 { padding: 10px; }
  .pad60 { padding: 20px; }

}




/*  SMALL devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
  main p, main li { font-size: 14px; line-height: 160%; }
  h1 { font-size: 21px; }
  h2 { font-size: 19px; }
  h3 { font-size: 17px; }
  h4 { font-size: 15px; }
  .mtop10 { margin-top: 5px; }
  .mtop20 { margin-top: 10px; }
  .mtop30 { margin-top: 15px; }
  .mtop60 { margin-top: 30px; }
  .mtop120 { margin-top: 60px; }
  .mtop180 { margin-top: 90px; }

  .mbtm10 { margin-bottom: 5px; }
  .mbtm20 { margin-bottom: 10px; }
  .mbtm30 { margin-bottom: 15px; }
  .mbtm60 { margin-bottom: 30px; }
  .mbtm120 { margin-bottom: 60px; }
  .mbtm180 { margin-bottom: 90px; }

  .ptop10 { padding-top: 5px; }
  .ptop20 { padding-top: 10px; }
  .ptop30 { padding-top: 15px; }
  .ptop60 { padding-top: 30px; }
  .ptop120 { padding-top: 60px; }
  .ptop180 { padding-top: 90px; }

  .pbtm10 { padding-bottom: 5px; }
  .pbtm20 { padding-bottom: 10px; }
  .pbtm30 { padding-bottom: 15px; }
  .pbtm60 { padding-bottom: 30px; }
  .pbtm120 { padding-bottom: 60px; }
  .pbtm180 { padding-bottom: 90px; }

  .pad30 { padding: 10px; }
  .pad60 { padding: 20px; }


}




/*  MEDIUM devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
  main p, main li { font-size: 15px; line-height: 160%; }
  h1 { font-size: 23px; }
  h2 { font-size: 21px; }
  h3 { font-size: 18px; }
  h4 { font-size: 16px; }
  .mtop10 { margin-top: 5px; }
  .mtop20 { margin-top: 10px; }
  .mtop30 { margin-top: 15px; }
  .mtop60 { margin-top: 30px; }
  .mtop120 { margin-top: 60px; }
  .mtop180 { margin-top: 90px; }

  .mbtm10 { margin-bottom: 5px; }
  .mbtm20 { margin-bottom: 10px; }
  .mbtm30 { margin-bottom: 15px; }
  .mbtm60 { margin-bottom: 30px; }
  .mbtm120 { margin-bottom: 60px; }
  .mbtm180 { margin-bottom: 90px; }

  .ptop10 { padding-top: 5px; }
  .ptop20 { padding-top: 10px; }
  .ptop30 { padding-top: 15px; }
  .ptop60 { padding-top: 30px; }
  .ptop120 { padding-top: 60px; }
  .ptop180 { padding-top: 90px; }

  .pbtm10 { padding-bottom: 5px; }
  .pbtm20 { padding-bottom: 10px; }
  .pbtm30 { padding-bottom: 15px; }
  .pbtm60 { padding-bottom: 30px; }
  .pbtm120 { padding-bottom: 60px; }
  .pbtm180 { padding-bottom: 90px; }

  .pad30 { padding: 10px; }
  .pad60 { padding: 20px; }
}





/*  LARGE devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  main p, main li { font-size: 16px; line-height: 160%; }
  h1 { font-size: 35px; }
  h2 { font-size: 30px; }
  h3 { font-size: 20px; }
  h4 { font-size: 18px; }
  .mtop10 { margin-top: 7px; }
  .mtop20 { margin-top: 15px; }
  .mtop30 { margin-top: 25px; }
  .mtop60 { margin-top: 45px; }
  .mtop120 { margin-top: 90px; }
  .mtop180 { margin-top: 140px; }

  .mbtm10 { margin-bottom: 7px; }
  .mbtm20 { margin-bottom: 15px; }
  .mbtm30 { margin-bottom: 25px; }
  .mbtm60 { margin-bottom: 45px; }
  .mbtm120 { margin-bottom: 90px; }
  .mbtm180 { margin-bottom: 140px; }

  .ptop10 { padding-top: 7px; }
  .ptop20 { padding-top: 15px; }
  .ptop30 { padding-top: 25px; }
  .ptop60 { padding-top: 45px; }
  .ptop120 { padding-top: 90px; }
  .ptop180 { padding-top: 140px; }

  .pbtm10 { padding-bottom: 7px; }
  .pbtm20 { padding-bottom: 15px; }
  .pbtm30 { padding-bottom: 25px; }
  .pbtm60 { padding-bottom: 45px; }
  .pbtm120 { padding-bottom: 90px; }
  .pbtm180 { padding-bottom: 140px; }

  .pad30 { padding: 25px; }
  .pad60 { padding: 45px; }

}




/*  EXTRA large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}