.energy-class{position:relative;width:100px;font-family:sans-serif}ul.products .energy-class{top:20px}.energy-class span{display:block;position:absolute;left:110%;background:#000;width:30px;height:30px}.energy-class span.a{top:0}.energy-class span.b{top:20px}.energy-class span.c{top:40px}.energy-class span.d{top:60px}.energy-class span.e{top:80px}.energy-class span.f{top:100px}.energy-class span.g{top:120px}.energy-class span:before{content:'';position:absolute;top:0;right:100%;width:0;height:0;border-top:15px solid transparent;border-right:15px solid #000;border-bottom:15px solid transparent}.energy-class span:after{position:absolute;top:0;left:0;width:30px;line-height:30px;text-align:center;color:#fff;font-size:30px;text-transform:uppercase}.energy-class span.a:after{content:' a '}.energy-class span.b:after{content:' b '}.energy-class span.c:after{content:' c '}.energy-class span.d:after{content:' d '}.energy-class span.e:after{content:' e '}.energy-class span.f:after{content:' f '}.energy-class span.g:after{content:' g '}.energy-class div{position:relative;height:20px;margin:2px 0}.energy-class div:before{content:'';position:absolute;top:0;left:100%;background:transparent;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent}.energy-class div:after{position:absolute;top:0;left:10px;height:20px;line-height:20px;color:#fff;text-transform:uppercase}.energy-class div.a{background:#FFED3B;width:50px}.energy-class div.a:before{border-left:8px solid #FFED3B}.energy-class div.a:after{content:' a '}.energy-class div.b{background:#5da436;width:50px}.energy-class div.b:before{border-left:8px solid #5da436}.energy-class div.b:after{content:' b '}.energy-class div.c{background:#a3cf2a;width:50px}.energy-class div.c:before{border-left:8px solid #a3cf2a}.energy-class div.c:after{content:' c '}.energy-class div.d{background:#D12D26;width:50px}.energy-class div.d:before{border-left:8px solid #D12D26}.energy-class div.d:after{content:' d '}.energy-class div.e{background:#f29020;width:50px}.energy-class div.e:before{border-left:8px solid #f29020}.energy-class div.e:after{content:' e '}.energy-class div.f{background:#eb422c;width:50px}.energy-class div.f:before{border-left:8px solid #eb422c}.energy-class div.f:after{content:' f '}.energy-class div.g{background:#ea2039;width:50px}.energy-class div.g:before{border-left:8px solid #ea2039}.energy-class div.g:after{content:' g '}.energy-class img{display:none;min-width:200px!important;z-index:99}.energy-class div:hover+img{display:inherit;position:absolute}.energy-class-loop{position:relative;bottom:10px}