/**
 * Hide all "show-<bootstrap-col-shortcut>" defualt.
 * Depending on the screen size, it is shown witha media query.
 * Note: the screensizes match the bootstrap breakpoints.
 */
 .show-xs  { display: none; }
 .show-sm  { display: none; }
 .show-md  { display: none; }
 .show-lg  { display: none; }
 .show-xl  { display: none; }
 
 /* Extra small screens */
 @media all and (max-width: 575px) {
   .show-xs { display: block; }
 }
 
 /* Small screens */
 @media all and (min-width: 576px) and (max-width: 767px) {
   .show-sm { display: block; }
 }
 
 /* Medium screens */
 @media all and (min-width: 768px) and (max-width: 992px) {
   .show-md { display: block; }
 }
 
 /* Large screens */
 @media all and (min-width: 992px) and (max-width: 1199px) {
   .show-lg { display: block; }
 }
 
 /* Extra large screens */
 @media all and (min-width: 1200px) {
   .show-xl { display: block; }
 }