/* Code By Webdevtrick ( https://webdevtrick.com ) */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
@import url(https://weloveiconfonts.com/api/?family=entypo);

@keyframes rotationUp {
    0% {
        transform: rotate(180deg);
    }

    25% {
        transform: rotate(270deg);
    }

   
}

[class^="entypo-"]:before {
    font-family: 'entypo', sans-serif;
}

#social-sidebar {
    right: 0;
    position: fixed;
    top: 53%;
    z-index: 2;
}

@media only screen and (max-width: 992px) {
    #social-sidebar {
        top: 60%;
    }
}

#social-sidebar li:first-child a {
    border-top-right-radius: 5px;
}

#social-sidebar li:last-child a {
    border-bottom-right-radius: 5px;
}

#social-sidebar a {
    color: #fff;
    text-decoration: none;
    display: block;
    height: 35px;
    width: 35px;
    font-size: 15px;
    line-height: 35px;
    position: relative;
    text-align: center;
    cursor: pointer;
}

    #social-sidebar a:hover span {
        right: 120%;
        opacity: 1;
        transition: 0.7s;
        animation: rotationUp 0.9s;
    }



    #social-sidebar a span {
        font: 12px "Open Sans", sans-serif;
        text-transform: uppercase;
        border-radius: 3px;
        line-height: 24px;
        right: -100%;
        margin-top: -16px;
        opacity: 0;
        padding: 4px 8px;
        position: absolute;
        transition: opacity .7s, right .7s;
        top: 50%;
        z-index: -1;
    }

        #social-sidebar a span:before {
            content: "";
            display: block;
            height: 8px;
            width: 8px;
            right: -4px;
            margin-top: -4px;
            position: absolute;
            top: 50%;
            transform: rotate(45deg);
        }

    #social-sidebar a[class*="twitter"]:hover,
    #social-sidebar a[class*="twitter"] span,
    #social-sidebar a[class*="twitter"] span:before {
        background: #00aced;
    }

    #social-sidebar a[class*="facebook"]:hover,
    #social-sidebar a[class*="facebook"] span,
    #social-sidebar a[class*="facebook"] span:before {
        background: #3B5998;
    }

    #social-sidebar a[class*="gplus"]:hover,
    #social-sidebar a[class*="gplus"] span,
    #social-sidebar a[class*="gplus"] span:before {
        background: #E34429;
    }

    #social-sidebar a[class*="dribbble"]:hover,
    #social-sidebar a[class*="dribbble"] span,
    #social-sidebar a[class*="dribbble"] span:before {
        background: #ea4c89;
    }

    #social-sidebar a[class*="dropbox"]:hover,
    #social-sidebar a[class*="dropbox"] span,
    #social-sidebar a[class*="dropbox"] span:before {
        background: #8DC5F2;
    }

    #social-sidebar a[class*="github"]:hover,
    #social-sidebar a[class*="github"] span,
    #social-sidebar a[class*="github"] span:before {
        background: #9C7A5B;
    }

    #social-sidebar a[class*="evernote"]:hover,
    #social-sidebar a[class*="evernote"] span,
    #social-sidebar a[class*="evernote"] span:before {
        background: #6BB130;
    }

    #social-sidebar a[class*="instagrem"]:hover,
    #social-sidebar a[class*="instagrem"] span,
    #social-sidebar a[class*="instagrem"] span:before {
        background: #833AB4;
    }

    #social-sidebar a[class*="phone"]:hover,
    #social-sidebar a[class*="phone"] span, #social-sidebar a[class*="phone"] span:before {
        /*background-image: linear-gradient(45deg, #54b941ba, #2460abcc);*/
        background: #a91c22;
    }

    #social-sidebar a[class*="whatsapp"]:hover,
    #social-sidebar a[class*="whatsapp"] span,
    #social-sidebar a[class*="whatsapp"] span:before {
        background: #128C7E;
    }

    #social-sidebar a[class*="envelope"]:hover,
    #social-sidebar a[class*="envelope"] span,
    #social-sidebar a[class*="envelope"] span:before {
        background: #E34429;
    }

.phone {
    background: #a91c22;
    border-top-left-radius: 5px;
}

.whatsapp {
    background: #128C7E;
}

.facebook {
    background: #3B5998;
}

.instagrem {
    background: #833AB4;
}

.twitter {
    background: #00aced;
    border-bottom-left-radius: 5px;
}

.gplus {
    background: #E34429;
}

.envelope {
    background: #E34429;
}

.phone a:hover {
    border-top-left-radius: 5px;
}

.twitter a:hover {
    border-bottom-left-radius: 5px;
}