css tools / getting obsolete more and more...

tools.css

/*--------------------------------------------------------------
# Tools
--------------------------------------------------------------*/
.animation {transition:all 300ms ease-in-out;}
.clickable { cursor:pointer; }
.fleft { float: left }
.fright { float: right }
.tleft { text-align: left }
.tright { text-align: right }
.centered {text-align: center}
.hide{display:none;}
.notop {padding-top: 0 !important;}
.nopadding {padding: 0 !important;}
.nomargin {margin: 0 !important}
.mbottom {margin-bottom: 20px;}
.mbottom10 {margin-bottom: 10px;}
.relative {position: relative}
.absolute {position: absolute}

/* colors */
.cwhite {color:#fff;}
.cwarmblack {color:#101010;}
.cdeepblack {color:#000;}
.cyellow {color: #FEDC2E}
.corange {color: #F0952D}
.cgreen {color: #8CB82A}
.cblue {color: #22A8E1}
.cpink {color: #E2468E}
.cpurple {color: #AB127B}
.cgrey {color: #D1D3D4}

/* backgrounds */
.bgyellow {background-color: #FEDC2E;}
.bgorange {background-color: #F0952D}
.bgorange-alpha {background-color: #F0952D; background-color: rgba(240, 149, 45,0.92);}
.bgorange-alphano {background-color: transparent; background-color: transparent;}
.bggreen {background-color: #8CB82A}
.bgblue {background-color: #22A8E1}
.bgpink {background-color: #E2468E}
.bgpurple {background-color: #AB127B}
.bgdeepblack {background-color: #000}
.bgwarmblack {background-color: #101010}
.bggrey {background-color: #D1D3D4}


[aria-expanded="false"] .close,
[aria-expanded="true"] .open {display: none}
.overlay {width: 100%; height: 100%; position: absolute; top: 0; left:0; z-index: 10;}
.verticalAlign {position: relative; top: 50%; transform: translateY(-50%);}
.sizeCover {background-size: cover;}
/* hover effect */
.hovereffect .image {overflow: hidden}
.hovereffect .image img {display: block !important;}
.hovereffect .image .overlay {top:100%; transition:top 200ms ease-in-out; }
.hovereffect .image:hover .overlay,
.hovereffect .image:focus .overlay,
.hovereffect .image .overlay.active {top:0;}
.hovereffect .image:hover .overlay.active,
.hovereffect .image:focus .overlay.active {top:100%;}

/* ratios */
.ratiobox{position: relative;}
.ratiobox:before{
	content: "";
	display: block;
	padding-top: 100%; 	/* initial ratio of 1:1*/
}
.ratiobox .inner {position: absolute;top:0; left: 0; width: 100%; height: 100%}
.ratio2_1:before{padding-top: 50%;}
.ratio1_2:before{padding-top: 200%;}
.ratio4_3:before{padding-top: 75%;}
.ratio16_9:before{padding-top: 56.25%;}