CSS minimal helpers

helpers.css

.shadow-1 {box-shadow: 0 1px 3px hsla(0,0%,0%,.12), 0 1px 2px hsla(0,0%,0%,.24);}
.shadow-2 {box-shadow: 0 3px 6px hsla(0,0%,0%,.15), 0 2px 4px hsla(0,0%,0%,.12);}
.shadow-3 {box-shadow: 0 10px 20px hsla(0,0%,0%,.15), 0 3px 6px hsla(0,0%,0%,.10);}
.shadow-4 {box-shadow: 0 15px 25px hsla(0,0%,0%,.15), 0 5px 10px hsla(0,0%,0%,.05);}
.shadow-5 {box-shadow: 0 20px 40px hsla(0,0%,0%,.2);}

.hide {display:none}
.invisible {vibility: hidden;}
.visible {visibility: visible;}

@media (max-width: 575.98px) {
    .hide--onxs { display: none; }
    .visible--onxs { visibility: visible; }
    .invisible--onxs { visibility: hidden; }
}
@media (min-width: 575.98px) and (max-width: 767.98px) {
    .hide--onsm { display: none; }
    .visible--onsm { visibility: visible; }
    .invisible--onsm { visibility: hidden; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .hide--onmd { display: none; }
    .visible--onmd { visibility: visible; }
    .invisible--onmd { visibility: hidden; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .hide--onlg { display: none; }
    .visible--onlg { visibility: visible; }
    .invisible--onlg { visibility: hidden; }
}
@media (min-width: 1200px) {
    .hide--onxl { display: none; }
    .visible--onxl { visibility: visible; }
    .invisible--onxl { visibility: hidden; }
}

CDN:

https://gistcdn.githack.com/Jonarod/27e396f8b90498763e640ba9a6e27659/raw/c9a2cd4cc2ebdf8e1a17eed60de278639ca15454/helpers.css

@import url("https://gistcdn.githack.com/Jonarod/27e396f8b90498763e640ba9a6e27659/raw/c9a2cd4cc2ebdf8e1a17eed60de278639ca15454/helpers.css");