@charset "utf-8";

/***** This is similar to bootstrap grid system. See the details below. ******/
@import "xsmall.css";
@import "small.css" screen and (min-width: 576px);
@import "medium.css" screen and (min-width: 768px);
@import "large.css" screen and (min-width: 992px);
@import "xlarge.css" screen and (min-width: 1200px);
@import "xxlarge.css" screen and (min-width: 1400px);

/* Custom css */


/* NOTES */
/*

Bootstrap grid system:
.col- (extra small devices - screen width less than 576px)
.col-sm- (small devices - screen width equal to or greater than 576px)
.col-md- (medium devices - screen width equal to or greater than 768px)
.col-lg- (large devices - screen width equal to or greater than 992px)
.col-xl- (xlarge devices - screen width equal to or greater than 1200px)
.col-xxl- (xxlarge devices - screen width equal to or greater than 1400px)

bootstrap media queries is one-direction only! The direction is from small to big. Imagine it is like water stream coming down from mountain towards bigger rivers and eventually ocean. You have to block or filter any part that you don't want it to flow down the bigger side.

Note:
- By default everything is display ie: d-block
- If you want bigger screen only, eg laptop & above only, you need to turn off everything first, then turn on only desktop "d-lg-*". (this will turn on everything above it)
- If you want smaller devices only, eg mobile & below only, you just have to turn off tablet "d-md-none" (this will turn off everything above it)


Question: what if I want only tablet but not others?
Answer: Turn off everything first, then turn on tablet, then turn off laptop.

Just remember:
default = s mobile
sm = mobile or note
md = tablet
lg = laptop
xl = desktop or HDTV

*/