.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: 14px;
        left: 14px;
        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 em {
        color: #fff;
        position: absolute;
        top: 14px;
        left: 14px;
        transition: all 265ms ease-out;
    }

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

    .social-icons .linkedin-icon > a:hover em {
        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 em {
        background: #405C97;
        transform: scale(2.2);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition: all 265ms ease-in;
    }

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


    .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;*/
        background: #298557;
    }

    .social-icons .darkgreen-icon a:before {
        background: #016533;
    }

    .social-icons .lightgreen-icon a:before {
        background: #a3d75e;
    }

    .social-icons .pink-icon a:before {
        /*background: #ce8bcf;*/
        background: #8a2d8a;
    }

    .social-icons .purple-icon a:before {
        background: #6D578E;
        /*background: #9582b3;*/
    }

    .social-icons .orange-icon a:before {
        /*background: #ff8100;*/
        background: #B85C00;
    }

    .social-icons .red-icon a:before {
        background: #d75e5e;
    }

    .social-icons .indigo-icon a:before {
        background: #5e73d7;
    }

    .social-icons .lightblue-icon a:before {
        background: #55ADED;
    }

    .social-icons .iqcblue-icon a:before {
        background: #354F9A;
    }


    /* #region BORDERED */
    .social-icons .bordered-icon a:before {
        background: transparent;
    }

    .social-icons .bordered-icon.linkedin-icon a:before {
        border: 2px solid #0A66C2;
    }

    .social-icons .bordered-icon.facebook-icon a:before {
        border: 2px solid #405C97;
    }

    .social-icons .bordered-icon.twitter-icon a:before {
        border: 2px solid #55ADED;
    }

    .social-icons .bordered-icon.green-icon a:before {
        /*border: 2px solid #3ec380;*/
        border: 2px solid #298557;
    }

    .social-icons .bordered-icon.darkgreen-icon a:before {
        border: 2px solid #016533;
    }

    .social-icons .bordered-icon.lightgreen-icon a:before {
        border: 2px solid #567A1F;
        /*border: 2px solid #a3d75e;*/
    }

    .social-icons .bordered-icon.pink-icon a:before {
        /*border: 2px solid #ce8bcf;*/
        border: 2px solid #8a2d8a;
    }

    .social-icons .bordered-icon.purple-icon a:before {
        border: 2px solid #6D578E;
        /*border: 2px solid #9582b3;*/
    }

    .social-icons .bordered-icon.orange-icon a:before {
        /*border: 2px solid #ff8100;*/
        border: 2px solid #B85C00;
    }

    .social-icons .bordered-icon.red-icon a:before {
        border: 2px solid #d75e5e;
    }

    .social-icons .bordered-icon.indigo-icon a:before {
        border: 2px solid #5e73d7;
    }

    .social-icons .bordered-icon.lightblue-icon a:before {
        border: 2px solid #55ADED;
    }

    .social-icons .bordered-icon.iqcblue-icon a:before {
        border: 2px solid #354F9A;
    }

    .social-icons .bordered-icon.grey-icon a:before {
        border: 2px solid #354F9A;
    }


    .social-icons .bordered-icon.linkedin-icon i {
        color:#0A66C2 ;
    }

    .social-icons .bordered-icon.facebook-icon i {
        color: #405C97;
    }

    .social-icons .bordered-icon.twitter-icon i {
        color: #55ADED;
    }

    .social-icons .bordered-icon.green-icon i {
        /*color: #3ec380;*/
        color: #298557;
    }

    .social-icons .bordered-icon.darkgreen-icon i {
        color: #016533;
    }

    .social-icons .bordered-icon.lightgreen-icon i {
        color: #567A1F;
        /*color: #a3d75e;*/
    }

    .social-icons .bordered-icon.pink-icon i {
        /*color: #ad3cad;*/
        color: #8a2d8a;
    }

    .social-icons .bordered-icon.purple-icon i {
        color: #6D578E;
        /*color: #9582b3;*/
    }

    .social-icons .bordered-icon.orange-icon i {
        /*color: #ff8100;*/
        color: #B85C00;
    }

    .social-icons .bordered-icon.red-icon i {
        color: #d75e5e;
    }

    .social-icons .bordered-icon.indigo-icon i {
        color: #5e73d7;
    }

    .social-icons .bordered-icon.lightblue-icon i {
        color: #55ADED;
    }

    .social-icons .bordered-icon.iqcblue-icon i {
        color: #354F9A;
    }

    .social-icons .bordered-icon.grey-icon i {
        color: #354F9A;
    }

    /* #endregion BORDERED */


    .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;*/
        background: #298557;
        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;*/
        background: #567A1F;
        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;*/
        background: #8a2d8a;
        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;*/
        background: #6D578E;
        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;*/
        background: #B85C00;
        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: #d75e5e;
        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;
    }

    .social-icons .grey-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;
    }