.social-icons {
    padding: 0;
    list-style: none;
    margin: 1em;
    cursor: pointer;
}

    .social-icons li {
        display: inline-block;
        margin: 0.15em;
        position: relative;
        font-size: 1.2em;
    }

    .social-icons i {
        color: #fff;
        position: absolute;
        top: 15px;
        left: 15px;
        transition: all 265ms ease-out;
    }

    .social-icons.small-icons i {
        top: 10px;
        left: 10px;
    }

    .social-icons a {
        display: inline-block;
    }

        .social-icons a:before {
            transform: scale(1);
            content: " ";
            width: 45px;
            height: 45px;
            border-radius: 100%;
            display: block;
            background: black;
            transition: all 265ms ease-out;
        }

    .social-icons .linkedin-icon a:before {
        background: #0A66C2;
    }
    .social-icons .facebook-icon a:before {
        background: #405C97;
    }
    .social-icons .twitter-icon a:before {
        background: #55ADED;
    }
    .social-icons .green-icon a:before {
        background: #3ec380;
    }
    .social-icons .darkgreen-icon a:before {
        background: #016533;
    }
    .social-icons .lightgreen-icon a:before {
        background: #a3d75e;
    }
    .social-icons .pink-icon a:before {
        background: #ce8bcf;
    }
    .social-icons .purple-icon a:before {
        background: #9582b3;
    }
    .social-icons .orange-icon a:before {
        background: #ff8100;
    }
    .social-icons .red-icon a:before {
        background: #DE495D;
    }
    .social-icons .indigo-icon a:before {
        background: #5e73d7;
    }
    .social-icons .lightblue-icon a:before {
        background: #55ADED;
    }
    .social-icons .iqcblue-icon a:before {
        background: #354F9A;
    }




.social-icons.small-icons a:before {
    width: 35px;
    height: 35px;
}

    .social-icons a:hover:before {
        transform: scale(0);
        transition: all 265ms ease-in;
    }

    .social-icons .linkedin-icon > a:hover i {
        background: #0A66C2;
        transform: scale(2.2);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition: all 265ms ease-in;
    }

    .social-icons .facebook-icon > a:hover i {
        background: #405C97;
        transform: scale(2.2);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition: all 265ms ease-in;
    }

    .social-icons .twitter-icon > a:hover i {
        background: #55ADED;
        transform: scale(2.2);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition: all 265ms ease-in;
    }

    .social-icons .green-icon > a:hover i {
        background: #3ec380;
        transform: scale(2.2);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition: all 265ms ease-in;
    }

    .social-icons .darkgreen-icon > a:hover i {
        background: #016533;
        transform: scale(2.2);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition: all 265ms ease-in;
    }

    .social-icons .lightgreen-icon > a:hover i {
        background: #a3d75e;
        transform: scale(2.2);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition: all 265ms ease-in;
    }

    .social-icons .pink-icon > a:hover i {
        background: #ce8bcf;
        transform: scale(2.2);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition: all 265ms ease-in;
    }

    .social-icons .purple-icon > a:hover i {
        background: #9582b3;
        transform: scale(2.2);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition: all 265ms ease-in;
    }

    .social-icons .orange-icon > a:hover i {
        background: #ff8100;
        transform: scale(2.2);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition: all 265ms ease-in;
    }

    .social-icons .red-icon > a:hover i {
        background: #DE495D;
        transform: scale(2.2);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition: all 265ms ease-in;
    }

    .social-icons .indigo-icon > a:hover i {
        background: #5e73d7;
        transform: scale(2.2);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition: all 265ms ease-in;
    }

    .social-icons .lightblue-icon > a:hover i {
        transform: scale(2.2);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition: all 265ms ease-in;
        background: #55ADED;
    }

    .social-icons .iqcblue-icon > a:hover i {
        transform: scale(2.2);
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent;
        transition: all 265ms ease-in;
        background: #354F9A;
    }