.iso-container{
   margin-top: 20px;
   margin-left: -30px;
   display: flex;
   justify-content: center;
   align-content: center;
   background: transparent;
}

.iso-container ul{
   display: flex;
   transform-style: preserve-3d;
   transform: rotate(0deg) skew(25deg);
}
.iso-container ul li {
   position: relative;
   list-style: none;
   width: 2.1rem;
   height: 2.1rem;
   margin: 0 0 20px 15px;
}
.iso-container ul li:before{
   content: '';
   position: absolute;
   bottom: -8px;
   left: 0;
   width: 100%;
   height: 8px;
   background: #f1e767; /* Old browsers */
   background: -moz-linear-gradient(-45deg, #f1e767 0%, #feb645 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(-45deg, #f1e767 0%,#feb645 100%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(135deg, #f1e767 0%,#feb645 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#feb645',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
   transform-origin: top;
   transform: skew(-45deg);
   
}
.iso-container ul li:after{
   content: '';
   position: absolute;
   top: 0;
   left: -8px;
   width: 8px;
   height: 100%;
   background: #f1e767; /* Old browsers */
   background: -moz-linear-gradient(-45deg, #f1e767 0%, #feb645 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(-45deg, #f1e767 0%,#feb645 100%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(135deg, #f1e767 0%,#feb645 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#feb645',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
   transform-origin: right;
   transform: skewY(-45deg);
}

.iso-container ul li span{
   position: absolute;
   top:0;
   left: 0;
   width: 100%;
   height: 100%;
   display: flex !important;
   justify-content: center;
   align-items: center;
   background: #feccb1; /* Old browsers */
   background: -moz-linear-gradient(-45deg, #feccb1 0%, #f17432 27%, #ea5507 57%, #fb955e 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(-45deg, #feccb1 0%,#f17432 27%,#ea5507 57%,#fb955e 100%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(135deg, #feccb1 0%,#f17432 27%,#ea5507 57%,#fb955e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feccb1', endColorstr='#fb955e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
   color: rgba(255,255,255,0.6);
   font-size: 28px !important;
   transition: 0.2s;
}

.iso-container ul li:hover span{
   z-index: 1000;
   transition: 0.5s;
   color: #fff;
   box-shadow: -1px 1px 1px rgba(255,255,255,0.25);
}

.iso-container ul li:hover span:nth-child(5){
   transform: translate(20px, -20px);
   opacity: 1;
}
.iso-container ul li:hover span:nth-child(4){
   transform: translate(15px, -15px);
   opacity: 0.8;
}
.iso-container ul li:hover span:nth-child(3){
   transform: translate(10px, -10px);
   opacity: 0.6;
}
.iso-container ul li:hover span:nth-child(2){
   transform: translate(5px, -5px);
   opacity: 0.4;
}
.iso-container ul li:hover span:nth-child(1){
   transform: translate(0px, 0px);
   opacity: 0.2;
}

.iso-container ul li:nth-child(1):hover span{
   background: #3b5999;
}
.iso-container ul li:nth-child(2):hover span{
   background: #55acee;
}
.iso-container ul li:nth-child(3):hover span{
   background: #25d366;
}
.iso-container ul li:nth-child(4):hover span{
   background: #0077b5;
}
.iso-container ul li:nth-child(5):hover span{
   background: #e4405f;
}