.side-icons {
    position: fixed;
    width: 90px;
    top: 320px;
    z-index: 1000;
    background: #2aa644;
    padding: 10px;
}

.login .side-icons {
    top: 95px;
}

.home .side-icons {
    top: 364px;
    /*top was 340px with 5 socials*/
}


.side-icons img {
    vertical-align: auto;
}

.side-icons a:hover {
    text-decoration: none;
}

.side-icons li {
    list-style: none;
    -webkit-transition: all 0.4s ease 0s !important;
    -khtml-transition: all 0.4s ease 0s !important;
    -moz-transition: all 0.4s ease 0s !important;
    -ms-transition: all 0.4s ease 0s !important;
    -o-transition: all 0.4s ease 0s !important;
    transition: all 0.4s ease 0s !important;
}



    .side-icons li.chat {
        background: transparent url('../../Images/chatIcon.png');
        width: 68px;
        height: 70px;
        margin-bottom: 10px;
    }

    .side-icons li.chat:hover {
        background: transparent url('../../Images/chatHicon.png');
        cursor: pointer;
    }

    .side-icons li.contact {
        background: transparent url('../../Images/contactIcon.png');
        width: 68px;
        height: 70px;
    }

    .side-icons li.contact:hover {
        background: transparent url('../../Images/contactHicon.png');
    }

    .side-icons li.contact a {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .side-icons li span {
        position: relative;
        z-index: 9999;
    }

    .side-icons li span,
    .side-icons li img {
        -webkit-transition: all 0.7s ease-in-out;
        -moz-transition: all 0.7s ease-in-out;
        -o-transition: all 0.7s ease-in-out;
        transition: all 0.7s ease-in-out;
        display: inline-block;
    }

    .side-icons li a:hover .active {
        opacity: 1;
    }

    .side-icons li a:hover img:not(.active) {
        opacity: 0;
    }

    .side-icons li a:hover .text {
        opacity: 1;
    }

    .side-icons li a:hover .first {
        width: 75%;
    }

    .side-icons li a:hover .second {
        width: 40%;
    }

    .side-icons li a:hover .third {
        width: 65%;
    }

    .side-icons li a:hover .forth {
        width: 45%;
    }

    .side-icons li a:hover .fifth {
        width: 65%;
    }

    .side-icons li img.active {
        opacity: 0;
        z-index: 99999;
        position: absolute;
    }


    .side-icons li span.text {
        width: 0;
        opacity: 0;
        position: relative;
        color: #bcefa4;
        font-size: 18px;
        font-family: 'Open Sans Regular';
        display: inline-block;
        z-index: 9999;
    }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS here */
    span.text {
        top: -8px;
    }
}